/* MinuteClinic USA booking demo — shared component styles.
   Built directly on the MedWorks design tokens (colors.css, spacing.css,
   radius.css, elevation.css, typography.css) — no values invented here that
   aren't already in the token set or lifted verbatim from the approved
   mockups (MinuteClinic USA - Web Console / Mobile App / Confirmation Email). */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--text-body);
  background: var(--mw-cream);
}
a { color: var(--mw-red-1); text-decoration: none; }
a:hover { color: var(--mw-red-deep); }
button { font-family: var(--font-sans); }
img { max-width: 100%; display: block; }

.branded-bg {
  min-height: 100vh;
  background:
    radial-gradient(1000px 760px at 4% -8%, rgba(194,32,74,.13), transparent 62%),
    radial-gradient(900px 700px at 98% 106%, rgba(240,45,57,.09), transparent 60%),
    linear-gradient(160deg,#fffdfb,#fbf7f1 46%,#f4eee6);
  padding: 32px 24px 64px;
}

.top-strip {
  max-width: 1180px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.top-strip img.brand-logo { height: 26px; }
.top-strip .divider { width: 1px; height: 22px; background: rgba(26,26,26,.14); }
.top-strip .eyebrow {
  font: 600 10px var(--font-sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--slate-500); white-space: nowrap;
}
.top-strip nav { margin-left: auto; display: flex; gap: 6px; }
.top-strip nav a {
  font: 600 11.5px var(--font-sans); color: var(--slate-500);
  padding: 7px 13px; border-radius: 999px; white-space: nowrap;
}
.top-strip nav a.active { background: #fff; color: var(--mw-ink); box-shadow: var(--shadow-sm); }
.top-strip nav a:hover { color: var(--mw-ink); }

.page-title { max-width: 1180px; margin: 0 auto; }
.page-title h1 {
  font: 800 28px/1.2 var(--font-sans); color: var(--mw-ink); letter-spacing: -.025em; margin-top: 6px;
}
.page-title p { font: 400 13.5px/1.6 var(--font-sans); color: var(--slate-600); margin-top: 6px; max-width: 720px; }

/* ---------- full-bleed app page (booking-web / mobile / email) ---------- */
.app-page {
  min-height: 100vh; display: flex; flex-direction: column;
  background:
    radial-gradient(1000px 760px at 4% -8%, rgba(194,32,74,.13), transparent 62%),
    radial-gradient(900px 700px at 98% 106%, rgba(240,45,57,.09), transparent 60%),
    linear-gradient(160deg,#fffdfb,#fbf7f1 46%,#f4eee6);
}
.console-card.full-bleed { border: none; border-radius: 0; box-shadow: none; flex: 1; display: flex; flex-direction: column; }
.console-card.full-bleed .flow-body { flex: 1; }
.site-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 32px; background: var(--mw-ink); border-top: 1px solid rgba(255,255,255,.08);
}
.site-footer .brand { display: flex; align-items: center; gap: 10px; }
.site-footer .brand img { height: 18px; }
.site-footer .brand span { font: 500 11px Montserrat, sans-serif; color: rgba(255,255,255,.45); white-space: nowrap; }
.site-footer .footer-links { display: flex; gap: 10px; flex-wrap: wrap; }
.site-footer .footer-links a {
  font: 600 12px Montserrat, sans-serif; color: rgba(255,255,255,.85); white-space: nowrap;
  padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
}
.site-footer .footer-links a:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ---------- console shell ---------- */
.console-wrap { max-width: 1180px; margin: 24px auto 0; }
.console-card {
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.console-topbar {
  height: 38px; background: var(--mw-ink); display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
}
.console-topbar .dot { width: 8px; height: 8px; border-radius: 50%; }
.console-topbar span.meta { font: 500 11.5px var(--font-sans); color: rgba(255,255,255,.62); white-space: nowrap; }

.console-header {
  background: #fff; border-bottom: 1px solid var(--border-hairline);
  display: flex; align-items: center; justify-content: space-between; padding: 0 32px; height: 68px;
}
.console-header .left { display: flex; align-items: center; gap: 16px; }
.console-header img.logo { height: 28px; }
.console-header .sep { width: 1px; height: 26px; background: var(--border-default); }
.console-header .tag { font: 400 12.5px var(--font-sans); color: var(--mw-grey-light); }
.secure-badge {
  display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px var(--font-sans); color: var(--mw-grey-light);
}

.hero-banner { position: relative; height: 210px; overflow: hidden; }
.hero-banner img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; filter: saturate(1.1) contrast(1.05) brightness(1.02); }
.hero-banner .scrim { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(26,26,26,.82) 0%, rgba(26,26,26,.62) 38%, rgba(26,26,26,.08) 70%, rgba(26,26,26,0) 100%); }
.hero-banner .copy { position: absolute; left: 32px; top: 0; bottom: 0; width: 56%; display: flex; flex-direction: column; justify-content: center; }
.hero-banner .eyebrow { font: 700 10px var(--font-sans); letter-spacing: .28em; text-transform: uppercase; color: var(--mw-accent-soft); }
.hero-banner h2 { font: 800 28px/1.15 var(--font-sans); color: #fff; letter-spacing: -.02em; margin-top: 9px; text-shadow: var(--text-shadow-hero); }
.hero-banner p { font: 400 12.5px/1.6 var(--font-sans); color: rgba(255,255,255,.86); margin-top: 8px; text-shadow: 0 1px 10px rgba(0,0,0,.5); }

/* ---------- step rail ---------- */
.flow-body { background: var(--gradient-brand-soft); padding: 24px 28px 36px; }
.step-rail {
  display: flex; align-items: center; margin: 0 auto 22px; flex-wrap: wrap; row-gap: 16px;
  width: 100%; max-width: 900px; /* line up with .step-panel below so the rail spans the same width */
}
.step-rail .step-group { display: flex; align-items: center; flex: 1 1 auto; }
.step-rail .step-group:last-child { flex: none; }
.step-rail .step { display: flex; align-items: center; cursor: pointer; flex: none; }
.step-rail .step .circle {
  width: 25px; height: 25px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: 700 10.5px var(--font-sans); color: #fff; flex: none;
}
.step-rail .step .label { margin-left: 7px; font: 600 10.5px var(--font-sans); white-space: nowrap; }
.step-rail .line { flex: 1 1 24px; min-width: 24px; height: 2px; margin: 0 12px; }

.step-panel {
  max-width: 900px; margin: 0 auto; background: #fff; border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); padding: 30px 36px 26px;
}
.step-panel h2 { font: 700 22px var(--font-sans); color: var(--mw-grey-dark); letter-spacing: -.02em; margin: 0; }
.step-panel .sub { font: 400 13px/1.6 var(--font-sans); color: var(--mw-grey-light); margin-top: 6px; }

.step-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }
.step-footer.end { justify-content: flex-end; }

/* ---------- buttons ---------- */
.btn { border: none; border-radius: 10px; padding: 12px 24px; font: 600 13px var(--font-sans); cursor: pointer; }
.btn-primary { background: var(--gradient-brand); color: #fff; box-shadow: var(--shadow-brand); }
.btn-primary:hover { filter: brightness(1.03); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn-secondary { background: #fff; border: 1px solid var(--border-default); color: var(--mw-grey-dark); }
.btn-link { background: none; border: none; color: var(--mw-red-1); font: 600 12px var(--font-sans); cursor: pointer; padding: 0; }
.btn-pill { border-radius: 999px; padding: 9px 20px; }

/* ---------- form fields ---------- */
.field { display: flex; flex-direction: column; }
.field label { font: 600 12px var(--font-sans); color: var(--mw-grey-dark); margin-bottom: 7px; }
.field label .req { color: var(--mw-red-1); }
.field input, .field select {
  width: 100%; box-sizing: border-box; height: 42px; padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--border-default); background: rgba(241,245,249,.5);
  font: 500 13px var(--font-sans); color: var(--mw-grey-dark); outline: none;
}
.field input:focus, .field select:focus { border-color: var(--mw-red-1); box-shadow: 0 0 0 3px var(--focus-ring); background: #fff; }
.field-error { font: 500 11px var(--font-sans); color: var(--mw-danger); margin-top: 5px; min-height: 14px; }
.field input.invalid { border-color: var(--mw-danger); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---------- banners ---------- */
.banner { display: flex; gap: 11px; align-items: flex-start; padding: 13px 15px; border-radius: 12px; font: 400 12.5px/1.5 var(--font-sans); margin-top: 12px; }
.banner svg { flex: none; margin-top: 1px; }
.banner-info { background: var(--mw-info-bg); border: 1px solid #bfdbfe; color: #1d4ed8; }
.banner-warning { background: var(--mw-warning-bg); border: 1px solid #fde68a; color: #b45309; }

/* ---------- service search / combobox ---------- */
.svc-combo { position: relative; margin-top: 18px; }
.svc-dropdown {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
  background: #fff; border: 1px solid var(--border-default); border-radius: 14px; box-shadow: var(--shadow-xl);
  max-height: 360px; overflow-y: auto; padding: 8px;
}
.svc-dropdown-label { font: 700 9.5px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--slate-400); padding: 8px 10px 4px; }
.svc-row { display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 10px; cursor: pointer; }
.svc-row:hover, .svc-row.active { background: var(--slate-50); }
.svc-row .icon { width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--slate-100); color: var(--slate-500); display: flex; align-items: center; justify-content: center; }
.svc-row .name { font: 600 13px var(--font-sans); color: var(--mw-grey-dark); }
.svc-row .cat { font: 400 11px var(--font-sans); color: var(--slate-400); margin-top: 1px; }
.svc-row .badges { margin-left: auto; display: flex; gap: 5px; flex: none; }
.svc-badge { font: 600 9px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; white-space: nowrap; }
.svc-badge.virtual { background: rgba(37,99,235,.10); color: #2563eb; }
.svc-badge.inclinic { background: rgba(13,148,136,.10); color: var(--mw-insurance); }
.svc-empty { padding: 18px 10px; text-align: center; font: 400 12.5px var(--font-sans); color: var(--slate-400); }
.svc-selected {
  display: flex; gap: 14px; align-items: flex-start; margin-top: 14px; padding: 16px 17px; border-radius: 14px;
  border: 1px solid var(--mw-red-1); box-shadow: 0 0 0 3px var(--focus-ring); background: #fff;
}
.svc-selected .icon { width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--gradient-brand-135); color: #fff; display: flex; align-items: center; justify-content: center; }
.svc-selected .name { font: 700 15px var(--font-sans); color: var(--mw-grey-dark); }
.svc-selected .cat { font: 600 10px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--mw-red-1); margin-top: 2px; }
.svc-selected .desc { font: 400 12.5px/1.55 var(--font-sans); color: var(--mw-grey-light); margin-top: 6px; }
.svc-selected .badges { display: flex; gap: 6px; margin-top: 8px; }

/* ---------- reason cards ---------- */
.reason-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.reason-card {
  display: flex; align-items: center; gap: 14px; padding: 17px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--border-default); box-shadow: var(--shadow-sm); background: #fff;
}
.reason-card.selected { border-color: var(--mw-red-1); box-shadow: 0 0 0 3px var(--focus-ring); }
.reason-card .icon { width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--slate-100); color: var(--slate-500); display: flex; align-items: center; justify-content: center; }
.reason-card.selected .icon { background: var(--gradient-brand-135); color: #fff; }
.reason-card .name { font: 600 14.5px var(--font-sans); color: var(--mw-grey-dark); }
.reason-card .desc { font: 400 12px/1.4 var(--font-sans); color: var(--mw-grey-light); margin-top: 2px; }
.reason-card .check { color: var(--mw-red-1); font-size: 17px; margin-left: auto; }
.pill-row { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.pill { padding: 6px 13px; border-radius: 999px; font: 600 11px var(--font-sans); white-space: nowrap; cursor: default; }
.pill.on { background: var(--gradient-brand); color: #fff; }
.pill.off { background: #fff; border: 1px solid var(--border-default); color: var(--mw-grey-dark); }

/* ---------- clinic search ---------- */
.search-row { display: flex; gap: 10px; align-items: flex-end; margin-top: 18px; flex-wrap: wrap; }
.search-input {
  flex: 1; min-width: 220px; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px;
  border-radius: 12px; border: 1px solid var(--border-default); background: #fff;
}
.search-input input { flex: 1; border: none; outline: none; background: transparent; font: 500 13px var(--font-sans); color: var(--mw-grey-dark); }
.search-input .use-loc { font: 600 11px var(--font-sans); color: var(--mw-red-1); cursor: pointer; white-space: nowrap; }
.radius-select { width: 140px; flex: none; height: 44px; border-radius: 12px; border: 1px solid var(--border-default); background: #fff; font: 500 13px var(--font-sans); color: var(--mw-grey-dark); padding: 0 14px; }
.results-head { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; flex-wrap: wrap; gap: 8px; }
.results-count { font: 700 9.5px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--slate-400); }
.view-toggle { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--slate-100); }
.view-toggle span { padding: 6px 15px; border-radius: 999px; font: 600 11.5px var(--font-sans); cursor: pointer; white-space: nowrap; }
.view-toggle span.active { background: #fff; color: var(--mw-ink); box-shadow: var(--shadow-sm); }
.view-toggle span:not(.active) { color: var(--slate-500); }

.clinic-list { display: grid; gap: 10px; margin-top: 12px; }
.clinic-card {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 14px; background: #fff;
  cursor: pointer; border: 1px solid var(--border-default); box-shadow: var(--shadow-sm);
}
.clinic-card.selected { border-color: var(--mw-red-1); box-shadow: 0 0 0 3px var(--focus-ring); }
.clinic-card.closed { background: var(--slate-50); cursor: default; }
.clinic-card img.store-logo { flex: none; height: 22px; width: auto; }
.clinic-card .info { flex: 1; min-width: 0; }
.clinic-card .addr-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.clinic-card .addr { font: 700 14.5px var(--font-sans); color: var(--mw-ink); letter-spacing: -.01em; }
.clinic-card .badge-closest { font: 700 9px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--mw-insurance); background: rgba(13,148,136,.10); border-radius: 5px; padding: 3px 7px; }
.clinic-card .meta { font: 400 12px/1.5 var(--font-sans); color: var(--slate-500); margin-top: 4px; }
.clinic-card .next { width: 150px; flex: none; }
.clinic-card .next .label { font: 700 9px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--slate-400); }
.clinic-card .next .val { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px var(--font-sans); color: var(--mw-grey-dark); margin-top: 4px; }
.clinic-card .select-btn { flex: none; }

.clinic-card.compact { flex-direction: column; align-items: stretch; gap: 4px; padding: 12px 13px; }
.clinic-card.compact .addr-row { flex-wrap: wrap; gap: 6px; }
.clinic-card.compact .addr { font-size: 12.5px; }
.clinic-card.compact .meta { font-size: 11px; margin-top: 0; }
.clinic-card.compact .next-row { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; gap: 8px; }
.clinic-card.compact .next-row .val { display: inline-flex; align-items: center; gap: 5px; font: 600 11px var(--font-sans); color: var(--mw-grey-dark); white-space: nowrap; }
.clinic-card.compact .select-btn { padding: 6px 14px; font-size: 11px; }

.radius-note { font: 400 11.5px/1.5 var(--font-sans); color: var(--mw-grey-light); margin-top: 12px; }
.map-wrap { display: flex; gap: 12px; margin-top: 12px; align-items: stretch; }
.map-side { width: 240px; flex: none; display: grid; gap: 9px; align-content: start; max-height: 352px; overflow-y: auto; }
.mw-map-canvas { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--border-default); background: #eef1f4; }
.legal-footnote { font: 400 11.5px/1.5 var(--font-sans); color: var(--slate-400); margin-top: 16px; }

/* ---------- day / time ---------- */
.day-row { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.day-chip { flex: 1; min-width: 88px; text-align: center; padding: 13px 0; border-radius: 13px; cursor: pointer; background: #fff; border: 1px solid var(--border-default); box-shadow: var(--shadow-sm); }
.day-chip.selected { background: var(--gradient-brand); border-color: var(--mw-red-1); box-shadow: 0 0 0 3px var(--focus-ring); }
.day-chip.empty { opacity: .5; cursor: default; background: var(--slate-50); box-shadow: none; }
.day-chip .top { font: 600 10px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--slate-400); }
.day-chip.selected .top { color: rgba(255,255,255,.75); }
.day-chip .main { font: 700 18px var(--font-sans); color: var(--mw-grey-dark); margin-top: 4px; letter-spacing: -.02em; }
.day-chip.selected .main { color: #fff; }
.day-chip .count { font: 400 10px var(--font-sans); color: var(--slate-400); margin-top: 3px; }
.day-chip.selected .count { color: rgba(255,255,255,.75); }

.day-info-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 24px; flex-wrap: wrap; gap: 4px; }
.day-info-row .name { font: 700 13px var(--font-sans); color: var(--mw-grey-dark); }
.day-info-row .tz { font: 400 11px var(--font-sans); color: var(--slate-400); }

.slot-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 12px; }
.slot { text-align: center; padding: 11px 0; border-radius: 11px; border: 1px solid var(--border-default); background: #fff; font: 600 12px var(--font-sans); color: var(--mw-grey-dark); cursor: pointer; }
.slot.selected { border-color: var(--mw-red-1); background: var(--gradient-brand); color: #fff; box-shadow: 0 0 0 3px var(--focus-ring); }
.slot.unavailable { border-color: var(--border-hairline); background: var(--slate-50); color: #cbd5e1; text-decoration: line-through; cursor: default; }
.empty-note { font: 400 12.5px var(--font-sans); color: var(--slate-400); margin-top: 16px; text-align: center; padding: 20px 0; }

/* ---------- payment ---------- */
.pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.pay-card { display: flex; align-items: flex-start; gap: 13px; padding: 17px; border-radius: 14px; border: 1px solid var(--border-default); box-shadow: var(--shadow-sm); cursor: pointer; background: #fff; }
.pay-card.selected { border-color: var(--mw-red-1); box-shadow: 0 0 0 3px var(--focus-ring); }
.pay-card .icon { width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--slate-100); color: var(--slate-500); display: flex; align-items: center; justify-content: center; }
.pay-card.selected .icon { background: var(--gradient-brand-135); color: #fff; }
.pay-card .name { font: 600 14.5px var(--font-sans); color: var(--mw-grey-dark); }
.pay-card .desc { font: 400 12px/1.5 var(--font-sans); color: var(--mw-grey-light); margin-top: 3px; }
.pay-card .check { color: var(--mw-red-1); font-size: 17px; margin-left: auto; }

.fee-panel { border: 1px solid var(--border-default); border-radius: 14px; background: var(--mw-panel); padding: 16px 18px; margin-top: 16px; }
.fee-panel .head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px; }
.fee-panel .label { font: 700 9.5px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--slate-400); }
.fee-panel .note { font: 400 11px var(--font-sans); color: var(--slate-400); }
.fee-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.fee-tile { background: #fff; border: 1px solid var(--border-hairline); border-radius: 12px; padding: 13px 14px; }
.fee-tile .amt { font: 700 21px var(--font-sans); color: var(--mw-ink); letter-spacing: -.02em; }
.fee-tile .name { font: 600 11px var(--font-sans); color: var(--mw-grey-dark); margin-top: 4px; }
.fee-tile .desc { font: 400 10px/1.5 var(--font-sans); color: var(--slate-500); margin-top: 4px; }
.fee-example { font: 400 11px/1.5 var(--font-sans); color: var(--slate-600); margin-top: 11px; }

.estimate-card { border: 1px solid var(--border-default); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); padding: 16px 18px; margin-top: 12px; }
.estimate-card .label { font: 700 9.5px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--slate-400); }
.estimate-line { display: flex; justify-content: space-between; font: 400 12.5px var(--font-sans); color: var(--slate-600); padding: 4px 0; }
.estimate-line strong { color: var(--mw-ink); font-weight: 600; }
.estimate-total { display: flex; justify-content: space-between; padding-top: 9px; margin-top: 4px; border-top: 1px solid var(--border-hairline); font: 700 14px var(--font-sans); color: var(--mw-ink); }
.estimate-due { display: flex; justify-content: space-between; font: 600 12.5px var(--font-sans); color: var(--mw-insurance); }

/* ---------- review ---------- */
.review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.review-card { border: 1px solid var(--border-default); border-radius: 14px; padding: 17px 18px; background: #fff; box-shadow: var(--shadow-sm); }
.review-card .head { display: flex; justify-content: space-between; align-items: baseline; }
.review-card .head .label { font: 700 9.5px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--slate-400); }
.review-card .big { font: 700 16px var(--font-sans); color: var(--mw-ink); margin-top: 10px; letter-spacing: -.01em; }
.review-card .mid { font: 400 12px/1.6 var(--font-sans); color: var(--slate-500); margin-top: 5px; }
.review-card .clinic-row { display: flex; align-items: center; gap: 10px; margin-top: 9px; padding-top: 10px; border-top: 1px solid var(--border-hairline); }
.review-card .clinic-row img { flex: none; height: 22px; width: auto; }
.review-card .clinic-row .addr { font: 700 12px/1.4 var(--font-sans); color: var(--mw-ink); }

.coverage-card { border: 1px solid var(--border-default); border-radius: 14px; padding: 17px 18px; background: var(--slate-50); margin-top: 13px; }
.consent-box { display: flex; gap: 10px; align-items: flex-start; margin-top: 13px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--mw-red-1); background: rgba(194,32,74,.03); box-shadow: 0 0 0 3px var(--focus-ring); cursor: pointer; }
.consent-box .box { width: 18px; height: 18px; flex: none; margin-top: 1px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font: 700 11px var(--font-sans); color: #fff; }
.consent-box .box.checked { background: var(--gradient-brand-135); }
.consent-box .box.unchecked { border: 1.5px solid var(--border-default); background: #fff; }
.consent-box .txt { font: 400 12px/1.5 var(--font-sans); color: var(--mw-grey-dark); }

/* ---------- voucher ---------- */
.voucher-card { border-radius: 16px; overflow: hidden; background: var(--slate-50); border: 1.5px solid var(--mw-red-1); box-shadow: 0 0 0 3px var(--focus-ring); }
.voucher-card .top { padding: 18px 22px 16px; }
.voucher-card .brand-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.voucher-card .brand-row img { height: 20px; }
.voucher-card .tag { font: 700 9px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--mw-red-1); white-space: nowrap; }
.voucher-card .code-label { font: 700 9.5px var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--slate-400); margin-top: 18px; }
.voucher-card .code { font: 700 28px var(--font-mono); letter-spacing: .14em; margin-top: 7px; color: var(--mw-ink); }
.voucher-card .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 18px; margin-top: 14px; font: 400 11.5px/1.5 var(--font-sans); color: var(--slate-600); }
.voucher-card .grid2 .k { display: block; font: 700 8.5px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--slate-400); }
.voucher-card .services { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-default); }
.voucher-card .services .label { font: 700 8.5px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--slate-400); margin-bottom: 8px; }
.voucher-card .svc-line { display: flex; gap: 9px; align-items: flex-start; font: 400 11.5px/1.5 var(--font-sans); color: var(--slate-600); }
.voucher-card .svc-line .dot { width: 5px; height: 5px; flex: none; margin-top: 6px; border-radius: 50%; background: var(--mw-red-1); }
.voucher-card .svc-line.zero { color: var(--mw-insurance); font-weight: 600; }
.voucher-card .svc-line.zero .dot { background: currentColor; }
.voucher-card .fine { border-top: 1px dashed rgba(194,32,74,.35); padding: 12px 22px 16px; font: 400 10px/1.55 var(--font-sans); color: var(--slate-500); }
.voucher-actions { display: flex; gap: 9px; padding: 0 22px 18px; flex-wrap: wrap; }
.voucher-actions span { border-radius: 999px; padding: 8px 15px; font: 600 11.5px var(--font-sans); cursor: pointer; white-space: nowrap; }
.voucher-actions .primary { background: var(--gradient-brand); color: #fff; box-shadow: var(--shadow-brand); }
.voucher-actions .ghost { background: #fff; border: 1px solid var(--border-default); color: var(--mw-grey-dark); }

.confirm-appt-card { border: 1px solid var(--border-default); border-radius: 16px; padding: 18px 20px; background: #fff; box-shadow: var(--shadow-sm); }
.confirm-appt-card .label { font: 700 9.5px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--slate-400); }
.confirm-appt-card .big { font: 700 17px var(--font-sans); color: var(--mw-ink); margin-top: 9px; letter-spacing: -.01em; }
.confirm-appt-card .mid { font: 400 12px/1.6 var(--font-sans); color: var(--slate-500); margin-top: 5px; }
.confirm-appt-card .links { display: flex; gap: 13px; margin-top: 13px; flex-wrap: wrap; }
.confirm-appt-card .links a { font: 600 12px var(--font-sans); }

.before-go { border: 1px solid var(--border-default); border-radius: 14px; padding: 17px 20px; background: var(--slate-50); margin-top: 14px; }
.before-go .label { font: 700 9.5px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--slate-400); margin-bottom: 11px; }
.before-go .item { display: flex; gap: 9px; align-items: flex-start; font: 400 12px/1.5 var(--font-sans); color: var(--slate-600); padding: 3px 0; }
.before-go .item .dot { width: 5px; height: 5px; flex: none; margin-top: 6px; border-radius: 50%; background: var(--mw-red-1); }

.legal-block { max-width: 900px; margin: 18px auto 0; font: 400 10.5px/1.6 var(--font-sans); color: var(--slate-500); padding: 0 4px; }

/* ---------- phone frame (mobile app + confirmation email) ----------
   Modeled on project/ios-frame.jsx (dynamic island, status bar, home
   indicator) — ported to plain CSS/HTML for this vanilla-JS app. */
.phone {
  width: 375px; flex: none; background: #fff; border-radius: 48px;
  overflow: hidden; position: relative;
  box-shadow: 0 40px 80px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.12);
}
.phone-island {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 112px; height: 32px; border-radius: 20px; background: #000; z-index: 50; pointer-events: none;
}
.phone-statusbar {
  height: 50px; background: #fff; display: flex; align-items: center; justify-content: space-between;
  padding: 4px 26px 0; font: 590 15px var(--font-sans); color: var(--mw-ink); position: relative; z-index: 20;
}
.phone-statusbar .icons { display: flex; align-items: center; gap: 6px; }
.phone-body { max-height: 720px; overflow-y: auto; position: relative; }
.phone-body::-webkit-scrollbar { width: 0; }
.phone-home-indicator {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 60; height: 30px;
  display: flex; justify-content: center; align-items: flex-end; padding-bottom: 8px; pointer-events: none;
}
.phone-home-indicator .bar { width: 134px; height: 5px; border-radius: 100px; background: rgba(0,0,0,.25); }

/* ---------- mobile app flow ---------- */
.m-header { padding: 6px 20px 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-hairline); }
.m-header img.logo { height: 22px; }
.m-header .sub { font: 600 11px var(--font-sans); color: var(--slate-400); }
.m-back { display: flex; align-items: center; gap: 10px; }
.m-back .arrow { font: 600 15px var(--font-sans); color: var(--slate-400); cursor: pointer; }
.m-back .title { font: 700 13.5px var(--font-sans); color: var(--mw-ink); }
.m-hero { position: relative; height: 150px; overflow: hidden; }
.m-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.m-hero .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,26,26,.05) 0%, rgba(26,26,26,.55) 55%, rgba(26,26,26,.88) 100%); }
.m-hero .copy { position: absolute; left: 20px; right: 20px; bottom: 14px; }
.m-hero .eyebrow { font: 700 9px var(--font-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--mw-accent-soft); }
.m-hero h3 { font: 800 18px/1.2 var(--font-sans); color: #fff; letter-spacing: -.02em; margin-top: 5px; text-shadow: 0 2px 14px rgba(0,0,0,.5); }
.m-body { padding: 16px 20px 22px; background: var(--gradient-brand-soft); min-height: 540px; }
.m-search { display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border-default); background: #fff; box-shadow: var(--shadow-sm); }
.m-search input { flex: 1; border: none; outline: none; background: transparent; font: 500 12.5px var(--font-sans); color: var(--mw-grey-dark); }
.m-radius { width: 74px; border: none; background: transparent; outline: none; font: 600 11px var(--font-sans); color: var(--slate-500); }
.m-row-head { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 9px; }
.m-view-toggle { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--slate-100); }
.m-view-toggle span { padding: 5px 11px; border-radius: 999px; font: 600 10.5px var(--font-sans); cursor: pointer; }
.m-view-toggle span.active { background: #fff; box-shadow: var(--shadow-sm); color: var(--mw-ink); }
.m-view-toggle span:not(.active) { color: var(--slate-500); }
.m-clinic { background: #fff; border: 1px solid var(--border-default); border-radius: 14px; padding: 14px 15px; margin-top: 10px; }
.m-clinic.selected { border-color: var(--mw-red-1); box-shadow: 0 0 0 3px var(--focus-ring); }
.m-clinic .top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.m-clinic .name { font: 700 13px var(--font-sans); color: var(--mw-ink); }
.m-clinic .meta { font: 400 11px/1.5 var(--font-sans); color: var(--slate-500); margin-top: 3px; }
.m-clinic .closest { background: rgba(13,148,136,.10); color: var(--mw-insurance); border-radius: 999px; padding: 4px 9px; font: 700 9px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.m-slots { display: flex; gap: 7px; margin-top: 12px; flex-wrap: wrap; }
.m-slots span { flex: 1; min-width: 64px; text-align: center; padding: 9px 0; border-radius: 10px; border: 1px solid var(--border-default); font: 600 11.5px var(--font-sans); color: var(--mw-grey-dark); cursor: pointer; }
.m-slots span.primary { background: var(--gradient-brand); color: #fff; border: none; }
.m-more-link { font: 600 11.5px var(--font-sans); color: var(--mw-red-1); margin-top: 10px; display: inline-block; cursor: pointer; }
.m-bottom-nav { display: flex; justify-content: space-around; padding: 12px 0 28px; border-top: 1px solid var(--border-hairline); background: #fff; position: relative; z-index: 10; }
.m-bottom-nav span { font: 600 9.5px var(--font-sans); color: var(--slate-400); cursor: pointer; }
.m-bottom-nav span.active { color: var(--mw-red-1); }
.m-empty { text-align: center; padding: 60px 20px; }
.m-empty .icon { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 14px; background: var(--slate-100); color: var(--slate-400); display: flex; align-items: center; justify-content: center; }
.m-empty .title { font: 700 14px var(--font-sans); color: var(--mw-ink); }
.m-empty .desc { font: 400 12px/1.5 var(--font-sans); color: var(--slate-500); margin-top: 6px; }
.m-field { margin-bottom: 12px; }
.m-field label { display: block; font: 600 11px var(--font-sans); color: var(--mw-grey-dark); margin-bottom: 6px; }
.m-field input { width: 100%; box-sizing: border-box; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border-default); background: var(--slate-50); font: 500 13px var(--font-sans); color: var(--mw-grey-dark); outline: none; }
.m-field input.invalid { border-color: var(--mw-danger); }
.m-field .err { font: 500 10.5px var(--font-sans); color: var(--mw-danger); margin-top: 4px; min-height: 13px; }
.m-btn-primary { width: 100%; border: none; background: var(--gradient-brand); color: #fff; border-radius: 12px; padding: 14px 0; font: 600 13.5px var(--font-sans); cursor: pointer; box-shadow: var(--shadow-brand); }
.m-btn-primary:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.m-btn-secondary { width: 100%; border: 1px solid var(--border-default); background: #fff; color: var(--mw-grey-dark); border-radius: 11px; padding: 11px 0; font: 600 12px var(--font-sans); cursor: pointer; }

@media (max-width: 900px) {
  .reason-grid { grid-template-columns: 1fr; }
  .pay-grid { grid-template-columns: 1fr; }
  .review-grid { grid-template-columns: 1fr; }
  .fee-tiles { grid-template-columns: 1fr; }
  .slot-grid { grid-template-columns: repeat(3, 1fr); }
  .map-wrap { flex-direction: column; }
  .map-side { width: 100%; max-height: none; }
}