/* booking-flow.css — modern booking UX layer for book.html.
   Additive only: reuses the theme vars from styles.css (--rust, --surface,
   --line, --cream-fade, --title-text, --body-text…) so dark mode flips for free.
   Loaded AFTER styles.css, so these rules win where they overlap. */

/* ---- 1. Progress stepper -------------------------------------------------- */
.bk-stepper{
  position:sticky;top:var(--nav-h,70px);z-index:40;
  display:flex;gap:6px;
  margin:0 auto 26px;max-width:760px;
  padding:12px 14px;
  background:var(--cream-bg);
  border:1px solid var(--cream-border);
  border-radius:12px;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
  -webkit-backdrop-filter:saturate(1.1);backdrop-filter:saturate(1.1);
}
.bk-step{
  flex:1 1 0;display:flex;align-items:center;gap:9px;
  min-width:0;padding:6px 8px;border-radius:9px;
  transition:background .2s ease;
}
.bk-step-dot{
  flex:none;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:15px;
  background:var(--surface,#fff);
  color:var(--body-text);
  border:2px solid var(--cream-border);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.bk-step-label{
  font-family:var(--font-body);font-weight:700;font-size:15px;
  color:var(--body-text);
  line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* current step */
.bk-step.is-active .bk-step-dot{
  background:var(--rust);color:#fff;border-color:var(--rust);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--rust) 22%,transparent);
}
.bk-step.is-active .bk-step-label{color:var(--title-text)}
/* completed step → emerald check */
.bk-step.is-done .bk-step-dot{
  background:#10b981;color:#fff;border-color:#10b981;
}
.bk-step.is-done .bk-step-dot::after{content:"\2713";font-size:16px}
.bk-step.is-done .bk-step-dot span{display:none}
.bk-step.is-done .bk-step-label{color:var(--title-text)}

/* Mobile: keep all 4 visible, hide labels except the active one */
@media (max-width:600px){
  .bk-stepper{gap:4px;padding:10px;border-radius:10px}
  .bk-step{flex:none;padding:5px;gap:0;justify-content:center}
  .bk-step-label{display:none}
  .bk-step.is-active{flex:1 1 auto;gap:8px;padding:5px 10px;
    background:var(--cream-fade)}
  .bk-step.is-active .bk-step-label{display:block;font-size:14px}
}

/* ---- 2. Service cards ----------------------------------------------------- */
/* Richer cards than the bare .svc; .svc/.svc-name/.svc-price kept for the JS. */
.svc{
  position:relative;
  display:flex;flex-direction:column;gap:5px;
  padding:18px 16px;min-height:128px;
  border-width:2px;
}
.svc .svc-name{font-size:18px;line-height:1.25}
.svc .svc-dur{
  display:inline-flex;align-items:center;gap:5px;
  font-size:14px;font-weight:600;color:var(--body-text);
}
.svc .svc-dur svg{width:15px;height:15px;opacity:.75}
.svc .svc-price{margin-top:auto;font-size:22px}
.svc .svc-blurb{font-size:13px;line-height:1.45;color:var(--body-text)}
.svc-popular{
  position:absolute;top:-11px;right:12px;
  background:var(--rust);color:#fff;
  font-family:var(--font-body);font-weight:700;font-size:11px;
  letter-spacing:.4px;text-transform:uppercase;
  padding:4px 11px;border-radius:999px;
  box-shadow:0 3px 8px rgba(0,0,0,.18);
  white-space:nowrap;
}
.svc.has-popular{border-color:color-mix(in srgb,var(--rust) 45%,var(--cream-border))}
.svc.has-popular.sel{border-color:var(--rust)}

/* ---- 3. Time-of-day groups ------------------------------------------------ */
.slot-groups{margin-top:6px}
.slot-group{margin-top:18px}
.slot-group:first-child{margin-top:8px}
.slot-group-head{
  display:flex;align-items:center;gap:9px;
  margin:0 0 10px;
  font-family:var(--font-body);font-weight:700;font-size:14px;
  letter-spacing:.4px;text-transform:uppercase;
  color:var(--body-text);
}
.slot-group-head svg{width:17px;height:17px;color:var(--rust);flex:none}
.slot-group-head .slot-group-count{
  font-weight:600;font-size:12px;letter-spacing:0;text-transform:none;
  color:var(--body-text);opacity:.7;
}
.slot-group-head::after{
  content:"";flex:1;height:1px;background:var(--cream-border);
}
.slot-group .slot-grid{margin-top:0}

/* ---- 4. "What to expect" success block ------------------------------------ */
.expect-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
  margin-top:14px;text-align:left;
}
.expect-item{
  display:flex;gap:11px;align-items:flex-start;
  background:var(--cream-fade);
  border:1px solid var(--cream-border);
  border-radius:10px;padding:13px 14px;
}
.expect-item .expect-ic{
  flex:none;width:34px;height:34px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--rust) 14%,transparent);
  color:var(--rust);
}
.expect-item .expect-ic svg{width:19px;height:19px}
.expect-item h4{
  margin:0 0 2px;font-family:var(--font-body);font-size:15px;
  font-weight:700;color:var(--title-text);line-height:1.25;
}
.expect-item p{margin:0;font-size:13.5px;line-height:1.5;color:var(--body-text)}
.expect-cancel{
  display:flex;gap:11px;align-items:flex-start;
  margin-top:14px;text-align:left;
  background:color-mix(in srgb,var(--rust) 9%,var(--surface,#fff));
  border:1px solid color-mix(in srgb,var(--rust) 30%,var(--cream-border));
  border-radius:10px;padding:13px 15px;
  font-size:14px;line-height:1.55;color:var(--body-text);
}
.expect-cancel svg{flex:none;width:20px;height:20px;color:var(--rust);margin-top:1px}
.expect-cancel strong{color:var(--title-text)}

@media (max-width:600px){
  .expect-grid{grid-template-columns:1fr;gap:10px}
}

/* Dark-mode: emerald reads fine; just soften the popular badge shadow.
   Everything else inherits the theme vars already flipped in styles.css. */
:root[data-theme="dark"] .svc-popular{box-shadow:0 3px 10px rgba(0,0,0,.5)}
:root[data-theme="dark"] .bk-stepper{box-shadow:0 6px 22px rgba(0,0,0,.45)}

/* ---- promo / gift code + policy accordion + discount line (added) ---- */
.code-row .code-inline{display:flex;gap:8px;align-items:stretch}
.code-row #code-input{flex:1;text-transform:uppercase}
.code-row #code-input::placeholder{text-transform:none}
.btn-ghost{background:transparent;border:1.5px solid var(--rust,#9b440d);color:var(--rust,#9b440d);border-radius:10px;padding:0 16px;font-weight:700;cursor:pointer;white-space:nowrap}
.btn-ghost:hover{background:var(--rust,#9b440d);color:#fff}
.code-ok{color:#3f7a32;font-weight:600;font-size:14px}
.sum-discount{color:#3f7a32;font-weight:700}
.policy-summary{border:1px solid var(--line,#e7d8c6);border-radius:10px;padding:0 14px;margin:4px 0 16px;background:var(--surface-2,#f7efe4)}
.policy-summary>summary{cursor:pointer;font-weight:700;color:var(--title-text);padding:12px 0;list-style:none}
.policy-summary>summary::-webkit-details-marker{display:none}
.policy-summary>summary::before{content:"▸ ";color:var(--rust,#9b440d)}
.policy-summary[open]>summary::before{content:"▾ "}
.policy-summary ul{margin:0 0 10px;padding-left:18px;font-size:14.5px;line-height:1.6}
.policy-summary ul li{margin:4px 0}
.policy-summary a{color:var(--rust,#9b440d);font-weight:700;display:inline-block;margin-bottom:12px}

/* ---- post-booking "create your account" invite (added) ---- */
.acct-invite{background:var(--card-bg,#fff);border:1px solid var(--line,#e7d8c6);border-left:5px solid var(--rust,#9b440d);border-radius:12px;padding:20px 22px;margin:18px 0;box-shadow:var(--shadow-card,0 3px 12px rgba(60,40,20,.08))}
.acct-invite h3{margin:0 0 6px;font-family:var(--font-title,'Playfair Display',serif);color:var(--title-text,#1D2023);font-size:20px}
.acct-invite .ai-opt{font-size:13px;font-weight:400;color:var(--muted,#9a8f86)}
.acct-invite p{margin:0 0 12px;color:var(--body-text,#50555C);font-size:15px;line-height:1.55}
.acct-invite .ai-email{font-size:14px;color:var(--body-text);margin-bottom:8px}
.acct-invite .ai-pw{display:block;font-weight:700;color:var(--title-text);font-size:14px;margin-bottom:6px}
.acct-invite .ai-row{display:flex;gap:10px;flex-wrap:wrap}
.acct-invite .ai-row input{flex:1;min-width:180px;padding:11px 13px;border:1px solid var(--line,#e0cdb6);border-radius:10px;background:var(--surface,#fff);color:var(--body-text);font:inherit}
.acct-invite .ai-row .btn{white-space:nowrap}
.acct-invite #ai-status{margin-top:10px;font-size:14px}
.acct-invite #ai-status.field-err{color:#9b2410}
.acct-invite .ai-or{display:flex;align-items:center;text-align:center;color:var(--muted,#9a8f86);font-size:13px;margin:14px 0 10px}
.acct-invite .ai-or::before,.acct-invite .ai-or::after{content:"";flex:1;height:1px;background:var(--line,#e7d8c6)}
.acct-invite .ai-or span{padding:0 12px}
.acct-invite .social-btn{display:block;text-align:center;padding:11px;border:1px solid var(--line,#e0cdb6);border-radius:10px;text-decoration:none;color:var(--title-text);font-weight:700;margin-bottom:8px;background:var(--surface,#fff)}
.acct-invite .social-btn:hover{border-color:var(--rust,#9b440d)}