/* ============================================================
   Spa & Massage – Booking Flow  (WordPress-ready)
   Exact match of the Next.js / Tailwind source
   All rules are scoped to .spa-booking-root to prevent leaking
   into the host WordPress page.
   ============================================================ */

/* --- Reset scoped to root --- */
.spa-booking-root *, .spa-booking-root *::before, .spa-booking-root *::after {
  -webkit-box-sizing: border-box !important;
          box-sizing: border-box !important; margin: 0; padding: 0;
}
.spa-booking-root {
  font-family: "Geist",  "Helvetica Neue", sans-serif !important;
  font-size: 16px !important; color: #111827 !important; background: #f6f3ee !important; min-height: 100vh !important;
  -webkit-font-smoothing: antialiased !important;
}

.spa-booking-root *{
   font-family: "Geist",  "Helvetica Neue", sans-serif;
}

.spa-booking-root button { font-family: "Geist",  "Helvetica Neue", sans-serif !important; color: inherit !important; cursor: pointer !important; white-space: unset !important; line-height: normal !important; text-transform: none !important; letter-spacing: normal !important; }
.spa-booking-root a { text-decoration: none !important; color: inherit !important; font-size: inherit !important; line-height: inherit !important; text-transform: none !important; letter-spacing: normal !important; }
.spa-booking-root img { display: block !important; }
.spa-booking-root input { font-family: "Geist",  "Helvetica Neue", sans-serif !important; font-size: inherit !important; color: inherit !important; line-height: normal !important; text-transform: none !important; letter-spacing: normal !important; }

/* --- Layout --- */
.sbf-wrap {
  margin: 0 auto; max-width: 72rem; /* max-w-6xl */
  min-height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
  padding: 20px 16px;
}
@media (min-width: 768px) { .sbf-wrap { padding: 20px 32px; } }



.ekit-template-content-footer, .ekit-template-content-header {
    display: none;
}

body:not([class*=elementor-page-]) .site-main {
    max-width: 100%!important;
    padding: 0 !important;
}

/* ── Header ──────────────────────────────────────────────── */
.sbf-header {
  margin-bottom: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.70);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  padding: 12px 16px;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.06);
          box-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.06);
}
.sbf-header-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.sbf-logo-ring {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 9999px;
  background: #1c3766; overflow: hidden; -ms-flex-negative: 0; flex-shrink: 0;
}
.sbf-logo-ring img { width: 40px; height: 40px; -o-object-fit: contain; object-fit: contain; }
.sbf-brand-name  { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; line-height: 20px; }
.sbf-brand-sub   { font-size: 12px; color: #64748b; line-height: 1.25; font-weight: 400; }
.sbf-secure-badge {
  display: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  background: #1c3766; color: #fff;
  border-radius: 9999px; padding: 8px 16px;
  font-size: 12px; font-weight: 500;
  flex-wrap: nowrap;
}
@media (min-width: 768px) { .sbf-secure-badge { display: -webkit-box; display: -ms-flexbox; display: flex; } }
.sbf-user-pill {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  border: 1px solid #e2e8f0; background: #fff;
  border-radius: 9999px; padding: 6px 16px 6px 6px;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.06);
          box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.sbf-user-avatar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9999px;
  background: #1c3766; color: #fff; font-size: 12px; font-weight: 600;
}
.sbf-user-signed { font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; line-height: 1; }
.sbf-user-name   { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: #0f172a; line-height: 1.3; }

/* ── Main card ───────────────────────────────────────────── */
.sbf-main { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.sbf-card {
  width: 100%; max-width: 672px; /* max-w-2xl */
  border-radius: 2rem; border: 1px solid #fff;
  background: #fff; overflow: hidden;
  -webkit-box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
          box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); /* shadow-xl */
}

/* Progress header */
.sbf-card-head { border-bottom: 1px solid #f1f5f9; padding: 20px; }
.sbf-step-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  font-size: 12px; font-weight: 500; color: #64748b; margin-bottom: 12px;
}
.sbf-progress-track { height: 6px; border-radius: 9999px; background: #f1f5f9; overflow: hidden; }
.sbf-progress-fill  { height: 100%; border-radius: 9999px; background: #1c3766; -webkit-transition: width 0.4s cubic-bezier(0.4,0,0.2,1); transition: width 0.4s cubic-bezier(0.4,0,0.2,1); }

/* Card body */
.sbf-card-body { min-height: 560px; padding: 20px; }
@media (min-width: 768px) { .sbf-card-body { padding: 28px; } }

/* Card footer */
.sbf-card-foot {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
  border-top: 1px solid #f1f5f9; padding: 20px;
}
.spa-booking-root .sbf-btn-back {
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important;
  border-radius: 9999px !important; padding: 12px 16px !important;
  font-family: "Geist",  "Helvetica Neue", sans-serif !important;
  font-size: 14px !important; font-weight: 500 !important; color: #64748b !important;
  background: none !important; border: none !important;
  line-height: normal !important; text-transform: none !important; letter-spacing: normal !important;
  -webkit-transition: color 150ms !important;
  transition: color 150ms !important;
}
.spa-booking-root .sbf-btn-back:disabled { opacity: 0.3 !important; cursor: default !important; }
.spa-booking-root .sbf-btn-back svg { -ms-flex-negative: 0; flex-shrink: 0; margin-right: 8px;}
.sbf-foot-hint { font-size: 12px; color: #94a3b8; }
.spa-booking-root .sbf-btn-continue {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important;
  border-radius: 9999px !important; padding: 12px 24px !important;
  font-family: "Geist",  "Helvetica Neue", sans-serif !important;
  background: #1c3766 !important; color: #fff !important;
  font-size: 14px !important; font-weight: 600 !important; border: none !important;
  line-height: normal !important; text-transform: none !important; letter-spacing: normal !important;
  -webkit-box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05) !important;
          box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05) !important;
  -webkit-transition: -webkit-transform 150ms !important;
  transition: -webkit-transform 150ms !important;
  transition: transform 150ms !important;
  transition: transform 150ms, -webkit-transform 150ms !important;
}

.sbf-btn-continue svg {
    margin-left: 8px;
}

.sbf-btn-continue:active { -webkit-transform: scale(0.98) !important; -ms-transform: scale(0.98) !important; transform: scale(0.98) !important; }

/* ── Step heading (exact: mb-6 flex items-start gap-4) ─── */
.sbf-step-heading { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; margin-bottom: 24px; }
.sbf-step-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  width: 48px; height: 48px; -ms-flex-negative: 0; flex-shrink: 0;
  border-radius: 16px; background: #1c3766; color: #fff;
}
.sbf-step-icon svg { width: 24px; height: 24px; }
.sbf-step-title    { font-family: "Geist",  "Helvetica Neue", sans-serif !important; font-size: 30px !important; font-weight: 300 !important; letter-spacing: -0.03em !important; color: #020617 !important; line-height: 1.15 !important; text-transform: none !important; }
.sbf-step-subtitle { font-family: "Geist",  "Helvetica Neue", sans-serif !important; font-weight: 400; font-size: 14px !important; line-height: 24px !important; color: #64748b !important; margin-top: 4px !important; text-transform: none !important; letter-spacing: normal !important; }

/* ── Lucide icon baseline (all stroke icons) ─────────────── */
.sbf-icon {
  display: block; -ms-flex-negative: 0; flex-shrink: 0;
  fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

/* ── Step 0: Location ──────────────────────────────────── */

/* Package banner (emerald) */
.sbf-pkg-banner {
  margin-bottom: 20px; border-radius: 16px;
  border: 1px solid #a7f3d0; background: #ecfdf5; padding: 16px;
}
.sbf-pkg-banner-top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.sbf-pkg-icon-ring {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  width: 44px; height: 44px; -ms-flex-negative: 0; flex-shrink: 0; border-radius: 9999px;
  background: #10b981; color: #fff;
  -webkit-box-shadow: 0 0 0 2px #ecfdf5, 0 0 0 4px rgba(16,185,129,0.15);
          box-shadow: 0 0 0 2px #ecfdf5, 0 0 0 4px rgba(16,185,129,0.15);
}
.sbf-pkg-welcome  { font-size: 14px; font-weight: 600; color: #064e3b; }
.sbf-pkg-pname    { font-size: 14px; color: #047857; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbf-pkg-sessions {
  margin-top: 12px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
  border-radius: 12px; border: 1px solid rgba(167,243,208,0.7);
  background: rgba(255,255,255,0.7); padding: 8px 12px;
}
.sbf-pkg-sessions-label { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(4,120,87,0.8); }
.sbf-pkg-sessions-badge {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  background: #10b981; color: #fff; border-radius: 9999px;
  padding: 4px 10px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* "Already have a package?" CTA
   group mb-5 flex w-full items-center gap-3 rounded-2xl border border-slate-200
   bg-white p-3.5 text-left shadow-sm transition hover:border-[#1c3766]/40 hover:shadow-md */
.sbf-pkg-cta {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important;
  width: 100% !important; margin-bottom: 20px !important;
  border-radius: 16px !important; border: 1px solid #e2e8f0 !important; background: #fff !important;
  padding: 14px !important; text-align: left !important;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
          box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
  -webkit-transition: border-color 150ms, -webkit-box-shadow 150ms !important;
  transition: border-color 150ms, -webkit-box-shadow 150ms !important;
  transition: border-color 150ms, box-shadow 150ms !important;
  transition: border-color 150ms, box-shadow 150ms, -webkit-box-shadow 150ms !important;
  
}
.sbf-pkg-cta:hover { border-color: rgba(20,54,95,0.4) !important; -webkit-box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06) !important; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06) !important; }
/* icon span inside CTA:
   h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-[#1c3766]/5
   text-[#1c3766] ring-1 ring-inset ring-[#1c3766]/10 transition group-hover:bg-[#1c3766]/10 */
.sbf-pkg-cta-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  width: 40px; height: 40px; -ms-flex-negative: 0; flex-shrink: 0;
  border-radius: 12px; background: rgba(20,54,95,0.05); color: #1c3766;
  -webkit-box-shadow: inset 0 0 0 1px rgba(20,54,95,0.10);
          box-shadow: inset 0 0 0 1px rgba(20,54,95,0.10);
  -webkit-transition: background 150ms;
  transition: background 150ms;
}
.sbf-pkg-cta:hover .sbf-pkg-cta-icon { background: rgba(20,54,95,0.10); }
.sbf-pkg-cta-title { display: block; font-size: 14px; font-weight: 600; color: #0f172a; letter-spacing: normal; text-transform: none; line-height: 20px;}
.sbf-pkg-cta-sub   { display: block; font-size: 14px; color: #64748b; letter-spacing: normal; text-transform: none; line-height: 20px;}
.sbf-pkg-cta-chevron { margin-left: auto!important; -ms-flex-negative: 0; flex-shrink: 0; color: #94a3b8; -webkit-transition: color 150ms, -webkit-transform 150ms; transition: color 150ms, -webkit-transform 150ms; transition: transform 150ms, color 150ms; transition: transform 150ms, color 150ms, -webkit-transform 150ms; }
.sbf-pkg-cta:hover .sbf-pkg-cta-chevron { -webkit-transform: translateX(2px); -ms-transform: translateX(2px); transform: translateX(2px); color: #1c3766; }

/* Location grid: grid gap-3 sm:grid-cols-2 */
.sbf-location-grid { display: -ms-grid; display: grid; gap: 12px; }
@media (min-width: 640px) { .sbf-location-grid { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } }

/* Location card:
   group rounded-3xl border p-5 text-left transition
   unselected: border-slate-100 bg-slate-50 hover:bg-white hover:shadow-md
   selected:   border-[#1c3766] bg-[#1c3766] text-white */
.sbf-loc-card {
  border-radius: 24px !important; border: 1px solid #f1f5f9 !important; background: #f8fafc !important;
  padding: 20px !important; text-align: left !important; width: 100% !important;
  -webkit-transition: background 150ms, border-color 150ms, -webkit-box-shadow 150ms !important;
  transition: background 150ms, border-color 150ms, -webkit-box-shadow 150ms !important;
  transition: background 150ms, box-shadow 150ms, border-color 150ms !important;
  transition: background 150ms, box-shadow 150ms, border-color 150ms, -webkit-box-shadow 150ms !important;
}
.sbf-loc-card:hover:not(.is-selected) {
  background: #fff !important;
  -webkit-box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06) !important;
          box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06) !important;
}
.sbf-loc-card.is-selected { border-color: #1c3766 !important; background: #1c3766 !important; color: #fff !important; }

.sbf-loc-card-top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.sbf-loc-name  { font-family: "Geist",  "Helvetica Neue", sans-serif !important; font-size: 18px !important; font-weight: 600 !important; line-height: 28px !important; text-transform: none !important; letter-spacing: normal !important; }
/* ChevronRight: mt-1 transition group-hover:translate-x-1 */
.sbf-loc-chevron { margin-top: 4px; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: -webkit-transform 150ms; transition: -webkit-transform 150ms; transition: transform 150ms; transition: transform 150ms, -webkit-transform 150ms; }
.sbf-loc-card:hover .sbf-loc-chevron { -webkit-transform: translateX(4px); -ms-transform: translateX(4px); transform: translateX(4px); }
.sbf-loc-area { font-family: "Geist",  "Helvetica Neue", sans-serif !important; font-size: 14px !important; color: #64748b !important; margin-top: 4px !important; line-height: 20px !important; text-transform: none !important; letter-spacing: normal !important; font-weight: 400; }
.sbf-loc-card.is-selected .sbf-loc-area { color: rgba(255,255,255,0.70)!important; }

/* Available badge:
   mt-3 inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-semibold
   unselected: border-emerald-200 bg-emerald-50 text-emerald-700
   selected:   border-emerald-300/40 bg-emerald-400/15 text-emerald-100 */
.sbf-avail-badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  margin-top: 12px; border-radius: 9999px; border: 1px solid #a7f3d0;
  background: #ecfdf5; color: #047857;
  padding: 4px 12px; font-size: 12px; font-weight: 600;
}
.sbf-avail-dot { width: 6px; height: 6px; border-radius: 9999px; background: #10b981; -ms-flex-negative: 0; flex-shrink: 0; margin-right: 6px; }
.sbf-loc-card.is-selected .sbf-avail-badge {
  border-color: rgba(167,243,208,0.4); background: rgba(52,211,153,0.15); color: #d1fae5;
}
.sbf-loc-card.is-selected .sbf-avail-dot { background: #6ee7b7; }

/* ── Step 1: Treatment ───────────────────────────────────── */
/* space-y-3 */
.sbf-treatment-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

/* Locked duration button (non-clickable, selected state) */
.sbf-dur-btn[aria-disabled="true"] { cursor: default !important; pointer-events: none !important; }
.sbf-locked-continue { margin-top: 20px; }

/* rounded-3xl border border-slate-100 bg-slate-50 p-4 */
.sbf-treatment-card { border-radius: 24px; border: 1px solid #f1f5f9; background: #f8fafc; padding: 16px; }
.sbf-treatment-top  { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
/* h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-amber-100 bg-white */
.sbf-treatment-img  {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  width: 56px; height: 56px; -ms-flex-negative: 0; flex-shrink: 0;
  border-radius: 16px; border: 1px solid #fef3c7; background: #fff;
}
.sbf-treatment-img img { width: 40px; height: 40px; -o-object-fit: contain; object-fit: contain; }
.sbf-treatment-name { font-family: "Geist",  "Helvetica Neue", sans-serif !important; font-size: 16px !important; font-weight: 600 !important; color: #020617 !important; line-height: normal !important; text-transform: none !important; letter-spacing: normal !important; }
.sbf-treatment-feel { font-family: "Geist",  "Helvetica Neue", sans-serif !important; font-size: 14px !important; color: #64748b !important; margin-top: 4px !important; line-height: normal !important; text-transform: none !important; letter-spacing: normal !important; }

/* mt-4 grid grid-cols-2 gap-3 sm:grid-cols-3 */
.sbf-dur-grid { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 12px 1fr; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
@media (min-width: 640px) { .sbf-dur-grid { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } }

/* rounded-2xl border px-4 py-3 text-center transition active:scale-[0.97]
   unselected: border-slate-200 bg-white hover:shadow-md
   selected:   border-[#1c3766] bg-[#1c3766] text-white */
.sbf-dur-btn {
  font-family: "Geist",  "Helvetica Neue", sans-serif !important;
  border-radius: 16px !important; border: 1px solid #e2e8f0 !important; background: #fff !important;
  padding: 12px 16px !important; text-align: center !important;
  line-height: normal !important; text-transform: none !important; letter-spacing: normal !important;
  -webkit-transition: border-color 150ms, background 150ms, color 150ms, -webkit-box-shadow 150ms !important;
  transition: border-color 150ms, background 150ms, color 150ms, -webkit-box-shadow 150ms !important;
  transition: box-shadow 150ms, border-color 150ms, background 150ms, color 150ms !important;
  transition: box-shadow 150ms, border-color 150ms, background 150ms, color 150ms, -webkit-box-shadow 150ms !important;
}
.sbf-dur-btn:hover:not(.is-selected) { -webkit-box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06) !important; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06) !important; }
.sbf-dur-btn:active { -webkit-transform: scale(0.97) !important; -ms-transform: scale(0.97) !important; transform: scale(0.97) !important; }
.sbf-dur-btn.is-selected { border-color: #1c3766 !important; background: #1c3766 !important; color: #fff !important; }
.sbf-dur-min   { font-size: 14px !important; font-weight: 600 !important; line-height: normal !important; text-transform: none !important; letter-spacing: normal !important; }
.sbf-dur-price { font-size: 14px !important; color: #64748b !important; margin-top: 2px !important; line-height: normal !important; text-transform: none !important; letter-spacing: normal !important; }
.sbf-dur-btn.is-selected .sbf-dur-price { color: rgba(255,255,255,0.80)!important; }

/* ── Step 2: Date & Time ─────────────────────────────────── */
/* -mx-1 mb-6 flex gap-3 overflow-x-auto px-1 pb-2 pt-2 hide scrollbar */
.sbf-date-carousel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; overflow-x: auto;
  margin: 0 -4px 24px; padding: 8px 4px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.sbf-date-carousel::-webkit-scrollbar { display: none; }

/* Day button:
   relative flex min-w-[76px] flex-col items-center rounded-2xl border px-3 py-3
   transition active:scale-[0.97]
   selected: border-[#1c3766] bg-[#1c3766] text-white shadow-lg
   today+avail: border-transparent bg-white shadow-md ring-2 ring-[#1c3766] ring-offset-2
   avail: border-slate-100 bg-slate-50 hover:bg-white hover:shadow-md
   unavail: cursor-not-allowed border-slate-100 bg-slate-50/60 opacity-40 */
.sbf-day-btn {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important; -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important;
  min-width: 76px !important; -ms-flex-negative: 0 !important; flex-shrink: 0 !important;
  border-radius: 16px !important; border: 1px solid #f1f5f9 !important; background: #f8fafc !important;
  padding: 12px !important; position: relative !important;
  -webkit-transition: background 150ms, border-color 150ms, -webkit-box-shadow 150ms !important;
  transition: background 150ms, border-color 150ms, -webkit-box-shadow 150ms !important;
  transition: background 150ms, box-shadow 150ms, border-color 150ms !important;
  transition: background 150ms, box-shadow 150ms, border-color 150ms, -webkit-box-shadow 150ms !important;
}
.sbf-day-btn:hover:not(:disabled):not(.is-selected):not(.is-today) {
  background: #fff !important; -webkit-box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06) !important; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06) !important;
}
.sbf-day-btn:active:not(:disabled) { -webkit-transform: scale(0.97) !important; -ms-transform: scale(0.97) !important; transform: scale(0.97) !important; }
.sbf-day-btn.is-today {
  border-color: transparent !important; background: #fff !important;
  -webkit-box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06) !important;
          box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06) !important;
  outline: 2px solid #1c3766 !important; outline-offset: 2px !important;
}
.sbf-day-btn.is-selected {
  border-color: #1c3766 !important; background: #1c3766 !important; color: #fff !important;
  -webkit-box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05) !important;
          box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05) !important;
}
.sbf-day-btn:disabled { cursor: not-allowed !important; background: rgba(248,250,252,0.6) !important; opacity: 0.6 !important; pointer-events: none !important; }

/* text-xs font-semibold uppercase tracking-wide */
.sbf-day-dow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #94a3b8;
}
.sbf-day-btn.is-today:not(.is-selected) .sbf-day-dow  { color: #1c3766; }
.sbf-day-btn.is-selected .sbf-day-dow { color: rgba(255,255,255,0.7); }
/* h-1.5 w-1.5 rounded-full bg-[#1c3766] */
.sbf-today-dot { width: 6px; height: 6px; border-radius: 9999px; background: #1c3766; display: inline-block; margin-right: 4px;}
/* mt-1 text-xl font-semibold */
.sbf-day-num   { font-size: 20px; font-weight: 600; margin-top: 4px; }
/* mt-1 text-[10px] font-medium uppercase tracking-wide */
.sbf-day-month { font-size: 10px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: #94a3b8; margin-top: 4px; }
.sbf-day-btn.is-selected .sbf-day-month { color: rgba(255,255,255,0.7); }
/* mt-1 text-[11px] font-medium */
.sbf-day-open { font-size: 11px; font-weight: 500; color: #16a34a; margin-top: 4px; }
.sbf-day-btn.is-selected .sbf-day-open { color: rgba(255,255,255,0.7); }
.sbf-day-closed { font-size: 11px; font-weight: 500; color: #94a3b8; margin-top: 4px; }

/* min-h-[180px] flex-1 overflow-y-auto */
.sbf-times-area { min-height: 180px; }
/* rounded-3xl bg-slate-50 p-6 text-center text-sm text-slate-500 */
.sbf-no-date-msg { border-radius: 24px; background: #f8fafc; padding: 24px; text-align: center; font-size: 14px; color: #64748b; }

.sbf-no-slots { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 180px; text-align: center; }
.sbf-no-slots-icon { width: 48px; height: 48px; border-radius: 9999px; background: #fef2f2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 12px; color: #ef4444; }
.sbf-no-slots-title { font-size: 16px; font-weight: 600; color: #0f172a; margin: 0; }
.sbf-no-slots-sub { font-size: 13px; color: #64748b; margin-top: 4px; }

/* space-y-5 */
.sbf-time-periods { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

/* mb-2.5 flex items-center gap-2 */
.sbf-period-label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 10px; }
.sbf-period-icon  { color: #1c3766; -ms-flex-negative: 0; flex-shrink: 0; }
/* text-xs font-semibold uppercase tracking-[0.14em] text-slate-500 */
.sbf-period-name  { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #64748b; }
/* h-px flex-1 bg-slate-100 */
.sbf-period-rule  { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 1px; background: #f1f5f9; }

/* grid grid-cols-3 gap-2.5 */
.sbf-time-grid { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 10px 1fr 10px 1fr; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

/* rounded-2xl border py-3.5 text-center text-[15px] font-semibold tracking-tight tabular-nums
   transition active:scale-[0.96]
   unselected: border-slate-200/80 bg-white text-slate-800 hover:border-[#1c3766]/40 hover:shadow-md
   selected:   border-[#1c3766] bg-[#1c3766] text-white shadow-lg shadow-[#1c3766]/20 */
.sbf-time-btn {
  font-family: "Geist",  "Helvetica Neue", sans-serif !important;
  border-radius: 16px !important; border: 1px solid rgba(226,232,240,0.8) !important;
  background: #fff !important; padding: 14px 4px !important; text-align: center !important;
  font-size: 15px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; font-variant-numeric: tabular-nums !important;
  color: #1e293b !important; line-height: normal !important; text-transform: none !important;
  -webkit-transition: border-color 150ms, background 150ms, color 150ms, -webkit-box-shadow 150ms !important;
  transition: border-color 150ms, background 150ms, color 150ms, -webkit-box-shadow 150ms !important;
  transition: border-color 150ms, box-shadow 150ms, background 150ms, color 150ms !important;
  transition: border-color 150ms, box-shadow 150ms, background 150ms, color 150ms, -webkit-box-shadow 150ms !important;
}
.sbf-time-btn:hover:not(.is-selected) {
  border-color: rgba(20,54,95,0.4) !important;
  -webkit-box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06) !important;
          box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06) !important;
}
.sbf-time-btn:active { -webkit-transform: scale(0.96) !important; -ms-transform: scale(0.96) !important; transform: scale(0.96) !important; }
.sbf-time-btn.is-selected {
  border-color: #1c3766 !important; background: #1c3766 !important; color: #fff !important;
  -webkit-box-shadow: 0 10px 15px -3px rgba(20,54,95,0.2), 0 4px 6px -2px rgba(20,54,95,0.1) !important;
          box-shadow: 0 10px 15px -3px rgba(20,54,95,0.2), 0 4px 6px -2px rgba(20,54,95,0.1) !important;
}

/* Bottom bar:
   mt-6 flex flex-col gap-3 rounded-3xl border border-slate-100 bg-slate-50 p-4
   sm:flex-row sm:items-center sm:justify-between sm:p-3 sm:pl-5 */
.sbf-dt-bar {
  margin-top: 24px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
  border-radius: 24px; border: 1px solid #f1f5f9; background: #f8fafc; padding: 16px;
}
@media (min-width: 640px) {
  .sbf-dt-bar { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 12px 12px 12px 20px; }
}
.sbf-dt-label { font-size: 11px!important; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: #94a3b8; }
.sbf-dt-value { font-size: 14px!important; font-weight: 600; color: #020617; }
.sbf-dt-placeholder { font-size: 14px!important; color: #94a3b8; }

/* inline-flex w-full shrink-0 items-center justify-center gap-2 rounded-full
   bg-[#1c3766] px-6 py-3.5 text-sm font-semibold text-white shadow-lg
   transition-transform active:scale-[0.98] disabled:opacity-30 sm:w-auto sm:py-3 */
.spa-booking-root .sbf-btn-dt-continue {
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important;
  width: 100% !important; -ms-flex-negative: 0 !important; flex-shrink: 0 !important; border-radius: 9999px !important;
  font-family: "Geist",  "Helvetica Neue", sans-serif !important;
  background: #1c3766 !important; color: #fff !important; padding: 14px 24px !important;
  font-size: 14px !important; font-weight: 600 !important; border: none !important;
  line-height: normal !important; text-transform: none !important; letter-spacing: normal !important;
  -webkit-box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05) !important;
          box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05) !important;
  -webkit-transition: -webkit-transform 150ms !important;
  transition: -webkit-transform 150ms !important;
  transition: transform 150ms !important;
  transition: transform 150ms, -webkit-transform 150ms !important;
}

.sbf-btn-dt-continue svg {
    margin-left: 8px;
}

.spa-booking-root .sbf-btn-dt-continue:active { -webkit-transform: scale(0.98) !important; -ms-transform: scale(0.98) !important; transform: scale(0.98) !important; }
.spa-booking-root .sbf-btn-dt-continue:disabled { opacity: 0.3 !important; cursor: default !important; }
@media (min-width: 640px) { .spa-booking-root .sbf-btn-dt-continue { width: auto !important; padding: 12px 24px !important; } }

/* ── Step 3: Therapist ───────────────────────────────────── */
/* No-pref:
   flex w-full items-center gap-4 rounded-3xl border p-4 text-left transition
   unselected: border-slate-100 bg-slate-50 hover:bg-white hover:shadow-md
   selected:   border-[#1c3766] bg-[#1c3766] text-white */
.sbf-no-pref-btn {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important;
  width: 100% !important; border-radius: 24px !important; border: 1px solid #f1f5f9 !important;
  background: #f8fafc !important; padding: 16px !important; text-align: left !important;
  -webkit-transition: background 150ms, border-color 150ms, -webkit-box-shadow 150ms !important;
  transition: background 150ms, border-color 150ms, -webkit-box-shadow 150ms !important;
  transition: background 150ms, box-shadow 150ms, border-color 150ms !important;
  transition: background 150ms, box-shadow 150ms, border-color 150ms, -webkit-box-shadow 150ms !important;
}
.sbf-no-pref-btn:hover:not(.is-selected) {
  background: #fff !important; -webkit-box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06) !important; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06) !important;
}
.sbf-no-pref-btn.is-selected { border-color: #1c3766 !important; background: #1c3766 !important; color: #fff !important; }

/* h-12 w-12 items-center justify-center rounded-2xl bg-white text-[#1c3766] shadow-sm */
.sbf-no-pref-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  width: 48px; height: 48px; -ms-flex-negative: 0; flex-shrink: 0;
  border-radius: 16px; background: #fff; color: #1c3766;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.05);
          box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.sbf-no-pref-title { font-size: 15px !important; font-weight: 600 !important; line-height: normal !important; text-transform: none !important; letter-spacing: normal !important; }
.sbf-no-pref-sub   { font-size: 14px !important; color: #64748b !important; margin-top: 2px !important; line-height: normal !important; text-transform: none !important; letter-spacing: normal !important; }
.sbf-no-pref-btn.is-selected .sbf-no-pref-sub { color: rgba(255,255,255,0.7)!important; }
/* Check icon: text-emerald-300 */
.sbf-no-pref-check { color: #6ee7b7; -ms-flex-negative: 0; flex-shrink: 0; }

/* mt-4 flex w-full items-center justify-between rounded-2xl px-2 py-2 text-sm font-semibold text-[#1c3766] */
.sbf-specific-toggle {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important;
  width: 100% !important; margin-top: 16px !important;
  border-radius: 16px !important; padding: 8px !important; background: none !important; border: none !important;
  font-size: 14px !important; font-weight: 600 !important; color: #1c3766 !important;
  line-height: normal !important; text-transform: none !important; letter-spacing: normal !important;
}
/* ChevronDown transition-transform rotate-180 when open */
.sbf-specific-toggle .sbf-icon { -webkit-transition: -webkit-transform 200ms; transition: -webkit-transform 200ms; transition: transform 200ms; transition: transform 200ms, -webkit-transform 200ms; }
.sbf-specific-toggle.is-open .sbf-icon { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }

/* AnimatePresence: height 0→scrollHeight, opacity 0→1 (height driven by JS) */
.sbf-therapist-collapsible { overflow: hidden; height: 0; opacity: 0; -webkit-transition: height 350ms cubic-bezier(0.4,0,0.2,1), opacity 250ms cubic-bezier(0.4,0,0.2,1); transition: height 350ms cubic-bezier(0.4,0,0.2,1), opacity 250ms cubic-bezier(0.4,0,0.2,1); }
.sbf-therapist-collapsible.is-open { opacity: 1; }

/* space-y-3 pt-2 */
.sbf-therapist-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-top: 8px; }

/* Therapist row:
   flex w-full items-center gap-3 rounded-3xl border p-4 text-left transition
   unselected: border-slate-100 bg-slate-50 hover:bg-white hover:shadow-md
   selected:   border-[#1c3766] bg-[#1c3766] text-white */
.sbf-therapist-row {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important;
  border-radius: 24px !important; border: 1px solid #f1f5f9 !important; background: #f8fafc !important; padding: 16px !important;
  -webkit-transition: background 150ms, border-color 150ms, -webkit-box-shadow 150ms !important;
  transition: background 150ms, border-color 150ms, -webkit-box-shadow 150ms !important;
  transition: background 150ms, box-shadow 150ms, border-color 150ms !important;
  transition: background 150ms, box-shadow 150ms, border-color 150ms, -webkit-box-shadow 150ms !important;
}
.sbf-therapist-row:hover:not(.is-selected) {
  background: #fff !important; -webkit-box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06) !important; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06) !important;
}
.sbf-therapist-row.is-selected { border-color: #1c3766 !important; background: #1c3766 !important; color: #fff !important; }

/* flex flex-1 items-center gap-3 text-left */
.sbf-therapist-pick { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-flex: 1 !important; -ms-flex: 1 !important; flex: 1 !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; text-align: left !important; background: none !important; border: none !important; color: inherit !important; padding: 0 !important;}
/* relative h-14 w-14 shrink-0 overflow-hidden rounded-2xl bg-white shadow-sm */
.sbf-therapist-photo {
  width: 56px; height: 56px; -ms-flex-negative: 0; flex-shrink: 0;
  border-radius: 16px; overflow: hidden; background: #fff;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.05);
          box-shadow: 0 1px 2px rgba(0,0,0,0.05); position: relative;
}
.sbf-therapist-photo img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover;-o-object-position: top;object-position: top;}
.sbf-therapist-name { font-size: 15px !important; font-weight: 600 !important; line-height: normal !important; text-transform: none !important; letter-spacing: normal !important; }
.sbf-therapist-exp  { font-size: 14px !important; color: #64748b !important; margin-top: 2px !important; line-height: normal !important; text-transform: none !important; letter-spacing: normal !important; }
.sbf-therapist-row.is-selected .sbf-therapist-exp { color: rgba(255,255,255,0.7)!important; }

/* Info btn:
   flex h-8 w-8 shrink-0 items-center justify-center rounded-full border transition
   unselected: border-slate-200 bg-white text-[#1c3766] hover:border-[#1c3766]
   selected:   border-white/30 text-white hover:bg-white/10 */
.sbf-info-btn {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important;
  width: 32px !important; height: 32px !important; -ms-flex-negative: 0 !important; flex-shrink: 0 !important;
  border-radius: 9999px !important; border: 1px solid #e2e8f0 !important; background: #fff !important; color: #1c3766 !important;
  -webkit-transition: border-color 150ms, background 150ms !important;
  transition: border-color 150ms, background 150ms !important;
}
.sbf-info-btn:hover { border-color: #1c3766 !important; }
.sbf-therapist-row.is-selected .sbf-info-btn { border-color: rgba(255,255,255,0.3) !important; background: transparent !important; color: #fff !important; }
.sbf-therapist-row.is-selected .sbf-info-btn:hover { background: rgba(255,255,255,0.1) !important; }
.sbf-therapist-check { -ms-flex-negative: 0; flex-shrink: 0; color: #6ee7b7; }

/* ── Therapist Modal ─────────────────────────────────────── */
/* fixed inset-0 z-50 flex items-end justify-center bg-slate-950/50 sm:items-center sm:p-4 */
.sbf-modal-backdrop {
  position: fixed; 
      top: 0;
    right: 0;
    bottom: 0;
  inset: 0; z-index: 9999;
  display: none;                              /* shown/hidden by JS */
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  background: rgba(2,6,23,0.5);
  opacity: 0; pointer-events: none;
  -webkit-transition: opacity 260ms ease;
  transition: opacity 260ms ease;
}
.sbf-modal-backdrop.sbf-modal-visible { display: -webkit-box; display: -ms-flexbox; display: flex; }
.sbf-modal-backdrop.is-open { opacity: 1; pointer-events: all; }
@media (min-width: 640px) {
  .sbf-modal-backdrop.sbf-modal-visible { -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 16px; }
}

/* Panel: slides up from bottom (mobile) or scales up (desktop).
   Matches framer-motion spring(damping:30, stiffness:300) ~270ms */
.sbf-modal-panel {
  width: 100%; max-width: 448px;
  border-radius: 24px 24px 0 0; background: #fff; padding: 24px;
  -webkit-box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
          box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%);               /* closed: off-screen below */
  /* spring(mass:1, stiffness:300, damping:30) sampled values via linear() */
  -webkit-transition: -webkit-transform 550ms linear(
    0, 0.042, 0.14, 0.263, 0.39, 0.51, 0.618, 0.709,
    0.784, 0.844, 0.89, 0.926, 0.952, 0.971, 0.984,
    0.992, 0.998, 1.002, 1.003, 1.004, 1.004, 1.003,
    1.002, 1.001, 1
  );
  transition: -webkit-transform 550ms linear(
    0, 0.042, 0.14, 0.263, 0.39, 0.51, 0.618, 0.709,
    0.784, 0.844, 0.89, 0.926, 0.952, 0.971, 0.984,
    0.992, 0.998, 1.002, 1.003, 1.004, 1.004, 1.003,
    1.002, 1.001, 1
  );
  transition: transform 550ms linear(
    0, 0.042, 0.14, 0.263, 0.39, 0.51, 0.618, 0.709,
    0.784, 0.844, 0.89, 0.926, 0.952, 0.971, 0.984,
    0.992, 0.998, 1.002, 1.003, 1.004, 1.004, 1.003,
    1.002, 1.001, 1
  );
  transition: transform 550ms linear(
    0, 0.042, 0.14, 0.263, 0.39, 0.51, 0.618, 0.709,
    0.784, 0.844, 0.89, 0.926, 0.952, 0.971, 0.984,
    0.992, 0.998, 1.002, 1.003, 1.004, 1.004, 1.003,
    1.002, 1.001, 1
  ), -webkit-transform 550ms linear(
    0, 0.042, 0.14, 0.263, 0.39, 0.51, 0.618, 0.709,
    0.784, 0.844, 0.89, 0.926, 0.952, 0.971, 0.984,
    0.992, 0.998, 1.002, 1.003, 1.004, 1.004, 1.003,
    1.002, 1.001, 1
  );
  will-change: transform;
}
.sbf-modal-backdrop.is-open .sbf-modal-panel {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}
/* Closing: faster ease-in matches Framer exit speed */
.sbf-modal-backdrop.sbf-modal-visible:not(.is-open) .sbf-modal-panel {
  -webkit-transition: -webkit-transform 300ms cubic-bezier(0.4, 0, 1, 1);
  transition: -webkit-transform 300ms cubic-bezier(0.4, 0, 1, 1);
  transition: transform 300ms cubic-bezier(0.4, 0, 1, 1);
  transition: transform 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 300ms cubic-bezier(0.4, 0, 1, 1);
}
@media (min-width: 640px) {
  .sbf-modal-panel {
    border-radius: 24px; /* full rounded on desktop */
  }
}

/* mx-auto mb-4 h-1.5 w-10 rounded-full bg-slate-200 sm:hidden */
.sbf-modal-handle { width: 40px; height: 6px; border-radius: 9999px; background: #e2e8f0; margin: 0 auto 16px; }
@media (min-width: 640px) { .sbf-modal-handle { display: none; } }

/* flex items-start justify-between gap-4 */
.sbf-modal-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
/* flex items-center gap-4 */
.sbf-modal-tinfo  { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
/* h-20 w-20 shrink-0 overflow-hidden rounded-2xl bg-slate-100 shadow-sm */
.sbf-modal-photo { width: 80px; height: 80px; -ms-flex-negative: 0; flex-shrink: 0; border-radius: 16px; overflow: hidden; background: #f1f5f9; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.05); box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.sbf-modal-photo img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover;-o-object-position: top;object-position: top;}
.sbf-modal-name  { font-family: "Geist",  "Helvetica Neue", sans-serif !important; font-size: 18px !important; font-weight: 600 !important; color: #020617 !important; line-height: normal !important; text-transform: none !important; letter-spacing: normal !important; }
.sbf-modal-exp   { font-family: "Geist",  "Helvetica Neue", sans-serif !important; font-size: 14px !important; color: #64748b !important; margin-top: 2px !important; line-height: normal !important; text-transform: none !important; letter-spacing: normal !important; }
/* flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-slate-400 hover:bg-slate-100 */
.sbf-modal-close {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important;
  width: 32px !important; height: 32px !important; -ms-flex-negative: 0 !important; flex-shrink: 0 !important;
  border-radius: 9999px !important; background: none !important; border: none !important; color: #94a3b8 !important;
  line-height: normal !important; text-transform: none !important; letter-spacing: normal !important;
  -webkit-transition: background 150ms !important;
  transition: background 150ms !important;
}
.sbf-modal-close:hover { background: #f1f5f9 !important; }
/* mt-5 text-sm leading-relaxed text-slate-600 */
.sbf-modal-bio { margin-top: 20px; font-size: 14px!important; line-height: 1.625; color: #475569; }
/* mt-5 space-y-2.5 */
.sbf-modal-creds { margin-top: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; list-style: none; }
/* flex items-center gap-2.5 text-sm font-medium text-slate-700 */
.sbf-modal-cred  { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 14px; font-weight: 500; color: #334155; }
/* flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-emerald-50 text-emerald-600 */
.sbf-modal-cred-star {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  width: 24px; height: 24px; -ms-flex-negative: 0; flex-shrink: 0;
  border-radius: 9999px; background: #ecfdf5;
}
.sbf-modal-cred-star svg { color: #10b981; }
/* mt-6 w-full rounded-full bg-[#1c3766] py-3.5 text-sm font-semibold text-white shadow-lg transition-transform active:scale-[0.98] */
.spa-booking-root .sbf-modal-book-btn {
  margin-top: 24px !important; width: 100% !important; border-radius: 9999px !important;
  padding: 14px !important; background: #1c3766 !important; color: #fff !important;
  font-size: 14px !important; font-weight: 600 !important; border: none !important;
  line-height: normal !important; text-transform: none !important; letter-spacing: normal !important;
  -webkit-box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05) !important;
          box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05) !important;
  -webkit-transition: -webkit-transform 150ms !important;
  transition: -webkit-transform 150ms !important;
  transition: transform 150ms !important;
  transition: transform 150ms, -webkit-transform 150ms !important;
}
.spa-booking-root .sbf-modal-book-btn:active { -webkit-transform: scale(0.98) !important; -ms-transform: scale(0.98) !important; transform: scale(0.98) !important; }

/* ── Step 4: Details ─────────────────────────────────────── */
/* mb-6 rounded-[1.5rem] border border-slate-100 bg-slate-50 p-3 */
.sbf-summary-table { margin-bottom: 24px; border-radius: 24px; border: 1px solid #f1f5f9; background: #f8fafc; padding: 12px; }
/* flex items-center justify-between border-b border-white px-3 py-3 last:border-b-0 */
.sbf-summary-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-bottom: 1px solid #fff; padding: 12px; }
.sbf-summary-row:last-child { border-bottom: none; }
/* text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400 */
.sbf-summary-key   { font-size: 11px!important; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #94a3b8; }
/* mt-0.5 text-sm font-semibold text-slate-950 */
.sbf-summary-value { font-size: 14px!important; font-weight: 600; color: #020617; margin-top: 2px; }
/* rounded-full bg-white px-3 py-1.5 text-xs font-semibold text-[#1c3766] shadow-sm transition-transform active:scale-95 */
.spa-booking-root .sbf-edit-btn {
  border-radius: 9999px !important; background: #fff !important; padding: 6px 12px !important;
  font-size: 12px !important; font-weight: 600 !important; color: #1c3766 !important; border: none !important;
  line-height: normal !important; text-transform: none !important; letter-spacing: normal !important;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
          box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
  -webkit-transition: -webkit-transform 150ms !important;
  transition: -webkit-transform 150ms !important;
  transition: transform 150ms !important;
  transition: transform 150ms, -webkit-transform 150ms !important;
}
.spa-booking-root .sbf-edit-btn:active { -webkit-transform: scale(0.95) !important; -ms-transform: scale(0.95) !important; transform: scale(0.95) !important; }

/* flex cursor-pointer items-start gap-3 rounded-2xl bg-slate-50 p-4 */
.sbf-agree-label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; cursor: pointer; border-radius: 16px; background: #f8fafc; padding: 16px; }
/* mt-0.5 h-5 w-5 shrink-0 accent-[#1c3766] */
.sbf-agree-label input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; -ms-flex-negative: 0; flex-shrink: 0; accent-color: #1c3766; cursor: pointer; }
/* text-sm leading-6 text-slate-600 */
.sbf-agree-text { font-size: 14px; line-height: 24px; color: #475569; }
.sbf-agree-link { font-weight: 600; color: #1c3766; }

/* mt-5 flex flex-col gap-4 rounded-3xl bg-[#1c3766] p-5 text-white
   sm:flex-row sm:items-center sm:justify-between */
.sbf-pay-bar {
  margin-top: 20px; border-radius: 24px; background: #1c3766;
  padding: 20px; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
@media (min-width: 640px) { .sbf-pay-bar { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } }
/* text-sm text-white/70 */
.sbf-pay-label  { font-size: 14px!important; color: rgba(255,255,255,0.7); }
/* text-3xl font-light */
.sbf-pay-amount { font-size: 30px!important; font-weight: 300;line-height: 34px;}

/* inline-flex w-full items-center justify-center gap-2 whitespace-nowrap rounded-full
   bg-white px-6 py-4 text-sm font-semibold text-[#1c3766] shadow-lg
   transition active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-40
   sm:w-auto */
.spa-booking-root .sbf-confirm-btn {
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important;
  width: 100% !important; white-space: nowrap !important; border-radius: 9999px !important;
  background: #fff !important; color: #1c3766 !important; padding: 16px 24px !important;
  font-size: 14px !important; font-weight: 600 !important; border: none !important;
  line-height: normal !important; text-transform: none !important; letter-spacing: normal !important;
  -webkit-box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05) !important;
          box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05) !important;
  -webkit-transition: -webkit-transform 150ms !important;
  transition: -webkit-transform 150ms !important;
  transition: transform 150ms !important;
  transition: transform 150ms, -webkit-transform 150ms !important;
}

.sbf-confirm-btn svg {
    margin-right: 8px;
}
.spa-booking-root .sbf-confirm-btn:active { -webkit-transform: scale(0.98) !important; -ms-transform: scale(0.98) !important; transform: scale(0.98) !important; }
.spa-booking-root .sbf-confirm-btn:disabled { cursor: not-allowed !important; opacity: 0.4 !important; }
@media (min-width: 640px) { .spa-booking-root .sbf-confirm-btn { width: auto !important; } }

/* ── Package review (same structure as Details) ─────────── */
.sbf-pkg-review-table { margin-bottom: 24px; border-radius: 24px; border: 1px solid #f1f5f9; background: #f8fafc; padding: 12px; }
.sbf-pkg-review-row   { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-bottom: 1px solid #fff; padding: 12px; }
.sbf-pkg-review-row:last-child { border-bottom: none; }
.sbf-pkg-sessions-note { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 4px; }

/* ── Full-screen overlays ────────────────────────────────── */
/* flex min-h-screen items-center justify-center bg-[#f6f3ee] px-4 py-10 */
.sbf-fullscreen {
  display: none; min-height: 100vh; background: #f6f3ee;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  padding: 40px 16px; text-align: left; color: #111827;
}
.sbf-fullscreen.is-active { display: -webkit-box; display: -ms-flexbox; display: flex; }
.sbf-fs-wrap { width: 100%; max-width: 448px; }

/* ── Post-login resume: prevent flash of Step 1 ─────────── */
/* When .sbf-resuming is on <html>, hide the booking form and
   show the processing overlay immediately, before booking.js loads. */
.sbf-resuming #sbf-main-flow { display: none !important; }
.sbf-resuming #sbf-processing-screen { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; }

/* mb-5 inline-flex items-center gap-2 text-sm font-medium text-slate-500 transition hover:text-[#1c3766] */
.sbf-back-link {
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; margin-bottom: 20px !important;
  font-size: 14px !important; font-weight: 500 !important; color: #64748b !important; background: none !important; border: none !important;
  line-height: normal !important; text-transform: none !important; letter-spacing: normal !important;
  -webkit-transition: color 150ms !important;
  transition: color 150ms !important;
}
.sbf-back-link:hover { color: #1c3766 !important; }

/* overflow-hidden rounded-[2rem] border border-white bg-white shadow-xl */
.sbf-fs-card { border-radius: 2rem; border: 1px solid #fff; background: #fff; overflow: hidden; -webkit-box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); }
/* bg-[#1c3766] px-6 py-7 text-white */
.sbf-fs-head  { background: #1c3766; padding: 24px 24px 28px; color: #fff; }
/* mb-2 inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-3 py-1.5 text-xs text-white/80 */
.sbf-fs-badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 8px;
  border-radius: 9999px; border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.10); padding: 6px 12px;
  font-size: 12px; color: rgba(255,255,255,0.8);
}
/* text-2xl font-light tracking-[-0.02em] */
.sbf-fs-title { font-family: "Geist",  "Helvetica Neue", sans-serif !important; font-size: 24px !important; font-weight: 300 !important; letter-spacing: -0.02em !important; line-height: normal !important; text-transform: none !important; }
/* mt-1 text-sm text-white/70 */
.sbf-fs-sub   { font-size: 14px; color: rgba(255,255,255,0.7); margin-top: 4px; }
.sbf-fs-body  { padding: 24px; }

/* Auth tab bar: mb-6 grid grid-cols-2 gap-2 rounded-2xl bg-slate-100 p-1 */
.sbf-tab-bar { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 8px 1fr; grid-template-columns: 1fr 1fr; gap: 8px; border-radius: 16px; background: #f1f5f9; padding: 4px; margin-bottom: 24px; }
/* rounded-xl py-2.5 text-sm font-semibold transition */
.sbf-tab-btn { border-radius: 12px !important; padding: 10px !important; font-size: 14px !important; font-weight: 600 !important; color: #64748b !important; border: none !important; background: none !important; line-height: normal !important; text-transform: none !important; letter-spacing: normal !important; -webkit-transition: background 150ms, color 150ms !important; transition: background 150ms, color 150ms !important; }
.sbf-tab-btn.is-active { background: #fff !important; color: #1c3766 !important; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important; box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important; }
.sbf-tab-panel { display: none; }
.sbf-tab-panel.is-active          { display: block; -webkit-animation: sbf-tab-in-right  200ms ease both; animation: sbf-tab-in-right  200ms ease both; }
.sbf-tab-panel.is-active.from-left { -webkit-animation: sbf-tab-in-left 200ms ease both; animation: sbf-tab-in-left 200ms ease both; }
.sbf-tab-panel.is-exiting          { display: block; -webkit-animation: sbf-tab-out-left  160ms ease-in both; animation: sbf-tab-out-left  160ms ease-in both; pointer-events: none; }
.sbf-tab-panel.is-exiting.to-right { -webkit-animation: sbf-tab-out-right 160ms ease-in both; animation: sbf-tab-out-right 160ms ease-in both; }
@-webkit-keyframes sbf-tab-in-right  { from { opacity: 0; -webkit-transform: translateX(12px); transform: translateX(12px);  } to { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } }
@keyframes sbf-tab-in-right  { from { opacity: 0; -webkit-transform: translateX(12px); transform: translateX(12px);  } to { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } }
@-webkit-keyframes sbf-tab-in-left   { from { opacity: 0; -webkit-transform: translateX(-12px); transform: translateX(-12px); } to { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } }
@keyframes sbf-tab-in-left   { from { opacity: 0; -webkit-transform: translateX(-12px); transform: translateX(-12px); } to { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } }
@-webkit-keyframes sbf-tab-out-left  { from { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0);     } to { opacity: 0; -webkit-transform: translateX(-12px); transform: translateX(-12px); } }
@keyframes sbf-tab-out-left  { from { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0);     } to { opacity: 0; -webkit-transform: translateX(-12px); transform: translateX(-12px); } }
@-webkit-keyframes sbf-tab-out-right { from { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0);     } to { opacity: 0; -webkit-transform: translateX(12px); transform: translateX(12px);  } }
@keyframes sbf-tab-out-right { from { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0);     } to { opacity: 0; -webkit-transform: translateX(12px); transform: translateX(12px);  } }

/* Auth field: label > span + div.wrap > icon + input */
/* block → .sbf-field */
.sbf-field       { display: block; margin-bottom: 16px; }
.sbf-field:last-child { margin-bottom: 0; }
/* mb-1.5 block text-xs font-semibold uppercase tracking-[0.16em] text-slate-400 */
.sbf-field-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #94a3b8; margin-bottom: 6px; }
/* flex items-center gap-3 rounded-2xl border border-slate-200 bg-white px-4 py-3 focus-within:border-[#1c3766] */
.sbf-field-wrap  {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  border-radius: 16px; border: 1px solid #e2e8f0; background: #fff; padding: 12px 16px;
  -webkit-transition: border-color 150ms;
  transition: border-color 150ms;
}
.sbf-field-wrap:focus-within { border-color: #1c3766; }
/* text-slate-400 */
.sbf-field-icon  { color: #94a3b8; -ms-flex-negative: 0; flex-shrink: 0; }
/* w-full bg-transparent text-sm text-slate-950 outline-none placeholder:text-slate-400 */
.sbf-field-wrap input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1; background: transparent; border: none; outline: none;
  font-size: 14px; color: #020617;
}
.sbf-field-wrap input::-webkit-input-placeholder { color: #94a3b8; }
.sbf-field-wrap input::-moz-placeholder { color: #94a3b8; }
.sbf-field-wrap input:-ms-input-placeholder { color: #94a3b8; }
.sbf-field-wrap input::-ms-input-placeholder { color: #94a3b8; }
.sbf-field-wrap input::placeholder { color: #94a3b8; }
/* grid grid-cols-2 gap-4 */
.sbf-fields-row { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 16px 1fr; grid-template-columns: 1fr 1fr; gap: 16px; }

/* mt-3 text-right */
.sbf-forgot-row { text-align: right; margin-top: 12px; }
/* text-sm font-semibold text-[#1c3766] underline-offset-2 hover:underline */
.sbf-forgot-btn { font-size: 14px !important; font-weight: 600 !important; color: #1c3766 !important; background: none !important; border: none !important; line-height: normal !important; text-transform: none !important; letter-spacing: normal !important; }
.sbf-forgot-btn:hover { text-decoration: underline !important; text-underline-offset: 2px !important; }

/* mt-5/mt-6 inline-flex w-full items-center justify-center gap-2 rounded-full
   bg-[#1c3766] px-6 py-4 text-sm font-semibold text-white shadow-lg
   transition active:scale-[0.98] */
.sbf-fs-primary-btn {
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important;
  width: 100% !important; margin-top: 20px !important; border-radius: 9999px !important;
  background: #1c3766 !important; color: #fff !important; padding: 16px 24px !important;
  font-size: 14px !important; font-weight: 600 !important; border: none !important;
  line-height: normal !important; text-transform: none !important; letter-spacing: normal !important;
  -webkit-box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05) !important;
          box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05) !important;
  -webkit-transition: -webkit-transform 150ms !important;
  transition: -webkit-transform 150ms !important;
  transition: transform 150ms !important;
  transition: transform 150ms, -webkit-transform 150ms !important;
}
.sbf-fs-primary-btn:active { -webkit-transform: scale(0.98) !important; -ms-transform: scale(0.98) !important; transform: scale(0.98) !important; }
.sbf-fs-primary-btn.mt6 { margin-top: 24px !important; }

/* ── Payment screen extras ───────────────────────────────── */
/* mb-6 rounded-[1.5rem] border border-slate-100 bg-slate-50 p-3 */
.sbf-recap-table { margin-bottom: 24px; border-radius: 24px; border: 1px solid #f1f5f9; background: #f8fafc; padding: 12px; }
/* flex items-center gap-3 border-b border-white px-3 py-3 last:border-b-0 */
.sbf-recap-row   { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom: 1px solid #fff; padding: 12px; }
.sbf-recap-row:last-child { border-bottom: none; }
/* flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-white text-[#1c3766] shadow-sm */
.sbf-recap-icon  {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  width: 36px; height: 36px; -ms-flex-negative: 0; flex-shrink: 0;
  border-radius: 9999px; background: #fff; color: #1c3766;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.05);
          box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.sbf-recap-key   { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #94a3b8; }
.sbf-recap-val   { font-size: 14px; font-weight: 600; color: #020617; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* flex items-center justify-between px-3 pt-3 */
.sbf-total-row   { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 12px; padding-bottom: 0; }
/* text-sm font-semibold text-slate-500 */
.sbf-total-label { font-size: 14px; font-weight: 600; color: #64748b; }
/* text-sm font-medium text-slate-400 line-through */
.sbf-total-strike { font-size: 14px; font-weight: 500; color: #94a3b8; text-decoration: line-through; text-align: right; }
/* text-2xl font-light text-[#1c3766] */
.sbf-total-amount { font-size: 24px; font-weight: 300; color: #1c3766; text-align: right; }

/* Promo */
.sbf-promo-area  { padding: 8px 12px 4px; }
/* text-xs font-medium text-slate-400 underline underline-offset-2 transition hover:text-[#1c3766] */
.sbf-promo-link-btn { font-size: 12px !important; font-weight: 500 !important; color: #94a3b8 !important; text-decoration: underline !important; text-underline-offset: 2px !important; background: none !important; border: none !important; line-height: normal !important; text-transform: none !important; letter-spacing: normal !important; -webkit-transition: color 150ms !important; transition: color 150ms !important; }
.sbf-promo-link-btn:hover { color: #1c3766 !important; }
/* flex items-stretch gap-2 */
.sbf-promo-row   { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
/* w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm uppercase ... focus:border-[#1c3766] */
.sbf-promo-input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1; border-radius: 12px; border: 1px solid #e2e8f0; background: #fff;
  padding: 10px 12px; font-size: 14px; text-transform: uppercase; color: #020617;
  outline: none; font-family: inherit; -webkit-transition: border-color 150ms; transition: border-color 150ms;
}
.sbf-promo-input::-webkit-input-placeholder { text-transform: none; color: #94a3b8; }
.sbf-promo-input::-moz-placeholder { text-transform: none; color: #94a3b8; }
.sbf-promo-input:-ms-input-placeholder { text-transform: none; color: #94a3b8; }
.sbf-promo-input::-ms-input-placeholder { text-transform: none; color: #94a3b8; }
.sbf-promo-input::placeholder { text-transform: none; color: #94a3b8; }
.sbf-promo-input:focus { border-color: #1c3766; }
/* shrink-0 rounded-xl bg-[#1c3766] px-4 text-sm font-semibold text-white transition active:scale-[0.98] */
.sbf-promo-apply { -ms-flex-negative: 0 !important; flex-shrink: 0 !important; border-radius: 12px !important; background: #1c3766 !important; color: #fff !important; padding: 0 16px !important; font-size: 14px !important; font-weight: 600 !important; border: none !important; line-height: normal !important; text-transform: none !important; letter-spacing: normal !important; -webkit-transition: -webkit-transform 150ms !important; transition: -webkit-transform 150ms !important; transition: transform 150ms !important; transition: transform 150ms, -webkit-transform 150ms !important; }
.sbf-promo-apply:active { -webkit-transform: scale(0.98) !important; -ms-transform: scale(0.98) !important; transform: scale(0.98) !important; }
/* mt-2 flex items-center gap-1.5 text-xs font-medium text-emerald-600 */
.sbf-promo-ok  { display: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 8px; font-size: 12px; font-weight: 500; color: #059669; }
.sbf-promo-ok.visible { display: -webkit-box; display: -ms-flexbox; display: flex; }
/* mt-2 text-xs font-medium text-red-500 */
.sbf-promo-err { display: none; margin-top: 8px; font-size: 12px; font-weight: 500; color: #ef4444; }
.sbf-promo-err.visible { display: block; }

/* mb-4 inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-black px-6 py-4 ... active:scale-[0.98] disabled:opacity-50 */
.sbf-applepay-btn {
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important;
  width: 100% !important; margin-bottom: 16px !important; border-radius: 16px !important;
  background: #000 !important; color: #fff !important; padding: 16px 24px !important;
  font-size: 16px !important; font-weight: 600 !important; border: none !important;
  line-height: normal !important; text-transform: none !important; letter-spacing: normal !important;
  -webkit-transition: -webkit-transform 150ms !important;
  transition: -webkit-transform 150ms !important;
  transition: transform 150ms !important;
  transition: transform 150ms, -webkit-transform 150ms !important;
}
.sbf-applepay-btn:active { -webkit-transform: scale(0.98) !important; -ms-transform: scale(0.98) !important; transform: scale(0.98) !important; }
.sbf-applepay-btn:disabled { opacity: 0.5 !important; }

/* my-4 flex items-center gap-3 */
.sbf-divider { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 16px 0; }
/* h-px flex-1 bg-slate-200 */
.sbf-divider-line { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 1px; background: #e2e8f0; }
/* text-xs font-medium uppercase tracking-[0.18em] text-slate-400 */
.sbf-divider-text { font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: #94a3b8; }

/* Lock icon + disabled states match: disabled:cursor-not-allowed disabled:opacity-40 */
.sbf-fs-primary-btn:disabled { cursor: not-allowed !important; opacity: 0.4 !important; }

/* mt-3 flex items-center justify-center gap-1.5 text-xs text-slate-400 */
.sbf-pay-secure-note { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 12px; font-size: 12px; color: #94a3b8; }

/* ── Confirmation screen ──────────────────────────────────── */
.sbf-conf-wrap { width: 100%; max-width: 576px; margin: 0 auto; }

/* overflow-hidden rounded-[2rem] border border-white bg-white shadow-xl
   + motion initial {opacity:0, y:24, scale:0.98} → animate {opacity:1, y:0, scale:1} */
.sbf-conf-card {
  border-radius: 2rem; border: 1px solid #fff; background: #fff; overflow: hidden;
  -webkit-box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
          box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  -webkit-animation: sbf-conf-in 400ms cubic-bezier(0.16,1,0.3,1) both;
          animation: sbf-conf-in 400ms cubic-bezier(0.16,1,0.3,1) both;
}
@-webkit-keyframes sbf-conf-in { from { opacity: 0; -webkit-transform: translateY(24px) scale(0.98); transform: translateY(24px) scale(0.98); } to { opacity: 1; -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); } }
@keyframes sbf-conf-in { from { opacity: 0; -webkit-transform: translateY(24px) scale(0.98); transform: translateY(24px) scale(0.98); } to { opacity: 1; -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); } }

/* bg-[#1c3766] p-8 text-center text-white */
.sbf-conf-head { background: #1c3766; padding: 32px; text-align: center; color: #fff; }
/* mx-auto mb-4 h-24 w-24 overflow-hidden rounded-full border-4 border-white/90 bg-white shadow-lg
   + motion spring scale 0→1 delay 0.15 stiffness 220 */
.sbf-conf-avatar {
  width: 96px; height: 96px; overflow: hidden; border-radius: 9999px;
  border: 4px solid rgba(255,255,255,0.9); background: #fff;
  -webkit-box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
          box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  margin: 0 auto 16px;
  -webkit-animation: sbf-pop 400ms cubic-bezier(0.34,1.56,0.64,1) 150ms both;
          animation: sbf-pop 400ms cubic-bezier(0.34,1.56,0.64,1) 150ms both;
}
@-webkit-keyframes sbf-pop { from { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@keyframes sbf-pop { from { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
/* h-full w-full scale-110 object-cover object-top */
.sbf-conf-avatar img { width: 100%; height: 110%; -o-object-fit: cover; object-fit: cover; -o-object-position: top; object-position: top; }
/* text-3xl font-light tracking-[-0.03em] */
.sbf-conf-title { font-size: 30px; font-weight: 300; letter-spacing: -0.03em; }
/* mt-2 text-sm text-white/70 */
.sbf-conf-sub   { font-size: 14px; color: rgba(255,255,255,0.7); margin-top: 8px; }

.sbf-conf-body  { padding: 24px; }
/* rounded-[1.5rem] border border-slate-100 bg-slate-50 p-2 */
.sbf-conf-table { border-radius: 24px; border: 1px solid #f1f5f9; background: #f8fafc; padding: 8px; }
/* flex items-center justify-between border-b border-white px-3 py-3 last:border-b-0 */
.sbf-conf-row   { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-bottom: 1px solid #fff; padding: 12px; }
.sbf-conf-row:last-child { border-bottom: none; }
/* text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400 */
.sbf-conf-key   { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #94a3b8; }
/* text-sm font-semibold text-slate-950 */
.sbf-conf-val   { font-size: 14px; font-weight: 600; color: #020617; }

/* mt-5 grid gap-3 */
.sbf-conf-actions { margin-top: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
/* grid grid-cols-2 gap-3 */
.sbf-conf-btns2 { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 12px 1fr; grid-template-columns: 1fr 1fr; gap: 12px; }
/* inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full bg-[#1c3766] px-3 py-4 text-sm font-semibold text-white transition-transform active:scale-[0.98] */
.sbf-conf-btn-primary {
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important;
  white-space: nowrap !important; border-radius: 9999px !important;
  background: #1c3766 !important; color: #fff !important; padding: 16px 12px !important;
  font-size: 14px !important; font-weight: 600 !important;
  line-height: normal !important; text-transform: none !important; letter-spacing: normal !important;
  -webkit-transition: -webkit-transform 150ms !important;
  transition: -webkit-transform 150ms !important;
  transition: transform 150ms !important;
  transition: transform 150ms, -webkit-transform 150ms !important;
}
.sbf-conf-btn-primary:active { -webkit-transform: scale(0.98) !important; -ms-transform: scale(0.98) !important; transform: scale(0.98) !important; }
/* rounded-full bg-slate-100 px-6 py-4 text-sm font-semibold text-slate-700 transition-transform active:scale-[0.98] */
.sbf-conf-btn-secondary {
  border-radius: 9999px !important; background: #f1f5f9 !important; padding: 16px 24px !important;
  font-size: 14px !important; font-weight: 600 !important; color: #334155 !important;
  border: none !important; line-height: normal !important; text-transform: none !important; letter-spacing: normal !important;
  -webkit-transition: -webkit-transform 150ms !important;
  transition: -webkit-transform 150ms !important;
  transition: transform 150ms !important;
  transition: transform 150ms, -webkit-transform 150ms !important;
}
.sbf-conf-btn-secondary:active { -webkit-transform: scale(0.98) !important; -ms-transform: scale(0.98) !important; transform: scale(0.98) !important; }
/* mt-5 text-center text-xs leading-5 text-slate-400 */
.sbf-conf-note  { margin-top: 20px; text-align: center; font-size: 12px; line-height: 20px; color: #94a3b8; }

/* ── Step pane animation (replaces Framer Motion AnimatePresence mode="wait") ── */
/* Enter: initial {opacity:0, y:16} → animate {opacity:1, y:0} — spring stiffness:500, damping:30 */
/* Exit:  animate {opacity:1, y:0} → exit {opacity:0, y:-16} — 160ms ease-in, handled by JS class */
.sbf-step-pane { display: none; }
.sbf-step-pane.is-active { display: block; }
.sbf-step-pane.is-active {
  -webkit-animation:
    sbf-step-slide 450ms linear(
      0, 0.055, 0.184, 0.347, 0.514, 0.666, 0.794, 0.894,
      0.966, 1.014, 1.043, 1.056, 1.058, 1.054, 1.046, 1.036,
      1.026, 1.018, 1.011, 1.005, 1.001, 0.999, 0.997, 0.997,
      0.998, 0.999, 1
    ) both,
    sbf-step-fade 220ms ease both;
          animation:
    sbf-step-slide 450ms linear(
      0, 0.055, 0.184, 0.347, 0.514, 0.666, 0.794, 0.894,
      0.966, 1.014, 1.043, 1.056, 1.058, 1.054, 1.046, 1.036,
      1.026, 1.018, 1.011, 1.005, 1.001, 0.999, 0.997, 0.997,
      0.998, 0.999, 1
    ) both,
    sbf-step-fade 220ms ease both;
}
.sbf-step-pane.is-exiting {
  display: block;
  -webkit-animation:
    sbf-step-slide-out 160ms ease-in both,
    sbf-step-fade-out  160ms ease-in both;
          animation:
    sbf-step-slide-out 160ms ease-in both,
    sbf-step-fade-out  160ms ease-in both;
  pointer-events: none;
}
@-webkit-keyframes sbf-step-slide {
  from { -webkit-transform: translateY(16px); transform: translateY(16px); }
  to   { -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes sbf-step-slide {
  from { -webkit-transform: translateY(16px); transform: translateY(16px); }
  to   { -webkit-transform: translateY(0); transform: translateY(0); }
}
@-webkit-keyframes sbf-step-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sbf-step-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@-webkit-keyframes sbf-step-slide-out {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(-16px); transform: translateY(-16px); }
}
@keyframes sbf-step-slide-out {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(-16px); transform: translateY(-16px); }
}
@-webkit-keyframes sbf-step-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes sbf-step-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ── Processing overlay ────────────────────────────────── */
.sbf-processing-card {
  width: 100%; max-width: 400px; margin: 0 auto;
  background: #1c3766; border-radius: 24px; overflow: hidden;
  -webkit-box-shadow: 0 24px 48px -12px rgba(28,55,102,0.25), 0 8px 24px -8px rgba(0,0,0,0.08);
          box-shadow: 0 24px 48px -12px rgba(28,55,102,0.25), 0 8px 24px -8px rgba(0,0,0,0.08);
  -webkit-animation: sbf-processing-in 500ms cubic-bezier(0.16,1,0.3,1) both;
          animation: sbf-processing-in 500ms cubic-bezier(0.16,1,0.3,1) both;
}
@-webkit-keyframes sbf-processing-in {
  from { opacity: 0; -webkit-transform: translateY(16px) scale(0.97); transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); }
}
@keyframes sbf-processing-in {
  from { opacity: 0; -webkit-transform: translateY(16px) scale(0.97); transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); }
}

.sbf-processing-top {
  padding: 40px 32px 24px; text-align: center; color: #fff;
}

/* Spinner — lighter, no white circle background */
.sbf-processing-spinner-wrap {
  width: 56px; height: 56px; margin: 0 auto 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  -webkit-animation: sbf-fade-in 400ms ease 100ms both;
          animation: sbf-fade-in 400ms ease 100ms both;
}
@-webkit-keyframes sbf-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sbf-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.sbf-processing-spinner-svg {
  -webkit-animation: sbf-spin 0.8s linear infinite;
          animation: sbf-spin 0.8s linear infinite;
}
@-webkit-keyframes sbf-spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes sbf-spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

.sbf-processing-title {
  font-size: 20px !important; font-weight: 600 !important;
  letter-spacing: -0.01em !important; line-height: 1.3 !important;
  color: #fff !important; margin: 0 !important;
  -webkit-animation: sbf-fade-in 400ms ease 150ms both;
          animation: sbf-fade-in 400ms ease 150ms both;
}
.sbf-processing-sub {
  font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.65);
  margin-top: 6px; line-height: 1.5;
  -webkit-animation: sbf-fade-in 400ms ease 200ms both;
          animation: sbf-fade-in 400ms ease 200ms both;
}

/* Progress checklist */
.sbf-processing-steps {
  padding: 0 32px 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
.sbf-processing-step {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  opacity: 0.35; -webkit-transition: opacity 300ms ease; transition: opacity 300ms ease;
}
.sbf-processing-step.is-active { opacity: 1; }
.sbf-processing-step.is-done { opacity: 0.7; }

.sbf-step-dot {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  background: transparent; -ms-flex-negative: 0; flex-shrink: 0;
  position: relative; -webkit-transition: all 300ms ease; transition: all 300ms ease;
}
.sbf-processing-step.is-active .sbf-step-dot {
  border-color: rgba(255,255,255,0.6);
  border-top-color: #fff; border-right-color: #fff;
  -webkit-animation: sbf-spin 0.8s linear infinite;
          animation: sbf-spin 0.8s linear infinite;
}
.sbf-processing-step.is-done .sbf-step-dot {
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.15);
}
.sbf-processing-step.is-done .sbf-step-dot::after {
  content: ''; position: absolute; top: 3px; left: 5px;
  width: 4px; height: 7px;
  border: solid #fff; border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.sbf-step-label {
  font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.85);
}

.sbf-secure-badge svg {
    margin-right: 6px;
}

/* ── Flexbox gap fallbacks (margin-based) ─────────────────── */
/* Horizontal (row) flex containers — margin-left on siblings */
.sbf-header-left > * + * { margin-left: 12px; }
.sbf-secure-badge > * + * { margin-left: 6px; }
.sbf-user-pill > * + * { margin-left: 10px; }
.sbf-btn-back > * + * { margin-left: 8px; }
.sbf-btn-continue > * + * { margin-left: 8px; }
.sbf-step-heading > * + * { margin-left: 16px; }
.sbf-pkg-banner-top > * + * { margin-left: 12px; }
.sbf-pkg-sessions > * + * { margin-left: 8px; }
.sbf-pkg-sessions-badge > * + * { margin-left: 6px; }
.sbf-pkg-cta > * + * { margin-left: 12px; }
.sbf-avail-badge > * + * { margin-left: 6px; }
.sbf-treatment-top > * + * { margin-left: 12px; }
.sbf-date-carousel > * + * { margin-left: 12px; }
.sbf-day-dow > * + * { margin-left: 4px; }
.sbf-period-label > * + * { margin-left: 8px; }
.sbf-btn-dt-continue > * + * { margin-left: 8px; }
.sbf-no-pref-btn > * + * { margin-left: 16px; }
.sbf-therapist-row > * + * { margin-left: 12px; }
.sbf-therapist-pick > * + * { margin-left: 12px; }
.sbf-modal-header > * + * { margin-left: 16px; }
.sbf-modal-tinfo > * + * { margin-left: 16px; }
.sbf-modal-cred > * + * { margin-left: 10px; }
.sbf-agree-label > * + * { margin-left: 12px; }
.sbf-confirm-btn > * + * { margin-left: 8px; }
.sbf-pkg-review-row > * + * { margin-left: 12px; }
.sbf-back-link > * + * { margin-left: 8px; }
.sbf-fs-badge > * + * { margin-left: 8px; }
.sbf-field-wrap > * + * { margin-left: 12px; }
.sbf-fs-primary-btn > * + * { margin-left: 8px; }
.sbf-recap-row > * + * { margin-left: 12px; }
.sbf-promo-row > * + * { margin-left: 8px; }
.sbf-promo-ok > * + * { margin-left: 6px; }
.sbf-applepay-btn > * + * { margin-left: 8px; }
.sbf-divider > * + * { margin-left: 12px; }
.sbf-pay-secure-note > * + * { margin-left: 6px; }
.sbf-conf-btn-primary > * + * { margin-left: 8px; }
.sbf-processing-step > * + * { margin-left: 12px; }

/* Vertical (column) flex containers — margin-top on siblings */
.sbf-treatment-list > * + * { margin-top: 12px; }
.sbf-time-periods > * + * { margin-top: 20px; }
.sbf-dt-bar > * + * { margin-top: 12px; }
@media (min-width: 640px) { .sbf-dt-bar > * + * { margin-top: 0; margin-left: 16px; } }
.sbf-therapist-list > * + * { margin-top: 12px; }
.sbf-modal-creds > * + * { margin-top: 10px; }
.sbf-pay-bar > * + * { margin-top: 16px; }
@media (min-width: 640px) { .sbf-pay-bar > * + * { margin-top: 0; margin-left: 16px; } }
.sbf-conf-actions > * + * { margin-top: 12px; }
.sbf-processing-steps > * + * { margin-top: 14px; }