/* ============================================================
   INVOKE BOOKING WIDGET  —  portable multi-step deposit flow
   ------------------------------------------------------------
   A self-contained, brand-agnostic booking wizard. Drops into
   any client site. ALL brand styling comes from the --bk-*
   custom properties below — override them in your site's CSS
   (scoped to .booking or :root) to reskin. Do NOT edit the
   rules themselves per client; only the tokens.

   First built for Vileilashes Studio (lash), generalized into
   the Invoke Booking product. Pairs with booking-widget.js.
   ============================================================ */

/* ---- BRAND TOKENS — override these per client ------------- */
.booking {
  --bk-accent:        #b76e79;   /* primary accent (buttons, selected states) */
  --bk-accent-2:      #c9a66b;   /* secondary accent (gradients, prices) */
  --bk-accent-soft:   #e7c9a9;   /* light accent (labels, highlights) */
  --bk-accent-grad:   linear-gradient(120deg,#b76e79 0%,#d9a7a0 28%,#e8c4b8 50%,#c9a66b 75%,#b76e79 100%);
  --bk-surface:       rgba(255,255,255,.03);  /* card/input fill */
  --bk-surface-2:     rgba(255,255,255,.06);  /* raised surfaces */
  --bk-border:        rgba(184,167,156,.35);  /* hairlines/borders */
  --bk-text:          #f3e9e3;   /* primary text */
  --bk-text-mut:      #b8a79c;   /* muted/secondary text */
  --bk-on-accent:     #1a1310;   /* text that sits ON the accent (button labels) */
  --bk-font-head:     'Cormorant Garamond', Georgia, serif;
  --bk-font-body:     'Jost', system-ui, sans-serif;
  --bk-radius:        12px;
  --bk-veil:          rgba(12,10,9,.82);       /* checkout overlay scrim */
  --bk-checkout-bg:   #fbf7f4;   /* stripe-card surface (light) */
  --bk-checkout-text: #1a1310;
  --bk-checkout-mut:  #6b5d54;

  max-width: 720px; margin: 40px auto 0; text-align: left;
  font-family: var(--bk-font-body);
}

/* ---- progress rail ---------------------------------------- */
.bk-progress { display:flex; align-items:center; justify-content:center; gap:0; margin:0 auto 38px; max-width:560px; }
.bk-step-dot { display:flex; flex-direction:column; align-items:center; gap:8px; flex:0 0 auto; }
.bk-step-dot .ring {
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  border:1.5px solid var(--bk-border); color:var(--bk-text-mut);
  font-family:var(--bk-font-body); font-size:.85rem; font-weight:400;
  transition:all .4s cubic-bezier(.16,1,.3,1); background:transparent;
}
.bk-step-dot .lbl { font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bk-text-mut); transition:color .4s; white-space:nowrap; }
.bk-step-dot.active .ring { border-color:transparent; background:var(--bk-accent-grad); color:var(--bk-on-accent); font-weight:500; box-shadow:0 6px 20px -8px var(--bk-accent); }
.bk-step-dot.active .lbl { color:var(--bk-accent-soft); }
.bk-step-dot.done .ring { border-color:var(--bk-accent); color:var(--bk-accent-soft); }
.bk-rail { flex:1; height:1.5px; background:var(--bk-border); margin:0 6px; position:relative; top:-12px; min-width:18px; }
.bk-rail.filled { background:linear-gradient(90deg,var(--bk-accent),var(--bk-accent-2)); }

/* ---- panels ----------------------------------------------- */
.bk-panel { display:none; animation:bkFade .45s cubic-bezier(.16,1,.3,1); }
.bk-panel.show { display:block; }
@keyframes bkFade { from { opacity:0; transform:translateY(14px);} to { opacity:1; transform:none; } }
.bk-panel-title { font-family:var(--bk-font-head); font-weight:500; font-size:1.7rem; color:var(--bk-text); margin-bottom:6px; }
.bk-panel-title:focus, .bk-confirm h3:focus { outline:none; } /* programmatic focus target — no visible ring */
.bk-panel-sub { font-size:.86rem; font-weight:300; color:var(--bk-text-mut); margin-bottom:22px; line-height:1.6; }

/* ---- service category tabs -------------------------------- */
.bk-cats { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.bk-cat { font-family:var(--bk-font-body); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; font-weight:400;
  padding:9px 16px; border-radius:40px; border:1px solid var(--bk-border); background:transparent;
  color:var(--bk-text-mut); cursor:pointer; transition:all .3s; }
.bk-cat:hover { border-color:var(--bk-accent); color:var(--bk-text); }
.bk-cat.active { background:var(--bk-accent-grad); color:var(--bk-on-accent); border-color:transparent; font-weight:500; }

/* ---- service option rows ---------------------------------- */
.bk-svc-list { display:flex; flex-direction:column; gap:8px; max-height:340px; overflow-y:auto; padding-right:6px; }
.bk-svc-list::-webkit-scrollbar { width:5px; }
.bk-svc-list::-webkit-scrollbar-thumb { background:var(--bk-border); border-radius:4px; }
.bk-svc { display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:var(--bk-radius); cursor:pointer;
  border:1px solid var(--bk-border); background:var(--bk-surface); transition:all .3s; text-align:left; width:100%; }
.bk-svc:hover { border-color:var(--bk-accent); background:var(--bk-surface-2); }
.bk-svc.sel { border-color:var(--bk-accent-2); background:var(--bk-surface-2); box-shadow:0 6px 22px -14px var(--bk-accent-2); }
.bk-svc .bk-svc-radio { width:16px; height:16px; border-radius:50%; border:1.5px solid var(--bk-border); flex:0 0 auto; position:relative; transition:all .3s; }
.bk-svc.sel .bk-svc-radio { border-color:var(--bk-accent-2); }
.bk-svc.sel .bk-svc-radio::after { content:""; position:absolute; inset:3px; border-radius:50%; background:var(--bk-accent-grad); }
.bk-svc .bk-svc-name { flex:1; font-weight:300; font-size:.98rem; color:var(--bk-text); }
.bk-svc .bk-svc-name em { display:block; font-style:normal; font-size:.72rem; color:var(--bk-text-mut); margin-top:1px; }
.bk-svc .bk-svc-price { font-family:var(--bk-font-head); font-size:1.15rem; color:var(--bk-accent-soft); white-space:nowrap; }

/* ---- tier scaffold (e.g. refill weeks-since-fill) --------- */
.bk-tier { margin-top:18px; padding:16px; border-radius:var(--bk-radius); border:1px dashed var(--bk-border); background:var(--bk-surface); }
.bk-tier-q { font-size:.82rem; font-weight:300; color:var(--bk-text-mut); margin-bottom:12px; }
.bk-tier-opts { display:flex; gap:8px; flex-wrap:wrap; }
.bk-tier-opt { flex:1; min-width:90px; padding:11px 8px; border-radius:10px; border:1px solid var(--bk-border);
  background:transparent; color:var(--bk-text); cursor:pointer; text-align:center; transition:all .3s; font-family:var(--bk-font-body); }
.bk-tier-opt:hover { border-color:var(--bk-accent); }
.bk-tier-opt.sel { border-color:var(--bk-accent-2); background:var(--bk-surface-2); }
.bk-tier-opt .wk { display:block; font-size:.95rem; }
.bk-tier-opt .delta { display:block; font-size:.72rem; color:var(--bk-accent-soft); margin-top:2px; }

/* ---- date + time ------------------------------------------ */
.bk-field { margin-bottom:18px; }
.bk-field label { display:block; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bk-accent-soft); margin-bottom:8px; }
.bk-input, .bk-select, .bk-textarea {
  width:100%; padding:13px 16px; border-radius:10px; border:1px solid var(--bk-border);
  background:var(--bk-surface); color:var(--bk-text); font-family:var(--bk-font-body); font-size:.95rem; font-weight:300;
  transition:border-color .3s; }
.bk-input:focus, .bk-select:focus, .bk-textarea:focus { outline:none; border-color:var(--bk-accent-2); }
.bk-input::placeholder, .bk-textarea::placeholder { color:var(--bk-text-mut); opacity:.7; }
.bk-textarea { resize:vertical; min-height:74px; }
.bk-slots { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; }
.bk-slot { padding:11px 6px; border-radius:9px; border:1px solid var(--bk-border); background:transparent;
  color:var(--bk-text); cursor:pointer; text-align:center; font-family:var(--bk-font-body); font-size:.9rem; font-weight:300; transition:all .3s; }
.bk-slot:hover:not(:disabled) { border-color:var(--bk-accent); }
.bk-slot.sel { border-color:var(--bk-accent-2); background:var(--bk-surface-2); color:var(--bk-accent-soft); }
.bk-slot:disabled { opacity:.3; cursor:not-allowed; text-decoration:line-through; }

/* ---- summary / deposit ------------------------------------ */
.bk-summary { border:1px solid var(--bk-border); border-radius:14px; padding:22px; background:var(--bk-surface); margin-bottom:18px; }
.bk-sum-row { display:flex; justify-content:space-between; gap:14px; padding:8px 0; font-weight:300; font-size:.92rem; color:var(--bk-text); border-bottom:1px solid var(--bk-border); }
.bk-sum-row:last-of-type { border-bottom:0; }
.bk-sum-row .k { color:var(--bk-text-mut); }
.bk-sum-row.total { margin-top:6px; padding-top:14px; border-top:1.5px solid var(--bk-border); border-bottom:0; }
.bk-sum-row.total .k { color:var(--bk-text); font-size:1rem; }
.bk-sum-row.total .v { font-family:var(--bk-font-head); font-size:1.5rem; color:var(--bk-accent-soft); }
.bk-deposit-note { font-size:.78rem; font-weight:300; line-height:1.6; color:var(--bk-text-mut); margin-bottom:18px; }
.bk-deposit-note b { color:var(--bk-accent-soft); font-weight:400; }

/* ---- nav buttons ------------------------------------------ */
.bk-nav { display:flex; gap:12px; justify-content:space-between; margin-top:26px; }
.bk-btn-primary {  /* fallback button styling if the host site has no .btn — override freely */
  background:var(--bk-accent-grad); color:var(--bk-on-accent); border:0; padding:14px 30px; border-radius:40px;
  font-family:var(--bk-font-body); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
  transition:transform .3s, box-shadow .3s; }
.bk-btn-primary:hover { transform:translateY(-2px); box-shadow:0 14px 30px -14px var(--bk-accent); }
.bk-back { background:transparent; border:1px solid var(--bk-border); color:var(--bk-text-mut);
  padding:13px 26px; border-radius:40px; cursor:pointer; font-family:var(--bk-font-body); font-size:.82rem; letter-spacing:.06em; transition:all .3s; }
.bk-back:hover { border-color:var(--bk-text); color:var(--bk-text); }
.bk-back[hidden] { display:none; }
.bk-next { margin-left:auto; }
.bk-next:disabled { opacity:.4; cursor:not-allowed; }
.bk-demo-badge { display:inline-flex; align-items:center; gap:6px; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bk-accent-soft); border:1px solid var(--bk-border); border-radius:40px; padding:5px 12px; margin-bottom:18px; }
.bk-demo-badge .dot { width:6px; height:6px; border-radius:50%; background:var(--bk-accent-2); }
.bk-demo-badge[hidden] { display:none; }

/* ---- simulated / hosted checkout overlay ------------------ */
.bk-stripe-veil { position:fixed; inset:0; z-index:99999; background:var(--bk-veil); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; padding:24px; }
.bk-stripe-veil.show { display:flex; animation:bkFade .35s ease; }
.bk-stripe-card { max-width:420px; width:100%; background:var(--bk-checkout-bg); color:var(--bk-checkout-text); border-radius:18px; padding:34px 30px; text-align:center;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7); font-family:var(--bk-font-body); }
.bk-stripe-card .lock { font-size:1.6rem; }
.bk-stripe-card h4 { font-family:var(--bk-font-head); font-weight:600; font-size:1.5rem; margin:10px 0 4px; }
.bk-stripe-card p { font-size:.86rem; font-weight:300; color:var(--bk-checkout-mut); line-height:1.6; }
.bk-stripe-card .amt { font-family:var(--bk-font-head); font-size:2.4rem; color:var(--bk-checkout-text); margin:16px 0 4px; }
.bk-stripe-spinner { width:34px; height:34px; border:3px solid var(--bk-border); border-top-color:var(--bk-accent); border-radius:50%; margin:20px auto 4px; animation:bkSpin .8s linear infinite; }
@keyframes bkSpin { to { transform:rotate(360deg); } }
.bk-stripe-powered { font-size:.66rem; letter-spacing:.1em; color:var(--bk-checkout-mut); margin-top:18px; }

/* ---- confirmation ----------------------------------------- */
.bk-confirm { text-align:center; padding:14px 0; }
.bk-confirm .check { width:64px; height:64px; border-radius:50%; margin:0 auto 18px; display:grid; place-items:center; background:var(--bk-accent-grad); }
.bk-confirm .check svg { width:30px; height:30px; stroke:#fff; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.bk-confirm h3 { font-family:var(--bk-font-head); font-weight:500; font-size:2rem; color:var(--bk-text); margin-bottom:8px; }
.bk-confirm .sub { font-size:.9rem; font-weight:300; color:var(--bk-text-mut); line-height:1.7; max-width:420px; margin:0 auto 22px; }
.bk-confirm .recap { text-align:left; max-width:380px; margin:0 auto 22px; }
.bk-confirm .pol-reminder { font-size:.76rem; font-weight:300; line-height:1.6; color:var(--bk-text-mut); border-top:1px solid var(--bk-border); padding-top:16px; max-width:440px; margin:0 auto; }

/* ---- responsive ------------------------------------------- */
@media (max-width:640px) {
  .bk-step-dot .lbl { font-size:.6rem; }
  .bk-stripe-card { padding:28px 22px; }
}