/* ============================================================
   SoulSync — Booking Flow UI  ·  extends soulsync.css tokens
   "Quiet Authority Editorial" applied to a focused funnel:
   a choose-a-coach grid, an editorial gold-hairline slot picker,
   and a gold-sealed confirmation. Self-contained (only needs
   soulsync.css) — mirrors the diagnostic's funnel chrome.
   ============================================================ */

/* ---------- funnel chrome (shared idiom with the diagnostic) ---------- */
.quiz { min-height: 100svh; display: flex; flex-direction: column; position: relative; z-index: 1; }

/* ---------- moving montage background (behind the booking funnel) ---------- */
.book-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.book-bg__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; }
/* pearl veil: lighter at the vertical edges, a touch stronger where the form sits, so motion reads but text stays crisp */
.book-bg__scrim { position: absolute; inset: 0; background:
  radial-gradient(120% 78% at 50% 34%, rgba(248,244,236,.60) 0%, rgba(248,244,236,.82) 58%, rgba(248,244,236,.94) 100%); }
@media (prefers-reduced-motion: reduce) { .book-bg__video { display: none; } }
.quiz__bar { position: fixed; inset: 0 0 auto 0; height: 3px; background: var(--line); z-index: 90; }
.quiz__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--teal)); transition: width .6s var(--ease); }

.quiz__top { display: flex; align-items: center; justify-content: space-between; padding: 20px var(--gutter); }
.quiz__top img { height: 38px; mix-blend-mode: multiply; }
.quiz__top a.exit { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.quiz__top a.exit:hover { color: var(--teal); }

.stage { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 32px var(--gutter) 96px; }
.step { width: 100%; opacity: 0; transform: translateY(18px); animation: stepIn .55s var(--ease) forwards; }
@keyframes stepIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .step { animation: none; opacity: 1; transform: none; } }

/* ---------- step header ---------- */
.bk-head { max-width: 62ch; margin: 6px auto 30px; text-align: center; }
.bk-head .eyebrow { justify-content: center; margin-bottom: 16px; }
.bk-head h2 { margin-bottom: .3em; }
.bk-head p { margin: 0 auto; max-width: 52ch; }
.bk-back {
  display: inline-flex; align-items: center; gap: .5em; background: none; border: 0; cursor: pointer;
  font-family: var(--font-body); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); padding: 8px 0; transition: color .25s var(--ease);
}
.bk-back:hover { color: var(--teal); }
.bk-back .arw { transition: transform .3s var(--ease); }
.bk-back:hover .arw { transform: translateX(-4px); }

/* ============ STEP 1 — choose a coach ============ */
.bk-pick { max-width: 1060px; margin-inline: auto; }

/* "No preference" — the featured, wide first choice */
.bk-any {
  display: flex; align-items: center; gap: clamp(18px, 3vw, 30px);
  width: 100%; text-align: left; cursor: pointer;
  padding: clamp(20px, 2.6vw, 28px) clamp(22px, 3vw, 34px);
  margin-bottom: clamp(22px, 3vw, 32px);
  background: radial-gradient(130% 160% at 0% 0%, var(--teal-deep), var(--onyx) 88%);
  border: 1px solid var(--teal-deep); border-radius: 5px; color: var(--pearl);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.bk-any:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -26px rgba(10,61,68,.7); }
.bk-any:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.bk-any__mark {
  flex: none; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--line-gold);
  font-family: var(--font-display); font-style: italic; font-size: 1.9rem; color: var(--gold);
}
.bk-any__t { flex: 1; }
.bk-any__t .k { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--pearl); line-height: 1.1; }
.bk-any__t .k .ital { color: var(--gold); }
.bk-any__t p { color: rgba(248,244,236,.72); font-size: .94rem; margin-top: 4px; max-width: 52ch; }
.bk-any__go { flex: none; font-size: 1.4rem; color: var(--gold); transition: transform .3s var(--ease); }
.bk-any:hover .bk-any__go { transform: translateX(5px); }

.bk-or { display: flex; align-items: center; gap: 16px; margin: 4px 0 24px; }
.bk-or::before, .bk-or::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.bk-or span { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint); }

/* the coach grid — roster portraits, made selectable */
.bk-coaches { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 20px); }
.bk-coach {
  position: relative; text-align: left; cursor: pointer; padding: 0;
  background: linear-gradient(158deg, #FFFEFB, var(--pearl-2) 72%);
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.bk-coach:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -28px rgba(10,61,68,.5); border-color: var(--line-gold); }
.bk-coach:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bk-coach__img { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--pearl-deep); }
.bk-coach__img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.94); transition: transform .5s var(--ease); }
.bk-coach:hover .bk-coach__img img { transform: scale(1.05); }
.bk-coach__ph {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: radial-gradient(120% 120% at 50% 12%, var(--teal-light) 0%, var(--teal-deep) 78%);
  color: var(--gold); font-family: var(--font-display); font-style: italic;
  font-size: clamp(2.2rem, 4vw, 3rem);
}
.bk-coach__body { padding: 14px 16px 18px; flex: 1; display: flex; flex-direction: column; }
.bk-coach__n { font-family: var(--font-display); font-size: 1.18rem; color: var(--teal-deep); line-height: 1.05; }
.bk-coach__r { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); margin-top: 5px; }
.bk-coach__blurb { font-size: .84rem; line-height: 1.5; color: var(--ink-soft); margin-top: 10px; }
/* selected tick — gold ring + teal seal top-right */
.bk-coach__tick {
  position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--teal); color: var(--pearl); display: none; place-items: center; font-size: .8rem;
  box-shadow: 0 2px 8px rgba(10,61,68,.5);
}
.bk-coach.sel { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(16,90,101,.35), 0 22px 44px -28px rgba(10,61,68,.5); }
.bk-coach.sel .bk-coach__tick { display: grid; }

/* ============ STEP 2 — pick a slot ============ */
.bk-schedule { max-width: 760px; margin-inline: auto; }
.bk-coachbar {
  display: flex; align-items: center; gap: 16px; padding: 14px 18px; margin-bottom: 26px;
  background: var(--pearl-2); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 4px;
}
.bk-coachbar__av { flex: none; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: var(--pearl-deep); }
.bk-coachbar__av img { width: 100%; height: 100%; object-fit: cover; }
.bk-coachbar__av .bk-coach__ph { font-size: 1.3rem; }
.bk-coachbar__t .l { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.bk-coachbar__t .n { font-family: var(--font-display); font-size: 1.25rem; color: var(--teal-deep); line-height: 1.1; }
.bk-coachbar__t .n .ital { color: var(--gold-deep); }

.bk-flabel { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; margin-bottom: 12px; }

/* date strip — understated editorial pills */
.bk-dates { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 30px; scrollbar-width: thin; }
.bk-date {
  flex: none; cursor: pointer; text-align: center; min-width: 74px;
  padding: 12px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--pearl-2);
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.bk-date:hover { border-color: var(--line-gold); transform: translateY(-2px); }
.bk-date:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bk-date .dow { font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.bk-date .day { font-family: var(--font-display); font-size: 1.5rem; color: var(--teal-deep); line-height: 1.1; margin-top: 2px; }
.bk-date .mon { font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); }
.bk-date.sel { border-color: var(--teal); background: rgba(16,90,101,.06); }
.bk-date.sel .dow { color: var(--teal); }

/* slots — the memorable anchor: editorial gold-hairline rows that slide */
.bk-slots { display: grid; gap: 0; }
.bk-slot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; text-align: left;
  padding: 18px 4px; background: none; border: 0; border-top: 1px solid var(--line);
  cursor: pointer; color: var(--ink); font-family: var(--font-body);
  transition: padding .3s var(--ease), color .25s var(--ease);
}
.bk-slots .bk-slot:last-child { border-bottom: 1px solid var(--line); }
.bk-slot:hover { padding-left: 16px; color: var(--teal-deep); }
.bk-slot:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.bk-slot__time { font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: var(--teal-deep); }
.bk-slot__meta { margin-left: auto; font-size: .8rem; color: var(--ink-faint); letter-spacing: .04em; }
.bk-slot__go { font-size: 1.1rem; color: var(--gold); opacity: 0; transform: translateX(-6px); transition: all .3s var(--ease); }
.bk-slot:hover .bk-slot__go { opacity: 1; transform: none; }

.bk-empty { text-align: center; color: var(--ink-soft); padding: 40px 0; }
.bk-empty .ital { font-family: var(--font-display); font-style: italic; color: var(--gold-deep); font-size: 1.2rem; }

/* ============ STEP 3 — your details ============ */
.bk-form { max-width: 560px; margin-inline: auto; }
.bk-summary {
  display: grid; gap: 4px; text-align: center; margin-bottom: 26px; padding: 18px;
  background: var(--pearl-2); border: 1px solid var(--line); border-radius: 4px;
}
.bk-summary .when { font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 1.85rem); color: var(--teal-deep); }
.bk-summary .with { font-size: .9rem; color: var(--ink-soft); }
.bk-summary .with b { color: var(--teal); }

.fields { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; }
.field .opt-tag { color: var(--ink-faint); text-transform: none; letter-spacing: 0; font-size: .8em; }
.field input, .field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  padding: 13px 15px; border: 1px solid var(--line); border-radius: 3px; background: var(--pearl-2); width: 100%;
  transition: border-color .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 88px; line-height: 1.55; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--teal); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); font-family: var(--font-body); }
.ferr { color: #9a3324; font-size: .85rem; min-height: 1em; margin-top: 4px; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; }
.bk-form .btn { margin-top: 6px; width: 100%; justify-content: center; }
.bk-fnote { font-size: .8rem; color: var(--ink-faint); text-align: center; margin-top: 14px; }

/* ============ STEP 4 — confirmation ============ */
.bk-done { max-width: 600px; margin-inline: auto; text-align: center; }
.bk-seal {
  width: 66px; height: 66px; border-radius: 50%; margin: 6px auto 24px; display: grid; place-items: center;
  background: radial-gradient(120% 120% at 50% 12%, var(--teal-light), var(--teal-deep));
  color: var(--gold); font-size: 1.8rem; box-shadow: 0 14px 34px -16px rgba(10,61,68,.7);
  animation: sealIn .6s var(--ease) both;
}
@keyframes sealIn { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bk-seal { animation: none; } }
.bk-done h2 { margin-bottom: .3em; }
.bk-done > p { margin: 0 auto 26px; max-width: 46ch; }
.bk-ticket {
  text-align: left; background: var(--pearl-2); border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 4px; padding: clamp(22px, 3vw, 30px); margin-bottom: 24px;
}
.bk-ticket__row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--line); }
.bk-ticket__row:first-child { border-top: 0; }
.bk-ticket__row .l { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); padding-top: 3px; }
.bk-ticket__row .v { font-family: var(--font-display); font-size: 1.15rem; color: var(--teal-deep); text-align: right; }
.bk-ticket__row .v small { font-family: var(--font-body); font-size: .8rem; color: var(--ink-soft); display: block; }
.bk-next { font-size: .92rem; color: var(--ink-soft); background: rgba(16,90,101,.05); border: 1px solid var(--line); border-radius: 4px; padding: 16px 18px; margin-bottom: 26px; }
.bk-next b { color: var(--teal); }
.bk-done__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- loading ---------- */
.loading { text-align: center; padding: 60px 0; }
.loading .spin { width: 38px; height: 38px; border: 2px solid var(--line); border-top-color: var(--teal); border-radius: 50%; margin: 0 auto 22px; animation: spin 1s linear infinite; }
.loading p { color: var(--ink-soft); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- demo-mode note (mock availability) ---------- */
.bk-demo {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 auto 22px;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep);
  background: rgba(197,165,107,.12); border: 1px solid var(--line-gold); border-radius: 999px; padding: 6px 14px;
}
.bk-demo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* ---------- responsive ---------- */
@media (max-width: 900px) { .bk-coaches { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) {
  .bk-coaches { grid-template-columns: repeat(2, 1fr); }
  .bk-any { flex-wrap: wrap; }
  .bk-any__go { display: none; }
  .bk-ticket__row { flex-direction: column; gap: 2px; }
  .bk-ticket__row .v { text-align: left; }
}