/* ==========================================================================
   Mellbeing — Booking Drawer
   Sequenced flow: category → level → format → time → details → confirm.
   Kept off the register system by design (a transactional flow that should
   get out of its own way), but shares the site tokens.
   ========================================================================== */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(35, 41, 61, 0.45);
  backdrop-filter: blur(2px);
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }

.drawer-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(480px, 100%);
  background: var(--paper);
  z-index: 901;
  box-shadow: -20px 0 60px rgba(46,59,92,0.18);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
}
.drawer-panel.open { transform: translateX(0); }

/* Full-page mount (book.html direct nav) — same steps, no overlay chrome */
.drawer-panel.page-mode {
  position: static;
  width: 100%;
  height: auto;
  max-width: 560px;
  margin: 0 auto;
  transform: none;
  box-shadow: none;
  background: transparent;
}
.drawer-panel.page-mode .drawer-head,
.drawer-panel.page-mode .drawer-body,
.drawer-panel.page-mode .drawer-footer { padding-left: 0; padding-right: 0; }
.drawer-panel.page-mode .drawer-footer { background: transparent; }

/* ---- Head: [‹ Back]   Step X of Y   [✕] ----
   Three-track grid: the two side tracks are equal (1fr) so the centre
   track — the step indicator — stays optically centred no matter whether
   Back is showing or which side control is wider. */
.drawer-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.drawer-head .step-indicator {
  grid-column: 2;
  text-align: center;
  white-space: nowrap;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-muted);
}
.drawer-back {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px;
  border: none;
  border-radius: 999px;
  background: none;
  cursor: pointer;
  color: var(--navy);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  transition: background 0.2s ease;
}
.drawer-back:hover { background: var(--paper-dim); }
/* The chevron had no stroke colour, so it rendered invisible — leaving a
   ghost 16px slot that pushed "Back" to the right of its own hover pill. */
.drawer-back svg { width: 16px; height: 16px; stroke: currentColor; }
.drawer-back[hidden] { display: none; }

.drawer-close {
  grid-column: 3;
  justify-self: end;
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease;
}
.drawer-close:hover { background: var(--paper-dim); }
.drawer-close svg { width: 16px; height: 16px; stroke: var(--navy); }

.drawer-progress {
  height: 4px;
  background: var(--line);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.drawer-progress::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(var(--progress, 20%));
  background: linear-gradient(90deg, var(--lavender), var(--teal));
  transition: transform 0.35s ease;
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 24px 40px;
  scroll-padding-top: 48px; /* keep a keyboard-focused slot clear of the sticky day header */
}
/* Top padding lives on the step, not the scroll container: a scroll
   container's own padding-top offsets its sticky children, which left the
   day header on the time step pinning ~28px below the top edge. */
.drawer-step { display: none; padding-top: 28px; }
.drawer-step.active { display: block; animation: stepIn 0.3s ease; }
@keyframes stepIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.drawer-step h3 { margin-bottom: 6px; }
.drawer-step h3:focus { outline: none; }
.drawer-step .step-sub { font-size: var(--step--1); color: var(--ink-muted); margin-bottom: 24px; line-height: 1.5; }

/* ---- Category grid ---- */
.category-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.category-option {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  font-family: var(--font-body);
}
.category-option:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.category-option .cat-icon { margin-bottom: 10px; }
.category-option h4 { font-size: var(--step-0); margin-bottom: 3px; }
.category-option p { font-size: 0.8rem; margin: 0; color: var(--ink-muted); }

.category-option.listening-room {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--teal-tint), #fff 65%);
  border-color: var(--teal);
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}
.category-option.listening-room .cat-icon {
  background: linear-gradient(135deg, var(--teal), var(--lavender));
  flex-shrink: 0;
  margin-bottom: 0;
}
.category-option.listening-room .cat-icon svg { stroke: #fff; }
.category-option.listening-room .lr-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--badge-teal);
  color: var(--badge-teal-ink);
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 6px;
}
.category-option.listening-room h4 { font-size: var(--step-1); }
.category-option.listening-room p { font-size: 0.85rem; }

/* ---- Level of care (step 2) ---- */
.tier-cards { display: flex; flex-direction: column; gap: 10px; }
.tier-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 18px 16px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.tier-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); border-color: rgba(165,148,240,0.4); }
.tier-card.recommended { border-color: var(--lavender); background: var(--lavender-tint); padding-top: 22px; }
.tier-card-name { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); color: var(--navy); }
.tier-card-tagline { font-size: 0.85rem; color: var(--ink-muted); }
.tier-card-from { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--navy); margin-top: 6px; }
.tier-recommend {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--badge-lavender);
  color: var(--badge-lavender-ink);
  padding: 3px 10px;
  border-radius: 999px;
  align-self: flex-start;
}
.tier-card .tier-recommend { position: absolute; top: 0; left: 16px; transform: translateY(-50%); }

/* ---- Session length (step 3) ---- */
.format-list { display: flex; flex-direction: column; gap: 10px; }
.format-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.format-option:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); border-color: rgba(165,148,240,0.4); }
.format-option-main { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.format-option-name { font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); color: var(--navy); }
.format-option-meta { font-size: 0.8rem; color: var(--ink-muted); }
/* Distinct tag treatment so the nudge/saving doesn't blur into the meta line.
   "Most people start here" borrows the lavender "Most chosen" mark; the saving
   gets the teal (money / positive) note. */
.format-hint, .format-save {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.format-hint { background: var(--badge-lavender); color: var(--badge-lavender-ink); }
.format-save { background: var(--badge-teal); color: var(--badge-teal-ink); }
.format-option-price { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); color: var(--navy); flex-shrink: 0; }

/* ---- Time slots (step 4) ---- */
.slots-status { font-size: var(--step--1); color: var(--ink-muted); display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; }
.slots-status svg { width: 18px; height: 18px; flex-shrink: 0; }
.slots-status--error { color: var(--navy); font-weight: 600; }
.slots-status--error svg { stroke: var(--danger); }
.slots-fallback {
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 4px 0 0;
}
.slots-fallback a { color: var(--navy); font-weight: 600; white-space: nowrap; }

.slots-notice {
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--badge-lavender-ink);
  background: var(--badge-lavender);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin: 0 0 16px;
}
.slots-notice[hidden] { display: none; }

/* ---- Waitlist (shown when no times are open) ---- */
.waitlist-form .form-grid { gap: 14px; margin-bottom: 16px; }
.waitlist-lead { font-size: var(--step-0); color: var(--ink); line-height: 1.5; margin: 0 0 16px; }
.wl-opt { font-weight: 400; color: var(--ink-muted); }
.waitlist-prefs {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 0 0 14px;
}
.waitlist-prefs legend {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--navy);
  padding: 0 4px;
}
.waitlist-prefs label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--ink);
  margin: 8px 0 0;
}
.waitlist-prefs input { width: auto; margin: 0; }
.waitlist-fine {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 12px 0 0;
}
.waitlist-fine a { color: var(--navy); font-weight: 600; white-space: nowrap; }
.waitlist-done { text-align: center; padding: 12px 0; }
.waitlist-done p { line-height: 1.5; margin: 10px 0 0; }
.waitlist-done .confirm-icon { margin: 0 auto; }

/* Counsellor reassurance — pinned above the slot list so it reads before any
   scrolling, not stranded at the bottom of a long list. */
.slot-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 20px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--paper-dim);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ink);
}
.slot-note svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; stroke: var(--teal); }

/* Times as a wrapping grid — a fortnight of slots stays a short scroll, and
   the eye reads left-to-right within a day instead of down a tall column.
   Each day is its own block so its label can stick for exactly the span its
   own times occupy (a sticky grid item can't travel past its own row). */
.slot-list { display: flex; flex-direction: column; }
.slot-day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  align-items: start;
  padding-bottom: 22px;
}
.slot-day:last-child .slot-day-grid { padding-bottom: 0; }
.slot-option {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 10px;
  background: #fff;
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.slot-option:hover { border-color: var(--lavender); background: var(--lavender-tint); }
.slot-option.selected { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: var(--lavender-tint); }
.slot-time { font-weight: 600; color: var(--navy); font-size: 0.9rem; white-space: nowrap; }

/* Day header sticks to the top of the scroll area while its own times are on
   screen — the date a slot belongs to is never off-screen. Day blocks sit
   flush so one label hands off to the next with no gap; spacing lives in
   padding (opaque under the background), never margin (transparent, would
   show scroll content through). Negative inline margin bleeds the background
   to the drawer-body edges. */
.day-label {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 -24px;
  padding: 14px 24px 10px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-body);
}
.slot-day:first-child .day-label { padding-top: 8px; }
.drawer-panel.page-mode .day-label { margin-inline: 0; padding-inline: 0; }
.day-rel {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  background: var(--navy);
  padding: 3px 8px;
  border-radius: 999px;
}
.day-date { font-size: 0.92rem; font-weight: 600; color: var(--navy); }

/* ---- Details + payment (step 5) ---- */
.summary-card {
  background: var(--paper-dim);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-bottom: 22px;
}
.summary-row { display: flex; justify-content: space-between; gap: 16px; font-size: var(--step--1); padding: 5px 0; color: var(--ink); }
.summary-row span:first-child { color: var(--ink-muted); flex-shrink: 0; }
.summary-row span:last-child { text-align: right; }
.summary-row.total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; font-weight: 700; color: var(--navy); font-size: var(--step-0); }

.consent-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 18px 0 0;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.45;
  cursor: pointer;
}
.consent-row input {
  width: 18px; height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  accent-color: var(--navy);
}

.pay-reassure {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink-muted);
  margin: 16px 0 0;
}
.pay-reassure svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; stroke: var(--teal); }

.field-error {
  color: var(--danger);
  font-size: var(--step--1);
  font-weight: 600;
  margin: 14px 0 0;
}
.field-error[hidden] { display: none; }

.drawer-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  background: var(--paper);
}
.drawer-footer[hidden] { display: none; }

.btn-sm { padding: 10px 18px; font-size: var(--step--1); }

/* ---- Confirmation ---- */
.confirm-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lavender), var(--teal));
  display: flex; align-items: center; justify-content: center;
  margin: 8px auto 18px;
}
.confirm-icon svg { width: 30px; height: 30px; stroke: #fff; }
.confirm-icon.confirm-icon--muted { background: var(--navy-soft); }
.confirm-warm { font-family: var(--font-display); font-size: var(--step-1); color: var(--navy); margin: 0 auto 20px; max-width: 30ch; }
.confirm-recap {
  text-align: left;
  background: var(--paper-dim);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin: 0 0 18px;
}
.confirm-foot { font-size: 0.82rem; color: var(--ink-muted); margin: 0; line-height: 1.5; }

/* Payment loading state */
.pay-spinner {
  width: 20px; height: 20px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
  margin-right: 8px;
  vertical-align: -3px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Mobile — bottom sheet */
@media (max-width: 640px) {
  .drawer-panel:not(.page-mode) {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 90vh;
    border-radius: 22px 22px 0 0;
    transform: translateY(100%);
  }
  .drawer-panel.open:not(.page-mode) { transform: translateY(0); }
  .category-grid { grid-template-columns: 1fr; }
}