/* Booking, in the customer app's colours: a mint-to-violet gradient for what
   is chosen, slow easing everywhere, and the Book button that becomes the
   confirmation's check (ui/booking-handoff.js). Loaded after every other
   booking sheet; it restyles and never moves anything. */

:root {
  --bk-mint: #8ff7d2;
  --bk-peri: #93a2f7;
  --bk-violet: #916be8;
  --bk-violet-deep: #7a52dd;
  --bk-ink: #16151b;
  --bk-fill-soft: #f1f0f4;
  --bk-grad: linear-gradient(135deg, #8ff7d2 0%, #93a2f7 50%, #916be8 100%);
  --bk-grad-x: linear-gradient(90deg, #8ff7d2 0%, #93a2f7 50%, #916be8 100%);
  --bk-fill: linear-gradient(135deg, #4fcfa9 0%, #6f84ea 55%, #7a52dd 100%);
  /* The same gradient a step deeper, for surfaces that carry white text or a
     white check. */
  --bk-grad-deep: linear-gradient(135deg, #4fcfa9 0%, #6f84ea 50%, #7a52dd 100%);
  --bk-cta: linear-gradient(100deg, #4fcfa9 0%, #6f84ea 38%, #7a52dd 70%, #6f84ea 100%) 0 50% / 220% 100%;
  --bk-cta-hover: linear-gradient(100deg, #5edab4 0%, #7d91ef 38%, #8661e4 70%, #7d91ef 100%) 0 50% / 220% 100%;
  --bk-ease: cubic-bezier(.22, 1, .36, 1);
  --bk-spring: cubic-bezier(.34, 1.56, .64, 1);
  --bk-glow: 0 18px 40px -26px rgba(122, 82, 221, .55);
}

/* ---- The room: a slow mint and violet light behind the page ---------------- */
body.booking-workspace-mode::before {
  content: "";
  position: fixed;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 34% at 12% 8%, rgba(143, 247, 210, .20), transparent 70%),
    radial-gradient(34% 36% at 92% 94%, rgba(145, 107, 232, .16), transparent 70%),
    radial-gradient(30% 30% at 78% 12%, rgba(147, 162, 247, .12), transparent 70%);
  animation: bk-aurora 28s ease-in-out infinite alternate;
}
@keyframes bk-aurora {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to { transform: translate3d(1.5%, 1.2%, 0) scale(1.05); }
}

/* ---- Progress: each step name gets its piece of one gradient line --------- */
html body.booking-workspace-mode .booking-main .stepper button strong {
  position: relative;
  padding-bottom: 7px;
  transition: color .5s var(--bk-ease);
}
html body.booking-workspace-mode .booking-main .stepper button strong::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--bk-seg, var(--bk-grad-x));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .8s var(--bk-ease);
}
html body.booking-workspace-mode .booking-main .stepper button:nth-child(1) { --bk-seg: linear-gradient(90deg, #8ff7d2, #91d5e1); }
html body.booking-workspace-mode .booking-main .stepper button:nth-child(2) { --bk-seg: linear-gradient(90deg, #91d5e1, #92b3f0); }
html body.booking-workspace-mode .booking-main .stepper button:nth-child(3) { --bk-seg: linear-gradient(90deg, #92b3f0, #9397f4); }
html body.booking-workspace-mode .booking-main .stepper button:nth-child(4) { --bk-seg: linear-gradient(90deg, #9397f4, #9281ee); }
html body.booking-workspace-mode .booking-main .stepper button:nth-child(5) { --bk-seg: linear-gradient(90deg, #9281ee, #916be8); }
html body.booking-workspace-mode .booking-main .stepper button.done strong::after { transform: scaleX(1); }
html body.booking-workspace-mode .booking-main .stepper button.active strong::after {
  transform: scaleX(1);
}
html body.booking-workspace-mode .booking-main .stepper button.active { color: var(--bk-ink); }
/* Phones already draw a bar under each step: the gradient fills that bar. */
@media (max-width: 768px) {
  html body.booking-workspace-mode .booking-main .stepper button {
    position: relative;
    border-bottom-color: #ecebf0;
  }
  html body.booking-workspace-mode .booking-main .stepper button strong { padding-bottom: 0; }
  html body.booking-workspace-mode .booking-main .stepper button strong::after { content: none; }
  html body.booking-workspace-mode .booking-main .stepper button::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 3px;
    border-radius: 999px;
    background: var(--bk-seg);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .8s var(--bk-ease);
  }
  html body.booking-workspace-mode .booking-main .stepper button.done,
  html body.booking-workspace-mode .booking-main .stepper button.active { border-bottom-color: #ecebf0; }
  html body.booking-workspace-mode .booking-main .stepper button.done { color: #4f4a57; }
  html body.booking-workspace-mode .booking-main .stepper button.active { color: var(--bk-ink); }
  html body.booking-workspace-mode .booking-main .stepper button.done::after { transform: scaleX(1); }
  html body.booking-workspace-mode .booking-main .stepper button.active::after {
    transform: scaleX(1);
    }
}

/* ---- Moving between steps ---------------------------------------------------
   ui/booking-steps.js slides the leaving step out and the arriving one in,
   like pages of one strip. While it runs, the main column clips the two so
   neither passes over the summary. */
html.bk-stepping .booking-main { overflow-x: clip; }
html.bk-stepping [data-booking-scroll] { overflow-x: hidden; }
.bk-steps-ghost { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
/* The older sheets' quick step fade would run under the slide; it rests. */
html body.booking-workspace-mode .booking-step-content:is(.is-forward, .is-back) { animation: none; }
.bk-steps-ghost .bk-steps-context { display: contents !important; }
.bk-steps-copy, .bk-steps-copy * { animation: none !important; transition: none !important; }
/* Nothing already on the page fades in again: a step that redraws, or one
   that has just slid in, stays solid. Only something new moves (a guest just
   added, a photo just uploaded, a card just chosen). Suspending these during
   the slide and releasing them after would start them late, so they simply
   never run on a redraw. */
html body.booking-workspace-mode .booking-guest-tab-panel:not(.is-new),
html body.booking-workspace-mode .booking-step-content:is(.is-forward, .is-back) .booking-guest-tab-panel { animation: none; }

/* ---- Pills: the person tabs and categories ------------------------------- */
html body.booking-workspace-mode .booking-guest-tab,
html body.booking-workspace-mode .booking-category-chip {
  transition: background-color .45s var(--bk-ease), color .45s var(--bk-ease), border-color .45s var(--bk-ease), box-shadow .5s var(--bk-ease), transform .45s var(--bk-ease);
}
html body.booking-workspace-mode .booking-guest-tab.active,
html body.booking-workspace-mode .booking-category-chip.is-active {
  border-color: transparent;
  background: var(--bk-fill);
  color: #fff;
  box-shadow: 0 10px 22px -14px rgba(122, 82, 221, .9);
}
@media (hover: hover) and (pointer: fine) {
  html body.booking-workspace-mode .booking-category-chip:not(.is-active):hover { border-color: #cdbff3; transform: translateY(-1px); }
}

/* The chosen guest's pill is their name: a text field shaped like the pill,
   growing with what is typed. */
html body.booking-workspace-mode .booking-guest-tab.is-naming {
  display: inline-flex;
  align-items: center;
  cursor: text;
}
html body.booking-workspace-mode .booking-guest-tab-name {
  field-sizing: content;
  min-width: 5ch;
  max-width: 22ch;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
  box-shadow: none;
}
html body.booking-workspace-mode .booking-guest-tab-name::placeholder { color: inherit; opacity: .72; }
/* Typed straight onto the pill, in the pill's own colours and with a caret
   to match. No box of its own: the pill is the field. */
html body.booking-workspace-mode .booking-guest-tab.is-naming .booking-guest-tab-name,
html body.booking-workspace-mode .booking-guest-tab.is-naming .booking-guest-tab-name:is(:focus, :focus-visible) {
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: inherit;
  -webkit-text-fill-color: currentColor;
  caret-color: currentColor !important;
  box-shadow: none !important;
}
html body.booking-workspace-mode .booking-guest-tab.is-naming:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, #7a52dd 22%, transparent), 0 10px 22px -14px rgba(122, 82, 221, .9); }
html body.booking-workspace-mode .booking-guest-tab-item { position: relative; }
html body.booking-workspace-mode .booking-guest-name-error:empty { display: none; }
html body.booking-workspace-mode .booking-guest-tab-item .booking-guest-name-error {
  position: absolute;
  top: calc(100% + 4px);
  left: 8px;
  white-space: nowrap;
  font-size: 12px;
  color: #c8372d;
}

/* ---- Services: a gradient edge draws around the chosen card --------------- */
html body.booking-workspace-mode .booking-guest-services .choice-card,
html body.booking-workspace-mode .booking-professional-option-shell {
  position: relative;
  isolation: isolate;
  transition: border-color .5s var(--bk-ease), box-shadow .7s var(--bk-ease), background-color .5s var(--bk-ease), transform .5s var(--bk-ease);
}
html body.booking-workspace-mode .booking-guest-services .choice-card::before,
html body.booking-workspace-mode .booking-professional-option-shell::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 2;
  padding: 1.5px;
  border-radius: inherit;
  background: var(--bk-grad);
  opacity: 0;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
html body.booking-workspace-mode .booking-guest-services .choice-card.active,
html body.booking-workspace-mode .booking-professional-option-shell:has(> .booking-professional-option.active) {
  border-color: transparent;
  background:
    linear-gradient(135deg, rgba(143, 247, 210, .12), rgba(147, 162, 247, .06) 48%, rgba(145, 107, 232, .10)),
    #fff;
  box-shadow: var(--bk-glow);
}
html body.booking-workspace-mode .booking-guest-services .choice-card.active::before,
html body.booking-workspace-mode .booking-professional-option-shell:has(> .booking-professional-option.active)::before {
  opacity: 1;
}
html body.booking-workspace-mode .booking-guest-services .choice-card.is-just-picked.active {
  animation: bk-card-pick .6s var(--bk-ease);
}
html body.booking-workspace-mode .booking-professional-option-shell::before { inset: 0; }
html body.booking-workspace-mode .booking-professional-option-shell .booking-professional-option.active { background: transparent; box-shadow: none; }
@keyframes bk-card-pick {
  0% { transform: scale(1); }
  35% { transform: scale(.992); }
  100% { transform: scale(1); }
}
@media (hover: hover) and (pointer: fine) {
  html body.booking-workspace-mode .booking-guest-services .choice-card:not(.active):not(:disabled):hover {
    border-color: #dcd3f3;
    box-shadow: 0 16px 34px -28px rgba(122, 82, 221, .6);
    transform: translateY(-2px);
  }
}

/* The add button: a soft grey disc with a plus; chosen, the gradient disc
   springs up under it and a dark check draws itself, with one soft ring. */
html body.booking-workspace-mode .booking-guest-services .booking-service-select-marker {
  position: relative;
  isolation: isolate;
  border-color: transparent;
  background: var(--bk-fill-soft);
  color: var(--bk-ink);
  box-shadow: none;
  transition: background-color .4s var(--bk-ease), color .4s var(--bk-ease), transform .5s var(--bk-spring);
}
html body.booking-workspace-mode .booking-guest-services .booking-service-select-marker::before,
html body.booking-workspace-mode .booking-guest-services .booking-service-select-marker::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
html body.booking-workspace-mode .booking-guest-services .booking-service-select-marker::before {
  background: var(--bk-grad-deep);
  opacity: 0;
  transform: scale(.2);
  transition: transform .5s var(--bk-spring), opacity .3s var(--bk-ease);
}
html body.booking-workspace-mode .booking-guest-services .choice-card.active .booking-service-select-marker {
  border-color: transparent;
  background: transparent;
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(122, 82, 221, .75);
}
html body.booking-workspace-mode .booking-guest-services .choice-card.active .booking-service-select-marker::before {
  opacity: 1;
  transform: scale(1);
}
html body.booking-workspace-mode .booking-guest-services .choice-card.is-just-picked.active .booking-service-select-marker::after {
  border: 2px solid var(--bk-violet);
  animation: bk-ripple 1s var(--bk-ease) both;
}
html body.booking-workspace-mode .booking-guest-services .choice-card.active .booking-service-select-marker .icon {
  stroke-width: 2.6;
  animation: none;
}
html body.booking-workspace-mode .booking-guest-services .choice-card.is-just-picked.active .booking-service-select-marker .icon path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: bk-check-draw .5s .14s var(--bk-ease) forwards;
}
@media (hover: hover) and (pointer: fine) {
  html body.booking-workspace-mode .booking-guest-services .choice-card:not(.active):not(:disabled):hover .booking-service-select-marker {
    border-color: transparent;
    background: #e9e4f8;
    transform: rotate(90deg);
  }
}
@keyframes bk-check-draw { to { stroke-dashoffset: 0; } }
@keyframes bk-ripple {
  from { opacity: .55; transform: scale(1); }
  to { opacity: 0; transform: scale(1.75); }
}

/* ---- Stylist, date and time: the chosen one fills with violet -------------- */
html body.booking-workspace-mode .booking-professional-time-grid button,
html body.booking-workspace-mode .booking-professional-time-grid button strong,
html body.booking-workspace-mode .booking-month-day,
html body.booking-workspace-mode .booking-month-day span {
  transition: background-color .35s var(--bk-ease), border-color .35s var(--bk-ease), color .35s var(--bk-ease), box-shadow .45s var(--bk-ease);
}
/* A chosen time fills from its middle out, and its label turns with it; a
   gradient cannot fade, so the fill is its own layer. */
html body.booking-workspace-mode .booking-professional-time-grid button {
  position: relative;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
}
html body.booking-workspace-mode .booking-professional-time-grid button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--bk-fill);
  opacity: 0;
  transform: scale(.55);
  transition: opacity .5s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
}
html body.booking-workspace-mode .booking-professional-time-grid button,
html body.booking-workspace-mode .booking-professional-time-grid button :is(strong, span) {
  transition: color .5s cubic-bezier(.22, 1, .36, 1), border-color .5s cubic-bezier(.22, 1, .36, 1), box-shadow .6s cubic-bezier(.22, 1, .36, 1);
}
html body.booking-workspace-mode .booking-professional-time-grid button.active {
  border-color: transparent;
  background: transparent;
  color: #fff;
  box-shadow: 0 12px 24px -14px rgba(122, 82, 221, .9);
}
html body.booking-workspace-mode .booking-professional-time-grid button.active::before { opacity: 1; transform: none; }
html body.booking-workspace-mode .booking-professional-time-grid button.active :is(strong, span) { background: transparent; }
html body.booking-workspace-mode .booking-professional-time-grid button.active strong,
html body.booking-workspace-mode .booking-professional-time-grid button.active span { color: #fff; }
html body.booking-workspace-mode .booking-month-day.active,
html body.booking-workspace-mode .booking-month-day.active span {
  color: #fff;
}
html body.booking-workspace-mode .booking-month-day.active {
  border-color: transparent;
  background: var(--bk-fill);
  box-shadow: 0 10px 22px -12px rgba(122, 82, 221, .9);
}

/* ---- No flat violet anywhere in booking ------------------------------------
   Fills take the gradient with white; small violet accents and text take the
   ink or the gradient's periwinkle. The older sheets' violet variable is the
   periwinkle here, since it also paints borders and gradient stops. */
html body.booking-workspace-mode {
  --booking-neon: #6f84ea;
  --rl-violet: #6f84ea;
  --rl-violet-deep: #4c5bc4;
  --rl-violet-ink: #2f2c37;
}
html body.booking-workspace-mode .booking-time-order,
html body.booking-workspace-mode .booking-date-time-slots-column .booking-time-order,
html body.booking-workspace-mode .booking-summary-party-date,
html body.booking-workspace-mode .booking-date-unavailable-mark,
html body.booking-workspace-mode .booking-photo-group.is-desired .booking-photo-group-icon {
  border-color: transparent;
  background: var(--bk-grad-deep);
  color: #fff;
}
html body.booking-workspace-mode .booking-summary-party-dot,
html body.booking-workspace-mode .booking-summary-party-track > i { background: var(--bk-grad-deep); }
html body.booking-workspace-mode .booking-summary-party-row:nth-child(2n) .booking-summary-party-dot,
html body.booking-workspace-mode .booking-summary-party-row:nth-child(2n) .booking-summary-party-track > i { background: #4fcfa9; }
html body.booking-workspace-mode .booking-month-day.is-today:not(.active) {
  border-color: transparent;
  box-shadow: inset 0 0 0 1.5px #8fa0ee;
}
html body.booking-workspace-mode .booking-calendar-loading-spinner { border-color: #e4e8f7; border-top-color: #4fcfa9; }
html body.booking-workspace-mode .booking-guest-services .booking-service-consultation,
html body.booking-workspace-mode .booking-professional-info small,
html body.booking-workspace-mode .booking-professional-profile-button { color: var(--bk-ink); }

/* ---- Photos and notes: cards like the app's reference page ---------------- */
html body.booking-workspace-mode .booking-photo-group {
  border: 1px solid rgba(22, 21, 27, .06);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 40px -34px rgba(22, 21, 27, .35);
  transition: box-shadow .6s var(--bk-ease), transform .6s var(--bk-ease);
}
html body.booking-workspace-mode .booking-photo-group .booking-photo-group-icon {
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #4fcfa9, #6f84ea);
  color: #fff;
  box-shadow: 0 8px 18px -12px rgba(122, 82, 221, .8);
}
html body.booking-workspace-mode .booking-photo-group.is-desired .booking-photo-group-icon {
  background: var(--bk-grad-deep);
  color: #fff;
}
html body.booking-workspace-mode .booking-photo-count {
  border: 0;
  border-radius: 999px;
  background: var(--bk-fill-soft);
  color: #6b6874;
  font-variant-numeric: tabular-nums;
}
html body.booking-workspace-mode .booking-photo-dropzone {
  border: 1.5px dashed #d6d1e0;
  border-radius: 16px;
  background: #fbfafd;
  transition: border-color .45s var(--bk-ease), background-color .45s var(--bk-ease), box-shadow .6s var(--bk-ease);
}
html body.booking-workspace-mode .booking-photo-dropzone-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--bk-fill);
  color: #fff;
  box-shadow: 0 12px 24px -14px rgba(122, 82, 221, .95);
  transition: transform .6s var(--bk-spring);
}
html body.booking-workspace-mode .booking-photo-dropzone-icon .icon { width: 22px; height: 22px; stroke: currentColor; }
html body.booking-workspace-mode .booking-photo-dropzone strong { color: var(--bk-ink); font-weight: 650; }
@media (hover: hover) and (pointer: fine) {
  html body.booking-workspace-mode .booking-photo-dropzone:not(.is-full):hover,
  html body.booking-workspace-mode .booking-photo-dropzone:not(.is-full):focus-within {
    border-color: var(--bk-violet);
    background: linear-gradient(135deg, rgba(143, 247, 210, .10), rgba(145, 107, 232, .08)), #fff;
    box-shadow: 0 16px 34px -26px rgba(122, 82, 221, .7);
  }
  html body.booking-workspace-mode .booking-photo-dropzone:not(.is-full):hover .booking-photo-dropzone-icon { transform: translateY(-3px) scale(1.06); }
}
html body.booking-workspace-mode .booking-photo-dropzone.is-preparing .booking-photo-dropzone-icon {
  animation: bk-breathe 1.6s ease-in-out infinite;
}
html body.booking-workspace-mode .booking-photo-preview {
  border-radius: 16px;
  overflow: hidden;
}
/* Only a photo still arriving pops in; photos already added stay put. */
html body.booking-workspace-mode .booking-photo-preview.is-pending { animation: bk-photo-in .6s var(--bk-ease) both; }
html body.booking-workspace-mode .booking-photo-preview img { border-radius: inherit; }
html body.booking-workspace-mode .booking-main .booking-photo-preview > button {
  border: 0;
  background: rgba(22, 21, 27, .42);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-color .3s var(--bk-ease), transform .4s var(--bk-spring);
}
html body.booking-workspace-mode .booking-main .booking-photo-preview > button:hover { background: rgba(22, 21, 27, .62); transform: scale(1.06); }
@keyframes bk-photo-in {
  from { opacity: 0; transform: scale(.9); }
  to { opacity: 1; transform: none; }
}
@keyframes bk-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 12px 24px -14px rgba(122, 82, 221, .95); }
  50% { transform: scale(1.07); box-shadow: 0 16px 30px -12px rgba(122, 82, 221, .95); }
}

html body.booking-workspace-mode .booking-customer-note {
  border: 1px solid rgba(22, 21, 27, .06);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 40px -34px rgba(22, 21, 27, .35);
}
html body.booking-workspace-mode .booking-customer-note textarea {
  border: 1.5px solid transparent;
  border-radius: 16px;
  background: linear-gradient(var(--bk-fill-soft), var(--bk-fill-soft)) padding-box, linear-gradient(var(--bk-fill-soft), var(--bk-fill-soft)) border-box;
  box-shadow: 0 0 0 0 rgba(145, 107, 232, 0);
  transition: box-shadow .5s var(--bk-ease);
}
html body.booking-workspace-mode .booking-customer-note textarea:focus {
  outline: 0;
  background: linear-gradient(#fff, #fff) padding-box, var(--bk-grad-x) border-box;
  box-shadow: 0 0 0 5px rgba(145, 107, 232, .10);
}

/* ---- Review --------------------------------------------------------------- */
html body.booking-workspace-mode .receipt-card,
html body.booking-workspace-mode .payment-card.booking-submit-policy {
  border-radius: 20px;
}

/* ---- The main action: the gradient, drifting slowly ---------------------- */
html body.booking-workspace-mode .booking-summary-action .solid-button.customer,
html body.booking-workspace-mode .booking-controls .solid-button.customer {
  border: 0;
  background: var(--bk-cta);
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(40, 24, 90, .22);
  box-shadow: 0 16px 30px -18px rgba(122, 82, 221, .85);
  /* Still: a drift would restart, and jump, each time the page redraws. */
  transition: box-shadow .5s var(--bk-ease), transform .5s var(--bk-ease), opacity .3s ease;
}
html body.booking-workspace-mode .booking-summary-action .solid-button.customer .icon,
html body.booking-workspace-mode .booking-controls .solid-button.customer .icon { stroke: currentColor; }
@media (hover: hover) and (pointer: fine) {
  html body.booking-workspace-mode .booking-summary-action .solid-button.customer:not(.danger):not(:disabled):hover,
  html body.booking-workspace-mode .booking-controls .solid-button.customer:not(.danger):not(:disabled):hover {
    background: var(--bk-cta-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 22px 38px -20px rgba(122, 82, 221, .95);
  }
}
html body.booking-workspace-mode .booking-summary-action .solid-button.customer:disabled,
html body.booking-workspace-mode .booking-controls .solid-button.customer:disabled {
  background: #ecebf0;
  color: #9c98a6;
  text-shadow: none;
  box-shadow: none;
  animation: none;
  opacity: 1;
}
@keyframes bk-drift {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

/* ---- The ordinary loading page: a turning gradient ring, nothing else ---- */
html body .booking-loading-layout {
  background:
    radial-gradient(40% 36% at 30% 20%, rgba(143, 247, 210, .20), transparent 70%),
    radial-gradient(40% 40% at 72% 78%, rgba(145, 107, 232, .16), transparent 70%),
    #fbfafd;
}
html body .booking-loading-layout .booking-loading-emblem::before {
  border: 0;
  background: conic-gradient(from 0deg, rgba(143, 247, 210, 0) 0deg, #8ff7d2 90deg, #93a2f7 200deg, #916be8 300deg, rgba(145, 107, 232, 0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  animation: bk-spin 1.1s linear infinite;
}
html body .booking-loading-layout .booking-loading-progress span {
  background: linear-gradient(90deg, #8ff7d2, #93a2f7, #916be8, #93a2f7, #8ff7d2) 0 0 / 200% 100%;
  animation: bk-drift 2.4s linear infinite;
}
html body .booking-loading-layout .booking-loading-steps,
html body .booking-loading-layout .booking-loading-cards { display: none; }
html body .booking-loading-layout .eyebrow { color: var(--bk-violet-deep); }
@keyframes bk-spin { to { transform: rotate(360deg); } }

/* ---- Confirmation: the check the Book button became ---------------------- */
.confirmation-page .confirmation-hero {
  background:
    radial-gradient(60% 70% at 50% -10%, rgba(143, 247, 210, .20), transparent 70%),
    radial-gradient(50% 60% at 100% 100%, rgba(145, 107, 232, .12), transparent 70%),
    #fff;
}
.confirmation-page .confirmation-icon {
  border: 0;
  background: var(--bk-grad-deep);
  color: #fff;
  box-shadow: 0 18px 36px -16px rgba(122, 82, 221, .6), 0 0 0 8px rgba(147, 162, 247, .10);
}
.confirmation-page .confirmation-icon .icon {
  width: 64%;
  height: 64%;
  stroke-width: 2.8;
}
.confirmation-page .confirmation-number { border-color: rgba(145, 107, 232, .22); }

/* While the ring lands, the page's own check waits and its sections rise in
   beneath it, one after another. */
html.bk-handoff-landing .confirmation-page .confirmation-icon { visibility: hidden; animation: none; }
html.bk-handoff-landing .confirmation-page .confirmation-icon .icon path { animation: none; stroke-dashoffset: 0; }
html.bk-handoff-landing:not(.bk-handoff-reveal) .confirmation-page .confirmation-hero > :not(.confirmation-icon),
html.bk-handoff-landing:not(.bk-handoff-reveal) .confirmation-page .confirmation-grid > * { opacity: 0; }
html.bk-handoff-reveal .confirmation-page .confirmation-hero > :not(.confirmation-icon),
html.bk-handoff-reveal .confirmation-page .confirmation-grid > * {
  animation: bk-rise .8s var(--bk-ease) both;
}
html.bk-handoff-reveal .confirmation-page .confirmation-hero > .eyebrow { animation-delay: .18s; }
html.bk-handoff-reveal .confirmation-page .confirmation-hero > h1 { animation-delay: .26s; }
html.bk-handoff-reveal .confirmation-page .confirmation-hero > :nth-child(n + 4) { animation-delay: .34s; }
html.bk-handoff-reveal .confirmation-page .confirmation-grid > :nth-child(1) { animation-delay: .44s; }
html.bk-handoff-reveal .confirmation-page .confirmation-grid > :nth-child(2) { animation-delay: .54s; }
@keyframes bk-rise {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to { opacity: 1; transform: none; }
}
/* The button itself is what flies; its place stays held but empty. */
html.bk-handoff-active [data-action="request-booking"],
html.bk-handoff-active [data-action="booking-waitlist-submit"],
html.bk-handoff-active [data-bk-handoff-source] { visibility: hidden; }

/* ---- Entering from a salon website (ui/booking-entry.js) -----------------
   The website's pieces move out as a curtain in the booking's own backdrop
   settles over the page; booking's pieces then arrive as it lifts. */
.bk-entry-curtain {
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  opacity: 0;
  pointer-events: none;
}

/* ---- The handoff overlay -------------------------------------------------- */
.bk-handoff {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: auto;
}
.bk-handoff-veil {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(42% 38% at 50% 40%, rgba(147, 162, 247, .20), transparent 72%),
    radial-gradient(40% 34% at 18% 12%, rgba(143, 247, 210, .20), transparent 70%),
    radial-gradient(38% 36% at 86% 90%, rgba(145, 107, 232, .16), transparent 70%),
    rgba(251, 250, 253, .95);
  -webkit-backdrop-filter: blur(24px) saturate(1.1);
  backdrop-filter: blur(24px) saturate(1.1);
}
.bk-handoff-mark {
  position: fixed;
  overflow: visible;
}
.bk-handoff-mark > * {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.bk-handoff-pill {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(100deg, #4fcfa9 0%, #6f84ea 38%, #7a52dd 70%, #6f84ea 100%);
  box-shadow: 0 16px 30px -18px rgba(122, 82, 221, .85);
}
.bk-handoff-label {
  position: static;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.bk-handoff-ring {
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0;
}
.bk-handoff-ring circle {
  fill: none;
  stroke-width: 5.5;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
}
.bk-handoff-ring .bk-handoff-track { stroke: rgba(145, 107, 232, .14); fill: rgba(255, 255, 255, .92); }
.bk-handoff-arc {
  stroke: url(#bk-handoff-gradient);
  stroke-dasharray: 72 100;
  transform: rotate(-90deg);
  animation: bk-arc-turn .9s linear infinite;
}
.bk-handoff-seal {
  stroke: url(#bk-handoff-gradient);
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  opacity: 0;
  transform: rotate(-90deg);
}
@keyframes bk-arc-turn {
  from { transform: rotate(-90deg); }
  to { transform: rotate(270deg); }
}
.bk-handoff-glow {
  inset: -6%;
  border-radius: 50%;
  background: var(--bk-grad);
  filter: blur(18px);
  opacity: 0;
}
.bk-handoff.is-spinning .bk-handoff-glow { animation: bk-pulse 1.4s ease-in-out infinite; }
@keyframes bk-pulse {
  0%, 100% { opacity: .18; transform: scale(.82); }
  50% { opacity: .46; transform: scale(1.02); }
}
.bk-handoff-disc {
  border-radius: 50%;
  background: var(--bk-grad-deep);
  transform: scale(.001);
}
.bk-handoff-skin { border-radius: 50%; opacity: 0; }
.bk-handoff-check {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.bk-handoff-check :is(path, circle) {
  fill: none;
  stroke: #fff;
  stroke-width: 7.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
}
/* The waitlist's clock: a lighter line, as its face is larger than a check. */
.bk-handoff-check.is-clock :is(path, circle) { stroke-width: 6.5; }
.bk-handoff-burst { position: fixed; inset: 0; pointer-events: none; }
.bk-handoff-piece {
  position: fixed;
  display: block;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.bk-handoff-piece.is-bar { border-radius: 1.5px; }
.bk-handoff-piece.is-star {
  border-radius: 0;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.bk-handoff-caption {
  position: fixed;
  left: 50%;
  margin: 0;
  opacity: 0;
  transform: translate(-50%, 0);
  color: var(--bk-ink);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -.01em;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  body.booking-workspace-mode::before,
  html body.booking-workspace-mode .booking-summary-action .solid-button.customer,
  html body.booking-workspace-mode .booking-controls .solid-button.customer,
  html body.booking-workspace-mode .booking-guest-services .choice-card.is-just-picked.active,
  html body.booking-workspace-mode .booking-guest-services .choice-card.is-just-picked.active .booking-service-select-marker::after,
  html body.booking-workspace-mode .booking-photo-preview.is-pending,
  html body.booking-workspace-mode .booking-photo-dropzone.is-preparing .booking-photo-dropzone-icon,
  html body .booking-loading-layout .booking-loading-progress span {
    animation: none;
  }
  html body.booking-workspace-mode .booking-guest-services .choice-card.is-just-picked.active .booking-service-select-marker .icon path {
    animation: none;
    stroke-dashoffset: 0;
  }
  html body.booking-workspace-mode .booking-guest-services .booking-service-select-marker::before { transition: opacity .15s ease; transform: none; }
}

/* ---- Stylist cards: View profile sits on the right as a plain link, and
   the check disc sits after it, chosen or not. The disc belongs to the card,
   not the choose button, so no motion on the button can move it. Pressing
   the disc (or the card) again clears the choice. -------------------------- */
html body.booking-workspace-mode .booking-professional-option-shell {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  padding: 10px 12px 10px 0;
}
html body.booking-workspace-mode .booking-professional-option-shell > .booking-professional-option {
  grid-column: 1;
  grid-row: 1 / span 2;
  min-height: 88px;
  padding: 14px 8px 14px 14px;
}
html body.booking-workspace-mode .booking-professional-option-shell .booking-professional-profile-button {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  min-height: 36px;
  margin: 0;
  padding: 8px 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  font-size: 12.5px;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 3px;
  transform: none;
}
html body.booking-workspace-mode .booking-professional-option-shell .booking-professional-profile-button:is(:hover, :focus-visible) {
  border: 0;
  background: transparent;
  text-decoration-color: currentColor;
  transform: none;
}
html body.booking-workspace-mode .booking-professional-select-marker {
  position: relative;
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  justify-self: end;
  margin-right: 4px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1.5px solid rgba(22, 21, 27, .14);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  isolation: isolate;
  transition: border-color .4s var(--bk-ease);
}
html body.booking-workspace-mode .booking-professional-select-marker::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  z-index: -1;
  border-radius: 50%;
  background: var(--bk-grad-deep);
  opacity: 0;
  transform: scale(.2);
  transition: transform .5s var(--bk-spring), opacity .3s var(--bk-ease);
}
html body.booking-workspace-mode .booking-professional-select-marker .icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.6;
  opacity: 0;
  transition: opacity .2s var(--bk-ease);
}
html body.booking-workspace-mode .booking-professional-option-shell:has(> .booking-professional-option.active) > .booking-professional-select-marker { border-color: transparent; }
html body.booking-workspace-mode .booking-professional-option-shell:has(> .booking-professional-option.active) > .booking-professional-select-marker::before { opacity: 1; transform: scale(1); }
html body.booking-workspace-mode .booking-professional-option-shell:has(> .booking-professional-option.active) > .booking-professional-select-marker .icon { opacity: 1; }
html body.booking-workspace-mode .booking-professional-option-shell:has(> .booking-professional-option.is-just-picked.active) > .booking-professional-select-marker .icon path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: bk-check-draw .5s .14s var(--bk-ease) forwards;
}
@media (hover: hover) and (pointer: fine) {
  html body.booking-workspace-mode .booking-professional-option-shell:not(:has(> .booking-professional-option.active)) > .booking-professional-select-marker:hover { border-color: rgba(22, 21, 27, .4); }
}

/* ---- The person row leaves room for its tick badges, so the one on the
   first pill is not cut off at the left or top edge. ---------------------- */
html body.booking-workspace-mode .booking-main .booking-guest-tabs-row {
  margin: -5px 0 0 -7px;
  padding: 8px 0 3px 7px;
  scroll-padding-left: 7px;
}

/* ---- Phones: the bottom bar holds only Back and Continue. The running
   summary is still in the Review step. ------------------------------------ */
@media (max-width: 760px) {
  html body.booking-workspace-mode .booking-controls .booking-phone-summary { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html body.booking-workspace-mode .booking-professional-select-marker::before { transition: opacity .15s ease; transform: none; }
  html body.booking-workspace-mode .booking-professional-option-shell:has(> .booking-professional-option.is-just-picked.active) > .booking-professional-select-marker .icon path { animation: none; stroke-dashoffset: 0; }
}


/* ---- Booking text breaks kindly: balanced headings, no one-word last lines.
   Dates, times and lengths never split (app.js keeps them whole). -------- */
html body.booking-workspace-mode :is(.booking-layout, .booking-shellbar) :is(h1, h2, h3) { text-wrap: balance; }
html body.booking-workspace-mode :is(.booking-layout, .booking-shellbar) :is(p, small, span, strong, em, li, dd, dt) { text-wrap: pretty; }

/* ---- References: Current hairstyle and Desired hairstyle, like the app. --
   Side by side on a wide screen, one above the other on a phone. Photos are
   large 4:5 tiles with their label; the remove control is a small frosted
   disc in the corner (its tap area is larger than it looks). Adding more is
   the last tile. */
html body.booking-workspace-mode .booking-photo-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
html body.booking-workspace-mode .booking-photo-group { display: grid; gap: 14px; padding: 18px; height: auto; }
html body.booking-workspace-mode .booking-photo-group-head { display: flex; align-items: center; gap: 12px; min-height: 0; }
html body.booking-workspace-mode .booking-photo-group-head > div { flex: 1 1 auto; min-width: 0; }
html body.booking-workspace-mode .booking-photo-group-head h3 { margin: 0; font-size: 16px; line-height: 1.25; }
html body.booking-workspace-mode .booking-photo-group-head small { display: block; margin-top: 2px; color: #6b6878; font-size: 12.5px; line-height: 1.4; }
html body.booking-workspace-mode .booking-photo-group-icon { display: grid; flex: none; }
html body.booking-workspace-mode .booking-photo-dropzone:not(.is-tile) {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  min-height: 200px;
  height: auto;
  padding: 20px;
  text-align: center;
}
html body.booking-workspace-mode .booking-photo-dropzone:not(.is-tile) small { display: block; }
/* One centred column, whatever the older sheets set: the empty box and the
   Add more tile hold the title on one line with the hint beneath it, in the
   middle of the box both ways. The file input is invisible and out of flow. */
html body.booking-workspace-mode .booking-photo-dropzone {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}
html body.booking-workspace-mode .booking-photo-dropzone > span:not(.booking-photo-dropzone-icon) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  grid-column: 1;
  width: 100%;
  max-width: 34ch;
  min-width: 0;
  text-align: center;
}
html body.booking-workspace-mode .booking-photo-dropzone > span:not(.booking-photo-dropzone-icon) strong {
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
html body.booking-workspace-mode .booking-photo-dropzone > span:not(.booking-photo-dropzone-icon) small {
  margin: 0;
  line-height: 1.4;
  text-wrap: balance;
}
html body.booking-workspace-mode .booking-photo-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
html body.booking-workspace-mode .booking-photo-group:not(.has-photos) .booking-photo-grid { display: none; }
html body.booking-workspace-mode .booking-photo-preview,
html body.booking-workspace-mode .booking-photo-dropzone.is-tile {
  position: relative;
  aspect-ratio: 4 / 5;
  min-height: 0;
  height: auto;
  margin: 0;
  border-radius: 14px;
}
html body.booking-workspace-mode .booking-photo-preview { border: 0; background: #f1eff4; }
html body.booking-workspace-mode .booking-photo-preview img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
html body.booking-workspace-mode .booking-photo-preview figcaption {
  display: block;
  position: absolute;
  left: 8px;
  bottom: 8px;
  max-width: calc(100% - 16px);
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #16151b;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html body.booking-workspace-mode .booking-main .booking-photo-preview > button {
  top: 6px;
  right: 6px;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  border: 0;
  background: rgba(255, 255, 255, .78);
  color: #16151b;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
html body.booking-workspace-mode .booking-main .booking-photo-preview > button::before { content: ""; position: absolute; inset: -8px; }
html body.booking-workspace-mode .booking-main .booking-photo-preview > button .icon { width: 13px; height: 13px; stroke-width: 2.4; }
html body.booking-workspace-mode .booking-main .booking-photo-preview > button:hover { background: #fff; }
html body.booking-workspace-mode .booking-photo-dropzone.is-tile {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 10px;
  border: 1.5px dashed rgba(22, 21, 27, .18);
  background: transparent;
  text-align: center;
}
html body.booking-workspace-mode .booking-photo-dropzone.is-tile .booking-photo-dropzone-icon { width: 36px; height: 36px; }
html body.booking-workspace-mode .booking-photo-dropzone.is-tile strong { font-size: 13px; }
@media (max-width: 760px) {
  html body.booking-workspace-mode .booking-photo-groups,
  html body.booking-workspace-mode .booking-reference-workspace .booking-photo-groups { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  html body.booking-workspace-mode .booking-photo-groups .booking-photo-group-head { display: flex; align-items: center; min-height: 0; }
  html body.booking-workspace-mode .booking-photo-groups .booking-photo-group-icon { display: grid; }
  html body.booking-workspace-mode .booking-photo-groups .booking-photo-dropzone:not(.is-tile) { min-height: 150px; }
  html body.booking-workspace-mode .booking-photo-groups .booking-photo-dropzone:not(.is-tile) small { display: block; }
  html body.booking-workspace-mode .booking-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Typing on a phone: the note stays in view above the keyboard. -------
   While a field is focused the Back/Continue bar slips away, the page gains
   room equal to the keyboard (set by ui/booking-steps.js), and the field is
   scrolled into the middle of what is still visible. 16px text stops iOS
   from zooming the page. */
@media (max-width: 760px) {
  html body.booking-workspace-mode .booking-layout :is(textarea, input[type="text"], input:not([type])) { font-size: 16px; }
  html body.booking-workspace-mode .booking-main .booking-controls { transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .25s ease; }
  html.bk-keyboard body.booking-workspace-mode .booking-main .booking-controls { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }
  html.bk-keyboard body.booking-workspace-mode .booking-scroll { padding-bottom: calc(var(--bk-keyboard, 0px) + 24px) !important; scroll-padding-bottom: calc(var(--bk-keyboard, 0px) + 24px) !important; }
}

/* ---- Review: when, who, what, one price. -------------------------------- */
html body.booking-workspace-mode .booking-review-card { display: grid; gap: 0; padding: 22px 22px 18px; }
html body.booking-workspace-mode .booking-review-when { display: grid; gap: 4px; padding-bottom: 16px; }
html body.booking-workspace-mode .booking-review-when .eyebrow { margin: 0; }
html body.booking-workspace-mode .booking-review-when h2 { margin: 0; font-size: clamp(20px, 3vw, 26px); line-height: 1.2; letter-spacing: -0.01em; }
html body.booking-workspace-mode .booking-review-when > p:not(.eyebrow) { margin: 0; color: #55525f; font-size: 15px; font-weight: 550; font-variant-numeric: tabular-nums; }
html body.booking-workspace-mode .booking-review-person { display: grid; gap: 10px; padding: 16px 0; border-top: 1px solid rgba(22, 21, 27, .08); }
html body.booking-workspace-mode .booking-review-person > header { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
html body.booking-workspace-mode .booking-review-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #f1eff4; color: #16151b; font-weight: 700; }
html body.booking-workspace-mode .booking-review-person > header strong { display: block; font-size: 15px; }
html body.booking-workspace-mode .booking-review-person > header small { display: block; color: #6b6878; font-size: 12.5px; font-variant-numeric: tabular-nums; }
html body.booking-workspace-mode .booking-review-stylist { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: #55525f; font-size: 13px; font-weight: 550; }
html body.booking-workspace-mode .booking-review-stylist img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
html body.booking-workspace-mode .booking-review-services { display: grid; gap: 8px; margin: 0; padding: 0 0 0 46px; list-style: none; }
html body.booking-workspace-mode .booking-review-services li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
html body.booking-workspace-mode .booking-review-services li strong { display: block; font-size: 14.5px; font-weight: 600; }
html body.booking-workspace-mode .booking-review-services li small { display: block; color: #6b6878; font-size: 12.5px; font-variant-numeric: tabular-nums; }
html body.booking-workspace-mode .booking-review-services li b { flex: none; font-size: 14.5px; font-variant-numeric: tabular-nums; }
html body.booking-workspace-mode .booking-review-references { display: grid; gap: 6px; margin: 0; padding: 12px 0; border-top: 1px solid rgba(22, 21, 27, .08); list-style: none; font-size: 13px; }
html body.booking-workspace-mode .booking-review-references li { display: flex; justify-content: space-between; gap: 12px; }
html body.booking-workspace-mode .booking-review-note { display: grid; gap: 3px; margin: 0; padding: 12px 0; border-top: 1px solid rgba(22, 21, 27, .08); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
html body.booking-workspace-mode .booking-review-note > span { color: #6b6878; font-size: 12px; font-weight: 650; }
html body.booking-workspace-mode .booking-review-total { margin: 0; padding-top: 14px; border-top: 1px solid rgba(22, 21, 27, .12); }
html body.booking-workspace-mode .booking-review-total > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
html body.booking-workspace-mode .booking-review-total dt { font-size: 15px; font-weight: 650; }
html body.booking-workspace-mode .booking-review-total dd { margin: 0; font-size: 18px; font-weight: 750; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  html body.booking-workspace-mode .booking-review-person > header { grid-template-columns: 36px minmax(0, 1fr); }
  html body.booking-workspace-mode .booking-review-stylist { grid-column: 2; }
  html body.booking-workspace-mode .booking-review-services { padding-left: 0; }
}

/* ---- Calendar refresh without a cover --------------------------------------
   Known days keep their dots while the rest of the month is asked for; a
   dot eases into its answer instead of snapping, and a slim sheen under the
   month name is the only sign that more is on its way. */
html body.booking-workspace-mode .booking-month-day > i { transition: background-color .45s var(--bk-ease), opacity .45s var(--bk-ease); }
html body.booking-workspace-mode .booking-month-calendar { position: relative; }
html body.booking-workspace-mode .booking-month-calendar::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 58px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(122, 82, 221, .45), transparent) 0 0 / 50% 100% no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
html body.booking-workspace-mode .booking-month-calendar.is-refreshing::after { opacity: 1; animation: bk-calendar-sheen 1.2s ease-in-out infinite; }
html body.booking-site .booking-month-calendar::after { background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--site-fg) 45%, transparent), transparent); }
@keyframes bk-calendar-sheen { from { background-position: -50% 0; } to { background-position: 150% 0; } }
@media (prefers-reduced-motion: reduce) {
  html body.booking-workspace-mode .booking-month-calendar.is-refreshing::after { animation: none; background-position: 50% 0; }
}

/* ---- Calendar dots: only under a day with at least one open time --------
   Days still being checked and days with nothing open show no dot. */
html body.booking-workspace-mode .booking-month-day.is-checking:not(.active) > i,
html body.booking-workspace-mode .booking-month-day.is-unavailable:not(.active) > i { background: transparent; animation: none; }

/* ---- Add-ons: the "Add something extra?" sheet ---------------------------
   A native modal dialog outside #app (app.js openBookingAddOnSheet): a card
   that rises in on wider screens and a bottom sheet on phones. Each add-on
   is a card like a service card: the gradient edge draws around it when it
   is added, and its disc springs up with a check that draws itself. */
.booking-addon-sheet {
  width: min(620px, calc(100vw - 32px));
  max-width: none;
  max-height: min(84vh, 760px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: transparent;
  color: var(--bk-ink);
  overflow: visible;
}
/* The page behind the sheet holds still while it is open. */
html:has(dialog.booking-addon-sheet[open]),
html:has(dialog.booking-addon-sheet[open]) body { overflow: hidden; overscroll-behavior: none; }
.booking-addon-sheet::backdrop {
  background: rgba(23, 19, 31, .42);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: pm-dim .56s ease both;
}
.booking-addon-sheet.is-closing::backdrop { opacity: 0; transition: opacity .2s ease; }
.booking-addon-sheet:focus { outline: none; }
.booking-addon-sheet-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: inherit;
  overflow: hidden;
  border-radius: inherit;
  background:
    radial-gradient(60% 40% at 0% 0%, rgba(143, 247, 210, .14), transparent 70%),
    radial-gradient(50% 36% at 100% 0%, rgba(145, 107, 232, .10), transparent 70%),
    #fff;
  box-shadow: 0 30px 80px -30px rgba(23, 19, 31, .5);
}
.booking-addon-sheet-grabber { display: none; }
.booking-addon-sheet-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: start;
  gap: 14px;
  padding: 26px 22px 16px 28px;
}
.booking-addon-sheet-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bk-grad-deep);
  color: #fff;
  box-shadow: 0 12px 24px -14px rgba(122, 82, 221, .8);
}
.booking-addon-sheet-mark .icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.booking-addon-sheet-head h2 { margin: 2px 0 4px; font-size: 22px; font-weight: 750; line-height: 1.2; letter-spacing: -.02em; overflow-wrap: anywhere; }
.booking-addon-sheet-head p { margin: 0; color: #6b6878; font-size: 14px; line-height: 1.5; }
.booking-addon-sheet-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  margin: -6px -4px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--bk-ink);
  cursor: pointer;
  transition: background-color .3s var(--bk-ease);
}
.booking-addon-sheet-close:hover { background: #f4f1f8; }
.booking-addon-sheet-close:focus-visible { outline: 3px solid var(--bk-violet); outline-offset: 2px; }
.booking-addon-sheet-close .icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.booking-addon-sheet-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 28px 20px;
  scrollbar-gutter: stable;
}
.booking-addon-person + .booking-addon-person { margin-top: 18px; padding-top: 18px; border-top: 1px solid #f0edf5; }
.booking-addon-person-head { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.booking-addon-person-head strong { min-width: 0; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.booking-addon-person-index {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bk-fill-soft);
  font-size: 12px;
  font-weight: 750;
}
.booking-addon-service + .booking-addon-service { margin-top: 14px; }
.booking-addon-service-name {
  margin: 10px 0 8px;
  color: #6b6878;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}
.booking-addon-options { display: grid; gap: 10px; }
.booking-addon-option {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 72px;
  margin: 0;
  padding: 14px 14px 14px 16px;
  border: 1px solid #e8e4ef;
  border-radius: 16px;
  background: #fff;
  color: var(--bk-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .5s var(--bk-ease), box-shadow .7s var(--bk-ease), background-color .5s var(--bk-ease), transform .5s var(--bk-ease);
}
.booking-addon-option::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 2;
  padding: 1.5px;
  border-radius: inherit;
  background: var(--bk-grad);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--bk-ease);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.booking-addon-option.active {
  border-color: transparent;
  background:
    linear-gradient(135deg, rgba(143, 247, 210, .12), rgba(147, 162, 247, .06) 48%, rgba(145, 107, 232, .10)),
    #fff;
  box-shadow: var(--bk-glow);
}
.booking-addon-option.active::before { opacity: 1; }
.booking-addon-option.is-just-picked.active { animation: bk-card-pick .6s var(--bk-ease); }
.booking-addon-option:focus-visible { outline: 3px solid var(--bk-violet); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .booking-addon-option:not(.active):hover {
    border-color: #dcd3f3;
    box-shadow: 0 16px 34px -28px rgba(122, 82, 221, .6);
    transform: translateY(-1px);
  }
  .booking-addon-option:not(.active):hover .booking-addon-marker { background: #e9e4f8; transform: rotate(90deg); }
}
.booking-addon-option-copy { display: grid; gap: 3px; min-width: 0; }
.booking-addon-option-copy strong { font-size: 15px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.booking-addon-option-description {
  display: -webkit-box;
  overflow: hidden;
  color: #6b6878;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.booking-addon-option-time { color: var(--bk-violet-deep); font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.booking-addon-option-time.is-none { color: #8a8394; font-weight: 550; }
.booking-addon-option-foot { display: flex; align-items: center; gap: 12px; }
.booking-addon-option-foot b { font-size: 15px; font-weight: 720; font-variant-numeric: tabular-nums; white-space: nowrap; }
.booking-addon-option-foot b.is-free { color: #1f8f6f; }
.booking-addon-marker {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bk-fill-soft);
  color: var(--bk-ink);
  transition: background-color .4s var(--bk-ease), color .4s var(--bk-ease), transform .5s var(--bk-spring), box-shadow .5s var(--bk-ease);
}
.booking-addon-marker::before,
.booking-addon-marker::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.booking-addon-marker::before {
  background: var(--bk-grad-deep);
  opacity: 0;
  transform: scale(.2);
  transition: transform .5s var(--bk-spring), opacity .3s var(--bk-ease);
}
.booking-addon-marker .icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.booking-addon-option.active .booking-addon-marker { background: transparent; color: #fff; box-shadow: 0 10px 22px -12px rgba(122, 82, 221, .75); }
.booking-addon-option.active .booking-addon-marker::before { opacity: 1; transform: scale(1); }
.booking-addon-option.active .booking-addon-marker .icon { stroke-width: 2.6; }
.booking-addon-option.is-just-picked.active .booking-addon-marker::after { border: 2px solid var(--bk-violet); animation: bk-ripple 1s var(--bk-ease) both; }
.booking-addon-option.is-just-picked.active .booking-addon-marker .icon path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: bk-check-draw .5s .14s var(--bk-ease) forwards;
}
.booking-addon-sheet-foot {
  display: grid;
  gap: 12px;
  padding: 14px 28px calc(20px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #f0edf5;
  background: rgba(255, 255, 255, .96);
}
.booking-addon-sheet-total { margin: 0; min-height: 20px; color: #8a8394; font-size: 13.5px; font-weight: 550; font-variant-numeric: tabular-nums; transition: color .3s var(--bk-ease); }
.booking-addon-sheet-total.has-selection { color: var(--bk-ink); font-weight: 650; }
.booking-addon-sheet-actions { display: flex; justify-content: flex-end; gap: 10px; }
.booking-addon-sheet-actions button { min-height: 48px; padding: 0 22px; border-radius: 999px; font-size: 15px; white-space: nowrap; }
.booking-addon-sheet-actions button[hidden] { display: none; }
.booking-addon-sheet .booking-addon-continue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  background: var(--bk-cta);
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(40, 24, 90, .22);
  box-shadow: 0 16px 30px -18px rgba(122, 82, 221, .85);
  transition: box-shadow .5s var(--bk-ease), transform .5s var(--bk-ease);
}
.booking-addon-sheet .booking-addon-continue .icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; }
@media (hover: hover) and (pointer: fine) {
  .booking-addon-sheet .booking-addon-continue:hover { background: var(--bk-cta-hover); transform: translateY(-1px); box-shadow: 0 22px 38px -20px rgba(122, 82, 221, .95); }
}
@media (max-width: 760px) {
  .booking-addon-sheet {
    width: 100%;
    max-height: min(88dvh, 100%);
    margin: auto 0 0;
    border-radius: 24px 24px 0 0;
  }
  .booking-addon-sheet-card { box-shadow: 0 -18px 48px -24px rgba(23, 19, 31, .45); }
  .booking-addon-sheet-grabber {
    display: block;
    justify-self: center;
    width: 38px;
    height: 4px;
    margin: 8px auto -4px;
    border-radius: 999px;
    background: #dcd8e3;
  }
  .booking-addon-sheet-card { grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .booking-addon-sheet-head { grid-template-columns: 36px minmax(0, 1fr) 44px; gap: 12px; padding: 16px 12px 12px 18px; }
  .booking-addon-sheet-mark { width: 36px; height: 36px; }
  .booking-addon-sheet-mark .icon { width: 17px; height: 17px; }
  .booking-addon-sheet-head h2 { font-size: 20px; }
  .booking-addon-sheet-head p { font-size: 13px; }
  .booking-addon-sheet-body { padding: 0 16px 16px; scrollbar-gutter: auto; }
  .booking-addon-option { min-height: 68px; padding: 12px 12px 12px 14px; gap: 10px; border-radius: 14px; }
  .booking-addon-option-copy strong { font-size: 14.5px; }
  .booking-addon-option-foot { gap: 10px; }
  .booking-addon-option-foot b { font-size: 14px; }
  .booking-addon-marker { width: 30px; height: 30px; }
  .booking-addon-sheet-foot { gap: 10px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .booking-addon-sheet-total { text-align: center; font-size: 13px; }
  .booking-addon-sheet-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .booking-addon-sheet-actions .booking-addon-continue { order: -1; }
  .booking-addon-sheet-actions button { width: 100%; padding: 0 16px; }
  .booking-addon-sheet-actions .booking-addon-skip { min-height: 44px; border-color: transparent; background: transparent; box-shadow: none; color: #55525f; }
}
@media (prefers-reduced-motion: reduce) {
  .booking-addon-sheet::backdrop { animation: none; }
  .booking-addon-option,
  .booking-addon-marker,
  .booking-addon-marker::before { transition: opacity .15s ease, background-color .15s ease; transform: none; }
  .booking-addon-option.is-just-picked.active,
  .booking-addon-option.is-just-picked.active .booking-addon-marker::after { animation: none; }
  .booking-addon-option.is-just-picked.active .booking-addon-marker .icon path { animation: none; stroke-dashoffset: 0; }
}

/* A service that offers add-ons says so on its card. */
html body.booking-workspace-mode .booking-guest-services .booking-service-addon-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  color: var(--bk-violet-deep);
  font-size: 12px;
  font-weight: 650;
}
html body.booking-workspace-mode .booking-guest-services .booking-service-addon-hint .icon { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; }

/* Add-ons under their service in the summary, the review and the booking. */
html body.booking-workspace-mode .booking-summary-guest-addon {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-top: -4px;
  padding-left: 12px;
  color: #55525f;
  font-size: .8125rem;
}
html body.booking-workspace-mode .booking-summary-guest-addon > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; overflow-wrap: anywhere; }
html body.booking-workspace-mode .booking-summary-guest-addon i { color: var(--bk-violet); font-style: normal; font-weight: 700; }
html body.booking-workspace-mode .booking-summary-guest-addon small { color: #8a8394; font-size: .75rem; }
html body.booking-workspace-mode .booking-summary-guest-addon > strong { flex-shrink: 0; font-weight: 600; color: #3a3542; font-variant-numeric: tabular-nums; }
html body.booking-workspace-mode .booking-review-services li:has(> .booking-review-addons) { flex-wrap: wrap; }
html body.booking-workspace-mode .booking-review-services li > div { min-width: 0; }
html body.booking-workspace-mode .booking-review-addons {
  display: grid;
  flex-basis: 100%;
  gap: 4px;
  margin: 2px 0 0;
  padding: 0 0 0 12px;
  border-left: 2px solid #eee9f8;
  list-style: none;
}
html body.booking-workspace-mode .booking-review-services .booking-review-addons li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
html body.booking-workspace-mode .booking-review-addons span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; color: #3a3542; font-size: 13.5px; overflow-wrap: anywhere; }
html body.booking-workspace-mode .booking-review-addons i { color: var(--bk-violet); font-style: normal; font-weight: 700; }
html body.booking-workspace-mode .booking-review-services .booking-review-addons small { display: inline; font-size: 12px; }
html body.booking-workspace-mode .booking-review-services .booking-review-addons b { font-size: 13.5px; font-weight: 600; }
.confirmation-addons { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.confirmation-addons li { display: flex; justify-content: space-between; gap: 12px; }
.confirmation-addons b { font-weight: 600; font-variant-numeric: tabular-nums; }
.confirmation-assigned-stylist,
html body.booking-workspace-mode .booking-summary-selected-stylist small,
html body.booking-workspace-mode .booking-review-stylist small {
  display: block;
  color: var(--bk-violet-deep, #7a52dd);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}
.appointment-detail-addons { display: grid; gap: 2px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: #55525f; }
.appointment-detail-addons li { display: flex; justify-content: space-between; gap: 10px; }
.appointment-detail-addons b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- "Any stylist": first on the list, a cluster of the stylists it could
   be, with the gradient ring drawing around them when it is chosen. ------ */
.booking-any-stylist-avatars {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    linear-gradient(135deg, rgba(143, 247, 210, .28), rgba(147, 162, 247, .2) 50%, rgba(145, 107, 232, .26)),
    #f6f4fa;
}
.booking-any-stylist-avatars::before {
  content: "";
  position: absolute;
  inset: -4px;
  padding: 2px;
  border-radius: 50%;
  background: var(--bk-grad);
  opacity: 0;
  transform: scale(.9);
  pointer-events: none;
  transition: opacity .4s var(--bk-ease), transform .6s var(--bk-spring);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.booking-any-stylist-option.active .booking-any-stylist-avatars::before { opacity: 1; transform: none; }
.booking-any-stylist-avatars img {
  position: absolute;
  width: 54%;
  height: 54%;
  border: 2px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  background: #ebe6f7;
  box-shadow: 0 6px 14px -8px rgba(23, 19, 31, .45);
  transition: transform .6s var(--bk-spring);
}
.booking-any-stylist-avatars img:nth-child(1) { left: 5%; top: 9%; z-index: 1; }
.booking-any-stylist-avatars img:nth-child(2) { right: 5%; top: 9%; z-index: 2; }
.booking-any-stylist-avatars img:nth-child(3) { left: 23%; bottom: 3%; z-index: 3; }
.booking-any-stylist-avatars img:nth-child(2):last-child,
.booking-any-stylist-avatars img:nth-child(2):nth-last-child(2) { top: auto; bottom: 9%; }
.booking-any-stylist-option.active .booking-any-stylist-avatars img:nth-child(1) { transform: translate(-2px, -1px); }
.booking-any-stylist-option.active .booking-any-stylist-avatars img:nth-child(2) { transform: translate(2px, -1px); }
.booking-any-stylist-option.active .booking-any-stylist-avatars img:nth-child(3) { transform: translateY(2px); }
.booking-any-stylist-avatars b {
  position: absolute;
  right: -2%;
  bottom: -2%;
  z-index: 4;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--bk-grad-deep);
  color: #fff;
  font-size: 10.5px;
  font-weight: 750;
  line-height: 1;
}
html body.booking-workspace-mode .booking-any-stylist-subtitle {
  color: var(--bk-violet-deep);
  font-style: normal;
  font-weight: 650;
}
html body.booking-workspace-mode .booking-professional-option-shell.is-any-stylist .booking-any-stylist-count {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  padding: 8px 6px;
  color: #8a8394;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
/* Small sizes (summary, review): the faces sit in a row. */
:is(.booking-summary-selected-stylist, .booking-review-stylist) .booking-any-stylist-avatars {
  display: inline-flex;
  flex: none;
  width: auto;
  aspect-ratio: auto;
  padding-left: 8px;
  background: none;
}
:is(.booking-summary-selected-stylist, .booking-review-stylist) .booking-any-stylist-avatars::before { content: none; }
html body :is(.booking-summary-selected-stylist, .booking-review-stylist) .booking-any-stylist-avatars img {
  position: static;
  width: 24px;
  height: 24px;
  margin-left: -8px;
  border-width: 1.5px;
  box-shadow: none;
  transform: none;
}
:is(.booking-summary-selected-stylist, .booking-review-stylist) .booking-any-stylist-avatars b {
  position: static;
  min-width: 24px;
  height: 24px;
  margin-left: -8px;
  border-width: 1.5px;
  font-size: 10px;
}
html body.booking-workspace-mode .booking-summary-selected-stylist.is-any-stylist > span,
html body.booking-workspace-mode .booking-summary-selected-stylist[data-assigned-from-any] > span { display: grid; gap: 1px; min-width: 0; }

/* "Any stylist" in the summary and review: every face in one overlapping row,
   then just the words "Any stylist". */
html body :is(.booking-summary-selected-stylist, .booking-review-stylist).is-any-stylist > .booking-any-stylist-avatars.is-row {
  display: inline-flex;
  flex: none;
  flex-direction: row;
  align-items: center;
  width: auto;
  min-width: 0;
  gap: 0;
  padding: 0 0 0 9px;
  background: none;
}
html body :is(.booking-summary-selected-stylist, .booking-review-stylist).is-any-stylist > .booking-any-stylist-avatars.is-row :is(img, b) {
  position: relative;
  inset: auto;
  z-index: auto;
  display: grid;
  flex: none;
  width: 28px;
  min-width: 28px;
  height: 28px;
  margin: 0 0 0 -9px;
  padding: 0;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  object-fit: cover;
  box-shadow: 0 1px 3px rgba(31, 25, 43, 0.16);
  transform: none;
}
html body :is(.booking-summary-selected-stylist, .booking-review-stylist).is-any-stylist > .booking-any-stylist-avatars.is-row b {
  color: #5a46a8;
  background: #efeafb;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
}
html body :is(.booking-summary-selected-stylist, .booking-review-stylist).is-any-stylist > .booking-any-stylist-name {
  display: block;
  min-width: 0;
  margin-left: 4px;
  color: #26212c;
  font-size: 0.875rem;
  font-weight: 650;
  white-space: nowrap;
}

/* A choice that changed under the customer is said where they are. */
html body.booking-workspace-mode .booking-selection-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #e4dcf6;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(143, 247, 210, .12), rgba(145, 107, 232, .08)), #fff;
  color: #3a3542;
  font-size: 13.5px;
  line-height: 1.45;
  animation: bk-rise .6s var(--bk-ease) both;
}
html body.booking-workspace-mode .booking-selection-notice > span { flex: none; color: var(--bk-violet-deep); }
html body.booking-workspace-mode .booking-selection-notice .icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
@media (prefers-reduced-motion: reduce) {
  .booking-any-stylist-avatars::before,
  .booking-any-stylist-avatars img { transition: opacity .15s ease; }
  .booking-any-stylist-option.active .booking-any-stylist-avatars img { transform: none !important; }
  html body.booking-workspace-mode .booking-selection-notice { animation: none; }
}

/* ---- Summary total: the line above "Estimated total" sits midway between
   the last service card and the total, never on the card's edge. -------- */
html body.booking-workspace-mode .booking-summary-progress-slot[data-booking-summary-slot="financials"] .booking-summary-price {
  margin-top: 20px;
  padding-top: 20px;
}

/* ---- Durations: a service's own length beside its name ("Only Colour ·
   1 hr 30 min"), add-ons with their "+30 min" below, and the whole visit as
   "Total 2 hr" beside its time frame. ------------------------------------- */
.booking-line-name {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px !important;
  min-width: 0;
}
.booking-line-name > :is(b, strong) { flex: 0 1 auto; min-width: 0; }
.booking-line-name > .booking-line-duration {
  display: inline !important;
  flex: none;
  color: #8a8394;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.booking-line-name > .booking-line-duration::before { content: "· "; }
html body.booking-workspace-mode .booking-summary-guest-service .booking-line-name > .booking-line-duration { font-size: .75rem; }
html body.booking-workspace-mode .booking-review-services li .booking-line-time { display: block; margin-top: 1px; }
html body.booking-workspace-mode .booking-summary-when small { font-variant-numeric: tabular-nums; white-space: nowrap; }
html body.booking-workspace-mode .booking-summary-when-time { white-space: nowrap; font-variant-numeric: tabular-nums; }
html body.booking-workspace-mode .booking-summary-when p:has(> .booking-summary-when-time) { flex-wrap: wrap; row-gap: 2px; }
/* A party: who, then their time, with their total beneath it. */
html body.booking-workspace-mode .booking-summary-when p[data-booking-summary-schedule-row] {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 1px;
}
html body.booking-workspace-mode .booking-summary-when p[data-booking-summary-schedule-row] > span:first-child { align-self: center; }
html body.booking-workspace-mode .booking-summary-when p[data-booking-summary-schedule-row] .booking-summary-when-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body.booking-workspace-mode .booking-summary-when p[data-booking-summary-schedule-row] .booking-summary-when-time { text-align: right; }
html body.booking-workspace-mode .booking-summary-when p[data-booking-summary-schedule-row] > small { grid-column: 3; justify-self: end; }

/* ---- Appointment details: taller, one scrolling body, each person's
   stylist (photo and name, a tap opens their profile) above their services,
   add-ons under the service they belong to. -------------------------------- */
@media (min-width: 769px) {
  .appointment-dialog-card:not(.appointment-dialog-cancelling):not(.appointment-dialog-reviewing) {
    height: min(900px, calc(100dvh - 40px));
    max-height: min(900px, calc(100dvh - 40px));
  }
}
.appointment-dialog-body:has(> .appointment-detail-section) { align-content: start; gap: 18px; }
.appointment-detail-section { gap: 12px; }
.appointment-detail-heading > span { color: #8a8394; font-size: 12.5px; font-weight: 550; font-variant-numeric: tabular-nums; }
.appointment-detail-people { display: grid; gap: 12px; }
.appointment-detail-person {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #ece8f1;
  border-radius: 16px;
  background: #fff;
}
.appointment-detail-person-name {
  margin: 0;
  color: #6b6878;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.appointment-detail-stylist {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  margin: 0;
  padding: 8px 12px 8px 8px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: #f7f5fa;
  color: inherit;
  font: inherit;
  text-align: left;
}
button.appointment-detail-stylist {
  cursor: pointer;
  transition: background-color .45s var(--bk-ease, ease), border-color .45s var(--bk-ease, ease), box-shadow .5s var(--bk-ease, ease), transform .5s var(--bk-ease, ease);
}
.appointment-detail-stylist > img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: #ece8f1;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(145, 107, 232, .35);
}
.appointment-detail-stylist > span { display: grid; gap: 1px; min-width: 0; }
.appointment-detail-stylist > span > small { color: #8a8394; font-size: 11.5px; font-weight: 600; }
.appointment-detail-stylist > span > strong {
  overflow: hidden;
  color: #16151b;
  font-size: 15px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.appointment-detail-stylist > em {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--bk-violet-deep, #7a52dd);
  font-size: 12.5px;
  font-style: normal;
  font-weight: 650;
  white-space: nowrap;
}
.appointment-detail-stylist > em .icon { width: 14px; height: 14px; transition: transform .45s var(--bk-ease, ease); }
button.appointment-detail-stylist:focus-visible { outline: 3px solid rgba(122, 82, 221, .35); outline-offset: 2px; }
button.appointment-detail-stylist[aria-busy="true"] { opacity: .7; cursor: progress; }
@media (hover: hover) and (pointer: fine) {
  button.appointment-detail-stylist:hover {
    border-color: #e2d9f5;
    background: linear-gradient(135deg, rgba(143, 247, 210, .12), rgba(145, 107, 232, .1)), #fff;
    box-shadow: 0 14px 28px -24px rgba(122, 82, 221, .8);
  }
  button.appointment-detail-stylist:hover > em .icon { transform: translateX(2px); }
}
button.appointment-detail-stylist:active { transform: scale(.99); }
.appointment-detail-services { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.appointment-detail-service { display: grid; gap: 2px; padding: 10px 2px; }
.appointment-detail-service + .appointment-detail-service { border-top: 1px solid #f0edf4; }
.appointment-detail-service:first-child { padding-top: 2px; }
.appointment-detail-service:last-child { padding-bottom: 0; }
.appointment-detail-service-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.appointment-detail-service-row strong { color: #16151b; font-size: 14.5px; font-weight: 650; overflow-wrap: anywhere; }
.appointment-detail-service-row > b { flex: none; color: #16151b; font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.appointment-detail-service > time { color: #6b6878; font-size: 12.5px; font-weight: 550; font-variant-numeric: tabular-nums; }
.appointment-dialog-body .appointment-detail-addons {
  gap: 4px;
  margin: 6px 0 0;
  padding: 0 0 0 12px;
  border-left: 2px solid #eee9f8;
  font-size: 13px;
  color: #3a3542;
}
.appointment-dialog-body .appointment-detail-addons li { align-items: baseline; }
.appointment-dialog-body .appointment-detail-addons span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; overflow-wrap: anywhere; }
.appointment-dialog-body .appointment-detail-addons i { color: var(--bk-violet, #916be8); font-style: normal; font-weight: 700; }
.appointment-dialog-body .appointment-detail-addons small { color: #8a8394; font-size: 12px; }
.appointment-dialog-card .appointment-dialog-body .appointment-detail-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid #ece8f1;
  border-radius: 14px;
  background: #fff;
  /* Visible, so the scrolling body never squeezes the list to nothing. */
  overflow: visible;
}
.appointment-dialog-card .appointment-dialog-body .appointment-detail-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.appointment-dialog-card .appointment-dialog-body .appointment-detail-facts > div + div { border-top: 1px solid #f0edf4; }
.appointment-dialog-card .appointment-dialog-body .appointment-detail-facts dt { color: #6b6878; font-size: 13px; font-weight: 550; }
.appointment-dialog-card .appointment-dialog-body .appointment-detail-facts dd { margin: 0; color: #16151b; font-size: 13.5px; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .appointment-detail-person { padding: 12px; border-radius: 14px; }
  .appointment-detail-stylist { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; }
  .appointment-detail-stylist > img { width: 40px; height: 40px; }
  .appointment-detail-stylist > em { font-size: 0; gap: 0; }
  .appointment-detail-stylist > em .icon { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  button.appointment-detail-stylist,
  .appointment-detail-stylist > em .icon { transition: none; }
  button.appointment-detail-stylist:active { transform: none; }
}
.appointment-dialog-card .appointment-dialog-body > .booking-detail-code { margin-bottom: 0; }


/* Copy beside the booking code: the copy icon turns into a check mark, and
   back after three seconds (app.js renderBookingCodeCopyButton). */
.booking-detail-code:has(> .booking-code-copy) {
  justify-content: flex-start;
  gap: 8px;
}
.booking-detail-code:has(> .booking-code-copy) > strong { margin-left: auto; }
.booking-code-copy {
  position: relative;
  display: inline-grid;
  flex: none;
  width: 32px;
  height: 32px;
  place-items: center;
  margin: -6px -6px -6px 0;
  padding: 0;
  border: 0;
  border-radius: 9px;
  color: #7a7186;
  background: transparent;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.booking-code-copy:hover { color: #3f2f63; background: #f3f0f7; }
.booking-code-copy:focus-visible { outline: 2px solid #7057b2; outline-offset: 2px; }
.booking-code-copy-icon {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  transition: opacity 220ms ease, transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.booking-code-copy-icon .icon { width: 16px; height: 16px; }
.booking-code-copy-icon.is-done { color: #2f8a63; opacity: 0; transform: scale(0.4) rotate(-30deg); }
.booking-code-copy.is-copied { color: #2f8a63; background: #eaf6f0; }
.booking-code-copy.is-copied .booking-code-copy-icon.is-copy { opacity: 0; transform: scale(0.4) rotate(30deg); }
.booking-code-copy.is-copied .booking-code-copy-icon.is-done { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .booking-code-copy-icon { transition: opacity 120ms linear; transform: none !important; }
}

/* Appointment details: one scrolling body. Rows keep their content's height,
   so a card that clips its own overflow (the deposit card) is never squeezed
   to fit; the body scrolls instead. */
.appointment-dialog-body:has(> .booking-detail-code) { grid-auto-rows: max-content; }

/* Report sits at the left of the footer, Cancel and Modify at the right. */
.appointment-dialog-actions > .appointment-dialog-report { margin-right: auto; }
.appointment-dialog-actions > .appointment-dialog-report .rl-safety-action { min-height: 40px; padding-inline: 8px; margin-left: -8px; color: #6b6878; }
@media (max-width: 520px) {
  .appointment-dialog-actions > .appointment-dialog-report .rl-safety-action {
    width: 44px;
    min-width: 44px;
    min-height: 48px;
    justify-content: center;
    margin-left: 0;
    border: 1px solid #e3dfe8;
    border-radius: 13px;
    text-decoration: none;
  }
  .appointment-dialog-actions > .appointment-dialog-report .rl-safety-action > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .appointment-dialog-actions > .appointment-dialog-report { flex: none; }
}

/* ---- Choosing another day: the highlight glides to it ---------------------
   A pill with the chosen day's fill slides under the numbers (app.js,
   glideBookingDayHighlight); the day shows its own fill once it arrives. */
.booking-month-grid.is-gliding > .booking-month-day { position: relative; z-index: 1; }
.booking-day-glide { position: absolute; z-index: 0; pointer-events: none; will-change: transform; }
html body.booking-workspace-mode .booking-month-day.active.is-glide-target {
  border-color: transparent;
  background: transparent !important;
  box-shadow: none !important;
}
html body.booking-workspace-mode .booking-month-day.active.is-glide-target,
html body.booking-workspace-mode .booking-month-day.active.is-glide-target span { color: var(--bk-ink, #2f2c37) !important; transition: color 0.12s ease 0.16s; }
html body.booking-site .booking-month-day.active.is-glide-target,
html body.booking-site .booking-month-day.active.is-glide-target span { color: var(--site-fg) !important; }