/* =========================================================
   LYFT — booking flow
   Layered on css/tokens.css + css/style.css. Reuses .field, .btn,
   .wrap, .section and the shared token palette.
   ========================================================= */

.bk-wrap{max-width:960px;margin:0 auto}

/* ---- step rail ---- */
.bk-steps{display:flex;gap:8px;list-style:none;padding:0;margin:0 0 38px;counter-reset:bk}
.bk-step{flex:1;min-width:0;position:relative;padding-top:16px;color:var(--muted-2);
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.12em;
  font-size:.72rem;font-weight:600;border-top:2px solid var(--line);transition:color .3s,border-color .3s}
.bk-step span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-step.now{color:var(--accent);border-top-color:var(--accent)}
.bk-step.done{color:var(--text);border-top-color:var(--line-2)}

/* ---- panels ---- */
.bk-panel[hidden]{display:none}
.bk-panel-title{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.1rem);
  line-height:1.1;margin:0 0 8px;outline:none}
.bk-panel-note{color:var(--muted);font-weight:300;margin-bottom:26px;max-width:60ch}

.bk-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px;align-items:center}
.bk-actions .btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}

/* ---- step 1: service cards ---- */
.bk-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bk-svc{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;
  padding:22px 20px;border:1px solid var(--line);border-radius:16px;background:var(--surface);
  color:var(--text);cursor:pointer;transition:border-color .3s,background .3s,transform .3s var(--ease)}
.bk-svc:hover{border-color:var(--line-2);transform:translateY(-3px)}
.bk-svc:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.bk-svc.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
/* the free session is the point of the page, so it gets the gold edge */
.bk-svc--featured{border-color:color-mix(in srgb,var(--accent) 42%,transparent);
  background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.bk-svc--featured.sel{border-color:var(--accent)}
.bk-svc-badge{position:absolute;top:14px;right:14px;padding:5px 11px;border-radius:100px;
  background:var(--accent);color:#241708;font-family:var(--font-display);font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;font-size:.6rem;line-height:1}
.bk-svc{position:relative}
.bk-svc--featured .bk-svc-name{padding-right:58px}

.bk-svc-floor{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.16em;
  font-size:.62rem;font-weight:600;color:var(--accent)}
.bk-svc-name{font-family:var(--font-display);font-size:1.18rem;font-weight:700;line-height:1.15}
.bk-svc-blurb{font-size:.86rem;color:var(--muted);font-weight:300;line-height:1.5}
.bk-svc-meta{margin-top:auto;padding-top:12px;font-size:.76rem;color:var(--muted-2)}
.bk-svc-meta i{font-style:normal;opacity:.6;margin:0 2px}

/* ---- step 2: date strip ---- */
.bk-sub{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.16em;
  font-size:.7rem;font-weight:600;color:var(--muted-2);margin:0 0 12px}
.bk-dates{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 12px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.bk-dates::-webkit-scrollbar{height:6px}
.bk-dates::-webkit-scrollbar-thumb{background:var(--surface-2);border-radius:6px}
.bk-date{flex:0 0 auto;scroll-snap-align:start;width:74px;padding:12px 0;border-radius:14px;
  border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  transition:border-color .3s,background .3s}
.bk-date:hover{border-color:var(--line-2)}
.bk-date:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.bk-date.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
.bk-date-dow{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.1em;
  font-size:.6rem;font-weight:600;color:var(--muted-2)}
.bk-date.sel .bk-date-dow{color:var(--accent)}
.bk-date-num{font-family:var(--font-display);font-size:1.35rem;font-weight:700;line-height:1}
.bk-date-mon{font-size:.64rem;color:var(--muted-2);text-transform:uppercase;letter-spacing:.08em}

/* ---- step 2: slots ---- */
.bk-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;margin-top:22px}
.bk-slot{padding:13px 8px;border-radius:12px;border:1px solid var(--line);background:var(--surface);
  color:var(--text);font-family:var(--font-display);font-weight:600;font-size:.92rem;
  letter-spacing:.03em;cursor:pointer;transition:border-color .3s,background .3s}
.bk-slot:hover:not(:disabled){border-color:var(--line-2)}
.bk-slot:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.bk-slot.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--surface));color:var(--text)}
.bk-slot:disabled{opacity:.3;cursor:not-allowed;text-decoration:line-through}
.bk-slot.taken{text-decoration:none;opacity:.42;border-style:dashed}
.bk-slot-note{margin-top:16px;color:var(--muted);font-size:.9rem}

/* ---- step 3: details ---- */
.bk-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.bk-form-grid .bk-span{grid-column:1/-1}
.field .bk-err{display:block;min-height:18px;margin-top:6px;color:#E0796B;font-size:.8rem}
.field input.bad,.field textarea.bad{border-color:#E0796B}

/* WhatsApp opt-in */
.bk-consent{display:flex;align-items:flex-start;gap:13px;margin:2px 0 8px;padding:18px 20px;
  border:1px solid var(--line);border-radius:14px;background:var(--bg-2)}
.bk-consent input[type=checkbox]{flex:none;width:22px;height:22px;margin-top:1px;
  accent-color:var(--accent);cursor:pointer}
.bk-consent label{font-size:.94rem;color:var(--text);font-weight:400;cursor:pointer;line-height:1.45}
.bk-consent label span{display:block;margin-top:5px;color:var(--muted-2);font-size:.82rem;font-weight:300}
.bk-consent input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---- step 4: review ---- */
.bk-review{border:1px solid var(--line);border-radius:18px;background:var(--surface);
  padding:8px 26px;margin:0}
.bk-rev-row{display:flex;gap:20px;padding:15px 0;border-bottom:1px solid var(--line)}
.bk-rev-row:last-child{border-bottom:0}
.bk-rev-row dt{flex:0 0 108px;font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.12em;font-size:.7rem;font-weight:600;color:var(--muted-2);padding-top:3px}
.bk-rev-row dd{margin:0;color:var(--text);font-weight:300;overflow-wrap:anywhere}

.bk-caveat{margin-top:20px;padding:16px 18px;border-radius:14px;
  border:1px solid var(--line);background:var(--bg-2);color:var(--muted);
  font-size:.86rem;font-weight:300;line-height:1.55}

/* ---- done ---- */
.bk-done{text-align:center;padding:44px 26px;border:1px solid var(--accent);border-radius:20px;
  background:color-mix(in srgb,var(--accent) 8%,var(--surface));outline:none}
.bk-done[hidden]{display:none}
.bk-tick{width:58px;height:58px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:#241708}
.bk-tick svg{width:28px;height:28px}
.bk-done h3{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2rem);margin-bottom:10px}
.bk-done-line{color:var(--muted);font-weight:300;margin-bottom:20px}
.bk-ref{display:inline-block;font-family:var(--font-display);letter-spacing:.22em;font-weight:700;
  font-size:1.15rem;color:var(--accent);border:1px dashed var(--accent);border-radius:10px;
  padding:10px 20px;margin-bottom:24px}
.bk-done-lead{color:var(--text);font-weight:300;max-width:44ch;margin:0 auto 24px;line-height:1.55}
.bk-done-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.bk-done-actions--minor{margin-top:-4px}
.bk-done-actions--minor .btn{font-size:.72rem;padding:10px 18px;opacity:.82}
#bkWa{background:#25D366;color:#0B2E13;box-shadow:0 14px 34px -10px rgba(37,211,102,.6)}
#bkWa:hover{background:#1FBE5A;box-shadow:0 18px 42px -10px rgba(37,211,102,.7)}
#bkWa svg{width:20px;height:20px;flex:none}
.bk-done-fine{color:var(--muted-2);font-size:.82rem;font-weight:300;max-width:52ch;margin:0 auto;line-height:1.55}

/* ---- my bookings ---- */
.bk-mine{margin-top:52px;padding-top:34px;border-top:1px solid var(--line)}
.bk-mine[hidden]{display:none}
.bk-mine h3{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.14em;
  font-size:.9rem;color:var(--accent);margin-bottom:16px}
.bk-mine-row{display:flex;align-items:center;gap:16px;padding:15px 18px;margin-bottom:10px;
  border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.bk-mine-row > div:first-child{flex:1;min-width:0}
.bk-mine-row b{display:block;font-family:var(--font-display);font-size:1.02rem;font-weight:700}
.bk-mine-row span{display:block;color:var(--muted);font-size:.86rem;font-weight:300}
.bk-mine-ref{font-family:var(--font-display);letter-spacing:.14em;font-size:.8rem;color:var(--muted-2)}
.bk-mine-cancel{padding:9px 15px;border-radius:100px;border:1px solid var(--line-2);
  background:transparent;color:var(--muted);font-family:var(--font-display);
  text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;font-weight:600;cursor:pointer;
  transition:border-color .3s,color .3s}
.bk-mine-cancel:hover{border-color:#E0796B;color:#E0796B}
.bk-mine-cancel:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* visually-hidden live region */
.bk-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- responsive ---- */
@media (max-width:900px){
  .bk-svc-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .bk-steps{gap:6px;margin-bottom:30px}
  .bk-step{font-size:.6rem;letter-spacing:.08em;padding-top:12px}
  .bk-svc-grid{grid-template-columns:1fr;gap:12px}
  .bk-svc{padding:18px 16px}
  .bk-form-grid{grid-template-columns:1fr;gap:0}
  .bk-slots{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
  .bk-slot{min-height:46px}
  .bk-date{width:68px}
  .bk-rev-row{flex-direction:column;gap:4px;padding:13px 0}
  .bk-rev-row dt{flex:none}
  .bk-review{padding:6px 20px}
  /* side-by-side buttons squeeze the longer label onto two lines.
     Stack them instead, primary on top. */
  .bk-actions{flex-direction:column-reverse;align-items:stretch;gap:10px}
  .bk-actions .btn{width:100%;justify-content:center;white-space:nowrap}
  .bk-mine-row{flex-wrap:wrap;gap:10px}
  .bk-mine-ref{order:3}
  .bk-mine-cancel{min-height:44px;padding:12px 20px}
  .bk-done{padding:34px 20px}
  .bk-done-actions .btn{width:100%;justify-content:center}
}
@media (max-width:440px){
  /* four labels won't fit: keep the rail as progress bars + the active label */
  .bk-step span{font-size:0}
  .bk-step.now span{font-size:.62rem}
}