.material-symbols-outlined { font-family:'Material Symbols Outlined'; font-weight:400; font-size:20px; line-height:1; vertical-align:middle; user-select:none; }

/* ── MAIN LAYOUT ──────────────────────────────────────────────────────── */
.booking-main {
  padding:var(--space-12) 0 var(--space-24);
}
.booking-grid {
  display:grid; grid-template-columns:7fr 5fr; gap:var(--space-8);
  align-items:start;
}
@media (max-width:1024px) {
  .booking-grid { grid-template-columns:1fr; gap:var(--space-8); }
}

/* ── RIGHT WORKSHOP SIDEBAR ─────────────────────────────────────────── */
.booking-sidebar {
  position:sticky; top:calc(var(--nav-height) + var(--space-6));
  display:flex; flex-direction:column; gap:var(--space-6);
}
.sidebar-trust-card,
.sidebar-hubs-card {
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--radius-xl);
  padding:var(--space-6);
  box-shadow:var(--shadow-sm);
}
.trust-card-header {
  display:flex; align-items:center; gap:var(--space-3);
  margin-bottom:var(--space-5); padding-bottom:var(--space-4);
  border-bottom:1px solid var(--border);
}
.trust-badge-icon {
  width:40px; height:40px; border-radius:10px;
  background:rgba(34,197,94,0.12);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.trust-title {
  font-family:var(--font-headline); font-weight:700;
  font-size:1.05rem; color:var(--text); line-height:1.2;
}
.trust-sub {
  font-size:11px; color:var(--text-muted); margin-top:2px;
}
.trust-perks {
  display:flex; flex-direction:column; gap:var(--space-4);
}
.trust-perk {
  display:flex; align-items:flex-start; gap:var(--space-3);
}
.perk-bullet {
  font-size:16px; line-height:1; flex-shrink:0; margin-top:1px;
}
.trust-perk strong {
  display:block; font-size:12.5px; color:var(--text); font-weight:600;
}
.trust-perk span {
  display:block; font-size:11px; color:var(--text-muted); margin-top:1px;
}
.hubs-card-title {
  font-family:var(--font-headline); font-weight:700;
  font-size:1rem; color:var(--text); margin-bottom:var(--space-4);
  text-transform:uppercase; letter-spacing:0.04em;
}
.hub-item {
  padding:var(--space-3) 0; border-bottom:1px dashed var(--border);
}
.hub-item:last-of-type { border-bottom:none; }
.hub-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:4px;
}
.hub-name { font-weight:700; font-size:13px; color:var(--text); }
.hub-tag {
  font-size:10px; font-weight:700; background:var(--surface-high);
  color:var(--brand-primary); padding:2px 6px; border-radius:4px;
}
.hub-address { font-size:12px; color:var(--text-muted); margin-bottom:3px; }
.hub-hours, .hub-phone { font-size:11px; color:var(--text-dim); margin-bottom:3px; }
.hub-map-link {
  display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600;
  color:var(--brand-primary); text-decoration:underline; margin-top:4px;
  transition:color var(--dur) var(--ease);
}
.hub-map-link:hover { color:var(--brand-primary-dim); }
.walkin-callout {
  display:flex; align-items:flex-start; gap:var(--space-2);
  margin-top:var(--space-4); padding:var(--space-3) var(--space-4);
  background:rgba(34,197,94,0.08); border:1px solid rgba(34,197,94,0.25);
  border-radius:var(--radius); font-size:11.5px; color:var(--text); line-height:1.4;
}
.walkin-ico { font-size:14px; flex-shrink:0; }

/* ── LEFT FORM COLUMN ─────────────────────────────────────────────────── */
.booking-flow { display:flex; flex-direction:column; gap:var(--space-12); }

/* Section wrapper with faded step numeral on the left */
.bk-section {
  transition:opacity var(--dur-slow) var(--ease), max-height var(--dur-slow) var(--ease);
  overflow:visible;
}
.bk-section.collapsed {
  max-height:80px; opacity:0.45; cursor:pointer; overflow:hidden;
}
.bk-section.hidden { display:none; }

.bk-section-head {
  display:flex; align-items:center; gap:var(--space-4); margin-bottom:var(--space-6);
}
.bk-step-num {
  font-family:var(--font-headline); font-weight:700;
  font-size:3.5rem; line-height:1; letter-spacing:-0.04em;
  color:var(--brand-primary); opacity:0.20;
  min-width:4ch;
}
.bk-section.done .bk-step-num { opacity:0.6; }
.bk-section-titles { flex:1; }
.bk-section-eyebrow {
  font-size:10px; font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--text-muted); margin-bottom:var(--space-1);
}
.bk-section-title {
  font-family:var(--font-headline); font-weight:700;
  font-size:1.75rem; letter-spacing:-0.02em;
  text-transform:uppercase; line-height:1;
}
.bk-section-check {
  width:28px; height:28px; border-radius:50%;
  background:var(--brand-primary); color:#002109;
  display:none; align-items:center; justify-content:center;
  font-weight:700; flex-shrink:0;
}
.bk-section.done .bk-section-check { display:flex; }

/* ── OPTION CARDS (service + branch) ──────────────────────────────────── */
.option-card {
  display:flex; align-items:flex-start; gap:var(--space-4);
  padding:var(--space-6); background:var(--surface);
  border:2px solid var(--border); border-radius:var(--radius-lg);
  text-align:left; width:100%; cursor:pointer;
  transition:all var(--dur) var(--ease);
  font-family:var(--font-body);
}
.option-card:hover {
  border-color:var(--border-strong); background:var(--surface-high);
}
.option-card.selected {
  border-color:var(--brand-primary);
  background:var(--surface-high);
  box-shadow:0 0 0 1px var(--brand-primary-20);
}
.option-card .material-symbols-outlined {
  font-size:26px; color:var(--text-muted); flex-shrink:0; margin-top:2px;
  transition:color var(--dur) var(--ease);
}
.option-card.selected .material-symbols-outlined { color:var(--brand-primary); }
.option-card-body { flex:1; min-width:0; }
.option-card-title {
  font-family:var(--font-headline); font-weight:700; font-size:1rem;
  color:var(--text); letter-spacing:-0.01em;
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--space-2); margin-bottom:4px;
}
.option-card-price {
  font-family:var(--font-mono); font-size:13px; font-weight:700;
  color:var(--brand-primary);
}
.option-card-sub {
  font-size:13px; color:var(--text-muted); line-height:1.4;
}
.option-card-meta {
  display:inline-flex; align-items:center; gap:var(--space-2);
  margin-top:var(--space-2);
  font-size:10px; font-weight:600; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--text-dim);
}

/* Service picker — select wrapped to match option cards */
.service-select-wrap {
  position:relative; width:100%;
}
.service-select-wrap select {
  width:100%; padding:1rem 3rem 1rem 1.25rem;
  background:var(--surface); border:2px solid var(--border);
  border-radius:var(--radius-lg); color:var(--text);
  font-family:var(--font-body); font-size:15px; font-weight:500;
  cursor:pointer; appearance:none; -webkit-appearance:none;
  transition:all var(--dur) var(--ease);
}
.service-select-wrap select:focus,
.service-select-wrap select:hover {
  outline:none; border-color:var(--brand-primary); background:var(--surface-high);
}
.service-select-wrap::after {
  content:''; position:absolute; right:1.25rem; top:50%;
  width:10px; height:10px; border-right:2px solid var(--text-muted);
  border-bottom:2px solid var(--text-muted);
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}

.service-detail-card {
  margin-top:var(--space-4); padding:var(--space-6);
  background:var(--surface-high); border:1.5px solid var(--brand-primary);
  border-radius:var(--radius-lg);
  display:flex; align-items:center; gap:var(--space-4);
}
.service-detail-icon {
  width:48px; height:48px; border-radius:var(--radius-lg);
  background:var(--brand-primary-10); color:var(--brand-primary);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.service-detail-icon .material-symbols-outlined { font-size:26px; }
.service-detail-body { flex:1; min-width:0; }
.service-detail-title {
  font-family:var(--font-headline); font-weight:700;
  font-size:15px; letter-spacing:-0.01em;
}
.service-detail-meta {
  font-size:12px; color:var(--text-muted); margin-top:2px;
}
.service-detail-price {
  font-family:var(--font-mono); font-weight:700; font-size:18px;
  color:var(--brand-primary); white-space:nowrap;
}

/* Branch grid */
.branch-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3);
}
@media (max-width:768px) { .branch-grid { grid-template-columns:1fr; } }

/* ── CALENDAR + SLOTS ─────────────────────────────────────────────────── */
.calendar-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:var(--space-6);
}
.cal-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-4);
}
.cal-month {
  font-family:var(--font-headline); font-weight:700;
  font-size:1.125rem; letter-spacing:-0.01em;
}
.cal-nav-row { display:flex; gap:var(--space-2); }
.cal-nav-btn {
  width:36px; height:36px; border-radius:var(--radius);
  background:var(--surface-highest); color:var(--text);
  display:flex; align-items:center; justify-content:center;
  transition:all var(--dur) var(--ease);
}
.cal-nav-btn:hover { color:var(--brand-primary); background:var(--surface-bright); }

.cal-dow {
  display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; margin-bottom:var(--space-2);
}
.cal-dow span {
  text-align:center; font-size:10px; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-dim); padding:var(--space-2) 0;
}
.cal-grid {
  display:grid; grid-template-columns:repeat(7, 1fr); gap:4px;
}
.cal-day {
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius); font-size:14px; font-weight:500;
  transition:all var(--dur) var(--ease);
}
.cal-day.empty { visibility:hidden; }
.cal-day.past { color:var(--text-dim); opacity:0.3; }
.cal-day.avail { color:var(--text); cursor:pointer; }
.cal-day.avail:hover { background:var(--surface-highest); color:var(--brand-primary); }
.cal-day.today { border:1.5px solid var(--brand-primary); color:var(--brand-primary); }
.cal-day.selected {
  background:var(--brand-primary); color:#002109; font-weight:700;
  box-shadow:0 4px 12px var(--brand-primary-glow);
}

/* Slots */
.slots-wrap {
  margin-top:var(--space-6); padding-top:var(--space-6);
  border-top:1px solid var(--border);
}
.slots-wrap.hidden { display:none; }
.slots-header {
  font-family:var(--font-headline); font-weight:600;
  font-size:13px; letter-spacing:-0.01em;
  color:var(--text-muted); margin-bottom:var(--space-3);
}
.slots-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(90px, 1fr)); gap:var(--space-2);
}
.slot {
  padding:0.75rem 0.5rem; border-radius:var(--radius);
  background:var(--surface-highest); border:2px solid transparent;
  font-family:var(--font-mono); font-size:13px; font-weight:600;
  color:var(--text); cursor:pointer;
  transition:all var(--dur) var(--ease); text-align:center;
}
.slot:hover { border-color:var(--brand-primary); color:var(--brand-primary); }
.slot.selected {
  background:var(--brand-primary); color:#002109;
  border-color:var(--brand-primary); font-weight:700;
  box-shadow:0 4px 12px var(--brand-primary-glow);
}
.slot.full {
  color:var(--text-dim); text-decoration:line-through;
  cursor:not-allowed; opacity:0.4;
}
.slot.full:hover { border-color:transparent; color:var(--text-dim); }

/* ── DETAILS FORM ─────────────────────────────────────────────────────── */
.form-stack { display:flex; flex-direction:column; gap:var(--space-4); }
.phone-lookup-wrap { position:relative; }
.lookup-dropdown {
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:50;
  background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  max-height:240px; overflow-y:auto; display:none;
}
.lookup-dropdown.open { display:block; }
.lookup-row {
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) var(--space-4); cursor:pointer;
  border-bottom:1px solid var(--border); transition:background var(--dur) var(--ease);
}
.lookup-row:last-child { border-bottom:none; }
.lookup-row:hover { background:var(--surface-high); }
.lookup-avatar {
  width:36px; height:36px; border-radius:var(--radius); flex-shrink:0;
  background:var(--brand-primary-10); color:var(--brand-primary);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-headline); font-weight:700; font-size:13px;
}
.lookup-name { font-weight:600; font-size:14px; color:var(--text); }
.lookup-sub { font-size:12px; color:var(--text-muted); }

.matched-card {
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  background:var(--brand-primary-10); border:1px solid var(--brand-primary-20);
  border-radius:var(--radius-lg); margin-top:var(--space-3);
}
.matched-card .lookup-avatar { background:var(--brand-primary); color:#002109; }
.matched-name { flex:1; font-weight:600; color:var(--text); display:flex; align-items:center; gap:var(--space-2); }
.matched-name .material-symbols-outlined { font-size:18px; color:var(--brand-primary); }
.matched-sub { font-size:12px; color:var(--text-muted); }
.matched-remove {
  width:28px; height:28px; border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted);
}
.matched-remove:hover { background:var(--surface-high); color:var(--error); }

/* ── SUMMARY CARD (step 5) ────────────────────────────────────────────── */
.summary-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--space-6);
  display:flex; flex-direction:column; gap:0;
}
.summary-row {
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:var(--space-3) 0; gap:var(--space-4);
  border-bottom:1px solid var(--border);
}
.summary-row:last-child { border-bottom:none; }
.summary-row .k {
  font-size:10px; font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--text-muted);
  flex-shrink:0; padding-top:2px;
}
.summary-row .v {
  font-weight:500; color:var(--text); text-align:right; font-size:14px;
}
.type-badge {
  display:inline-flex; align-items:center; gap:var(--space-2);
  padding:4px 10px; background:var(--brand-primary-10);
  border:1px solid var(--brand-primary-20);
  border-radius:var(--radius-full);
  color:var(--brand-primary); font-weight:600; font-size:12px;
}
.wa-note {
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-4);
  background:var(--surface-high); border-radius:var(--radius-lg);
  font-size:13px; color:var(--text-muted); margin-top:var(--space-4);
}
.wa-note .material-symbols-outlined { color:var(--brand-primary); }

.confirm-actions {
  display:flex; gap:var(--space-3); margin-top:var(--space-4);
}
.confirm-actions .btn-primary { flex:1; }

/* ── SUCCESS SCREEN ───────────────────────────────────────────────────── */
.success-wrap {
  text-align:center;
  padding:var(--space-12) var(--space-6);
  background:var(--surface);
  border:1px solid var(--brand-primary-20);
  border-radius:var(--radius-xl);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.success-wrap::before {
  content:''; position:absolute; inset:-20%;
  background:radial-gradient(circle at 50% 40%, var(--brand-primary-glow) 0%, transparent 60%);
  z-index:0; pointer-events:none;
}
.success-wrap > * { position:relative; z-index:1; }
.success-icon {
  width:80px; height:80px; border-radius:50%;
  background:var(--brand-primary); color:#002109;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto var(--space-6);
  box-shadow:0 0 40px var(--brand-primary-glow);
}
.success-icon .material-symbols-outlined { font-size:44px; font-variation-settings:'FILL' 1; }
.success-title {
  font-family:var(--font-headline); font-weight:700;
  font-size:2rem; letter-spacing:-0.02em; text-transform:uppercase;
  margin-bottom:var(--space-3);
}
.success-ref {
  display:inline-block;
  padding:var(--space-2) var(--space-4);
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius);
  font-family:var(--font-mono); font-size:14px; font-weight:700;
  color:var(--brand-primary); letter-spacing:0.04em;
  margin-bottom:var(--space-4);
}
.success-sub {
  color:var(--text-muted); font-size:14px; margin-bottom:var(--space-8);
}
.success-actions {
  display:flex; flex-direction:column; gap:var(--space-3);
  max-width:320px; margin:0 auto;
}
.wa-cta {
  display:flex; align-items:center; justify-content:center; gap:var(--space-2);
  padding:var(--space-4);
  background:#25d366; color:#fff; border-radius:var(--radius-lg);
  font-family:var(--font-headline); font-weight:700;
  text-transform:uppercase; letter-spacing:0.05em; font-size:13px;
  transition:all var(--dur) var(--ease);
}
.wa-cta:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(37,211,102,0.3); }

/* ── TOAST ────────────────────────────────────────────────────────────── */
.toast {
  position:fixed; bottom:var(--space-6); left:50%;
  transform:translateX(-50%) translateY(200%);
  background:var(--surface-high); color:var(--text);
  border:1px solid var(--border);
  padding:0.875rem 1.25rem; border-radius:var(--radius);
  font-size:13px; font-weight:500;
  z-index:300; transition:transform var(--dur-slow) var(--ease-spring);
  box-shadow:var(--shadow-lg); max-width:90vw;
}
.toast.show { transform:translateX(-50%) translateY(0); }

/* ── SPINNER ──────────────────────────────────────────────────────────── */
.spin {
  display:inline-block; width:16px; height:16px;
  border:2px solid rgba(0,33,9,0.2); border-top-color:#002109;
  border-radius:50%; animation:sp 0.6s linear infinite;
}
@keyframes sp { to { transform:rotate(360deg); } }