/* Booking for a salon with its own website wears that website.
   app.js adds `booking-site booking-site-<design>` to the booking page (and to
   its confirmation) for a salon whose website is Beliz or Kosa. Every rule
   here is a look, written against a small set of tokens that each website
   fills from its own sheet (custom-salon-sites.css). Layout, steps and
   behaviour are untouched. Loaded after booking-elegance.css.

   Beliz is booked inside one of its own scenes: the salon photographed
   behind a dark shade, white Roboto, hairlines, and the site's glass panels.
   Kosa keeps its paper page, ink and gold. */

/* ---- Tokens ---------------------------------------------------------------- */
html body.booking-site-beliz {
  /* Beliz's home page: ghost white, charcoal ink, thin Roboto. */
  --site-fg: #303030;
  --site-mute: #6b6b72;
  --site-faint: #a3a3ab;
  --site-line: rgba(48, 48, 48, 0.13);
  --site-page: #f8f8ff;
  --site-accent: #303030;
  --site-on-accent: #f8f8ff;
  --site-cta: #303030;
  --site-on-cta: #f8f8ff;
  --site-cta-sweep: #4b4b50;
  --site-surface: rgba(255, 255, 255, 0.72);
  --site-surface-edge: rgba(48, 48, 48, 0.1);
  --site-surface-shadow: 0 30px 70px -48px rgba(48, 40, 30, 0.35);
  --site-surface-blur: blur(18px) saturate(1.2);
  --site-card: rgba(255, 255, 255, 0.62);
  --site-card-hover: #ffffff;
  --site-chosen: #ffffff;
  --site-field: rgba(48, 48, 48, 0.035);
  --site-bar: transparent;
  --site-radius: 22px;
  --site-card-radius: 16px;
  --site-body: "Roboto", "Figtree", system-ui, sans-serif;
  --site-body-weight: 400;
  --site-display: "Roboto", "Figtree", system-ui, sans-serif;
  --site-display-weight: 300;
  --site-display-case: none;
  --site-display-tracking: -0.04em;
  --site-button-font: 500 13px/1 "Roboto", sans-serif;
  --site-button-tracking: 0.14em;
  --site-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --site-photo: url("/assets/custom-sites/beliz/interior-lounge.webp?v=2");
}
html body.booking-site-kosa {
  --site-fg: #131313;
  --site-mute: color-mix(in srgb, #131313 62%, #f1f1ef);
  --site-faint: color-mix(in srgb, #131313 32%, transparent);
  --site-line: rgba(19, 19, 19, 0.14);
  --site-page: #f1f1ef;
  --site-accent: #131313;
  --site-on-accent: #ffffff;
  --site-cta: #c9a45c;
  --site-on-cta: #131313;
  --site-cta-sweep: #d6b577;
  --site-surface: color-mix(in srgb, #131313 5%, #f1f1ef);
  --site-surface-edge: rgba(19, 19, 19, 0.14);
  --site-surface-shadow: none;
  --site-surface-blur: none;
  --site-card: transparent;
  --site-card-hover: color-mix(in srgb, #131313 5%, #f1f1ef);
  --site-chosen: color-mix(in srgb, #131313 6%, #f1f1ef);
  --site-field: #f1f1ef;
  --site-bar: #f1f1ef;
  --site-radius: 20px;
  --site-card-radius: 16px;
  --site-body: "Figtree", system-ui, sans-serif;
  --site-body-weight: 400;
  --site-display: "Oswald", "Figtree", "Arial Narrow", sans-serif;
  --site-display-weight: 500;
  --site-display-case: uppercase;
  --site-display-tracking: 0.01em;
  --site-button-font: 500 14px/1 "Oswald", "Figtree", sans-serif;
  --site-button-tracking: 0.1em;
  --site-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --site-photo: none;
}
html body.booking-site {
  --bk-ease: var(--site-ease);
  --bk-ink: var(--site-fg);
  --bk-fill-soft: var(--site-card);
  --bk-seg: var(--site-fg);
  background: var(--site-page);
  color: var(--site-fg);
  font-family: var(--site-body);
  font-weight: var(--site-body-weight);
}
html:has(> body.booking-site-beliz) { background: #f8f8ff; }
/* The orbits sit behind the body, so the body itself stays clear. */
html body.booking-site-beliz { background: transparent; }
html:has(> body.booking-site-kosa) { background: #f1f1ef; }

/* ---- Beliz: its home page around the booking ----------------------------
   The two thin orbits of the Beliz home page turn slowly behind the page, and
   the salon itself is seen, perfectly still, through an arched window at the
   top of the summary, the way the home page shows it through its letters. */
html body.booking-site::before,
html body.booking-site::after { content: none; }
html body.booking-site-beliz::before,
html body.booking-site-beliz::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: auto;
  left: 34%;
  top: 56%;
  border: 1px solid rgba(48, 48, 48, 0.11);
  border-radius: 50%;
  background: none;
  pointer-events: none;
  translate: -50% -50%;
}
html body.booking-site-beliz::before {
  width: min(118vw, 1500px);
  aspect-ratio: 2.3;
  animation: site-orbit 90s linear infinite;
}
html body.booking-site-beliz::after {
  width: min(92vw, 1180px);
  aspect-ratio: 1.45;
  animation: site-orbit 130s linear infinite reverse;
}
@keyframes site-orbit { to { rotate: 360deg; } }
html body.booking-site-beliz .booking-summary .booking-summary-salon img {
  aspect-ratio: 5 / 4;
  height: auto;
  /* The older sheets pin a plain rounded corner with !important. */
  border-radius: 50% 50% 14px 14px / 40% 40% 14px 14px !important;
  object-fit: cover;
  object-position: 50% 45%;
  /* The window holds still: no pan, and nothing restarts when the page redraws. */
  animation: none;
  transform: none;
}
html body.booking-site-beliz .booking-summary-salon { display: grid; gap: 14px; text-align: center; justify-items: center; }
html body.booking-site-beliz .booking-summary-salon > div { justify-items: center; }
html body.booking-site-beliz .booking-summary-salon strong { font-size: 24px; }
html body.booking-site-beliz ::placeholder { color: var(--site-faint); }

/* ---- One ink for every line of text -----------------------------------------
   The older booking sheets paint text in several greys and violets, some with
   !important. In Beliz all of it takes the site's ink: headings and values
   charcoal, supporting text its grey. Text on a filled piece (a chosen tab,
   day or time, the main button) keeps that piece's own ink. */
html body.booking-site-beliz :is(.booking-layout, .booking-shellbar) :is(h1, h2, h3, h4, strong, b, dd, time, label, legend, th, td, li, a, button, [class*="price"], [class*="total"]):not(:is(.booking-guest-tab.active, .booking-category-chip.is-active, .booking-professional-time-grid button.active, .booking-month-day.active, .solid-button, .booking-time-order, .booking-summary-party-date, .booking-photo-dropzone-icon, .booking-guest-tab-status, .booking-date-unavailable-mark, .choice-card.active .booking-service-select-marker) *):not(:is(.booking-guest-tab.active, .booking-category-chip.is-active, .booking-professional-time-grid button.active, .booking-month-day.active, .solid-button, .booking-time-order, .booking-summary-party-date, .booking-photo-dropzone-icon, .booking-guest-tab-status, .booking-date-unavailable-mark)) {
  color: var(--site-fg) !important;
}
html body.booking-site-beliz :is(.booking-layout, .booking-shellbar) :is(p, small, span, em, dt, .eyebrow, [class*="subtotal"], [class*="-copy"] > span):not(:is(.booking-guest-tab.active, .booking-category-chip.is-active, .booking-professional-time-grid button.active, .booking-month-day.active, .solid-button, .booking-time-order, .booking-summary-party-date, .booking-photo-dropzone-icon, .booking-guest-tab-status, .booking-date-unavailable-mark, .choice-card.active .booking-service-select-marker, .booking-guest-services .booking-service-copy > strong) *):not(strong, b, time, dd, .booking-service-select-marker, .booking-time-order, .booking-summary-party-date, .booking-photo-dropzone-icon, .booking-guest-tab-status, .booking-date-unavailable-mark) {
  color: var(--site-mute) !important;
}
/* Values on the right of a line read as strongly as their labels. */
html body.booking-site-beliz .booking-layout :is(.summary-line, .booking-summary-price, .booking-summary-party-row, .booking-summary-service) > :last-child { color: var(--site-fg) !important; }
html body.booking-site-beliz .booking-layout :is(p, small, span, dt, dd, li, td) { font-weight: 400; }
html body.booking-site-beliz .booking-layout small { font-size: max(12.5px, 1em * 0.8); }

/* ---- Type ------------------------------------------------------------------ */
html body.booking-site .booking-title-bar h1,
html body.booking-site .receipt-card h2,
html body.booking-site .confirmation-page h1 {
  color: var(--site-fg);
  font-family: var(--site-display);
  font-weight: var(--site-display-weight);
  letter-spacing: var(--site-display-tracking);
  text-transform: var(--site-display-case);
}
html body.booking-site .booking-title-bar h1 { font-size: clamp(38px, 4.4vw, 62px); line-height: 1.02; }
html body.booking-site .booking-title-bar :is(.eyebrow, p),
html body.booking-site .confirmation-page .eyebrow,
html body.booking-site .booking-service-group > h3 {
  color: var(--site-mute);
  font-family: var(--site-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
/* Every piece of text in booking takes the page's ink; the quieter ones mute. */
html body.booking-site .booking-layout :is(h2, h3, h4, strong, b, span, p, label, time, dt, dd, em, small, legend) { font-family: inherit; }
html body.booking-site .booking-layout :is(h2, h3, h4, strong, b, label, legend, dd, time),
html body.booking-site .confirmation-page :is(h2, h3, strong, b, dd, time) { color: var(--site-fg); }
html body.booking-site .booking-layout :is(p, small, em, dt, .booking-service-duration, .booking-service-description),
html body.booking-site .confirmation-page :is(p, small, dt) { color: var(--site-mute); }
html body.booking-site .booking-layout :is(strong, b) { font-weight: 500; }
html body.booking-site .booking-service-copy > strong,
html body.booking-site .booking-professional-info strong { font-size: 17px; font-weight: 400; }
html body.booking-site :is(.booking-service-consultation, .booking-service-restriction, .booking-professional-next) { color: var(--site-fg); font-weight: 400; opacity: 0.9; }

/* The older sheets name these exactly; the site's ink wins over them. */
html body.booking-site .booking-guest-services .booking-service-copy > strong,
html body.booking-site .booking-guest-services .booking-service-foot b,
html body.booking-site .booking-summary .booking-summary-salon strong { color: var(--site-fg); }
html body.booking-site .booking-guest-services :is(.booking-service-duration, .booking-service-description),
html body.booking-site .booking-summary .booking-summary-salon :is(span, small) { color: var(--site-mute); }

/* booking.css pins these greys with !important; the scene's ink has to match it. */
html body.booking-site .booking-summary-salon small,
html body.booking-site .booking-summary-selected-stylist :is(span, small),
html body.booking-site .booking-month-weekdays span { color: var(--site-mute) !important; }

/* ---- Frame ------------------------------------------------------------------ */
html body.booking-site .booking-shellbar { background: var(--site-bar); color: var(--site-fg); }
html body.booking-site .booking-shellbar-context :is(span, strong) { color: var(--site-fg); }
html body.booking-site .booking-shellbar-context span { color: var(--site-mute); letter-spacing: 0.18em; text-transform: uppercase; }
html body.booking-site :is(.booking-shellbar-button, .booking-hold-countdown:not(.is-empty)) {
  border: 1px solid var(--site-line);
  background: var(--site-card);
  color: var(--site-fg);
  box-shadow: none;
  -webkit-backdrop-filter: var(--site-surface-blur);
  backdrop-filter: var(--site-surface-blur);
  transition: background-color 0.45s var(--site-ease), border-color 0.45s var(--site-ease), color 0.45s var(--site-ease);
}
html body.booking-site .booking-shellbar-button:hover { border-color: var(--site-fg); background: var(--site-card-hover); }
html body.booking-site .booking-hold-countdown :is(b, strong, span) { color: var(--site-fg); }

/* Panels: the website's glass (Beliz) or its soft card (Kosa). */
html body.booking-site :is(
  .booking-summary.panel,
  .booking-month-calendar,
  .booking-service-time-card,
  .booking-party-plan,
  .booking-photo-group,
  .booking-customer-note,
  .receipt-card,
  .payment-card,
  .booking-date-unavailable,
  .booking-guest-professional-card,
  .confirmation-page .confirmation-hero,
  .confirmation-page .confirmation-details,
  .confirmation-page .confirmation-prep
) {
  border: 1px solid var(--site-surface-edge);
  border-radius: var(--site-radius);
  background: var(--site-surface);
  color: var(--site-fg);
  box-shadow: var(--site-surface-shadow);
  -webkit-backdrop-filter: var(--site-surface-blur);
  backdrop-filter: var(--site-surface-blur);
}
/* Panels inside panels stay plain. */
html body.booking-site :is(.booking-service-time-card, .booking-guest-professional-card) :is(.booking-date-unavailable, .booking-party-plan) {
  border-color: var(--site-line);
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html body.booking-site .booking-summary-salon img { border-radius: calc(var(--site-radius) - 10px); object-fit: cover; }
html body.booking-site .booking-summary-salon strong { font-family: var(--site-display); font-weight: var(--site-display-weight); font-size: 22px; letter-spacing: -0.02em; text-transform: var(--site-display-case); }
html body.booking-site :is(.booking-summary-body, .booking-summary-price, .booking-summary-action, .booking-summary-salon),
html body.booking-site .booking-summary :is(.summary-line, .booking-summary-service, .booking-summary-party-schedule, .booking-summary-guest) {
  border-color: var(--site-line);
  background: transparent;
  box-shadow: none;
}
html body.booking-site .booking-summary-guest > header > span,
html body.booking-site .booking-summary-guest :is(.booking-summary-guest-number, .booking-guest-number) {
  border: 1px solid var(--site-line);
  background: transparent;
  color: var(--site-fg);
}
html body.booking-site .booking-controls {
  border-color: var(--site-line);
  background: var(--site-bar);
  box-shadow: none;
  -webkit-backdrop-filter: var(--site-surface-blur);
  backdrop-filter: var(--site-surface-blur);
}
html body.booking-site-beliz .booking-controls { background: rgba(24, 20, 17, 0.62); }

/* The person row and the categories sit on the page, not in bars. */
html body.booking-site .booking-guest-tabs-shell,
html body.booking-site .calendar-picker > .booking-guest-tabs-shell,
html body.booking-site .booking-category-rail {
  position: relative;
  top: auto;
  border-bottom: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html body.booking-site .booking-guest-tabs-shell::before { content: none; }

/* ---- Progress: uppercase steps with a hairline under the ones done -------- */
html body.booking-site .booking-main .stepper button {
  color: var(--site-faint);
  font-family: var(--site-body);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
html body.booking-site .booking-main .stepper button + button::before { color: var(--site-line); }
html body.booking-site .booking-main .stepper :is(button.done, button.active) { color: var(--site-fg); }
html body.booking-site .booking-main .stepper button strong::after,
html body.booking-site .booking-main .stepper button::after { height: 1px; background: var(--site-fg); }
@media (max-width: 768px) {
  html body.booking-site .booking-main .stepper button { border-bottom-color: var(--site-line); letter-spacing: 0.02em; }
  html body.booking-site .booking-main .stepper button strong { font-size: 10px; }
  html body.booking-site .booking-main .stepper :is(button.done, button.active) { border-bottom-color: var(--site-line); }
}

/* ---- Pills: people and categories (quiet; filled when chosen) ------------- */
html body.booking-site :is(.booking-guest-tab, .booking-category-chip, .booking-guest-tabs-add, .booking-category-arrow) {
  border: 1px solid var(--site-line);
  background: transparent;
  color: var(--site-fg);
  font-family: var(--site-body);
  font-weight: 400;
  box-shadow: none;
  transition: background-color 0.5s var(--site-ease), color 0.5s var(--site-ease), border-color 0.5s var(--site-ease);
}
html body.booking-site :is(.booking-guest-tab, .booking-category-chip, .booking-guest-tabs-add):hover { border-color: var(--site-fg); transform: none; }
html body.booking-site :is(.booking-guest-tab.active, .booking-category-chip.is-active) {
  border-color: var(--site-accent);
  background: var(--site-accent);
  color: var(--site-on-accent);
  box-shadow: none;
}
html body.booking-site .booking-guest-tab.active :is(span, input) { color: var(--site-on-accent); }
html body.booking-site .booking-guest-tab-status { border-color: var(--site-page); background: var(--site-fg); color: var(--site-on-accent); }
html body.booking-site .booking-guest-tab-remove { border-color: var(--site-line); background: var(--site-page); color: var(--site-fg); }
html body.booking-site .booking-category-arrow { background: var(--site-page); }

/* A guest's name typed straight into their pill. */
html body.booking-site .booking-guest-tabs .booking-guest-tab.is-naming .booking-guest-tab-name {
  border: 0;
  background: transparent;
  color: var(--site-on-accent);
  font: inherit;
  box-shadow: none;
}
html body.booking-site .booking-guest-tabs .booking-guest-tab.is-naming .booking-guest-tab-name::placeholder { color: var(--site-on-accent); opacity: 0.55; }
html body.booking-site .booking-guest-tab-item .booking-guest-name-error { color: var(--site-fg); }

/* ---- Choices: services and stylists ---------------------------------------- */
html body.booking-site :is(.booking-guest-services .choice-card, .booking-professional-option-shell) {
  border: 1px solid var(--site-line);
  border-radius: var(--site-card-radius);
  background: var(--site-card);
  color: var(--site-fg);
  box-shadow: none;
  transition: background-color 0.5s var(--site-ease), border-color 0.5s var(--site-ease), transform 0.5s var(--site-ease);
}
html body.booking-site .booking-guest-services .choice-card::before,
html body.booking-site .booking-professional-option-shell::before { content: none; }
html body.booking-site .booking-guest-services .choice-card.active,
html body.booking-site .booking-professional-option-shell:has(> .booking-professional-option.active) {
  border-color: var(--site-fg);
  background: var(--site-chosen);
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  html body.booking-site .booking-guest-services .choice-card:not(.active):not(:disabled):hover,
  html body.booking-site .booking-professional-option-shell:not(:has(> .booking-professional-option.active)):hover {
    border-color: color-mix(in srgb, var(--site-fg) 50%, transparent);
    background: var(--site-card-hover);
    box-shadow: none;
    transform: translateY(-2px);
  }
}
html body.booking-site .booking-guest-services .booking-service-select-marker {
  border: 1px solid var(--site-line);
  background: transparent;
  color: var(--site-fg);
}
html body.booking-site .booking-guest-services .booking-service-select-marker::before { background: var(--site-accent); }
html body.booking-site .booking-guest-services .choice-card.active .booking-service-select-marker {
  border-color: var(--site-accent);
  color: var(--site-on-accent);
  box-shadow: none;
}
html body.booking-site .booking-guest-services .choice-card.active .booking-service-select-marker::after { border-color: var(--site-accent); }
@media (hover: hover) and (pointer: fine) {
  html body.booking-site .booking-guest-services .choice-card:not(.active):not(:disabled):hover .booking-service-select-marker { border-color: var(--site-fg); background: transparent; }
}
html body.booking-site .booking-professional-option { background: transparent; color: var(--site-fg); }
html body.booking-site .booking-professional-option :is(.booking-professional-price, .booking-professional-info > span) { color: var(--site-fg); }
html body.booking-site .booking-professional-profile-button {
  border: 1px solid var(--site-line);
  background: transparent;
  color: var(--site-fg);
}
html body.booking-site .booking-professional-profile-button:hover { border-color: var(--site-fg); background: var(--site-card-hover); }

/* ---- Date and time ---------------------------------------------------------- */
html body.booking-site .booking-month-calendar :is(button:not(.booking-month-day), .booking-month-nav button) { border-color: var(--site-line); background: transparent; color: var(--site-fg); box-shadow: none; }
html body.booking-site .booking-month-day { color: var(--site-fg); }
html body.booking-site .booking-month-day span { color: var(--site-fg); }
html body.booking-site .booking-month-day.is-unavailable:not(.active) span,
html body.booking-site .booking-month-day:disabled span { color: var(--site-faint); }
html body.booking-site .booking-month-day:not(.active):not(:disabled):hover { background: var(--site-card-hover); }
html body.booking-site .booking-month-day.active {
  border-color: transparent;
  background: var(--site-accent);
  box-shadow: none;
  outline: 0;
}
html body.booking-site .booking-month-day.active span { background: transparent; color: var(--site-on-accent); }
html body.booking-site .booking-month-day.is-today:not(.active) { border-color: transparent; box-shadow: inset 0 0 0 1px var(--site-faint); }
/* A dot only under a day with at least one open time. */
html body.booking-site .booking-month-day :is(i, .booking-month-day-dot) { background: transparent; }
html body.booking-site .booking-month-day.is-available:not(.active) :is(i, .booking-month-day-dot) { background: var(--site-fg); }
html body.booking-site .booking-professional-time-grid button {
  border: 1px solid var(--site-line);
  background: transparent;
  color: var(--site-fg);
  font-weight: 400;
}
html body.booking-site .booking-date-time-slots-column .booking-time-grid button:not(.active),
html body.booking-site .booking-date-time-slots-column .booking-time-grid button:not(.active):hover { color: var(--site-fg); }
html body.booking-site .booking-professional-time-grid button:not(.active):hover { border-color: var(--site-fg); }
html body.booking-site .booking-professional-time-grid button::before { background: var(--site-accent); }
html body.booking-site .booking-professional-time-grid button.active {
  border-color: var(--site-accent);
  background: transparent;
  color: var(--site-on-accent);
  box-shadow: none;
}
html body.booking-site .booking-professional-time-grid button.active :is(strong, span) { background: transparent; color: var(--site-on-accent); }
html body.booking-site :is(.booking-time-order, .booking-summary-party-date, .booking-date-unavailable-mark),
html body.booking-site .booking-date-time-slots-column .booking-time-order {
  background: var(--site-accent);
  color: var(--site-on-accent);
  box-shadow: none;
}
html body.booking-site :is(.booking-summary-party-dot, .booking-summary-party-track > i, .booking-party-plan-block),
html body.booking-site :is(.booking-summary-party-row, .booking-party-plan-row):nth-child(2n) :is(.booking-summary-party-dot, .booking-summary-party-track > i, .booking-party-plan-block) {
  background: var(--site-fg);
}
html body.booking-site :is(.booking-party-plan-track, .booking-summary-party-track) {
  border: 1px solid var(--site-line);
  background: var(--site-field);
}
html body.booking-site .booking-party-plan-row:not(.is-scheduled) .booking-party-plan-track { border-style: dashed; background: transparent; }
html body.booking-site :is(.booking-party-plan-person > i, .booking-party-plan-row:nth-child(2n) .booking-party-plan-person > i) {
  border: 1px solid var(--site-line);
  background: transparent;
  color: var(--site-fg);
}
html body.booking-site :is(.booking-party-plan-row, .booking-party-plan-axis) { border-color: var(--site-line); color: var(--site-mute); }
html body.booking-site .booking-calendar-loading-spinner { border-color: var(--site-line); border-top-color: var(--site-fg); }
html body.booking-site .booking-calendar-loading-overlay { background: color-mix(in srgb, var(--site-page) 40%, transparent); }

/* ---- Photos and notes ------------------------------------------------------ */
html body.booking-site .booking-photo-group .booking-photo-group-icon,
html body.booking-site .booking-photo-group.is-desired .booking-photo-group-icon {
  border: 1px solid var(--site-line);
  background: transparent;
  color: var(--site-fg);
  box-shadow: none;
}
html body.booking-site .booking-photo-count { border: 1px solid var(--site-line); background: transparent; color: var(--site-mute); }
html body.booking-site .booking-photo-dropzone {
  border: 1px dashed color-mix(in srgb, var(--site-fg) 30%, transparent);
  background: var(--site-field);
}
html body.booking-site .booking-photo-dropzone-icon { background: var(--site-accent); color: var(--site-on-accent); box-shadow: none; }
html body.booking-site .booking-photo-dropzone strong { color: var(--site-fg); font-weight: 400; }
@media (hover: hover) and (pointer: fine) {
  html body.booking-site .booking-photo-dropzone:not(.is-full):is(:hover, :focus-within) { border-color: var(--site-fg); background: var(--site-card-hover); box-shadow: none; }
}
html body.booking-site :is(.booking-customer-note textarea, .booking-layout input[type="text"], .booking-layout input:not([type]), .booking-layout textarea) {
  border: 1px solid var(--site-line);
  background: var(--site-field);
  color: var(--site-fg);
  font-family: var(--site-body);
  font-weight: 300;
  box-shadow: none;
}
html body.booking-site :is(.booking-customer-note textarea, .booking-layout textarea):focus {
  border-color: var(--site-fg);
  background: var(--site-field);
  box-shadow: none;
}

/* ---- Review ------------------------------------------------------------------ */
html body.booking-site .booking-review-deposit {
  border: 1px solid var(--site-line);
  background: var(--site-field);
  box-shadow: none;
}
html body.booking-site .booking-review-deposit-copy > span { color: var(--site-mute); letter-spacing: 0.18em; }
html body.booking-site .receipt-card > .summary-line { border-color: var(--site-line); }

/* ---- Buttons: the website's pill, filling from the left on hover ---------- */
html body.booking-site :is(.booking-summary-action, .booking-controls) .solid-button.customer,
html body.booking-site .booking-layout .solid-button.customer,
html body.booking-site .confirmation-page .solid-button.customer {
  position: relative;
  z-index: 0;
  overflow: hidden;
  min-height: 54px;
  border: 1px solid var(--site-cta);
  border-radius: 999px;
  background: var(--site-cta);
  color: var(--site-on-cta);
  font: var(--site-button-font);
  letter-spacing: var(--site-button-tracking);
  text-transform: uppercase;
  text-shadow: none;
  box-shadow: none;
  animation: none;
  transition: color 0.45s var(--site-ease), opacity 0.4s ease, transform 0.25s var(--site-ease);
}
html body.booking-site :is(.booking-summary-action, .booking-controls, .booking-layout, .confirmation-page) .solid-button.customer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--site-cta-sweep);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.55s var(--site-ease);
}
html body.booking-site :is(.booking-summary-action, .booking-controls, .booking-layout, .confirmation-page) .solid-button.customer:not(.danger):not(:disabled):hover {
  background: var(--site-cta);
  color: var(--site-on-cta);
  box-shadow: none;
  transform: none;
}
html body.booking-site :is(.booking-summary-action, .booking-controls, .booking-layout, .confirmation-page) .solid-button.customer:not(:disabled):hover::before { transform: scaleX(1); transform-origin: left; }
html body.booking-site :is(.booking-summary-action, .booking-controls) .solid-button.customer:active { transform: scale(0.98); }
html body.booking-site :is(.booking-summary-action, .booking-controls, .booking-layout) .solid-button.customer:disabled {
  border-color: var(--site-line);
  background: transparent;
  color: var(--site-faint);
}
html body.booking-site :is(.booking-controls, .booking-layout, .confirmation-page) .outline-button.customer {
  min-height: 48px;
  border: 1px solid var(--site-fg);
  border-radius: 999px;
  background: transparent;
  color: var(--site-fg);
  font: var(--site-button-font);
  letter-spacing: var(--site-button-tracking);
  text-transform: uppercase;
  box-shadow: none;
  transition: background-color 0.45s var(--site-ease), color 0.45s var(--site-ease);
}
html body.booking-site :is(.booking-controls, .booking-layout, .confirmation-page) .outline-button.customer:not(:disabled):hover { background: var(--site-fg); color: var(--site-on-accent); }
html body.booking-site :is(.booking-controls, .booking-layout) .outline-button.customer:disabled { border-color: var(--site-line); color: var(--site-faint); }

/* ---- Loading, entry and the Book ring -------------------------------------- */
html body.booking-site .booking-loading-layout { background: transparent; color: var(--site-fg); }
html body.booking-site .booking-loading-layout :is(h1, p) { color: var(--site-fg); }
html body.booking-site .booking-loading-layout .booking-loading-emblem::before {
  background: conic-gradient(from 0deg, transparent 0deg, var(--site-fg) 300deg, transparent 360deg);
}
html body.booking-site .booking-loading-layout .booking-loading-progress span { background: var(--site-fg); animation: none; }
html body.booking-site .booking-loading-layout .eyebrow { color: var(--site-mute); }

/* Entering Beliz booking, the curtain is Beliz's own ghost white. */
.bk-entry-curtain.is-beliz { background: #f8f8ff !important; }

.bk-handoff.is-site .bk-handoff-veil {
  background: color-mix(in srgb, var(--site-page) 72%, transparent);
  -webkit-backdrop-filter: blur(26px) saturate(1.2);
  backdrop-filter: blur(26px) saturate(1.2);
}
.bk-handoff.is-site .bk-handoff-pill { background: var(--site-cta); box-shadow: none; }
.bk-handoff.is-site .bk-handoff-label {
  color: var(--site-on-cta);
  font: var(--site-button-font);
  letter-spacing: var(--site-button-tracking);
  text-transform: uppercase;
}
.bk-handoff.is-site .bk-handoff-ring .bk-handoff-track { stroke: var(--site-line); fill: var(--site-page); }
.bk-handoff.is-site :is(.bk-handoff-arc, .bk-handoff-seal) { stroke: var(--site-fg); }
.bk-handoff.is-site :is(.bk-handoff-disc, .bk-handoff-glow) { background: var(--site-accent); }
.bk-handoff.is-site .bk-handoff-glow { filter: blur(22px); }
.bk-handoff.is-site .bk-handoff-check :is(path, circle) { stroke: var(--site-on-accent); }
.bk-handoff.is-site .bk-handoff-caption { color: var(--site-fg); font-family: var(--site-body); font-weight: 300; letter-spacing: 0.04em; }
.bk-handoff.is-site .bk-handoff-piece { background: var(--site-fg) !important; opacity: 0.75; }
.bk-handoff.is-site .bk-handoff-piece:nth-child(3n) { background: var(--site-mute) !important; }

/* ---- Confirmation for the same salon -------------------------------------- */
html body.booking-site .confirmation-page .confirmation-hero h1 { font-size: clamp(44px, 6vw, 84px); line-height: 0.98; }
html body.booking-site .confirmation-page .confirmation-icon {
  border: 0;
  background: var(--site-accent);
  color: var(--site-on-accent);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--site-fg) 8%, transparent);
}
html body.booking-site .confirmation-page :is(.confirmation-number, .status-badge, .confirmation-checklist li > span, .confirmation-steps li > span) {
  border: 1px solid var(--site-line);
  background: transparent;
  color: var(--site-fg);
}
html body.booking-site .confirmation-page :is(dl > div, .confirmation-details dl) { border-color: var(--site-line); }
html body.booking-site .confirmation-page .confirmation-salon img { border-radius: 12px; }

@media (prefers-reduced-motion: reduce) {
  html body.booking-site-beliz::before,
  html body.booking-site-beliz::after { animation: none; }
}

/* ---- Salon-site booking: stylist check, person badge, phone bar ----------- */
html body.booking-site .booking-professional-select-marker { border-color: var(--site-line); }
html body.booking-site .booking-professional-select-marker::before { background: var(--site-accent); }
html body.booking-site .booking-professional-select-marker { color: var(--site-on-accent); }
html body.booking-site .booking-professional-profile-button,
html body.booking-site .booking-professional-profile-button:hover { border: 0; background: transparent; color: var(--site-fg); }
/* The tick on a finished person: a light disc with a dark tick and a dark
   ring, readable on the dark chosen pill and on the light ones. */
html body.booking-site .booking-guest-tab .booking-guest-tab-status,
html body.booking-site .booking-guest-tab.active .booking-guest-tab-status {
  border: 1.5px solid var(--site-fg);
  background: var(--site-page);
  color: var(--site-fg);
}
html body.booking-site .booking-guest-tab-status .icon { stroke-width: 3; }
/* Beliz on a phone: no dark band behind Back and Continue. */
@media (max-width: 760px) {
  html body.booking-site-beliz .booking-controls {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* The buttons carry their own fill, so the page never shows through them. */
  html body.booking-site-beliz .booking-controls .outline-button.customer,
  html body.booking-site-beliz .booking-controls .outline-button.customer:disabled {
    background: var(--site-page);
    box-shadow: 0 6px 18px -10px rgba(24, 20, 17, 0.35);
  }
  html body.booking-site-beliz .booking-controls .solid-button.customer:disabled { background: var(--site-page); }
  html body.booking-site-beliz .booking-controls .solid-button.customer { box-shadow: 0 8px 22px -10px rgba(24, 20, 17, 0.5); }
}

/* ---- Confirmation on a phone: buttons one above the other, full width, so
   spaced capitals and their icon always sit inside the outline. ---------- */
@media (max-width: 560px) {
  html body.booking-workspace-mode .confirmation-page .button-row,
  html body .confirmation-page .button-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  html body .confirmation-page .button-row > :is(button, a) {
    width: 100%;
    justify-content: center;
    gap: 10px;
    padding-inline: 16px;
    white-space: nowrap;
  }
  html body.booking-site .confirmation-page .button-row > :is(button, a) { letter-spacing: 0.1em; }
}