/* ==========================================================================
   Cardinal Star Healing — booking flow (assets/css/book.css)
   --------------------------------------------------------------------------
   Loaded on /book, /book/{slug}, /booking/{token} and /pay/{token} after
   site.css. Every color, radius and font comes from the theme variables
   printed by includes/theme.php, so the Theme Studio restyles the calendar
   and the confirmation along with the rest of the site.

   Contents
     1. Stage and card
     2. /book profile page
     3. /book/{slug}: side panel + main panel, steps
     4. Calendar (keyboard-accessible grid), time-zone picker
     5. Times column + "Next"
     6. Details form
     7. /booking/{token} manage + confirmation, /pay/{token}
     8. Motion, breakpoints
   ========================================================================== */

/* 1. Stage and card
   -------------------------------------------------------------------------- */
.book-stage { position: relative; background: var(--bg); overflow: hidden; }
.book-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .9;
  background:
    radial-gradient(42rem 22rem at 8% -4%, rgba(var(--primary-rgb), .10), transparent 70%),
    radial-gradient(34rem 20rem at 96% 100%, rgba(var(--accent-rgb), .07), transparent 70%);
}
[data-decor="none"] .book-stage::before { display: none; }
.book-stage > .wrap { position: relative; }
.wrap-book { max-width: 66rem; }
.wrap-book-narrow { max-width: 46rem; }
.book-card {
  position: relative; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden;
  scroll-margin-top: calc(var(--head-h) + 1rem);
}
.book-step-title, .times-title, #form-error { scroll-margin-top: calc(var(--head-h) + 1.5rem); }
[data-shadow="lifted"] .book-card { box-shadow: var(--shadow-hover); }
[data-shadow="none"] .book-card { box-shadow: none; }
.avatar-fallback { display: inline-flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--accent); }
.avatar-fallback .star { width: 45%; height: 45%; }
.book-owner {
  margin: 0 0 .25rem; font-family: var(--font-body); font-size: .76rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}

/* 2. /book — the profile page
   -------------------------------------------------------------------------- */
.book-profile-band { position: relative; height: 10rem; background-size: cover; background-position: center; background-color: var(--dark); }
.book-profile-band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--dark-rgb), .12) 0%, rgba(var(--dark-rgb), .55) 100%);
}
.book-profile-stars { position: absolute; inset: 0; pointer-events: none; z-index: 1; display: none; }
.book-profile-stars .star { position: absolute; color: #fff; opacity: .55; width: .9rem; height: .9rem; }
.book-profile-stars .star:nth-child(1) { left: 9%; top: 28%; }
.book-profile-stars .star:nth-child(2) { right: 12%; top: 22%; width: 1.3rem; height: 1.3rem; opacity: .4; }
.book-profile-stars .star:nth-child(3) { left: 24%; bottom: 22%; width: .55rem; height: .55rem; }
[data-decor="stars"] .book-profile-stars { display: block; }
.book-profile-in { padding: 0 clamp(1.25rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem); }
.book-profile-head { position: relative; z-index: 2; text-align: center; margin-top: -4rem; }
.book-profile-head .book-avatar { margin: 0 auto 1rem; border-width: 4px; }
.book-profile-title { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem); margin: 0 0 .75rem; }
.book-intro { font-family: var(--font-display); font-style: italic; font-size: 1.08rem; color: var(--muted); max-width: 36rem; margin: 0 auto; }
.book-group { margin-top: 2.25rem; }
.book-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; margin: 0 0 .8rem; }
.book-group-title {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0;
  font-family: var(--font-body); font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}
.book-group-title .star { width: .9em; height: .9em; }
.book-group-text { margin: 0; font-size: .92rem; color: var(--muted); }
.book-list { border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; background: var(--surface); }
.book-list li + li { border-top: 1px solid var(--line); }
.book-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  padding: 1.05rem clamp(1rem, 3vw, 1.5rem); color: inherit; text-decoration: none;
  transition: background .18s var(--ease), padding-left .18s var(--ease);
}
.book-row:hover, .book-row:focus-visible { background: var(--primary-tint); color: inherit; }
.book-row:focus-visible { outline-offset: -3px; }
.book-row-dot { width: .85rem; height: .85rem; box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .12); }
.book-row-body { min-width: 0; }
.book-row-name { display: block; font-family: var(--font-display); font-size: 1.12rem; font-weight: var(--heading-weight); line-height: 1.3; }
.book-row-tagline { display: block; font-family: var(--font-display); font-style: italic; font-size: .95rem; color: var(--muted); margin-top: .1rem; }
.book-row-meta { display: block; margin-top: .3rem; font-size: .86rem; font-weight: 600; color: var(--primary-strong); letter-spacing: .01em; }
.book-row-chevron { color: var(--muted-2); transition: transform .2s var(--ease), color .2s var(--ease); }
.book-row:hover .book-row-chevron { transform: translateX(4px); color: var(--primary-strong); }
.book-profile-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; justify-content: center; margin: 1.75rem 0 0; text-align: center; }
.book-profile-foot .icon { color: var(--primary); }

/* 3. /book/{slug} — two panels
   -------------------------------------------------------------------------- */
.book-flow { display: grid; grid-template-columns: minmax(0, 1fr); }
.book-side { position: relative; background: var(--surface-2); border-bottom: 1px solid var(--line); padding: clamp(1.25rem, 3vw, 2rem); min-width: 0; }
.book-side::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--card-accent, var(--primary)); }
.book-side-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.book-back, .book-back-btn {
  display: inline-flex; align-items: center; gap: .35rem; padding: .2rem 0; border: 0; background: none;
  color: var(--muted); font-size: .9rem; font-weight: 600; text-decoration: none; cursor: pointer; border-radius: 4px;
  transition: color .15s var(--ease), transform .15s var(--ease);
}
.book-back:hover, .book-back-btn:hover { color: var(--primary-strong); }
.book-back:hover .icon, .book-back-btn:hover .icon { transform: translateX(-3px); }
.book-back .icon, .book-back-btn .icon { transition: transform .15s var(--ease); }
.book-logo { display: block; height: 2.6rem; width: auto; max-width: 9rem; object-fit: contain; }
.book-logo-mark { display: inline-flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary-soft); }
.book-logo-mark .star { width: 1.3rem; height: 1.3rem; }
.book-side-body .book-avatar { margin: 0 0 .85rem; }
.book-service-name { font-size: clamp(1.45rem, 1.25rem + .8vw, 1.85rem); line-height: 1.2; margin: .15rem 0 .5rem; }
.book-tagline { font-family: var(--font-display); font-style: italic; color: var(--muted); margin: 0 0 1rem; }
.book-meta { margin: 0 0 1.25rem; font-size: .95rem; }
.book-meta li { align-items: flex-start; }
.book-meta .icon { color: var(--primary); margin-top: .12rem; }
.book-meta-price span { font-weight: 700; }
.book-meta-when span, .book-meta-tz span { font-weight: 600; }
html.js [data-step="1"] .book-meta-when, html.js [data-step="1"] .book-meta-tz { display: none; }
.book-desc { font-size: .95rem; color: var(--muted); }
.book-desc p { margin-bottom: .75em; }
.book-delivery-note {
  display: flex; align-items: flex-start; gap: .5rem; margin: 0 0 1rem; padding: .7rem .9rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-input); font-size: .88rem; color: var(--muted);
}
.book-delivery-note .icon { color: var(--primary); margin-top: .15rem; }
.book-policy { margin-top: .5rem; }
.book-policy summary { font-size: .95rem; padding-top: .85rem; padding-bottom: .85rem; }
.book-policy .accordion-body { color: var(--muted); }
.book-moving {
  display: flex; gap: .75rem; align-items: flex-start; margin: 0 0 .5rem; padding: .9rem 1rem;
  background: var(--primary-tint); border: 1px solid var(--primary-soft); border-radius: var(--radius-input);
}
.book-moving > .star { width: 1.1rem; height: 1.1rem; margin-top: .2rem; }
.book-moving-when { font-family: var(--font-display); font-size: 1.05rem; margin: .1rem 0 .5rem; }

.book-main { position: relative; padding: clamp(1.25rem, 3vw, 2.25rem); min-width: 0; }
.book-step { position: relative; }
.book-step-head { margin-bottom: .25rem; }
.book-step-eyebrow {
  margin: 0 0 .35rem; font-family: var(--font-body); font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--primary-strong);
}
.book-step-title { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.7rem); margin: 0 0 1.25rem; outline: none; }
.book-step-title:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.book-step-head .book-back-btn { margin-bottom: .9rem; }
html.js[data-motion="on"] .book-step.is-entering { animation: book-step-in .4s var(--ease) both; }
@keyframes book-step-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* 4. Calendar and time zone
   -------------------------------------------------------------------------- */
.pick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.pick-cal { min-width: 0; }
.cal { max-width: 24rem; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.cal-title { margin: 0; font-size: 1.15rem; font-weight: 600; text-align: center; }
.cal-nav {
  display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0;
  border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease);
}
.cal-nav:hover:not([disabled]) { background: var(--primary-soft); border-color: var(--primary-soft); color: var(--primary-strong); transform: translateY(-1px); }
.cal-nav[disabled] { opacity: .32; cursor: default; }
.cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem; }
.cal-dow span { text-align: center; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: .4rem 0 .55rem; }
.cal-dow abbr { text-decoration: none; }
.cal-body { display: grid; gap: .25rem; min-height: 15.75rem; align-content: start; transition: opacity .2s var(--ease); }
.cal-body.is-loading { opacity: .55; }
.day {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 100%; max-width: 3rem; aspect-ratio: 1;
  margin: 0 auto; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted-2);
  font-family: var(--font-body); font-size: .98rem; font-weight: 500; line-height: 1; cursor: default;
  transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
@supports not (aspect-ratio: 1) { .day { height: 2.75rem; } }
.day.is-blank { visibility: hidden; }
.day.is-open { background: var(--primary-soft); color: var(--primary-strong); font-weight: 700; cursor: pointer; }
.day.is-open:hover { background: var(--primary); color: var(--on-primary); transform: scale(1.06); }
.day.is-open:hover .star { color: var(--on-primary); }
.day.is-open .day-num { transform: translateY(-14%); }
.day .star { position: absolute; left: 50%; bottom: 13%; width: .42rem; height: .42rem; margin-left: -.21rem; color: var(--accent); }
.day.is-today { box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.day.is-today.is-open { box-shadow: inset 0 0 0 1.5px rgba(var(--primary-rgb), .7); }
.day.is-selected, .day.is-selected:hover {
  background: var(--primary); color: var(--on-primary); font-weight: 700; transform: none;
  box-shadow: 0 8px 18px rgba(var(--primary-rgb), .38);
}
.day.is-selected .star { color: var(--on-primary); }
.day.is-current { outline: 2px dashed var(--secondary); outline-offset: -3px; }
.day:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; z-index: 1; }
.cal-status { min-height: 1.4rem; margin: .7rem 0 0; font-size: .9rem; color: var(--muted); display: flex; align-items: center; gap: .5rem; }
.cal-status:empty { margin-top: 0; min-height: 0; }
.cal-status.is-error { color: var(--danger); font-weight: 500; }
.cal-status.is-loading::before {
  content: ""; width: .9rem; height: .9rem; flex: none; border-radius: 50%;
  border: 2px solid rgba(var(--primary-rgb), .3); border-top-color: var(--primary); animation: book-spin .8s linear infinite;
}
@keyframes book-spin { to { transform: rotate(360deg); } }
.cal-legend { display: flex; align-items: center; gap: .45rem; margin: .5rem 0 0; font-size: .85rem; color: var(--muted); }
.cal-legend .star { width: .6rem; height: .6rem; }

.tz { position: relative; margin-top: 1.25rem; }
.tz-label { display: block; margin: 0 0 .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tz-btn {
  display: inline-flex; align-items: center; gap: .5rem; max-width: 100%; min-height: 2.6rem; padding: .4rem .85rem .4rem .8rem;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-size: .92rem; font-weight: 500; text-align: left; transition: border-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.tz-btn:hover { border-color: var(--primary); color: var(--primary-strong); }
.tz-btn[aria-expanded="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .18); }
.tz-btn .icon-globe { color: var(--primary); }
.tz-current { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tz-caret { color: var(--muted); transition: transform .2s var(--ease); }
.tz-btn[aria-expanded="true"] .tz-caret { transform: rotate(180deg); }
.tz-pop {
  position: absolute; z-index: 40; left: 0; top: calc(100% + .4rem); width: min(23rem, calc(100vw - 2 * var(--gutter)));
  padding: .6rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-hover);
}
html.js[data-motion="on"] .tz-pop:not([hidden]) { animation: book-pop .18s var(--ease); }
@keyframes book-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.tz-search { margin-bottom: .4rem; }
.tz-list { list-style: none; margin: 0; padding: 0; max-height: 17rem; overflow-y: auto; overscroll-behavior: contain; }
.tz-group { padding: .65rem .6rem .25rem; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tz-opt {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .5rem .65rem;
  border-radius: var(--radius-input); font-size: .92rem; cursor: pointer; color: var(--ink);
}
.tz-opt.is-active { background: var(--primary-soft); color: var(--primary-strong); }
.tz-opt[aria-selected="true"] { font-weight: 700; }
.tz-opt[aria-selected="true"] .tz-name::before { content: "\2726\00a0"; color: var(--accent); font-size: .8em; }
.tz-name { min-width: 0; }
.tz-now { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; font-size: .86rem; }
.tz-opt.is-active .tz-now { color: inherit; }
.tz-empty { padding: .75rem .65rem; font-size: .9rem; color: var(--muted); }

/* 5. Times and the "Next" hand-off
   -------------------------------------------------------------------------- */
.pick-times { min-width: 0; }
.times-title { margin: 0 0 .75rem; font-family: var(--font-body); font-size: .98rem; font-weight: 600; outline: none; }
.times-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.time-row { display: flex; gap: .4rem; min-width: 0; }
.time {
  flex: 1 1 auto; min-width: 0; min-height: 2.9rem; padding: .5rem .75rem; border-radius: var(--radius-input);
  border: 1.5px solid rgba(var(--primary-rgb), .55); background: var(--surface); color: var(--primary-strong);
  font-family: var(--font-body); font-size: .98rem; font-weight: 700; letter-spacing: .01em; cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}
.time:hover { border-color: var(--primary); background: var(--primary-tint); transform: translateY(-1px); }
.time:active { transform: none; }
.time-row.is-picked .time, .time-row.is-picked .time:hover { background: var(--dark); border-color: var(--dark); color: var(--on-dark); transform: none; }
.time-next { flex: 1 1 auto; min-height: 2.9rem; padding: .5rem .75rem; border-radius: var(--radius-input); font-size: .95rem; }
html.js[data-motion="on"] .time-next:not([hidden]) { animation: book-next-in .22s var(--ease) both; }
@keyframes book-next-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

/* 6. Details form (step 2)
   -------------------------------------------------------------------------- */
.book-chosen {
  display: flex; gap: .75rem; align-items: flex-start; margin: 0 0 1.5rem; padding: .9rem 1rem;
  background: var(--primary-tint); border: 1px solid var(--primary-soft); border-radius: var(--radius-input);
}
.book-chosen > .icon { flex: none; color: var(--primary); margin-top: .15rem; }
.book-chosen-when { display: block; font-family: var(--font-display); font-size: 1.08rem; font-weight: var(--heading-weight); line-height: 1.35; }
.book-chosen-tz { display: block; margin-top: .15rem; }
.book-form { max-width: 36rem; }
.book-form .field { margin-bottom: 1.1rem; }
.book-form textarea.input { min-height: 7rem; }
.book-price-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .25rem 0 1.25rem; padding: .85rem 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.book-price-label { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.book-consent .check { font-size: .95rem; }
.book-consent .check a { white-space: nowrap; }
.book-move-note { margin: 0 0 1.25rem; color: var(--muted); }
.book-form-error { margin: 0 0 1rem; }
.book-actions { margin-top: 1.5rem; }
.book-submit { width: 100%; }
.book-fine { display: flex; gap: .4rem; align-items: flex-start; margin: .9rem 0 0; }
.book-fine .icon { flex: none; margin-top: .2rem; color: var(--primary); }
.btn.is-busy { opacity: .8; }
.btn.is-busy::before {
  content: ""; width: 1em; height: 1em; flex: none; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: book-spin .7s linear infinite;
}
html:not(.js) .book-step[hidden] { display: none; }

/* 7. Manage page, confirmation, payment
   -------------------------------------------------------------------------- */
.booking-card { padding: clamp(1.5rem, 4vw, 3rem); }
.booking-head { position: relative; text-align: center; margin: 0 0 2rem; }
.booking-head .eyebrow { justify-content: center; }
.booking-head h1 { font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.75rem); margin-bottom: .5rem; }
.booking-head .lead { max-width: 34rem; margin: 0 auto; }
.booking-burst { display: flex; justify-content: center; align-items: flex-end; gap: .6rem; margin: 0 0 1.1rem; }
.booking-burst .star { width: 2.1rem; height: 2.1rem; }
.booking-burst .star:nth-child(1), .booking-burst .star:nth-child(3) { width: .95rem; height: .95rem; opacity: .7; }
html.js[data-motion="on"] .booking-burst .star { animation: book-burst .9s var(--ease) both; }
html.js[data-motion="on"] .booking-burst .star:nth-child(1) { animation-delay: .15s; }
html.js[data-motion="on"] .booking-burst .star:nth-child(3) { animation-delay: .3s; }
@keyframes book-burst {
  0% { transform: scale(.2) rotate(-40deg); opacity: 0; }
  60% { transform: scale(1.25) rotate(8deg); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.booking-hold {
  display: inline-flex; align-items: center; gap: .55rem; margin: 1.1rem auto 0; padding: .55rem 1.1rem;
  background: var(--warn-soft); color: var(--warn); border-radius: var(--radius); font-size: .92rem; font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.booking-hold.is-low { background: var(--danger-soft); color: var(--danger); }
.booking-hold.is-ended { background: var(--surface-2); color: var(--muted); }
.booking-dl { display: grid; margin: 0 0 1.75rem; border-top: 1px solid var(--line); }
.booking-dl > div { display: grid; grid-template-columns: minmax(5.5rem, 7.5rem) minmax(0, 1fr); gap: .5rem 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.booking-dl dt { padding-top: .15rem; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.booking-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.booking-when { font-family: var(--font-display); font-size: 1.1rem; font-weight: var(--heading-weight); }
.booking-dl-answers { margin: 0; }
.booking-dl-answers dt { text-transform: none; letter-spacing: 0; font-size: .85rem; }
.booking-answers { margin: -1rem 0 1.75rem; }
.booking-answers summary { font-size: .95rem; }
.booking-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 1.75rem; }
.booking-next { position: relative; overflow: hidden; margin: 0 0 1.75rem; padding: clamp(1.25rem, 3vw, 1.75rem); background: var(--tint); color: var(--on-tint); border-radius: var(--radius-card); }
.booking-next::after {
  content: ""; position: absolute; right: -2rem; top: -2rem; width: 9rem; height: 9rem; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--primary-rgb), .16), transparent 70%);
}
.booking-next h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.3rem; margin: 0 0 .6rem; }
.booking-next h2 .star { width: .9em; height: .9em; }
.booking-next p { position: relative; }
.booking-next .muted { color: var(--on-tint); opacity: .75; }
.booking-next a { color: inherit; }
.booking-change { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.booking-change h2 { font-size: 1.3rem; margin-bottom: .5rem; }
.booking-change .booking-actions { margin-bottom: 1rem; }
.booking-cancel { margin-top: .5rem; }
.booking-cancel summary { font-size: .95rem; font-weight: 600; color: var(--muted); }
.booking-cancel summary:hover { color: var(--danger); }
.booking-cancel-form { max-width: 28rem; }
.booking-ref { margin: 1.75rem 0 0; text-align: center; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.booking-ref a { text-transform: none; letter-spacing: 0; }
.booking-foot { text-align: center; margin: 1.25rem 0 0; }
.is-booking-cancelled .booking-card { border-top: 4px solid var(--line-strong); }
.is-booking-live .booking-card { border-top: 4px solid var(--primary); }
.is-booking-pending .booking-card, .is-booking-expired .booking-card, .is-booking-paid_conflict .booking-card, .is-booking-pay .booking-card { border-top: 4px solid var(--secondary); }

/* One column inside the 46rem card: summary first, then the button. Two columns
   left the button narrower than its own label at desktop widths. */
.pay-grid { display: grid; gap: 1.5rem; align-items: start; margin: 0 0 .5rem; }
.pay-summary { padding: clamp(1.1rem, 3vw, 1.5rem); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-card); }
.pay-summary-title { font-size: 1.1rem; margin: 0 0 .75rem; }
.pay-dl { margin-bottom: 0; border-top: 0; }
.pay-dl > div { grid-template-columns: minmax(5.5rem, 7rem) minmax(0, 1fr); padding: .7rem 0; }
.pay-dl dd { overflow-wrap: break-word; }
.pay-dl > div:last-child { border-bottom: 0; }
.pay-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: .75rem; padding-top: 1rem; border-top: 2px solid var(--line-strong); }
.pay-total-label { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pay-amount { font-family: var(--font-display); font-size: 2rem; font-weight: var(--heading-weight); line-height: 1; }
.pay-amount small { font-family: var(--font-body); font-size: .8rem; font-weight: 700; color: var(--muted); letter-spacing: .08em; }
.pay-action { display: flex; flex-direction: column; gap: 1rem; }
.pay-button { white-space: normal; padding-left: 1.25rem; padding-right: 1.25rem; }
.pay-button .icon-lock { flex: none; width: 1.1em; height: 1.1em; }
.pay-secure { display: flex; align-items: flex-start; justify-content: center; gap: .4rem; margin: .8rem 0 0; font-size: .85rem; color: var(--muted); text-align: left; }
.pay-secure .icon { flex: none; color: var(--success); margin-top: .15rem; }
.pay-dev { text-align: center; }
.pay-fine { margin: 0; }
.pay-error { margin-bottom: 1.5rem; }

/* 8. Motion and breakpoints
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .book-step.is-entering, .tz-pop, .time-next, .booking-burst .star { animation: none !important; }
  .day, .time, .book-row, .cal-nav { transition: none !important; }
  .day.is-open:hover { transform: none; }
}
html[data-motion="off"] .day.is-open:hover { transform: none; }

@media (min-width: 480px) {
  .times-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 640px) {
  .book-submit { width: auto; min-width: 16rem; }
  .booking-head h1 { margin-bottom: .6rem; }
}

@media (min-width: 760px) {
  .pay-grid { gap: 1.75rem; }
  .pay-secure { justify-content: center; }
}

@media (min-width: 900px) {
  .book-flow { grid-template-columns: minmax(17rem, 21rem) minmax(0, 1fr); align-items: stretch; }
  .book-side { border-bottom: 0; border-right: 1px solid var(--line); padding: clamp(1.5rem, 3vw, 2.25rem); }
  .book-side::before { height: 100%; width: 4px; right: auto; }
  .book-main { padding: clamp(1.75rem, 3vw, 2.5rem); }
  .pick.has-day { grid-template-columns: minmax(0, 1fr) 12.5rem; gap: 1.75rem; }
  .pick.has-day .cal { max-width: none; }
  .times-list { grid-template-columns: minmax(0, 1fr); max-height: 25.5rem; overflow-y: auto; overscroll-behavior: contain; padding: .15rem .25rem .15rem .15rem; scrollbar-width: thin; }
  .time-row { flex-direction: row; }
  html.js[data-motion="on"] .pick.has-day .pick-times { animation: book-times-in .4s var(--ease) both; }
  @keyframes book-times-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
  .book-profile-band { height: 11.5rem; }
}

@media (min-width: 1200px) {
  .book-flow { grid-template-columns: 22rem minmax(0, 1fr); }
  .pick.has-day { grid-template-columns: minmax(0, 1fr) 13.5rem; }
}

@media print {
  .book-stage::before, .booking-burst, .book-profile-stars { display: none !important; }
  .book-card { box-shadow: none; border-color: #ccc; }
  .booking-actions, .booking-change, .booking-foot, .pay-action { display: none !important; }
}