/*
  Custom theme for the embedded Bookio widget (services.bookio.com). Its URL
  is loaded as a plain <link rel="stylesheet"> inside the widget's own page,
  so it's fetched and applied by the visitor's browser (not by Bookio's
  server) and isn't scoped by our site's CSS — everything here is standalone.

  Bookio already themes buttons/selections/calendar via the "widgetColor"
  set in its own admin (currently #2c5a6b, our petrol-light) — see the
  .btn-teal / .service-widget ... generated <style> block in the widget
  page's <head>. This file only needs to cover what that doesn't: background
  and font, to match app/globals.css.

  It's an Angular app (ng-version) — its components inject their own <style>
  tags into <head> at runtime, after ours, so they win the cascade even
  though our <link> is placed last in the initial HTML. !important is the
  only reliable way to override that from an external stylesheet.
*/

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  --bookio-color-surface: #e4e4e4;
  --bookio-font-sans: "Inter", Arial, Helvetica, sans-serif;
  --bookio-color-confirm: #1a9c56;
  --bookio-color-confirm-hover: #157a44;
}

html,
body,
.service-widget,
widget-form,
.container {
  background: var(--bookio-color-surface) !important;
}

/*
  Bookio's own components re-declare font-family on individual elements
  rather than relying on inheritance from body, so a body-level override
  alone never reaches them — this has to hit every descendant directly.
  Icon glyphs (Font Awesome, Material Symbols) render via their own
  font-family, so they're excluded to avoid turning icons into tofu.
*/
.service-widget,
.service-widget *:not(.fa):not([class*="fa-"]):not(.material-symbols-outlined) {
  font-family: var(--bookio-font-sans) !important;
}

.ui-calendar {
  background: #ffffff !important;
}

.service-widget .date-time .choose-date-time .widget-time .times .hours {
  background: var(--bookio-color-surface) !important;
}

footer {
  background: var(--bookio-color-surface) !important;
}

/*
  !important on the base rule beats Bookio's own (non-important)
  :hover rule regardless of its higher pseudo-class specificity, which is
  why overriding the base color alone wiped out the hover state — so hover
  has to be re-declared here too, not left to Bookio's generated style.
*/
footer .content .buttons .button#create-res {
  background-color: var(--bookio-color-confirm) !important;
  border-color: var(--bookio-color-confirm) !important;
  color: #ffffff !important;
}

footer .content .buttons .button#create-res:hover {
  background-color: var(--bookio-color-confirm-hover) !important;
  border-color: var(--bookio-color-confirm-hover) !important;
  color: #ffffff !important;
}