/* Glowing Foot Spa preview: the booking page (light mode). Load after tokens, shapes and page.css.
   Same steps and layout as her Setmore page, so nobody has to relearn it: service, then time, then details, with
   the summary on the right. In her style: square corners, Noto Sans, the crossbar cut on the button. */

/* v3.0: only the letters changed here. Its buttons and line height stay as they were, so nothing moves. */
.bookpage { --container: 1120px; --button-h: 52px; --cut: 16px; --fs-body: 16px; --fs-small: 15px; --lh-body: 1.62; min-height: 100svh; }

/* ---------------------------------------------------------------- header: white, the G in black (§5.1), "Call us" top right as on Setmore */
.bk-head { border-bottom: var(--line-hair) solid var(--line); }
.bk-head__bar { display: flex; align-items: center; gap: 16px; height: 64px; }
.bk-head .gf-lockup { margin-right: auto; text-decoration: none; }
.bk-head .gf-lockup img { height: 40px; }
.bk-head .gf-wordmark { display: none; font-size: 16px; }
.bk-call { display: inline-flex; align-items: center; gap: 8px; color: var(--text-strong); text-decoration: none; font-size: 16px; }
.bk-call .ic { width: 20px; height: 20px; color: var(--accent); }
.bk-call b { font-weight: var(--fw-regular); font-variant-numeric: tabular-nums lining-nums; }
.bk-call__label { display: none; color: var(--text-muted); }
.bk-call:hover b { color: var(--accent); }
@media (min-width: 640px) {
  .bk-head .gf-wordmark { display: inline; }
  .bk-call__label { display: inline; }
}

/* ---------------------------------------------------------------- back arrow, title, steps */
.bk { padding-block: 12px 72px; }
@media (max-width: 479px) { [data-panel="service"] { padding: 12px; } [data-panel="service"] .b-card__title { margin: 8px 8px 12px; } }
.bk-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; }
.bk-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: -12px;
  color: var(--text-strong);
}
.bk-title { flex: 1; min-width: 12em; font: var(--fw-strong) 20px / 1.2 var(--font); color: var(--text-strong); }
.bk-title:focus { outline: none; }
.bk-steps { display: flex; align-items: center; gap: 4px; width: 100%; }
.bk-steps li { display: flex; align-items: center; gap: 4px; flex: 1; }
.bk-steps li:last-child { flex: none; }
.bk-steps li:not(:last-child)::after { content: ""; flex: 1; height: var(--line-hair); background: var(--linen-edge); opacity: 0.5; transition: background-color 360ms var(--ease-calm), opacity 360ms var(--ease-calm); }
.bk-steps li.is-done:not(:last-child)::after { background: var(--accent); opacity: 1; }
.bk-steps button {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 0 6px 0 0; border: 0; background: none;
  font: var(--fw-strong) 14px / 1 var(--font);
  color: var(--text-muted); cursor: pointer;
  transition: color 280ms var(--ease-calm);
}
.bk-steps button:disabled { cursor: default; }
.bk-steps__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: var(--line-hair) solid var(--edge); background: var(--surface);
  font-size: 14px; letter-spacing: 0; color: var(--text-muted);
  transition: background-color 280ms var(--ease-calm), border-color 280ms var(--ease-calm), color 280ms var(--ease-calm);
}
.bk-steps button[aria-current="step"] { color: var(--text-strong); }
.bk-steps button[aria-current="step"] .bk-steps__n { border-color: var(--night); background: var(--night); color: var(--white); }
.bk-steps button.is-done { color: var(--accent); }
.bk-steps button.is-done .bk-steps__n { border-color: var(--accent); color: var(--accent); }
.bk-steps button.is-done:hover { color: var(--text-strong); }
@media (min-width: 1024px) {
  .bk { padding-block: 28px 96px; }
  .bk-top { flex-wrap: nowrap; margin-bottom: 20px; }
  .bk-steps { width: auto; flex: none; }
  .bk-steps li, .bk-steps li:last-child { flex: none; }
  .bk-steps li:not(:last-child)::after { flex: none; width: 28px; }
}
body[data-step="done"] .bk-top { display: none; }

/* ---------------------------------------------------------------- the layout: one main card, the side column on the right */
.bk-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.bk-main, .bk-side { min-width: 0; }
.bk-side { display: grid; gap: 16px; align-content: start; }
.b-card { padding: 20px; background: var(--surface); border: var(--line-hair) solid var(--line); }
.b-card .gf-btn--line { --bg: var(--surface); }   /* a line button on a card is white inside, not the page's linen */
.b-card__title { margin-bottom: 16px; font: var(--fw-strong) 18px / 1.3 var(--font); color: var(--text-strong); }
@media (min-width: 768px) { .b-card { padding: 28px; } }
@media (min-width: 1024px) {
  .bk-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: var(--gutter); }
  .bk-side { position: sticky; top: 24px; align-self: start; }
}
/* phones and tablets: the total sits in the bottom bar on the time step; the summary comes first on the details step */
@media (max-width: 1023px) {
  body[data-step="time"] .bk-side { display: none; }
  body[data-step="details"] .bk-side { order: -1; }
  body[data-step="details"] .biz { display: none; }
  body[data-step="time"] .bk { padding-bottom: 112px; }
}

/* ---------------------------------------------------------------- 1 service: rows like Setmore's; a row opens to show its lengths and prices */
.svc-list { display: grid; gap: 8px; }
.svc { border: var(--line-hair) solid var(--line); transition: border-color var(--dur-ui) var(--ease-calm); }
.svc:hover { border-color: var(--edge); }
.svc.is-open { border-color: var(--text-strong); }
.svc__head {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 24px; align-items: center; gap: 14px;
  width: 100%; padding: 14px; border: 0; background: none; text-align: left; cursor: pointer;
}
.svc__icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; background: var(--linen); color: var(--accent); }
.svc__text { display: grid; gap: 2px; }
.svc__name { font-size: 18px; font-weight: var(--fw-strong); line-height: 1.3; color: var(--text-strong); }
.svc__note { font-size: 15px; line-height: 1.4; color: var(--text); }
.svc__meta { margin-top: 2px; font-size: 15px; line-height: 1.4; color: var(--accent); font-variant-numeric: tabular-nums lining-nums; }
.svc__chev { color: var(--text-strong); transition: transform var(--dur-ui) var(--ease-calm); }
.svc.is-open .svc__chev { transform: rotate(90deg); }
/* the row opens smoothly: the drawer eases from nothing to its full height */
.svc__drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 340ms var(--ease-calm); }
.svc.is-open .svc__drawer { grid-template-rows: 1fr; }
.svc__clip { min-height: 0; overflow: hidden; }
.svc__lengths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 14px 14px; }
@media (min-width: 560px) { .svc__lengths { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.len {
  display: grid; gap: 2px; min-height: 64px; padding: 10px 12px;
  border: var(--line-hair) solid var(--edge); background: var(--surface);
  text-align: left; cursor: pointer;
  transition: border-color var(--dur-ui) var(--ease-calm), background-color var(--dur-ui) var(--ease-calm);
}
.len b { font-weight: var(--fw-strong); font-size: 15px; line-height: 1.25; color: var(--text-strong); white-space: nowrap; }
.len span { font-size: 15px; line-height: 1.25; color: var(--accent); font-variant-numeric: tabular-nums lining-nums; }
@media (max-width: 399px) { .len { padding-inline: 8px; } }   /* "120 min" stays inside its box on small phones */
.len:hover { border-color: var(--text-strong); background: var(--linen); }
.len:focus-visible { outline-offset: -3px; }
.len.is-sel { border-color: var(--night); background: var(--night); }
.len.is-sel b, .len.is-sel span { color: var(--white); }

/* ---------------------------------------------------------------- 2 time: the month calendar, then the times */
.tm { display: grid; gap: 24px; }
@media (min-width: 760px) { .tm { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; } }

.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal__month { font-size: 18px; color: var(--text-strong); }
.cal__month::first-letter { text-transform: uppercase; }
.cal__nav { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: none; color: var(--text-strong); cursor: pointer; }
.cal__nav:disabled { color: var(--linen-line); cursor: default; }
.cal__nav:hover:not(:disabled) { background: var(--linen); }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal__wd { padding: 6px 0 8px; text-align: center; font-size: 14px; color: var(--text-muted); }
.cal__day {
  aspect-ratio: 1; min-height: 40px; padding: 0; border: 0; background: none;
  font-size: 16px; color: var(--text-strong); font-variant-numeric: tabular-nums lining-nums;
  cursor: pointer; transition: background-color var(--dur-ui) var(--ease-calm);
}
.cal__day:hover:not(:disabled) { background: var(--linen); }
.cal__day:disabled { color: #B9B5AD; cursor: default; }
.cal__day.is-today { background: var(--linen); text-decoration: underline; text-underline-offset: 4px; }
.cal__day.is-sel, .cal__day.is-sel:hover { background: var(--night); color: var(--white); }

.slots-day { margin-bottom: 14px; font-size: 16px; font-weight: var(--fw-strong); color: var(--text-strong); }
.slots-day::first-letter { text-transform: uppercase; }
.slots-group + .slots-group { margin-top: 16px; }
.slots-group__t { margin-bottom: 8px; font: var(--fw-strong) 14px / 1 var(--font); color: var(--text-muted); }
.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.slot {
  min-height: 46px; padding: 0 4px;
  border: var(--line-hair) solid var(--edge); background: var(--surface);
  font-size: 15px; color: var(--text-strong); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
  cursor: pointer; transition: background-color var(--dur-ui) var(--ease-calm), border-color var(--dur-ui) var(--ease-calm);
}
.slot:hover { border-color: var(--text-strong); background: var(--linen); }
.slot.is-sel, .slot.is-sel:hover { border-color: var(--night); background: var(--night); color: var(--white); }
.slots-none { font-size: 15px; color: var(--text-muted); }

/* ---------------------------------------------------------------- 3 details */
.fields { display: grid; gap: 22px; max-width: 460px; }
.opt { text-transform: none; letter-spacing: 0; font-weight: var(--fw-regular); }
.field-hint { font-size: 15px; line-height: 1.4; color: var(--text-muted); }
.phone { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; }
.phone__cc { display: flex; align-items: center; justify-content: center; height: var(--field-h); border: var(--line-hair) solid var(--edge); background: var(--linen); color: var(--text); font-size: 17px; }
.phone input { width: 100%; min-width: 0; }
.gf-field input { width: 100%; }
.b-card [aria-invalid="true"] { border-color: var(--text-strong); }
.bk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; max-width: 460px; margin-top: 28px; }
.bk-confirm { flex: 1 1 220px; }
.bk-until { margin-top: 14px; }
.bk-note { margin-bottom: 16px; padding: 12px 16px; background: var(--linen); font-size: 15px; line-height: 1.4; color: var(--text-strong); }
.bk-confirm .ic { width: 20px; height: 20px; }
.policy { margin-top: 28px; padding: 16px; background: var(--linen); font-size: 15px; line-height: 1.5; color: var(--text); }
.policy__t { color: var(--text-strong); }

/* ---------------------------------------------------------------- booked */
.done__ic { width: 40px; height: 40px; margin-bottom: 16px; color: var(--accent); }
.done__title { margin-bottom: 20px; font-size: clamp(28px, 3vw, 36px); }
.done__list { margin-bottom: 20px; border-bottom: var(--line-hair) solid var(--line); }
.done__list > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: var(--line-hair) solid var(--line); }
.done__list dt { font-size: 15px; color: var(--text-muted); }
.done__list dd { font-size: 16px; line-height: 1.45; color: var(--text-strong); }
.done__dir { color: var(--accent); text-underline-offset: 4px; }
.done__change a { color: var(--text-strong); text-decoration-color: var(--accent); text-underline-offset: 4px; white-space: nowrap; }
.done__preview { margin-top: 16px; }
.done__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; margin-top: 28px; }

/* ---------------------------------------------------------------- side column */
.biz__name { font-size: 18px; font-weight: var(--fw-strong); line-height: 1.3; color: var(--text-strong); text-align: center; }
.biz__more { margin-top: 14px; }
.biz__status { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; color: var(--text-strong); }
.biz__status .ic { width: 18px; height: 18px; color: var(--accent); }
.biz__hours { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin-top: 14px; font-size: 15px; color: var(--text-muted); font-variant-numeric: tabular-nums lining-nums; }
.biz__hours .is-today { color: var(--text-strong); }
.biz__addr { margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--text-muted); text-align: center; }
.biz__more + .biz__addr { margin-top: 14px; padding-top: 14px; border-top: var(--line-hair) solid var(--line); }
body:not([data-step="service"]) .biz__more { display: none; }

.sum__title { margin-bottom: 14px; font-size: 17px; font-weight: var(--fw-strong); color: var(--text-strong); }
.sum__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px 12px; }
.sum__row + .sum__row { margin-top: 12px; padding-top: 12px; border-top: var(--line-hair) solid var(--line); }
.sum__right { display: flex; flex-direction: column; align-items: flex-end; }
.sum__name { font-size: 16px; line-height: 1.35; color: var(--text-strong); }
.sum__name::first-letter { text-transform: uppercase; }
.sum__sub { font-size: 15px; line-height: 1.4; color: var(--text-muted); }
.sum__price { font-size: 18px; font-weight: var(--fw-strong); line-height: 1.2; color: var(--text-strong); font-variant-numeric: tabular-nums lining-nums; }
.sum__edit {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 32px; padding: 0; border: 0; background: none;
  font-size: 14px; color: var(--accent); cursor: pointer;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-ui) var(--ease-calm), color var(--dur-ui) var(--ease-calm);
}
.sum__edit .ic { width: 15px; height: 15px; }
.sum__edit:hover { color: var(--text-strong); text-decoration-color: currentColor; }
.sum__cancel {
  width: 100%; margin-top: 12px; padding: 12px 0 0;
  border: 0; border-top: var(--line-hair) solid var(--line); background: none;
  font-size: 14px; color: var(--text-muted); text-align: left; cursor: pointer;
  transition: color var(--dur-ui) var(--ease-calm);
}
.sum__cancel:hover { color: var(--text-strong); }
body[data-step="details"] .sum__cancel { display: none; }      /* Cancel sits beside Confirm on this step */

/* ---------------------------------------------------------------- phones: the total at the bottom */
.bk-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  padding: 10px var(--margin) calc(10px + env(safe-area-inset-bottom));
  background: var(--white); border-top: var(--line-hair) solid var(--linen-edge);
  transform: translateY(110%);
  transition: transform 340ms var(--ease-calm);
}
.bk-bar.is-on { transform: none; }
.bk-bar__what { flex: 1; min-width: 0; }
.bk-bar__t { font-size: 15px; line-height: 1.3; color: var(--night); }
.bk-bar__s { font-size: 14px; line-height: 1.3; color: var(--stone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-bar__p { font-size: 20px; font-weight: var(--fw-strong); line-height: 1; color: var(--night); font-variant-numeric: tabular-nums lining-nums; }
.bk-bar__x { order: 3; min-height: 44px; padding: 0 0 0 14px; border: 0; border-left: var(--line-hair) solid var(--linen-line); background: none; font-size: 14px; color: var(--stone); cursor: pointer; }
@media (min-width: 1024px) { .bk-bar { display: none; } }

/* Cancel asks first */
.bk-dialog { width: min(440px, calc(100vw - 32px)); padding: 32px; border: var(--line-hair) solid var(--line); }
.bk-dialog::backdrop { background: rgba(12, 12, 13, 0.55); }
.bk-dialog__t { font: var(--fw-strong) 22px / 1.25 var(--font); color: var(--text-strong); }
.bk-dialog__b { margin-top: 10px; font-size: 16px; line-height: 1.5; color: var(--text); }
.bk-dialog__a { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 24px; }

.bk-noscript { margin-top: 16px; }

/* ---------------------------------------------------------------- motion: the booking glides from step to step
   The old step slips away, the new one arrives from the direction you're heading, the cards ease to their new size. */
.bk-main { view-transition-name: bk-main; }
.bk-side { view-transition-name: bk-side; }
.bk-top  { view-transition-name: bk-top; }
html.vt-step::view-transition-old(root) { display: none; }
html.vt-step::view-transition-new(root) { animation: none; }
html.vt-step::view-transition-group(*) { animation-duration: 340ms; animation-timing-function: var(--ease-calm); }
html.vt-step::view-transition-old(bk-main) { animation: 170ms ease-in both bk-out-left; }
html.vt-step::view-transition-new(bk-main) { animation: 340ms var(--ease-calm) 50ms both bk-in-right; }
html.vt-step[data-dir="back"]::view-transition-old(bk-main) { animation-name: bk-out-right; }
html.vt-step[data-dir="back"]::view-transition-new(bk-main) { animation-name: bk-in-left; }
@keyframes bk-out-left  { to   { opacity: 0; transform: translateX(-20px); } }
@keyframes bk-out-right { to   { opacity: 0; transform: translateX(20px); } }
@keyframes bk-in-right  { from { opacity: 0; transform: translateX(28px); } }
@keyframes bk-in-left   { from { opacity: 0; transform: translateX(-28px); } }

@keyframes bk-pop { from { transform: scale(0.84); } to { transform: none; } }
@keyframes bk-dialog-in { from { opacity: 0; transform: translateY(12px) scale(0.985); } }
@keyframes bk-dialog-out { to { opacity: 0; transform: translateY(6px); } }
@keyframes bk-draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: no-preference) {
  /* a press answers straight away */
  .len, .slot, .cal__day, .svc__head { transition-property: background-color, border-color, color, transform; transition-duration: var(--dur-ui), var(--dur-ui), var(--dur-ui), 110ms; transition-timing-function: var(--ease-calm); }
  .len:active, .slot:active, .cal__day:active:not(:disabled) { transform: scale(0.965); }
  .cal__day.is-sel { animation: bk-pop 240ms var(--ease-calm); }

  /* lengths and times arrive one after another, quickly */
  .svc.is-open .len { animation: gf-rise 320ms var(--ease-calm) both; animation-delay: calc(var(--n, 0) * 24ms + 70ms); }
  .slot, .slots-group__t { animation: gf-rise 300ms var(--ease-calm) both; animation-delay: calc(min(var(--n, 0), 16) * 14ms); }

  .sum__row[data-sum-when]:not([hidden]) { animation: gf-rise 320ms var(--ease-calm); }
  .gf-field__error:not([hidden]) { animation: gf-rise 240ms var(--ease-calm); }
  .field-hint:not([hidden]) { animation: gf-fade 240ms var(--ease-calm); }

  .bk-dialog[open] { animation: bk-dialog-in 260ms var(--ease-calm); }
  .bk-dialog[open]::backdrop { animation: gf-fade 260ms var(--ease-calm); }
  .bk-dialog.is-closing { animation: bk-dialog-out 160ms ease-in forwards; }
  .bk-dialog.is-closing::backdrop { opacity: 0; transition: opacity 160ms; }

  /* booked: the tick draws itself, the details follow */
  .done__ic { stroke-dasharray: 24; animation: bk-draw 560ms var(--ease-calm) 180ms both; }
  .done__title { animation: gf-rise 460ms var(--ease-calm) 120ms both; }
  .done__list > div { animation: gf-rise 420ms var(--ease-calm) both; }
  .done__list > div:nth-child(1) { animation-delay: 220ms; }
  .done__list > div:nth-child(2) { animation-delay: 270ms; }
  .done__list > div:nth-child(3) { animation-delay: 320ms; }
  .done__list > div:nth-child(4) { animation-delay: 370ms; }
  .done__list > div:nth-child(5) { animation-delay: 420ms; }
}