/* Cookie consent banner — see public/js/firebase-init.js's showCookieBanner(). Plain JS-injected
   (this file loads before the React bundle and outside it, on every page), so it's a fixed-
   position bar rather than a component, but uses the same design tokens as everything else. */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
  background: var(--ink, #1B2A4A); color: #fff;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
}
.cookie-banner p { margin: 0; font-size: 0.88rem; max-width: 640px; }
.cookie-banner a { color: #fff; text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 10px; flex-shrink: 0; }
/* .btn-ghost's base rule (below) sets background:#fff, which this override never
   replaced — white Decline text sat on a white button background, invisible against
   the dark banner. Also scope :hover here since the base .btn-ghost:hover sets a dark
   teal text color that would be unreadable against this banner's dark background. */
.cookie-banner .btn-ghost { color: #fff; background: transparent; border-color: rgba(255,255,255,0.4); }
.cookie-banner .btn-ghost:hover { color: #fff; background: rgba(255,255,255,0.12); border-color: #fff; }
@media (max-width: 560px) {
  .cookie-banner { flex-direction: column; align-items: flex-start; }
}

/* Skip-to-content link — see App()'s <a href="#main-content" className="skip-link"> in app.jsx.
   Off-screen until keyboard-focused (Tab from a fresh page load), then drops into view above
   everything else so a keyboard/screen-reader user can jump past the header nav. */
.skip-link {
  position: absolute; top: -48px; left: 8px; z-index: 1000;
  background: var(--teal-700, #0F766E); color: #fff; padding: 10px 16px;
  border-radius: 8px; font-weight: 700; text-decoration: none; transition: top 0.15s ease;
}
.skip-link:focus { top: 8px; }

/* ============================================================
   MistriConnect — Design System v2
   ============================================================ */
:root {
  --teal-50:  #F0FDFA;
  --teal-100: #CCFBF1;
  --teal-600: #0D9488;
  --teal-700: #0F766E;
  --teal-800: #115E59;
  --teal-900: #134E4A;
  --sky:      #0EA5E9;
  --tag-bg:   #E0F2FE;
  --ink:      #1B2A4A;
  --slate:    #475569;
  --slate-lt: #94A3B8;
  --line:     #E2E8F0;
  --bg:       #FFFFFF;
  --bg-soft:  #F8FAFC;
  --amber:    #F59E0B;
  --red:      #DC2626;
  --green:    #16A34A;
  --font-display: "Outfit", "Plus Jakarta Sans", system-ui, sans-serif;
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px;
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md: 0 10px 30px -6px rgba(15, 118, 110, .14);
  --shadow-lg: 0 24px 50px -12px rgba(15, 118, 110, .22);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  color: var(--ink); background: var(--bg); line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: 760px; }
/* Terms & Conditions, Privacy Policy, and the Partner Agreement all read better wider than the
   other .container.narrow pages (blog posts) — these are dense legal documents, not short
   articles, and felt cramped at 760px. Kept as a separate modifier rather than changing
   .container.narrow itself so blog posts stay at their original width. */
.container.narrow.legal-wide { max-width: 920px; }

/* --- Typography --- */
h1 { font-family: var(--font-display); font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
h1 .hl { color: var(--teal-600); }
h2 { font-family: var(--font-display); font-size: clamp(1.55rem, 3.2vw, 2.25rem); font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; color: var(--ink); }
h3 { font-weight: 700; font-size: 1.12rem; }
.icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.eyebrow { display: inline-block; color: var(--teal-600); font-weight: 800; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 10px; }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 52px; }
.section-head p { color: var(--slate); margin-top: 12px; font-size: 1.02rem; }
.lead { color: var(--slate); font-size: 1.14rem; max-width: 640px; }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 12px; font-weight: 700; font-size: 0.95rem;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  font-family: inherit; transition: all .16s ease; white-space: nowrap;
}
.btn:focus-visible { outline: 3px solid var(--teal-100); outline-offset: 1px; }
.btn-primary { background: var(--teal-700); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--teal-800); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: #fff; }
.btn-ghost:hover { border-color: var(--teal-600); color: var(--teal-700); }
/* Solid dark-navy variant -- used for non-featured package "Book Now" buttons
   per the updated reference mock (image-led card, all three "Book Now" buttons
   solid -- teal on the featured/"MOST POPULAR" card, dark navy on the other
   two -- instead of the previous white/ghost button on non-featured cards). */
.btn-dark { background: var(--ink); color: #fff; box-shadow: var(--shadow-sm); }
.btn-dark:hover { background: #12203c; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-lg { padding: 16px 32px; font-size: 1.02rem; border-radius: 14px; }
.btn-sm { padding: 9px 16px; font-size: 0.85rem; border-radius: 9px; }
.btn.full { width: 100%; }

/* --- Top bar + Nav --- */
.topbar { background: var(--teal-900); color: #A7F3EB; font-size: 0.8rem; font-weight: 600; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; height: 36px; }
.topbar a { color: #fff; text-decoration: none; }
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 80px; gap: 20px; }
.logo-lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-mark { flex-shrink: 0; }
.logo { font-family: var(--font-display); font-size: 1.32rem; font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.logo span { color: var(--ink); }
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a {
  color: var(--slate); text-decoration: none; font-weight: 600; font-size: 0.93rem;
  padding: 2px 0; border-radius: 0; transition: color .15s ease;
}
.nav-links a:hover { color: var(--teal-700); }
.nav-links a.active { color: var(--teal-700); font-weight: 700; }
.nav-actions { display: flex; align-items: center; gap: 24px; }
.nav-login { color: var(--ink); font-weight: 600; font-size: 0.93rem; text-decoration: none; }
.nav-login:hover { color: var(--teal-700); }
.nav-account { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; font-size: 0.9rem; text-decoration: none; }
.nav-account:hover { color: var(--teal-700); }
.nav-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--teal-700); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.8rem; flex-shrink: 0; }
.nav-account-name { white-space: nowrap; }
.hamburger { display: none; background: none; border: none; font-size: 1.6rem; cursor: pointer; color: var(--ink); }

/* --- Hero --- */
.hero { background: #fff; padding: 80px 0; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: center; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--tag-bg); border: none; color: var(--ink);
  font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 7px 16px; border-radius: 999px; margin-bottom: 22px;
}
.pill .icon { color: var(--teal-600); }
.hero .lead { margin: 20px 0 30px; font-size: 1.1rem; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 36px; }
.btn .icon { flex-shrink: 0; }

/* Stats */
/* Grid, not flex space-between: with exactly 3 stats of differing text width (see
   backend SEED_CMS.stats), space-between only equalizes the blank gaps between items,
   not their visual position — the shorter middle stat reads as clustered toward the left
   instead of evenly distributed. A 3-column grid gives each stat an equal-width column
   so the row reads as evenly spaced regardless of label/value length. Stays 3-across
   through the Tablet tier (Figma node 359:16 keeps all 3 stats on one row at 768px) and
   only stacks to 1 column at the true Mobile tier below — see the @media (max-width:
   767px) rule further down. */
.stats-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; justify-items: center; text-align: center;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding-top: 0; padding-bottom: 0; background: var(--bg-soft);
}
.stats-row.in-hero { border: none; background: none; padding-top: 0; padding-bottom: 0; justify-items: start; text-align: left; }
.stat {
  display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 160px;
  padding: 36px 24px; position: relative; transition: transform 0.2s ease;
}
.stat:not(:last-child)::after {
  content: ""; position: absolute; top: 22%; bottom: 22%; right: 0; width: 1px; background: var(--line);
}
.stats-row:hover .stat:hover { transform: translateY(-3px); }
.stat-icon-wrap {
  display: flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  border-radius: var(--r-lg); background: rgba(13, 148, 136, 0.1); color: var(--teal-600); margin-bottom: 4px;
}
.stat-label { color: var(--teal-600); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.stat-value { color: var(--ink); font-weight: 800; font-size: 1.7rem; font-family: var(--font-display); }
.stat-caption { color: var(--slate); font-size: 0.85rem; max-width: 220px; }

/* Hero image */
.hero-image {
  border-radius: var(--r-lg); overflow: hidden; height: 460px;
  background: linear-gradient(150deg, var(--teal-700), var(--ink)); position: relative;
}
.hero-image img { width: 100%; height: 100%; object-fit: cover; }
.partner-hero-banner { position: relative; height: 420px; overflow: hidden; }
.partner-hero-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.partner-hero-banner-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px;
  /* Matches .container's own math (max-width: 1140px; padding: 0 24px) so the hero text
     shares the exact same left margin as the header logo and every other section below it —
     previously this used a different reference width (1280px) with no +24px offset, which
     put the hero text ~94px further left than everything else on the page. */
  padding: 0 max(24px, calc((100% - 1140px) / 2 + 24px));
  background: linear-gradient(90deg, rgba(27,42,74,0.88) 0%, rgba(27,42,74,0.45) 55%, rgba(27,42,74,0.1) 100%);
}
.partner-hero-banner-overlay h1 { font-size: clamp(1.6rem, 3.6vw, 2.6rem); max-width: 640px; }
@media (max-width: 767px) { .partner-hero-banner { height: 260px; } }
.area-chip-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.area-pick-chip {
  padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff;
  font-weight: 700; font-size: 0.82rem; color: var(--slate); cursor: pointer;
}
.area-pick-chip.on { background: var(--teal-50); border-color: var(--teal-600); color: var(--teal-700); }

/* Searchable multi-select dropdown (used for Service Areas on the Partner application form) */
.area-multiselect { position: relative; }
.area-multiselect-control {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  min-height: 48px; padding: 8px 14px; border-radius: 12px; border: 1.5px solid var(--line);
  background: #fff; cursor: pointer; text-align: left; font-family: inherit;
}
.area-multiselect-control:focus, .area-multiselect-control:focus-visible { outline: none; border-color: var(--teal-600); box-shadow: 0 0 0 3px var(--teal-100); }
.area-multiselect-control svg { flex-shrink: 0; color: var(--slate-lt); }
.area-multiselect-placeholder { color: var(--slate-lt); font-weight: 500; font-size: 0.92rem; }
.area-multiselect-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.area-multiselect-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 10px; border-radius: 999px;
  background: var(--teal-50); border: 1px solid var(--teal-100); color: var(--teal-700);
  font-weight: 700; font-size: 0.78rem;
}
.area-multiselect-chip span[role="button"] { cursor: pointer; color: var(--teal-600); font-weight: 700; line-height: 1; padding: 2px; }
.area-multiselect-chip span[role="button"]:hover { color: var(--teal-800); }
.area-multiselect-panel {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.area-multiselect-search { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.area-multiselect-search svg { flex-shrink: 0; color: var(--slate-lt); }
.area-multiselect-search input { border: none; padding: 0; box-shadow: none !important; font-size: 0.9rem; }
.area-multiselect-search input:focus { border: none; box-shadow: none !important; }
.area-multiselect-list { max-height: 220px; overflow-y: auto; padding: 6px; }
.area-multiselect-option {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;
  font-size: 0.9rem; font-weight: 600; color: var(--ink); cursor: pointer;
}
.area-multiselect-option:hover { background: var(--teal-50); }
.area-multiselect-option input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--teal-600); cursor: pointer; }
.area-multiselect-empty { padding: 14px 10px; color: var(--slate-lt); font-size: 0.85rem; text-align: center; }
.hero-card {
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: 30px; border: 1px solid var(--line);
}
.hero-card h3 { margin-bottom: 18px; color: var(--teal-800); display: flex; align-items: center; gap: 8px; }
.mock-step {
  display: flex; align-items: center; gap: 13px; padding: 13px 16px;
  border: 1.5px solid var(--line); border-radius: 12px; margin-bottom: 10px;
  font-weight: 600; font-size: 0.93rem; color: var(--slate);
}
.mock-step.done { border-color: var(--teal-600); background: var(--teal-50); color: var(--teal-800); }
.mock-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; background: var(--teal-700);
  color: #fff; font-size: 0.8rem; font-weight: 800; flex-shrink: 0;
}

/* --- Sections --- */
.section { padding: 88px 0; }
.section.alt { background: var(--bg-soft); }

/* App download CTA (homepage, Figma "app-download-cta" node 10:206) */
.app-download-cta { background: var(--bg-soft); padding: 64px 0; }
.app-download-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.app-download-copy { flex: 1; min-width: 280px; }
.app-download-copy h2 { margin-bottom: 12px; }
.app-download-copy > p { color: var(--slate); font-size: 1.05rem; margin-bottom: 28px; }
.app-download-buttons { display: flex; gap: 14px; flex-wrap: wrap; }
.store-pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 24px;
  background: var(--teal-600); color: #fff; border-radius: 999px; font-weight: 700; font-size: 0.95rem;
  text-decoration: none; transition: background .15s ease;
}
.store-pill:hover { background: var(--teal-700); }
.app-download-qr { display: flex; flex-direction: column; align-items: center; gap: 12px; flex-shrink: 0; }
.qr-placeholder { border-radius: 12px; box-shadow: var(--shadow-sm); }
.app-download-qr span { font-weight: 700; color: var(--ink); font-size: 0.9rem; }
.page-head {
  background:
    radial-gradient(50% 90% at 90% 0%, rgba(13,148,136,.09) 0%, transparent 55%),
    linear-gradient(170deg, var(--teal-50) 0%, #fff 70%);
  padding: 64px 0 52px;
}
.page-head h1 { margin: 8px 0 16px; }
.page-head .stats-row { margin-top: 30px; }

/* --- Cards --- */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.card {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg);
  padding: 28px; position: relative; display: flex; flex-direction: column; gap: 10px;
  transition: all .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--teal-100); }
.card.featured { border: 2px solid var(--teal-600); box-shadow: var(--shadow-md); }

/* Horizontal card slider — used for any dynamically-sized list of cards
   (packages in particular), so admin-added items scroll/swipe instead of
   squeezing a fixed grid or overflowing the page on narrow screens. */
.hscroll-wrap { position: relative; }
.hscroll-track {
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 4px 4px 14px; margin: -4px -4px -14px; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.hscroll-track > * { flex: 0 0 auto; scroll-snap-align: start; }
.hscroll-track::-webkit-scrollbar { height: 6px; }
.hscroll-track::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.hscroll-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line);
  background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--shadow-md);
}
.hscroll-arrow.prev { left: -20px; }
.hscroll-arrow.next { right: -20px; }
.hscroll-arrow:hover { border-color: var(--teal-600); color: var(--teal-600); }
@media (max-width: 767px) {
  .hscroll-arrow { display: none; }
  .hscroll-track { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
}
.pkg-slider-wrap .card.pkg { width: 340px; }
.wiz-pkg-slider-wrap .wiz-pkg-card { width: 280px; }
@media (max-width: 480px) {
  .pkg-slider-wrap .card.pkg { width: 88vw; }
  .wiz-pkg-slider-wrap .wiz-pkg-card { width: 82vw; }
}
.badge {
  display: inline-flex; align-items: center; background: var(--teal-600); color: #fff;
  font-size: 0.68rem; font-weight: 800; padding: 4px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.card p { color: var(--slate); font-size: 0.93rem; }

/* Packages */
.pkg-card-head { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.pkg h3 { font-size: 1.2rem; color: var(--ink); font-weight: 800; }
.pkg-meta { color: var(--slate); font-weight: 600; font-size: 0.8rem; display: flex; align-items: center; gap: 5px; }
.pkg-meta .icon { color: var(--slate); }
.pkg-price { display: flex; align-items: baseline; gap: 5px; margin: 4px 0 2px; }
.pkg-price strong { font-size: 2.3rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; font-family: var(--font-display); }
.pkg-price span { color: var(--slate); font-weight: 600; font-size: 0.9rem; }
.pkg-desc { min-height: 44px; }
.pkg-lists { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; border-top: 1px solid var(--line); padding-top: 16px; }
.pkg-lists h5 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--slate-lt); margin-bottom: 6px; font-weight: 800; }
.pkg-lists ul { list-style: none; font-size: 0.86rem; color: var(--slate); }
.pkg-lists ul.inc li { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: var(--ink); }
.pkg-lists ul.inc li .icon { color: var(--teal-600); }
.pkg-lists ul.exc li { padding: 3px 0 3px 24px; position: relative; opacity: 0.6; }
.pkg-lists ul.exc li::before { content: "✕"; position: absolute; left: 0; color: var(--red); font-weight: 800; }
.pkg-select { margin-top: 20px; }
/* Booking wizard Step 1's "Select Plan" button (also .pkg-select) -- unselected state
   is a neutral grey fill instead of the homepage card's solid navy "Book Now" look,
   since here the button is a toggle (select this plan) rather than a link to another
   page, and a dark/heavy unselected button read as if every card were already an
   equally strong call-to-action. Selected state still uses .btn-primary (solid teal)
   so the one active choice is visually obvious. #EEF2F6 matches the light-grey fill
   already used elsewhere in this file for neutral/inactive surfaces. */
.pkg-select-idle { background: #EEF2F6; color: var(--slate); box-shadow: none; }
.pkg-select-idle:hover { background: #E2E8F0; color: var(--ink); }

/* Why cards */
.why-card { gap: 6px; }
.why-card .why-icon {
  width: 46px; height: 46px; border-radius: 12px; background: var(--teal-50);
  color: var(--teal-700); display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; margin-bottom: 8px; border: 1.5px solid var(--teal-100);
}
.why-card h3 { font-size: 1.02rem; }

/* Steps */
/* grid-template-columns was hardcoded to repeat(5, 1fr) even though both places that use
   .steps (HowItWorks' 4-step section and the Partner page's onboarding timeline) render
   exactly 4 items — the leftover 5th column meant the row only spanned 4/5 of the
   container width instead of filling it, so the steps looked bunched to the left instead
   of evenly spread. */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.step { text-align: center; padding: 10px 12px; }
.step-num {
  width: 48px; height: 48px; border-radius: 50%; background: var(--teal-700); color: #fff;
  font-weight: 800; font-size: 1.15rem; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; box-shadow: var(--shadow-sm);
}
.step h3 { font-size: 1rem; margin-bottom: 6px; }
.step p { color: var(--slate); font-size: 0.88rem; }

/* MistriSP app-download section (Figma "WEB - Become a Partner" node 20:1597, sp-app-download) */
.sp-download-section { background: var(--bg-soft); padding: 96px 0; }
.sp-download-inner { display: flex; align-items: center; gap: 64px; }
.sp-phone-side { flex: none; }
/* Device-frame carousel (replaces the old single-image .sp-phone-img). Bezel is drawn here in
   CSS so any number of real flat screen exports (SP_APP_SCREENS in app.jsx) can slide through
   it without needing a new composited mockup image for every screen. */
.sp-phone-frame {
  position: relative; width: 280px; max-width: 100%; aspect-ratio: 9 / 19.5;
  margin: 0 auto; background: linear-gradient(160deg, var(--navy, #1B2A4A), var(--teal-700));
  border-radius: 40px; padding: 14px; box-shadow: 0 16px 48px rgba(0,0,0,0.25);
  box-sizing: border-box;
}
.sp-phone-notch {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 2;
  width: 84px; height: 20px; background: var(--navy, #1B2A4A); border-radius: 0 0 14px 14px;
}
.sp-phone-screen { position: relative; width: 100%; height: 100%; background: #fff; border-radius: 26px; overflow: hidden; }
.sp-phone-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; }
.sp-phone-slide.on { opacity: 1; }
.sp-phone-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sp-skel { display: flex; flex-direction: column; gap: 12px; padding: 28px 20px; height: 100%; box-sizing: border-box; background: #f8fafc; }
.sp-skel-bar { height: 12px; border-radius: 6px; background: var(--line); }
.sp-skel-block { flex: 1; margin-top: 8px; border-radius: 14px; background: var(--line); }
.sp-phone-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.sp-phone-dot { width: 8px; height: 8px; border-radius: 999px; border: none; background: rgba(27,42,74,0.25); cursor: pointer; padding: 0; }
.sp-phone-dot.on { background: var(--teal-600); width: 20px; border-radius: 999px; }
.sp-content-side { flex: 1; min-width: 0; background: var(--teal-50); border-radius: 24px; padding: 40px; }
.sp-content-side h2 { margin-bottom: 12px; }
.sp-content-side > p { color: var(--slate); font-size: 1.05rem; margin-bottom: 24px; }
.sp-features-card { background: #fff; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.sp-feature { display: flex; align-items: center; gap: 12px; font-size: 0.98rem; color: var(--ink); font-weight: 500; }
.sp-feature-check { flex: none; width: 24px; height: 24px; border-radius: 8px; background: #14B8A6; color: #fff; display: flex; align-items: center; justify-content: center; }
.sp-badges { display: flex; gap: 16px; flex-wrap: wrap; }
.sp-badge {
  display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px;
  background: var(--ink); border: 1.5px solid rgba(255,255,255,0.3); border-radius: 10px;
  color: #fff; text-decoration: none; transition: background .15s ease;
}
.sp-badge:hover { background: #24365e; }
.sp-badge span { display: flex; flex-direction: column; line-height: 1.25; font-size: 0.92rem; font-weight: 700; }
.sp-badge span small { font-size: 0.62rem; font-weight: 500; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.03em; }

/* Partner tier cards (Figma "WEB - Become a Partner" node 20:1597, tiers-section) */
.partner-tiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; align-items: stretch; }
.tier-card { padding: 40px; gap: 0; justify-content: space-between; }
.tier-card-top { display: flex; flex-direction: column; gap: 24px; }
.tier-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tier-header h3 { font-size: 1.6rem; font-weight: 800; color: var(--ink); margin: 0; }
.tier-tag { font-size: 0.72rem; font-weight: 800; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.tier-tag.teal { background: var(--teal-100); color: var(--teal-700); }
.tier-tag.sky { background: var(--tag-bg); color: var(--sky); }
.tier-rate { display: flex; align-items: baseline; gap: 6px; }
.tier-rate strong { font-size: 2.6rem; font-weight: 800; color: var(--ink); font-family: var(--font-display); }
.tier-rate span { color: var(--slate); font-weight: 600; font-size: 0.95rem; }
.tier-divider { height: 1px; background: var(--line); margin: 4px 0; }
.tier-features { margin: 0 0 32px; }
.tier-features li { color: var(--ink); }
.btn-tier-outline { background: #fff; border: 2px solid var(--teal-600); color: var(--teal-600); }
.btn-tier-outline:hover { background: var(--teal-50); }

/* Application Requirements section (Figma "WEB - Become a Partner" node 20:1597, reqs-section):
   real photo left, checklist right */
.partner-reqs-inner { display: flex; align-items: center; gap: 64px; }
.partner-reqs-image { flex: none; width: 440px; max-width: 100%; }
.partner-reqs-image img { display: block; width: 100%; height: 480px; object-fit: cover; border-radius: 24px; box-shadow: var(--shadow-sm); }
.partner-reqs-content { flex: 1; min-width: 0; }
.req-list { display: flex; flex-direction: column; gap: 20px; }
.req-row { display: flex; align-items: flex-start; gap: 14px; }
.req-check-box { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--teal-100); color: var(--teal-700); display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.req-text strong { display: block; color: var(--ink); font-size: 1.02rem; margin-bottom: 2px; }
.req-text p { margin: 0; color: var(--slate); font-size: 0.92rem; }

/* Timeline variant (Partner page onboarding, Figma "WEB - Become a Partner" node 20:1597):
   left-aligned badge with a connector line running to the next step, matching the Figma
   step-timeline component, instead of the generic centered .step treatment above. */
.steps.timeline-steps { text-align: left; }
.timeline-steps .step { text-align: left; padding: 0; position: relative; }
.timeline-steps .step-num {
  width: 40px; height: 40px; font-size: 1rem; margin: 0 0 16px; position: relative; z-index: 1;
}
.timeline-steps .step:not(:last-child)::after {
  content: ""; position: absolute; left: 40px; top: 20px;
  width: calc(100% - 40px + 18px); height: 2px; background: var(--line);
}

/* Areas */
.areas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.area-chip {
  background: #fff; border: 1.5px solid var(--line); padding: 10px 20px;
  border-radius: 999px; font-weight: 600; font-size: 0.9rem; color: var(--slate);
  transition: all .15s ease;
}
.area-chip:hover { border-color: var(--teal-600); color: var(--teal-700); }

/* Live Mistris map + area cards */
.service-map {
  position: relative; width: 100%; height: 320px; border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 20% 30%, rgba(13,148,136,.14) 0%, transparent 45%),
    radial-gradient(circle at 75% 65%, rgba(14,165,233,.14) 0%, transparent 45%),
    repeating-linear-gradient(0deg, rgba(148,163,184,.12) 0, rgba(148,163,184,.12) 1px, transparent 1px, transparent 32px),
    repeating-linear-gradient(90deg, rgba(148,163,184,.12) 0, rgba(148,163,184,.12) 1px, transparent 1px, transparent 32px),
    #EEF2F6;
  border: 1.5px solid var(--line); margin-bottom: 24px; overflow: hidden;
}
.map-pin {
  position: absolute; width: 28px; height: 28px; border-radius: 999px; background: var(--teal-600);
  color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 12px rgba(13,148,136,.35); transform: translate(-50%, -50%);
}
/* Real Google Map (replaces .service-map when window.MC_GOOGLE_MAPS_KEY is configured).
   .gmap-canvas is left untouched by React once Google Maps initializes it, so any status
   text renders as an absolutely-positioned sibling overlay, never a child of the canvas. */
.gmap-wrap {
  position: relative; width: 100%; height: 320px; border-radius: var(--r-lg);
  border: 1.5px solid var(--line); margin-bottom: 24px; overflow: hidden; background: #EEF2F6;
}
.gmap-canvas { position: absolute; inset: 0; }
.gmap-status {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--slate); font-size: 0.85rem; font-weight: 600; background: #EEF2F6; pointer-events: none;
}
/* Booking wizard Step 3 map picker (Figma "map-preview", node 130:375) */
.loc-map-wrap {
  position: relative; width: 100%; height: 220px; border-radius: var(--r-lg);
  border: 1.5px solid var(--line); overflow: hidden; background: #EEF2F6;
}
.loc-map-canvas { position: absolute; inset: 0; }
.loc-search-bar {
  position: absolute; top: 16px; left: 16px; right: 16px; z-index: 2;
  display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 999px;
  padding: 12px 18px; box-shadow: var(--shadow-md); color: var(--slate);
}
/* Search-as-you-type suggestion dropdown (Places Autocomplete) — same "type, see a list,
   tap one" UX the mobile app has, replacing the previous plain-Enter-to-geocode search. */
.loc-pred-list {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 3;
  background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  list-style: none; margin: 0; padding: 6px; max-height: 240px; overflow-y: auto;
}
.loc-pred-list li { margin: 0; }
.loc-pred-list button {
  width: 100%; display: flex; align-items: flex-start; gap: 10px; text-align: left;
  padding: 10px 12px; border: none; background: none; border-radius: var(--r-sm);
  cursor: pointer; color: var(--slate);
}
.loc-pred-list button:hover { background: var(--bg-soft); }
.loc-pred-list button svg { flex-shrink: 0; margin-top: 3px; color: var(--teal-600); }
.loc-pred-list strong { display: block; color: var(--ink); font-size: 0.88rem; font-weight: 700; }
.loc-pred-sub { display: block; font-size: 0.78rem; color: var(--slate); margin-top: 1px; }
.loc-search-bar input {
  flex: 1; min-width: 0; border: none; outline: none; font: inherit; font-size: 0.9rem; color: var(--ink); background: transparent;
  /* Without this, the browser hard-clips whatever doesn't fit with no visual cue -- confirmed
     live on a 375px phone, where "Search location or drop pin…" clips mid-word to "Search
     location or c" against the locate button, reading as broken rather than intentionally
     shortened. min-width:0 is needed first since this is a flex child -- its default
     min-width:auto would otherwise keep it sized to the placeholder's full intrinsic width
     and defeat the truncation entirely. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.loc-locate-btn {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; border: none; background: var(--tag-bg); color: var(--teal-600); cursor: pointer; padding: 0;
}
.loc-locate-btn:hover { background: var(--teal-100); }
.loc-locate-btn:disabled { cursor: default; opacity: 0.7; }
.loc-locate-btn.loc-locating svg { animation: loc-locate-spin 1s linear infinite; }
@keyframes loc-locate-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.loc-map-status {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--slate); font-size: 0.85rem; font-weight: 600; background: rgba(238,242,246,.9); pointer-events: none;
  text-align: center; padding: 0 20px;
}
/* Geolocation errors shouldn't cover the whole map (it's still usable via search/pin-drop) —
   shown as a small banner along the bottom edge instead of the full-cover overlay used for
   the map's own loading/unavailable states above. */
.loc-map-status-err {
  inset: auto 12px 12px 12px; top: auto; background: #fff; border: 1.5px solid var(--line);
  border-radius: var(--r-sm); padding: 8px 12px; box-shadow: var(--shadow-sm); color: var(--red);
}
.area-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.area-card { background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 18px; box-shadow: var(--shadow-sm); }
.area-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.area-card-icon { width: 28px; height: 28px; border-radius: 8px; background: var(--tag-bg); color: var(--teal-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.area-card-top strong { color: var(--ink); font-size: 0.95rem; }
.area-card-bottom { display: flex; align-items: center; gap: 8px; color: var(--slate); font-size: 0.83rem; font-weight: 600; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.center-cta { display: flex; justify-content: center; margin-top: 32px; }

/* About / Contact */
.value-icon { width: 48px; height: 48px; border-radius: 24px; background: var(--tag-bg); color: var(--teal-600); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.vision-card { background: var(--teal-600); border-radius: var(--r-lg); padding: 48px; color: #fff; }
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: start; }
.dim { color: var(--slate); }
@media (max-width: 767px) { .contact-grid { grid-template-columns: 1fr; } }

/* Pricing page — plan toggle, comparison table, addons, coverage chips, CTA banner */
.pricing-head { background: #fff; padding: 64px 0 32px; text-align: center; }
.pricing-head h1 { margin: 0 auto 14px; max-width: 640px; }
.pricing-head .lead { margin: 0 auto 28px; max-width: 640px; }
.plan-toggle-pill { display: inline-flex; gap: 4px; background: var(--bg-soft); padding: 6px; border-radius: 999px; }
.plan-toggle-pill button {
  border: none; background: none; font-family: inherit; font-weight: 700; font-size: 0.87rem; color: var(--slate);
  padding: 10px 22px; border-radius: 999px; cursor: pointer; display: flex; align-items: center; gap: 8px;
}
.plan-toggle-pill button.on { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.plan-toggle-pill .save-badge { background: #DCFCE7; color: var(--ink); font-size: 0.68rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; }

.compare-table { background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 24px; }
.compare-head { display: flex; align-items: center; background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 20px 24px; font-weight: 800; color: var(--ink); }
.compare-head .cols, .compare-row .cols { display: flex; gap: 20px; flex: 0 0 auto; width: 54%; text-align: center; }
.compare-head .cols span, .compare-row .cols span { flex: 1; }
.compare-row { display: flex; align-items: center; padding: 16px 24px; border-bottom: 1px solid #F1F5F9; }
.compare-row:last-child { border-bottom: none; }
.compare-row .feature-name { flex: 1; font-weight: 600; color: var(--ink); font-size: 0.92rem; }
.compare-row .cols .cell { display: flex; justify-content: center; color: var(--teal-600); }
.compare-row .cols .cell.no { color: var(--slate-lt); opacity: 0.5; }

.surcharge-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 20px 24px; margin-bottom: 56px;
}
.surcharge-info { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); font-size: 0.9rem; }
.surcharge-info .icon { color: var(--amber); }
.surcharge-tags { display: flex; gap: 12px; flex-wrap: wrap; }
.s-tag { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; padding: 7px 14px; font-weight: 700; font-size: 0.8rem; color: var(--slate); }

.addons-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 56px; }
.addon-card2 { background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.addon-card2-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.addon-card2-head strong { color: var(--ink); font-size: 0.98rem; }
.addon-card2-head span { color: var(--teal-600); font-weight: 800; font-size: 0.95rem; white-space: nowrap; }
.addon-card2 p { color: var(--slate); font-size: 0.83rem; flex: 1; }

/* Package cover images (card thumbnail + hero) — optional, additive field on top of the
   pre-existing package schema; packages without one fall back to a plain gradient tile
   rather than a broken <img>, so older CMS-managed packages that predate this feature keep
   rendering a complete card instead of a hole where an image should be.
   Per Figma "WEB - Pricing & Packages" (node 10:258), the image sits INSET within the card
   (rounded on all 4 corners, not bled to the card's edges like the old thumbnail), with a
   dark bottom gradient fade so the duration/badge pill text stays legible over bright photos
   (e.g. a white car in a white-walled wash bay, which otherwise blends into the page). */
.pkg-img { width: 100%; height: 190px; border-radius: 14px; overflow: hidden; position: relative; }
.pkg-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pkg-img-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--teal-600), var(--navy, #1B2A4A)); }
.pkg-img-fade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(15,23,42,0) 50%, rgba(15,23,42,0.55) 100%); pointer-events: none; }
.pkg-pill { position: absolute; top: 12px; display: inline-flex; align-items: center; gap: 5px; background: rgba(15,23,42,0.55); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; backdrop-filter: blur(2px); }
.pkg-pill-duration { left: 12px; }
.pkg-pill-badge { right: 12px; background: var(--teal-600); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 800; box-shadow: var(--shadow-sm, 0 2px 6px rgba(0,0,0,0.15)); }
.pkg-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pkg-title-row h3 { font-size: 1.15rem; color: var(--ink); font-weight: 800; margin: 0; }
.pkg-price-inline { color: var(--teal-600); font-weight: 800; font-size: 1.05rem; font-family: var(--font-display); white-space: nowrap; }
.pkg-summary { color: var(--slate); font-size: 0.85rem; margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pkg-view-details { display: inline-flex; align-items: center; gap: 5px; color: var(--teal-600); font-weight: 700; font-size: 0.85rem; text-decoration: none; margin: 10px 0 4px; }
.pkg-view-details:hover { text-decoration: underline; }
/* Additive to the generic `.card.featured` rule (which already draws the teal border used
   elsewhere, e.g. partner tier cards) -- this adds Figma's subtle teal-tinted background/shadow
   on top, without touching the shared base rule other cards rely on. */
.card.pkg.featured { background: linear-gradient(180deg, var(--teal-50, #f0fbfa) 0%, #fff 120px); box-shadow: 0 8px 24px rgba(13, 148, 136, 0.14); }
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 32px; }
/* min-width: 0 overrides the browser's default "min-width: auto" on grid items, which otherwise
   sizes each column to fit its content's full intrinsic width -- including the single-line,
   non-wrapping .pkg-summary text -- even when that's wider than the 1fr column. That "grid
   blowout" was pushing the whole 3-column grid (and with it the entire page) wider than the
   viewport, cutting off the price/badge on the right and forcing a horizontal scrollbar site-wide. */
.pkg-grid .card.pkg { width: auto; min-width: 0; }
/* Tablet tier (768-1023px) matches the breakpoint used by every other marketing grid on
   the site (.cards-4, .steps, .addons-grid, .area-cards -- see the max-width:1023px block
   further down). This used to jump straight from 3 columns to 1 at max-width:900px, so a
   768px-wide tablet rendered a single ~720px package card with empty space around it
   instead of the 2-up layout the same page family gets everywhere else at that width. */
@media (max-width: 1023px) { .pkg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .pkg-grid { grid-template-columns: 1fr; } }

/* Package Detail page (Figma "WEB — Package Detail") */
.pkg-hero { background: linear-gradient(120deg, var(--navy, #1B2A4A), var(--teal-600)); padding: 40px 0; color: #fff; }
.pkg-hero-crumb { font-size: 0.85rem; opacity: 0.85; margin-bottom: 10px; }
.pkg-hero-crumb a { color: #fff; }
.pkg-hero-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.pkg-hero-row h1 { color: #fff; margin: 0; }
.pkg-hero-price { font-size: 1.8rem; font-weight: 800; font-family: var(--font-display); }
.pkg-hero-desc { opacity: 0.92; max-width: 700px; margin: 10px 0 0; }
/* Height is a responsive clamp rather than a fixed 320px so the frame's aspect ratio stays
   reasonable on very wide viewports -- a short, full-bleed frame against a wide desktop window
   forces object-fit:cover to crop a normal landscape photo heavily on both left and right edges
   (most visible on the right, where photos usually place their focal point). Taller frame on
   wide screens = less aggressive cropping. */
.pkg-hero-img { width: 100%; height: clamp(240px, 38vw, 460px); overflow: hidden; position: relative; }
.pkg-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Multi-slide case: every slide is stacked absolutely and cross-faded via opacity (not a hard
   src-swap), so auto-advance and manual arrow/dot clicks both animate smoothly. */
.pkg-hero-slider .pkg-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s ease; }
.pkg-hero-slider .pkg-slide.active { opacity: 1; }
.pkg-slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(15, 23, 42, 0.55); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease; z-index: 2; }
.pkg-slider-arrow:hover { background: rgba(15, 23, 42, 0.8); }
.pkg-slider-arrow.left { left: 16px; }
.pkg-slider-arrow.right { right: 16px; }
.pkg-slider-dots { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; z-index: 2; }
.pkg-slider-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.5); padding: 0; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; }
.pkg-slider-dot.active { background: #fff; transform: scale(1.3); }
@media (max-width: 640px) { .pkg-hero-img { height: clamp(200px, 60vw, 280px); } .pkg-slider-arrow { width: 34px; height: 34px; } }

.pkg-detail-grid { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }
@media (max-width: 900px) { .pkg-detail-grid { grid-template-columns: 1fr; } }
.pkg-detail-h2 { font-size: 1.2rem; margin: 32px 0 16px; }
.pkg-detail-main .pkg-detail-h2:first-child { margin-top: 0; }
.pkg-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 560px) { .pkg-feature-grid { grid-template-columns: 1fr; } }
.pkg-feature-card { display: flex; gap: 12px; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
.pkg-feature-card .icon { color: var(--teal-600); flex-shrink: 0; }
.pkg-feature-card strong { display: block; color: var(--ink); font-size: 0.92rem; }
.pkg-feature-card p { margin: 2px 0 0; font-size: 0.82rem; }
.pkg-steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 700px) { .pkg-steps-grid { grid-template-columns: repeat(2, 1fr); } }
.pkg-step-card { background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 16px; text-align: center; }
.pkg-step-num { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-soft); color: var(--teal-600); font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; }
.pkg-step-card strong { display: block; font-size: 0.9rem; color: var(--ink); }
.pkg-step-card p { font-size: 0.78rem; margin: 4px 0 0; }
.pkg-exclude-list { color: var(--slate); font-size: 0.9rem; padding-left: 20px; }
.pkg-exclude-list li { margin-bottom: 4px; }

.pkg-side-panel { background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 24px; }
.pkg-side-eyebrow { text-transform: uppercase; font-size: 0.7rem; font-weight: 800; color: var(--slate); letter-spacing: 0.04em; margin: 0; }
.pkg-side-panel h3 { margin: 0; font-size: 1.4rem; }
.pkg-side-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pkg-side-price-row { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 12px; font-weight: 700; color: var(--ink); }
/* "Selected Package Price" breakdown box (Figma node 389:207) */
.pkg-price-box { background: var(--bg-soft); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 0; }
.pkg-price-box-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate-lt); font-weight: 800; margin: 0 0 10px; }
.pkg-price-box .pkg-side-price-row { border-top: none; padding-top: 0; margin-bottom: 8px; }
.pkg-price-box .pkg-side-price-sub { font-weight: 600; font-size: 0.86rem; color: var(--slate); }
.pkg-price-box .pkg-side-price-sub strong { font-weight: 600; color: var(--slate); }
.pkg-price-box .pkg-side-price-sub em { font-style: normal; color: var(--slate-lt); font-weight: 500; margin-left: 4px; }
.pkg-price-box-divider { border-top: 1px solid var(--line); margin: 4px 0 10px; }
.pkg-price-box .pkg-side-price-total { margin-bottom: 0; font-size: 1.05rem; }
.pkg-price-box .pkg-side-price-total strong { color: var(--teal-600); font-family: var(--font-display); }
.pkg-side-subhead { font-weight: 800; color: var(--ink); margin: 4px 0 0; }
.pkg-side-addons { display: flex; flex-direction: column; gap: 8px; }
.pkg-side-addon { display: flex; justify-content: space-between; background: var(--bg-soft); border-radius: 8px; padding: 10px 12px; font-size: 0.85rem; }
.pkg-side-addon strong { color: var(--teal-600); }
.pkg-side-note { font-size: 0.78rem; color: var(--slate); text-align: center; margin: 4px 0 0; }

/* Gallery section (Figma "See the Difference Up Close") -- real photos only, no fabricated
   per-image captions since there's no caption field in the package schema. */
.pkg-gallery-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.pkg-gallery-eyebrow { text-transform: uppercase; font-size: 0.72rem; font-weight: 800; color: var(--teal-600); letter-spacing: 0.06em; margin: 0; }
.pkg-gallery-arrows { display: flex; gap: 10px; flex-shrink: 0; }
.pkg-gallery-arrow { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); transition: background .15s ease, border-color .15s ease; }
.pkg-gallery-arrow:hover { border-color: var(--teal-300, var(--teal-600)); }
.pkg-gallery-arrow.primary { background: var(--teal-600); border-color: var(--teal-600); color: #fff; }
.pkg-gallery-arrow.primary:hover { background: var(--teal-700, var(--teal-600)); }

/* Asymmetric gallery grid (Figma "See the Difference Up Close"): one large tile + two stacked
   tiles, 3 photos per "page". Fewer than 3 photos in the current/last page fall back to simpler
   grids so there's never an empty placeholder tile. */
.pkg-gallery-grid { display: grid; gap: 16px; margin-bottom: 8px; height: 420px; }
.pkg-gallery-grid-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.pkg-gallery-grid-3 .pkg-gallery-item-main { grid-row: 1 / span 2; }
.pkg-gallery-grid-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.pkg-gallery-grid-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; height: 320px; }
.pkg-gallery-item { position: relative; border-radius: var(--r-lg); overflow: hidden; }
.pkg-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pkg-gallery-badge { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px; background: var(--teal-600); color: #fff; font-size: 0.75rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; }
.pkg-gallery-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.pkg-gallery-caption { position: absolute; bottom: 14px; left: 14px; background: rgba(15,23,42,0.72); color: #fff; font-size: 0.85rem; font-weight: 700; padding: 8px 14px; border-radius: 8px; max-width: calc(100% - 28px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pkg-gallery-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.pkg-gallery-dot { width: 8px; height: 8px; border-radius: 999px; border: none; background: var(--line); padding: 0; cursor: pointer; transition: background .15s ease, width .15s ease; }
.pkg-gallery-dot.active { background: var(--teal-600); width: 22px; }
@media (max-width: 640px) {
  .pkg-gallery-grid { height: auto; }
  .pkg-gallery-grid-3 { grid-template-columns: 1fr; grid-template-rows: none; }
  .pkg-gallery-grid-3 .pkg-gallery-item-main, .pkg-gallery-grid-3 .pkg-gallery-item { grid-row: auto; aspect-ratio: 4 / 3; }
  .pkg-gallery-grid-2 { grid-template-columns: 1fr; }
  .pkg-gallery-grid-2 .pkg-gallery-item { aspect-ratio: 4 / 3; }
  .pkg-gallery-grid-1 { height: auto; }
  .pkg-gallery-grid-1 .pkg-gallery-item { aspect-ratio: 16 / 9; }
}

.coverage-chips { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 8px; }
.coverage-chip {
  display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1.5px solid var(--line);
  border-radius: 999px; padding: 10px 20px; font-weight: 600; font-size: 0.87rem; color: var(--ink);
}
.coverage-chip .icon { color: var(--teal-600); }

.pricing-cta-banner { background: var(--ink); color: #fff; text-align: center; padding: 64px 24px; }
.pricing-cta-banner h2 { color: #fff; margin-bottom: 12px; }
.pricing-cta-banner p { color: #CBD5E1; max-width: 560px; margin: 0 auto 24px; }
.pricing-cta-banner .btn { background: var(--amber); color: var(--ink); }
.pricing-cta-banner .btn:hover { background: #D97706; color: #fff; }

/* Partner showcase */
.partner-cards { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 780px; margin: 0 auto; }
.partner-head { display: flex; align-items: center; gap: 16px; }
.partner-avatar {
  width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, var(--teal-600), var(--teal-800));
  color: #fff; font-weight: 800; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.partner-services { font-size: 0.87rem; color: var(--teal-700); font-weight: 600; }
.partner-meta { display: flex; gap: 20px; flex-wrap: wrap; font-size: 0.87rem; color: var(--slate); font-weight: 600; border-top: 1px solid var(--line); padding-top: 14px; }
.partner-meta a { color: var(--teal-600); text-decoration: none; font-weight: 700; }

/* --- Forms --- */
input, select, textarea {
  padding: 13px 16px; border-radius: 12px; border: 1.5px solid var(--line);
  font-family: inherit; font-size: 0.95rem; width: 100%; background: #fff;
  transition: border-color .15s ease; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal-600); box-shadow: 0 0 0 3px var(--teal-100); }
textarea { min-height: 80px; resize: vertical; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-weight: 600; font-size: 0.87rem; color: var(--slate); }
/* PasswordInput's show/hide eye toggle — sits inside the field's normal input, right-aligned. */
.pw-field-wrap { position: relative; }
.pw-field-wrap input { padding-right: 44px; }
.pw-toggle-eye {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; padding: 4px; cursor: pointer; display: flex;
  align-items: center; color: var(--slate-lt); border-radius: 6px;
}
.pw-toggle-eye:hover { color: var(--slate); }
.phone-field { display: flex; gap: 8px; }
/* Custom dropdown (not a native <select>) — see PhoneField's doc comment in app.jsx for why:
   a native select's closed-state text always equals its full option label, which forced this
   control wider than intended. flex: 0 0 auto + an explicit compact width on the button keeps
   the closed state to just the dial code, leaving the rest of the row for the number input. */
.phone-field-dial { position: relative; flex: 0 0 auto; }
.phone-field-dial-btn {
  height: 100%; min-width: 84px; padding: 13px 10px 13px 14px; border-radius: 12px; border: 1.5px solid var(--line);
  background: #fff; font-family: inherit; font-size: 0.92rem; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 6px; cursor: pointer;
}
.phone-field-dial-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.phone-field-dial-btn svg { flex-shrink: 0; color: var(--slate-lt); }
.phone-field-dial-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 220px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-md);
  padding: 6px; max-height: 260px; overflow-y: auto;
}
.phone-field-dial-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 8px;
  background: none; border: none; font-family: inherit; text-align: left; cursor: pointer; color: var(--ink);
}
.phone-field-dial-opt:hover, .phone-field-dial-opt.on { background: var(--teal-50); }
.phone-field-dial-opt .dial { font-weight: 700; width: 52px; flex-shrink: 0; }
.phone-field-dial-opt .name { color: var(--slate); font-size: 0.9rem; }
.phone-field-number { flex: 1; width: auto; min-width: 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-note { font-weight: 700; min-height: 1.3em; font-size: 0.92rem; }
.form-note.ok { color: var(--green); }
.form-note.err { color: var(--red); }
.agree-checkbox {
  display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 16px;
  font-size: 0.88rem; color: var(--slate); line-height: 1.5; cursor: pointer;
}
.agree-checkbox input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--teal-600); cursor: pointer; }
.agree-checkbox a { color: var(--teal-700); font-weight: 600; }
/* Disabled buttons previously just dropped opacity to 0.5 on top of whatever
   color the button already was -- for .btn-primary (solid teal-700) that math
   produces a washed-out, muddy sage-green fill that reads as broken/half-loaded
   rather than "disabled" (reported live on the /book Step 1 Continue button
   before a package is selected). Give disabled buttons one consistent, clearly
   "inactive" neutral look instead -- light gray fill, gray text, no shadow --
   regardless of which variant (.btn-primary/.btn-ghost) they'd otherwise be. */
.btn:disabled { cursor: not-allowed; opacity: 1; background: var(--line); color: var(--slate); border-color: var(--line); box-shadow: none; }

/* CTA band */
.cta-section {
  background: linear-gradient(150deg, var(--teal-800) 0%, var(--teal-900) 100%);
  color: #fff; text-align: center;
}
.cta-section h2 { color: #fff; }
.cta-section .section-head p { color: #99F6E4; }
.waitlist { display: flex; flex-direction: column; gap: 14px; max-width: 620px; margin: 0 auto; text-align: left; }
.waitlist .btn { align-self: center; margin-top: 8px; background: var(--amber); color: #fff; }
.waitlist .btn:hover { background: #D97706; }
.waitlist .form-note { text-align: center; color: #fff; }

/* Panels (forms on white) */
.panel { background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 30px; box-shadow: var(--shadow-sm); }
.panel h3 { margin-bottom: 16px; color: var(--teal-800); font-size: 1.25rem; }
.provider-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.check-list { list-style: none; margin: 0 0 28px; }
.check-list li { padding: 9px 0 9px 32px; position: relative; color: var(--slate); }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--teal-600); font-weight: 800; font-size: 1.1rem; }
.check-list strong { color: var(--ink); }
.provider-box { background: var(--teal-50); border: 1.5px solid var(--teal-100); border-radius: var(--r-lg); padding: 26px; }
.provider-box h3 { color: var(--teal-800); margin-bottom: 12px; }
.provider-box ul { list-style: none; }
.provider-box li { padding: 7px 0 7px 26px; position: relative; color: var(--slate); font-size: 0.93rem; }
.provider-box li::before { content: "•"; position: absolute; left: 8px; color: var(--teal-600); font-weight: 800; }

/* FAQ */
.faq-head { background: #fff; padding: 64px 0 32px; }
.faq-search {
  display: flex; align-items: center; gap: 12px; background: var(--bg-soft); border: 1.5px solid var(--line);
  border-radius: 12px; padding: 14px 18px; max-width: 600px; margin: 0 auto;
}
.faq-search input { border: none; background: none; padding: 0; flex: 1; }
.faq-search input:focus { box-shadow: none; }
.faq-search-clear {
  border: none; background: var(--line); color: var(--slate); width: 22px; height: 22px; border-radius: 50%;
  font-size: 0.7rem; line-height: 1; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.faq-search-clear:hover { background: var(--slate-lt); color: #fff; }
.faq-item { border-radius: 12px; }

/* Category groups — each is its own bordered card, collapsed by default (so the page
   opens short instead of one long scroll of ~34 questions), with a round icon badge,
   the category name + a live question count, and a real SVG chevron (IconChevronDown)
   that rotates open — no text glyphs, so it can't render inconsistently across fonts
   the way the old "▾" character did. Deliberately a *different* indicator from each
   individual question's +/- below, so "expand a whole section" never looks like
   "expand one answer". */
details.faq-cat-group {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg);
  padding: 0; margin-bottom: 14px; overflow: hidden; transition: border-color .15s ease;
}
details.faq-cat-group[open] { border-color: var(--teal-600); }
details.faq-cat-group > summary.faq-cat-heading {
  cursor: pointer; list-style: none; margin: 0; padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
details.faq-cat-group > summary.faq-cat-heading::after { content: none; }
.faq-cat-label { display: flex; align-items: center; gap: 14px; min-width: 0; }
.faq-cat-icon {
  width: 40px; height: 40px; border-radius: 50%; background: var(--teal-50);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--teal-600);
}
.faq-cat-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.faq-cat-name { font-size: 1rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.faq-cat-count { font-size: 0.78rem; color: var(--slate-lt); font-weight: 500; }
.faq-cat-arrow { flex-shrink: 0; display: flex; color: var(--slate-lt); transition: transform .2s ease; }
details.faq-cat-group[open] > summary.faq-cat-heading .faq-cat-arrow { transform: rotate(180deg); color: var(--teal-600); }
.faq-cat-items { padding: 0 22px 18px; display: flex; flex-direction: column; }

/* Each question inside a category renders as a plain divided row (hairline top border,
   no own card/shadow) rather than a full boxed card nested inside the category's own
   card — avoids the "card inside a card" look. Scoped to inside .faq-cat-group only,
   so the flat Partner-page FAQ list (which reuses .faq-item on its own, uncategorized)
   keeps its original boxed-card style untouched. */
details.faq-cat-group .faq-item {
  background: none; border: none; box-shadow: none; border-radius: 0;
  border-top: 1px solid var(--line); padding: 16px 0; margin: 0;
}
details.faq-cat-group .faq-item:first-child { border-top: none; padding-top: 2px; }
details.faq-cat-group .faq-item summary { font-size: 0.95rem; }
.faq-support-bar {
  background: var(--ink); border-radius: var(--r-lg); padding: 32px; margin-top: 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
/* The bar itself already wraps (flex-wrap:wrap above) when the text block and button group
   don't fit side by side -- confirmed live on a 375px phone that this alone isn't enough: once
   the button group wraps onto its own line below the text, it's still a plain
   `display:flex; gap:12` row with no wrap of its own, so the two buttons ("WhatsApp Support" /
   "Email Bahrain Desk") stayed side by side and the second one got clipped off the right edge
   of the card instead of shrinking or dropping to a second line. Stacking them full-width on
   mobile (matching how every other multi-button CTA row on this site behaves at this
   breakpoint) fixes it without touching desktop/tablet, where they already fit fine. */
@media (max-width: 767px) {
  .faq-support-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .faq-support-actions .btn { text-align: center; }
}
details {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-md);
  padding: 18px 22px; margin-bottom: 12px; transition: border-color .15s ease;
}
details summary { font-weight: 700; cursor: pointer; list-style: none; position: relative; padding-right: 30px; }
details summary::after { content: "+"; position: absolute; right: 0; top: 0; font-size: 1.3rem; color: var(--teal-600); font-weight: 700; }
/* Direct-child combinator, not a plain descendant space, is deliberate: without it this
   rule matches ANY summary nested inside an open details — so opening a .faq-cat-group
   card made every still-collapsed .faq-item question inside it show "–" too, because
   they're nested inside the now-open category. Scoping to "> summary" means only the
   details element that is ITSELF open gets its own "–"; a closed .faq-item nested inside
   an open category correctly keeps "+" until it's opened individually. */
details[open] > summary::after { content: "–"; }
details p { color: var(--slate); padding-top: 12px; font-size: 0.95rem; }
details[open] { border-color: var(--teal-600); }

/* Legal pages */
.legal { padding: 64px 0 88px; }
.legal h1 { font-size: 2.2rem; margin-bottom: 6px; }
.legal .updated { color: var(--slate-lt); font-weight: 600; font-size: 0.9rem; margin-bottom: 36px; }
.legal h2 { font-size: 1.3rem; margin: 36px 0 12px; text-align: left; }
.legal p, .legal li { color: var(--slate); font-size: 0.97rem; }
.legal ul { padding-left: 22px; margin: 10px 0; }
.legal .notice { background: var(--teal-50); border: 1.5px solid var(--teal-100); border-radius: var(--r-md); padding: 18px 22px; margin-top: 40px; font-size: 0.9rem; color: var(--slate); }

/* --- Footer --- */
.footer { background: var(--ink); color: #94A3B8; padding: 80px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
/* `.footer a { display: block }` below (higher specificity than the shared
   .logo-lockup { display: inline-flex }) was silently overriding the lockup's
   flex layout here, breaking the icon/text vertical centering — pin it back. */
.footer .logo-lockup { display: inline-flex; align-items: center; margin-bottom: 16px; }
.footer-logo, .footer .logo { color: #fff; }
.footer > .container.footer-grid > div > p { line-height: 1.6; font-size: 0.92rem; margin-bottom: 16px; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
/* `.footer a { display: block; padding: 5px 0 }` below is declared later in this file and has
   equal specificity to `.footer-social a` on its own, so it was winning the cascade and
   collapsing the circular icon buttons back to block layout - same bug class as the
   .logo-lockup fix above. Scoped under `.footer` to outrank it, matching that fix. */
.footer .footer-social a {
  display: flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 50%; background: rgba(148,163,184,.18); color: #cbd5e1; transition: all .15s ease;
  padding: 0;
}
.footer .footer-social a:hover { background: var(--teal-600); color: #fff; }
.footer-app-badges { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; max-width: 172px; }
.footer .app-badge {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px;
  border: 1px solid rgba(148,163,184,.35); border-radius: 8px;
  background: rgba(148,163,184,.1); color: #fff; transition: all .15s ease;
}
.footer .app-badge:hover { background: rgba(148,163,184,.2); }
.footer .app-badge svg { flex-shrink: 0; }
.footer .app-badge span { display: flex; flex-direction: column; line-height: 1.2; font-size: 0.82rem; font-weight: 700; padding: 0; }
.footer .app-badge span small { font-size: 0.62rem; font-weight: 500; color: #94A3B8; }
.footer h4 { color: #fff; margin-bottom: 14px; font-size: 0.95rem; font-weight: 700; }
.footer a { display: block; color: #94A3B8; text-decoration: none; padding: 5px 0; font-size: 0.9rem; transition: color .15s ease; }
.footer a:hover { color: #fff; }
.footer a.dim { opacity: 0.65; }
/* 3-column grid so the payment-trust badges (Figma 130:538) sit on the same line as the
   copyright text and the Terms/Privacy links, per explicit user decision — previously a
   separate full-width row above this bar. The two flanking 1fr columns keep the middle
   "auto" column (the badges) truly centered regardless of how wide the copyright text or
   legal links end up being, via justify-self on each child rather than flex's
   justify-content (which can't center a middle item independently of its neighbors). */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  font-size: 0.85rem; color: #94A3B8;
}
.footer-bottom > span:first-child { justify-self: start; }
.footer-bottom .legal-links { justify-self: end; display: flex; gap: 22px; }
.footer-bottom a { display: inline; padding: 0; font-size: 0.85rem; }

/* Figma node 130:538 ("payment-trust") — same badge row as the booking sidebar, reused
   site-wide in the footer, centered in the middle column here. Overrides .secure-row's
   default dark-ink text color (illegible on the footer's dark background) to white, and
   tightens .payment-trust's default gap since this is a compact single-bar context rather
   than a standalone sidebar section; the card badges already carry their own background
   colors so they need no color override. */
.footer-bottom-payment.payment-trust { justify-self: center; margin-top: 0; gap: 6px; }
.footer-bottom-payment.payment-trust .secure-row { color: #94A3B8; font-size: 0.82rem; }

@media (max-width: 767px) {
  /* Stack all three centered on narrow screens rather than letting the grid's "auto" middle
     column force the flanking columns to shrink awkwardly. */
  .footer-bottom { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 18px; }
  .footer-bottom > span:first-child, .footer-bottom .legal-links, .footer-bottom-payment.payment-trust { justify-self: center; }
}

.boot { padding: 100px 24px; text-align: center; color: var(--slate); }

/* --- Auth panel --- */
.auth-panel { max-width: 420px; }
.auth-panel.compact { max-width: 100%; }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.auth-tab {
  flex: 1; padding: 10px 8px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff;
  font-family: inherit; font-weight: 700; font-size: 0.85rem; color: var(--slate); cursor: pointer; transition: all .15s ease;
}
.auth-tab.on { border-color: var(--teal-600); color: var(--teal-700); background: var(--teal-50); }
.auth-switch { margin-top: 12px; font-size: 0.88rem; color: var(--slate); }
.auth-switch a { color: var(--teal-600); font-weight: 700; text-decoration: none; }
.dev-otp { background: #FFFBEB; border: 1.5px solid #FDE68A; border-radius: 10px; padding: 10px 14px; font-size: 0.88rem; color: #92400E; margin-bottom: 12px; }
.otp-expiry { font-size: 0.82rem; color: var(--slate); margin: -6px 0 14px; }
.otp-expiry strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.otp-expiry .otp-expired { color: #B91C1C; font-weight: 600; }
.google-tab { padding: 10px 0; }
.dim-note { color: var(--slate); font-size: 0.9rem; background: var(--bg-soft); border: 1.5px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.dim-note code { background: #fff; padding: 1px 6px; border-radius: 5px; font-size: 0.82rem; }
/* Mobile OTP sign-in's "not a registered user" prompt (otp/verify now returns
   404/NOT_REGISTERED instead of silently creating an account -- see app.jsx's
   AuthPanel.verifyOtp). Reuses the same red palette as .form-note.err. */
.not-registered-note { margin-top: 14px; padding: 14px 16px; background: #FEF2F2; border: 1.5px solid #FECACA; border-radius: 10px; }
.not-registered-note p { margin: 0 0 4px; font-size: 0.9rem; }
.not-registered-note p strong { color: #B91C1C; }
.not-registered-note p.dim { margin-bottom: 12px; font-size: 0.85rem; }
.not-registered-note .btn { margin-top: 0; }

/* --- Booking wizard (Figma checkout flow) --- */
/* The header/stepper/body/footer of this page were each aligned to a
   different left/right edge (full-width 40px flat padding on the header
   and stepper bars, a separate centered 1240px column for the body, vs.
   the site-wide .container's centered 1140px) — reusing .container for the
   inner content of all three keeps everything on the site's one edge. */
.wiz-body { background: var(--bg-soft); min-height: 100vh; }
.wiz-header { background: #fff; border-bottom: 1px solid var(--line); }
.wiz-header-inner { height: 72px; display: flex; align-items: center; justify-content: space-between; }
.wiz-back { display: flex; align-items: center; gap: 8px; color: var(--slate); text-decoration: none; font-weight: 600; font-size: 0.9rem; }
.wiz-progress { background: #fff; border-bottom: 1px solid var(--line); }
.wiz-progress-inner { display: flex; gap: 24px; align-items: center; padding: 20px 0; justify-content: center; }
.wiz-progress-step { display: flex; flex: 0 0 auto; gap: 8px; align-items: center; min-width: 0; }
.wiz-progress-step .num {
  width: 28px; height: 28px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.75rem; background: var(--bg-soft); border: 1px solid var(--line); color: var(--slate);
}
.wiz-progress-step.done .num { background: #DCFCE7; border-color: #DCFCE7; color: var(--green); }
.wiz-progress-step.active .num { background: var(--teal-600); border-color: var(--teal-600); color: #fff; }
.wiz-progress-step .label { font-weight: 600; font-size: 0.87rem; color: var(--slate); white-space: nowrap; }
.wiz-progress-step.active .label { font-weight: 800; color: var(--ink); }
.wiz-progress-step .connector { flex: 0 0 48px; height: 1px; background: var(--line); }
.wiz-progress-step.done .connector { background: var(--teal-600); }

.wiz-columns { display: flex; gap: 32px; align-items: flex-start; padding: 40px 24px; }
.wiz-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.wiz-panel {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 32px;
  display: flex; flex-direction: column; gap: 24px;
  /* Without this, a flex item's default min-width is based on its widest descendant's
     intrinsic content size — and the package HScrollSlider inside (fixed-width cards in a
     row) is exactly that kind of wide descendant. That was forcing .wiz-panel, and every
     ancestor up to the page itself, wider than the viewport instead of letting the slider's
     own overflow-x:auto clip and scroll internally — the real cause of the whole booking
     page sliding sideways instead of just the package cards. */
  min-width: 0;
}
.wiz-panel h3 { font-size: 1.25rem; color: var(--ink); font-weight: 800; }
.wiz-sidebar { background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 32px; width: 380px; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 24px; }
.wiz-sidebar h3 { font-size: 1.1rem; color: var(--ink); font-weight: 800; }
.wiz-sidebar .divider { height: 1px; background: var(--line); }
.wiz-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 30px 10px; color: var(--slate); }
.wiz-empty .circle { width: 56px; height: 56px; border-radius: 28px; background: var(--bg-soft); display: flex; align-items: center; justify-content: center; color: var(--slate-lt); }
.wiz-line-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.88rem; color: var(--slate); gap: 12px; }
.wiz-line-row.total { font-weight: 800; font-size: 1.1rem; color: var(--ink); }
.wiz-line-row.total .amt { color: var(--teal-700); font-size: 1.3rem; }
.wiz-cycle-total { background: var(--teal-50); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.wiz-cycle-total .wiz-line-row { color: var(--teal-700); font-weight: 600; }
.wiz-cycle-total .wiz-line-row.total { color: var(--ink); }
/* Promo code + wallet-redeem block inside BookingSidebar itself (see BookPage/BookingSidebar) --
   .promo-row's own margin-top: 14px was tuned for its old placement lower in the left-column
   form; reset to 0 here since this wrapper already sits between two .divider rows with its own
   spacing. */
.wiz-promo-wallet { display: flex; flex-direction: column; gap: 8px; margin: 2px 0; }
.wiz-promo-wallet .promo-row { margin-top: 0; }
.wiz-nav-row { display: flex; gap: 16px; }
.wiz-nav-row .btn { flex: 1; }
.wiz-nav-row .btn.back { flex: 0 0 auto; }
.wiz-secure { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--slate-lt); font-size: 0.75rem; }

/* Figma node 130:538 ("payment-trust" / "security-badges") — real card-network + gateway
   trust signals for the Review & Pay step, only rendered once online card payment is
   actually configured (see BookPage's paymentsEnabled gate). */
.payment-trust { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 4px; }
.payment-trust .secure-row { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; font-size: 0.85rem; }
.payment-badges { display: flex; align-items: center; gap: 8px; }
.pm-badge { height: 24px; display: flex; align-items: center; justify-content: center; gap: 3px; padding: 0 8px; border-radius: 4px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; color: #fff; }
.pm-badge.visa { background: #1a1f71; font-style: italic; }
.pm-badge.amex { background: #006fcf; font-size: 0.62rem; }
.pm-badge.applepay { background: #000; }
.pm-badge.mastercard { background: #fff; border: 1px solid var(--line); width: 36px; padding: 0; position: relative; }
.pm-badge.mastercard .mc-circle { width: 14px; height: 14px; border-radius: 50%; }
.pm-badge.mastercard .mc-circle.red { background: #eb001b; margin-right: -5px; }
.pm-badge.mastercard .mc-circle.orange { background: #ff5f00; opacity: 0.9; }

.wiz-agreement { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; cursor: pointer; }
.wiz-agreement-input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.wiz-agreement-check {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 4px; background: #fff;
  border: 2px solid var(--line); color: #fff; display: flex; align-items: center; justify-content: center;
  margin-top: 1px; transition: background 0.15s, border-color 0.15s;
}
.wiz-agreement.on .wiz-agreement-check { background: var(--teal-600); border-color: var(--teal-600); }
.wiz-agreement-input:focus-visible ~ .wiz-agreement-check { outline: 2px solid var(--teal-600); outline-offset: 2px; }
.wiz-agreement p { margin: 0; font-size: 0.8rem; color: var(--slate); line-height: 1.4; font-weight: 500; }
.wiz-agreement a { color: var(--teal-600); font-weight: 700; }

.wiz-pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* Booking wizard Step 1 card -- rebuilt to reuse the homepage/carwash Packages
   section's card pieces (.pkg-img, .pkg-title-row, .pkg-summary, .pkg-view-details,
   .btn.full.pkg-select) so the two look identical; only this wrapper's own base
   box (background/border/radius/padding/gap) and its "on"/selected highlight are
   wiz-pkg-card-specific. */
.wiz-pkg-card { background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 22px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; }
.wiz-pkg-card.on { border: 2px solid var(--teal-600); box-shadow: var(--shadow-md); }

.vehicle-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.vehicle-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 18px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff;
  cursor: pointer; font-family: inherit; text-align: left; width: 100%; box-sizing: border-box;
}
.vehicle-card.on { border: 2px solid var(--teal-600); background: var(--teal-50); }
.vehicle-card .radio { width: 20px; height: 20px; border-radius: 10px; border: 1.5px solid var(--line); flex-shrink: 0; }
.vehicle-card.on .radio { border: 6px solid var(--teal-600); }
.vehicle-card strong { display: block; color: var(--ink); font-size: 0.98rem; }
.vehicle-card span.sub { color: var(--slate); font-size: 0.82rem; }
.vehicle-card .amt { margin-top: auto; padding-top: 8px; font-weight: 800; font-size: 0.88rem; color: var(--ink); }
.vehicle-card.on .amt { color: var(--teal-700); }
@media (max-width: 767px) {
  .vehicle-list { grid-template-columns: 1fr; }
}
.access-cards { display: flex; gap: 10px; flex-wrap: wrap; }
.access-card { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; font-family: inherit; text-align: left; flex: 1; min-width: 200px; }
.access-card.on { border: 2px solid var(--teal-600); background: var(--teal-50); }
.access-card .radio { width: 18px; height: 18px; border-radius: 9px; border: 1.5px solid var(--line); flex-shrink: 0; }
.access-card.on .radio { border: 6px solid var(--teal-600); }
.access-card strong { display: block; color: var(--ink); font-size: 0.88rem; font-weight: 600; }
.schedule-summary-box { margin-top: 18px; background: var(--teal-50); border: 1.5px solid var(--teal-600); border-radius: 10px; padding: 16px; }
.schedule-summary-box strong { display: block; color: var(--teal-800); font-size: 0.85rem; margin-bottom: 6px; }
.schedule-summary-box p { color: var(--teal-700); font-size: 0.85rem; margin: 2px 0; }
.mini-cal { border: 1.5px solid var(--line); border-radius: 12px; padding: 16px; background: #fff; }
.mini-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mini-cal-head strong { color: var(--ink); font-size: 0.92rem; }
.mini-cal-head button { width: 30px; height: 30px; border-radius: 8px; border: 1.5px solid var(--line); background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--slate); }
.mini-cal-head button:disabled { opacity: 0.35; cursor: not-allowed; }
.mini-cal-head button:not(:disabled):hover { border-color: var(--teal-600); color: var(--teal-700); }
.mini-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mini-cal-dow { margin-bottom: 6px; }
.mini-cal-dow span { text-align: center; color: var(--slate-lt); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; }
.mini-cal-day { height: 40px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: 8px; font-size: 0.85rem; color: var(--ink); cursor: pointer; font-family: inherit; }
.mini-cal-day:hover:not(:disabled) { background: var(--teal-50); }
.mini-cal-day.on { background: var(--teal-700); color: #fff; font-weight: 800; }
.mini-cal-day:disabled { color: var(--slate-lt); opacity: 0.4; cursor: not-allowed; }
.mini-cal-hint { margin-top: 10px; color: var(--slate-lt); font-size: 0.78rem; }

.date-strip { display: flex; gap: 10px; }
.date-chip { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; font-family: inherit; }
.date-chip .dow { font-weight: 600; font-size: 0.72rem; color: var(--slate); }
.date-chip .dom { font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.date-chip.on { background: var(--teal-600); border-color: var(--teal-600); }
.date-chip.on .dow, .date-chip.on .dom { color: #fff; }

.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.slot-pill { height: 44px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-weight: 700; font-size: 0.85rem; color: var(--ink); cursor: pointer; font-family: inherit; }
.slot-pill.avail { border: 2px solid var(--teal-600); }
.slot-pill.on { background: var(--teal-600); border-color: var(--teal-600); color: #fff; }

.review-row2 { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1.5px solid var(--line); background: var(--bg-soft); border-radius: 10px; }
.review-row2 .icon-wrap { width: 36px; height: 36px; border-radius: 8px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--teal-600); flex-shrink: 0; }
.review-row2 .details { flex: 1; min-width: 0; }
.review-row2 .details .lbl { color: var(--slate); font-size: 0.78rem; font-weight: 600; }
.review-row2 .details .val { color: var(--ink); font-size: 0.92rem; font-weight: 700; }
.review-row2 .amt-badge { background: var(--teal-50); color: var(--teal-700); font-weight: 800; font-size: 0.78rem; padding: 4px 10px; border-radius: 6px; white-space: nowrap; }
.notes-box { background: var(--bg-soft); border: 1.5px solid var(--line); border-radius: 10px; padding: 16px; }
.notes-box .lbl { color: var(--slate); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; margin-bottom: 6px; }
.notes-box p { color: var(--ink); font-size: 0.88rem; }
.paycard { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--bg-soft); }
.paycard .left { display: flex; align-items: center; gap: 10px; }

/* --- Booking wizard (legacy pill style, still used elsewhere) --- */
.book-steps { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.book-step {
  display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  border: 1.5px solid var(--line); background: #fff; font-weight: 700; font-size: 0.85rem; color: var(--slate-lt);
}
.book-step.on { border-color: var(--teal-600); color: var(--teal-700); background: var(--teal-50); }
.book-step.done { border-color: var(--green); color: var(--green); }
.bs-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: currentColor; font-size: 0.72rem; }
.book-step .bs-num { color: #fff; background: var(--slate-lt); }
.book-step.on .bs-num { background: var(--teal-600); }
.book-step.done .bs-num { background: var(--green); }
.pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0 6px; }
.pick {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 14px; border-radius: 12px;
  border: 1.5px solid var(--line); background: #fff; font-family: inherit; cursor: pointer; text-align: left; transition: all .15s ease;
}
.pick strong { font-size: 0.98rem; }
.pick span { color: var(--slate-lt); font-size: 0.8rem; font-weight: 600; }
.pick em { font-style: normal; color: var(--teal-700); font-weight: 800; font-size: 1.05rem; }
.pick.on { border-color: var(--teal-600); background: var(--teal-50); box-shadow: 0 0 0 3px var(--teal-100); }
.wiz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; gap: 12px; }
.review { border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; }
.review-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 16px; border-bottom: 1px solid #F1F5F9; font-size: 0.93rem; }
.review-row span { color: var(--slate); }
.review-row:last-child { border-bottom: none; }
.review-row.total { background: var(--teal-50); font-size: 1rem; }
.review-row.total strong { color: var(--teal-800); }
.book-done { text-align: center; }
.done-icon {
  width: 74px; height: 74px; border-radius: 50%; background: var(--green); color: #fff;
  font-size: 2.2rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
}
.book-done a { color: var(--teal-600); font-weight: 700; }

/* ============================================================
   Booking wizard — responsive fixes. Before this, .wiz-columns had NO
   mobile override at all: the 380px-wide .wiz-sidebar sat in a flex ROW
   next to .wiz-left on every screen size, so on a phone the two columns
   were squeezed side-by-side (or overflowed horizontally) instead of
   stacking — the single biggest cause of "booking page is broken on
   mobile" reports. Breakpoint matches the site's main 860px mobile
   breakpoint used everywhere else.
   ============================================================ */
/* Tablet tier (768-900px). Confirmed live at 768px: .wiz-sidebar's fixed 380px width plus
   .wiz-columns staying a flex row left .wiz-left only ~308px to work with -- just enough
   for ONE 280px-wide package card, the same "no room" symptom the 767px-only fix below
   solves for phones, one breakpoint tier up. 900px matches the threshold already used by
   the sibling main+380px-sidebar layout on the Package Detail page (.pkg-detail-grid,
   ~line 683), so this stacks at the same width that layout shape already stacks at
   elsewhere on the site. */
@media (max-width: 900px) {
  .wiz-columns { flex-direction: column; align-items: stretch; }
  .wiz-sidebar { width: 100%; position: static; top: auto; }
}

@media (max-width: 767px) {
  /* align-items: flex-start (set on the base row-direction rule, line ~793) means something
     different once flex-direction flips to column here: on the cross axis (now horizontal),
     "flex-start" sizes each child to its own content width and left-aligns it instead of
     stretching it to fill the column -- so .wiz-left (and its .hscroll-track package slider)
     was rendering at its natural/unconstrained content width (~585px) instead of the phone's
     actual viewport width, pushing the whole page into horizontal scroll. .wiz-sidebar masked
     this for itself with its own explicit width: 100% below, but .wiz-left had no such
     override. Resetting align-items to stretch here fixes every column child at once.
     (flex-direction/align-items/width/position/top are now set by the max-width:900px tier
     above, which already covers this width too -- only the tighter phone-only padding/gap
     stay scoped to this block.) */
  .wiz-columns { padding: 24px 16px; gap: 20px; }
  .wiz-sidebar { padding: 22px; }
  .wiz-panel { padding: 20px; }
  /* Step labels ("Package", "Vehicle & Schedule", …) don't fit next to 4-5
     connectors on a phone-width screen — this alone was overflowing the
     header horizontally. Numbers-only + tighter gaps keeps the same step
     indicator without the overflow. */
  .wiz-progress-inner { gap: 8px; padding: 14px 0; }
  .wiz-progress-step .label { display: none; }
  .wiz-progress-step .connector { flex: 0 0 20px; }
  .wiz-header-inner .nav-links { display: none; }
  .wiz-header-inner .nav-account-name { display: none; }
  /* Back/Continue button row -- confirmed live on mistriconnect.com/book: this row had NO
     mobile override at all. .wiz-nav-row .btn.back is flex: 0 0 auto (never shrinks) and
     .wiz-nav-row .btn (Continue) is flex: 1 with no min-width: 0, so on a phone the primary
     "Continue to..." button was pushed almost entirely off the right edge of the screen --
     visible as only a 2px sliver of its rounded corner, with no way to tap it. This made the
     wizard impossible to advance past Step 1 on a phone. Stacking both buttons full-width
     fixes it outright rather than trying to squeeze two large text buttons into one row. */
  .wiz-nav-row { flex-direction: column; }
  .wiz-nav-row .btn, .wiz-nav-row .btn.back { flex: 1 1 auto; width: 100%; }

  /* "Confirm & Pay BHD X.XXX" (.btn.btn-primary.btn-lg.wiz-confirm-btn) overflows
     its own box on mobile: .btn-lg's desktop padding (16px 32px) plus .btn's
     white-space:nowrap requires ~171px of content width (measured via
     scrollWidth), but the button is squeezed to ~138-141px by .wiz-sidebar's
     mobile width, so the text bled out past both edges with overflow:visible.
     Scoped to the dedicated .wiz-confirm-btn class added in app.jsx (both the
     sidebar summary card copy and the wizard's own nav-row copy on the Review
     & Pay step use it) rather than a structural .wiz-nav-row .btn-lg selector,
     which would also catch the plain "Continue" button sharing the same
     .btn-lg class and .wiz-nav-row parent -- that one's short text already
     fits fine and doesn't need shrinking.
     Verified live: after this override, scrollWidth (138px) == clientWidth
     (138px) -- text now wraps to 2 lines fully inside the button, no bleed. */
  .wiz-confirm-btn {
    padding: 12px 10px;
    font-size: 0.82rem;
    white-space: normal;
    line-height: 1.25;
    text-align: center;
  }

  /* "Total Amount (per visit)" / "Est. Total This Cycle" rows (.wiz-line-row.total,
     both the plain one and the one nested inside the mint .wiz-cycle-total box) had no
     mobile override: with justify-content: space-between and no wrap/nowrap rule, a
     phone-width sidebar doesn't have room for the bold label AND the large teal amount
     on one line, so the flex box compressed both children and force-wrapped their text
     mid-word instead -- "Total Amount (per" / "visit)" on the left, "BHD" / "4.500" on
     the right, reported as looking broken/unprofessional. Letting the row wrap turns
     that into a clean two-line stack (full-width label on top, amount on its own line
     below) instead of two ragged half-width columns, and nowrap+auto-margin keeps
     "BHD 4.500" itself from ever splitting across the break. */
  .wiz-line-row.total {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .wiz-line-row.total .amt {
    white-space: nowrap;
    margin-left: auto;
    font-size: 1.35rem;
  }

  /* .loc-search-bar (Step 3 location map picker): confirmed live at 375px the input only had
     ~163px of its 265px-wide pill to work with once the search icon, locate-me circle and the
     bar's own 18px side padding were accounted for -- not enough for "Search location or drop
     pin…" even with the ellipsis fix above kicking in early. Tightening the gap and padding
     here claws back ~16px for the text without shrinking the locate button's own 30px tap
     target (already at the platform's minimum). */
  .loc-search-bar { gap: 6px; padding: 10px 12px; }
}

/* --- Add-ons & plan toggle --- */
.addon-strip { margin-top: 30px; border-top: 1px solid var(--line); padding-top: 22px; }
.addon-strip h4 { font-size: 0.95rem; font-weight: 800; margin-bottom: 12px; }
.addon-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.addon-chip {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 12px;
  border: 1.5px solid var(--line); background: #fff; min-width: 180px;
}
.addon-chip strong { font-size: 0.88rem; }
.addon-chip span { color: var(--teal-700); font-weight: 800; font-size: 0.86rem; }
.addon-chip em { font-style: normal; color: var(--slate-lt); font-size: 0.76rem; }

.field-hint { color: var(--slate-lt); font-size: 0.8rem; margin-top: 4px; display: block; }
.referral-applied {
  display: flex; align-items: flex-start; gap: 8px; background: var(--teal-50); border: 1.5px solid var(--teal-100);
  color: var(--teal-800); border-radius: 12px; padding: 10px 12px; font-size: 0.84rem; line-height: 1.45; margin-bottom: 14px;
}
.referral-applied svg { flex-shrink: 0; margin-top: 2px; color: var(--teal-600); }
.referral-applied strong { color: var(--teal-900); }
.plan-toggle { display: flex; gap: 10px; flex-wrap: wrap; }
.plan-opt {
  flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--line); background: #fff; font-family: inherit; cursor: pointer; text-align: left;
}
.plan-opt strong { font-size: 0.9rem; }
.plan-opt span { color: var(--green); font-weight: 800; font-size: 0.78rem; }
.plan-opt.on { border-color: var(--teal-600); background: var(--teal-50); box-shadow: 0 0 0 3px var(--teal-100); }

.addon-select { display: flex; flex-direction: column; gap: 8px; }
.addon-opt {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px;
  border: 1.5px solid var(--line); background: #fff; cursor: pointer; font-weight: 600; font-size: 0.88rem;
}
.addon-opt input { width: 16px; height: 16px; accent-color: var(--teal-600); }
.addon-opt em { font-style: normal; margin-left: auto; color: var(--teal-700); font-weight: 800; }
.addon-opt.on { border-color: var(--teal-600); background: var(--teal-50); }

/* --- Account / bookings --- */
.acct-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.acct-avatar { width: 56px; height: 56px; border-radius: 28px; background: var(--teal-600); color: #fff; font-weight: 800; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--font-display); overflow: hidden; }
.edit-profile-avatar-row { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.edit-profile-avatar { width: 64px; height: 64px; border-radius: 32px; background: var(--teal-600); color: #fff; font-weight: 800; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--font-display); overflow: hidden; }
.edit-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.edit-profile-photo-btn { cursor: pointer; }
.bk-list { display: flex; flex-direction: column; gap: 16px; }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 20px; flex-wrap: wrap; font-size: 0.85rem; color: var(--slate); }
.pager { display: flex; gap: 8px; flex-wrap: wrap; }
.pager button { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line); background: #fff; font-weight: 700; font-size: 0.85rem; color: var(--ink); cursor: pointer; }
.pager button.on { background: var(--teal-600); border-color: var(--teal-600); color: #fff; }
.pager button:disabled { opacity: 0.45; cursor: not-allowed; }
.pager-ellipsis { padding: 6px 4px; color: var(--slate); }
.bk-card { padding: 22px 24px; }
.bk-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.bk-title { font-size: 1.1rem; display: block; }
.bk-sub { color: var(--slate); font-size: 0.9rem; font-weight: 600; }
.bk-mid { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 12px; color: var(--slate); font-size: 0.9rem; font-weight: 600; }
.bk-actions { margin-top: 14px; }
.bkc .bk-actions .btn-ghost { border-radius: 999px; border-color: #D6E4E2; color: var(--teal-700); font-weight: 700; padding: 8px 18px; transition: background .15s, border-color .15s; }
.bkc .bk-actions .btn-ghost:hover { background: #F0FDFA; border-color: var(--teal-600); }
.bk-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: 0.78rem; white-space: nowrap; }
.bk-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.bk-badge.pending { background: #FEF3C7; color: #92400E; }
.bk-badge.approved { background: #DBEAFE; color: #1E40AF; }
.bk-badge.in_progress { background: #E0E7FF; color: #3730A3; }
.bk-badge.completed { background: #DCFCE7; color: #166534; }
.bk-badge.rejected, .bk-badge.cancelled { background: #FEE2E2; color: #991B1B; }
.bk-badge.cancellation_requested { background: #FEF3C7; color: #92400E; }

/* --- Responsive ---
   Two real tiers, matching the two fixed-width mockups on the Figma "RESPONSIVE WEB"
   board: Tablet (768px, e.g. node 359:16) and Mobile (375px, e.g. node 359:309).
   Tablet is NOT a scaled-down phone layout — it keeps the full desktop nav (no
   hamburger), the 2-column hero, and 3-across package/stat cards, exactly like
   Desktop just narrower. Only the 4- and 5-column desktop grids (the 4-step "How
   It Works"/onboarding timeline, cards-4, addons-grid, area-cards) fold to 2
   columns at this tier. True mobile chrome — hamburger nav, bottom tab bar,
   single-column stacks — only starts below 768px.
   Before this fix, all of the above collapsed together at 860px (and some at
   900/720px), which meant the 768px Tablet mockup got the phone treatment: nav
   hidden behind a hamburger, hero stacked to one column, packages stacked to one
   column — none of which matches Figma's Tablet frame, confirmed by pulling its
   metadata/screenshot (full "Services / Pricing / Partner / About" nav + Login +
   Book Now, 2-up hero, 3-up package cards, 2x2 steps grid) side by side with the
   Mobile frame (hamburger + bottom tab bar, 1-col hero/cards/steps/stats). */
@media (max-width: 1023px) {
  .cards-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .addons-grid { grid-template-columns: repeat(2, 1fr); }
  .area-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .hero { padding: 56px 0 48px; }
  .hero-grid, .provider-grid { grid-template-columns: 1fr; gap: 36px; }
  .cards-3, .cards-4, .steps, .partner-tiers, .addons-grid, .area-cards { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr; gap: 4px; padding-top: 8px; padding-bottom: 8px; }
  .stat { padding: 20px 24px; }
  .stat:not(:last-child)::after { display: none; }
  .stat:not(:last-child) { border-bottom: 1px solid var(--line); }
  .sp-download-inner { flex-direction: column; }
  .sp-phone-frame { width: 220px; }
  .sp-content-side { width: 100%; box-sizing: border-box; }
  .partner-reqs-inner { flex-direction: column; gap: 32px; }
  .partner-reqs-image { width: 100%; }
  .partner-reqs-image img { height: 280px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links {
    display: none; position: absolute; top: 72px; left: 0; right: 0;
    background: #fff; flex-direction: column; align-items: stretch;
    padding: 16px 24px 22px; gap: 4px; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md);
  }
  .nav-links.open { display: flex; }
  .hamburger { display: block; }
  .nav-cta { display: none; }
  .form-row { grid-template-columns: 1fr; }
  .topbar { display: none; }
  .section { padding: 60px 0; }
  .compare-head .cols, .compare-row .cols { width: auto; gap: 10px; }
  .compare-row .feature-name { font-size: 0.82rem; }
}

/* ============================================================
   Mobile "app feel" — bottom tab bar, hide-on-scroll header,
   page-load transition. True phone widths only (max-width: 767px,
   matching the nav-collapse breakpoint above) — Tablet (768px+) and
   Desktop are untouched, per the Figma Tablet frame showing no bottom
   tab bar. See SiteHeader/MobileTabBar in app.jsx.
   ============================================================ */
.site-header-group { transition: transform 0.25s ease; }
@media (max-width: 767px) {
  .site-header-group.site-header-hide { transform: translateY(-100%); }
  .nav { transition: none; } /* the group wrapper handles the slide, not .nav itself */

  /* Bottom tab bar. transform: translateZ(0) + will-change/backface-visibility force this
     onto its own GPU compositor layer — without it, iOS Safari is known to let fixed-position
     elements lag behind or briefly vanish during active momentum scrolling (especially while
     its own address bar is animating away), only "snapping" back into place once scrolling
     stops. The bar's CSS position was already correct; this addresses that separate iOS
     rendering quirk on top of it. */
  .mobile-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 500;
    background: #fff; border-top: 1px solid var(--line);
    box-shadow: 0 -2px 16px rgba(0,0,0,0.07);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    transform: translateZ(0); -webkit-transform: translateZ(0);
    will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  }
  .mobile-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 2px; color: var(--slate); text-decoration: none;
    font-size: 0.68rem; font-weight: 700;
  }
  .mobile-tab .icon { color: var(--slate); }
  .mobile-tab.active { color: var(--teal-700); }
  .mobile-tab.active .icon { color: var(--teal-700); }

  /* Room for the fixed tab bar so the footer's last row isn't hidden behind it */
  #main-content { padding-bottom: 68px; }

  /* App-style screen-in animation on every page load. Opacity-only: this used to also
     animate `transform` (translateY(8px) -> none), but a completed CSS animation with
     fill-mode "both" keeps Chrome/Safari reporting a non-"none" *computed* transform
     (a resolved identity matrix, not the literal keyword "none") on #root forever after
     it finishes -- which per spec makes #root a containing block for ALL of its
     position:fixed descendants, permanently. Since #root wraps the entire app including
     .mobile-tabbar, this silently fixed the tab bar to the *document's* box instead of
     the viewport -- it only ever appeared at the very bottom of the page, never staying
     pinned to the screen while scrolling. Confirmed live on production: disabling this
     animation snapped the tab bar instantly to the correct viewport-relative position.
     Dropping the transform keyframe (keeping only the fade) removes the containing block
     entirely; the visual difference (no more slight upward slide-in) is negligible. */
  #root { animation: mc-page-in 0.22s ease both; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .site-header-group, #root { animation: none; transition: none; }
}
@keyframes mc-page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (min-width: 768px) { .mobile-tabbar { display: none; } }

/* --- Notification bell --- */
.notif-bell-wrap { position: relative; margin-left: 4px; }
.notif-bell { position: relative; background: none; border: none; font-size: 1.15rem; cursor: pointer; padding: 6px; line-height: 1; }
.notif-dot {
  position: absolute; top: 0; right: 0; background: var(--red); color: #fff; font-size: 0.6rem; font-weight: 800;
  border-radius: 999px; min-width: 15px; height: 15px; display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.notif-dropdown {
  position: absolute; right: 0; top: 38px; width: 300px; background: #fff; border: 1.5px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow-md); z-index: 50; overflow: hidden;
}
.notif-head { font-weight: 800; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.notif-empty { padding: 18px 16px; color: var(--slate-lt); font-size: 0.85rem; }
.notif-list { max-height: 340px; overflow-y: auto; }
.notif-item { padding: 10px 16px; border-bottom: 1px solid #F1F5F9; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.notif-item strong { font-size: 0.85rem; }
.notif-item span { font-size: 0.8rem; color: var(--slate); }
.notif-item.unread { background: var(--teal-50); }
.notif-time { font-size: 0.72rem; color: var(--slate-lt); margin-top: 1px; }

/* --- Account > Notifications panel --- */
.tgl-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #F1F5F9; }
.tgl-row:last-child { border-bottom: none; }
.tgl-row-label { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.tgl-row-sub { font-size: 0.76rem; color: var(--slate-lt); margin-top: 1px; }
.tgl-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; cursor: pointer; }
.tgl-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tgl-switch .tgl-track { position: absolute; inset: 0; background: var(--line); border-radius: 999px; transition: background 0.15s ease; }
.tgl-switch .tgl-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.15s ease; }
.tgl-switch input:checked + .tgl-track { background: var(--teal-600); }
.tgl-switch input:checked + .tgl-track .tgl-thumb { transform: translateX(18px); }
.tgl-switch input:focus-visible + .tgl-track { outline: 2px solid var(--teal-100); outline-offset: 2px; }

.notif-card-list { display: flex; flex-direction: column; }
.notif-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid #F1F5F9; }
.notif-card:last-child { border-bottom: none; }
.notif-card-icon { flex: none; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.notif-card-body { flex: 1; min-width: 0; }
.notif-card-title { font-size: 0.88rem; font-weight: 700; color: var(--ink); }
.notif-card-text { font-size: 0.82rem; color: var(--slate); margin-top: 2px; }
.notif-card-time { font-size: 0.74rem; color: var(--slate-lt); margin-top: 4px; }
.notif-card.unread .notif-card-title::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--teal-600); margin-left: 7px; vertical-align: middle; }
.notif-card-view { flex: none; background: none; border: none; color: var(--teal-700); font-weight: 700; font-size: 0.78rem; cursor: pointer; padding: 4px 0; }
.notif-card-view:disabled { color: var(--slate-lt); cursor: default; }

/* --- Provider profile / reviews --- */
.provider-profile-head { display: flex; align-items: center; gap: 18px; }
.partner-avatar.big { width: 64px; height: 64px; font-size: 1.6rem; }
.stars { color: #F59E0B; letter-spacing: 2px; }
.stars-input { display: flex; gap: 4px; margin-bottom: 10px; }
.stars-input button { background: none; border: none; font-size: 1.5rem; color: var(--line); cursor: pointer; padding: 0; }
.stars-input button.on { color: #F59E0B; }
.review-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.review-card { padding: 16px; }
.review-form { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.review-form input { width: 100%; margin-bottom: 8px; }

/* --- Refer & earn --- */
.refer-code {
  font-size: 1.6rem; font-weight: 800; letter-spacing: 0.12em; color: var(--teal-700);
  background: var(--teal-50); border: 1.5px dashed var(--teal-600); border-radius: 10px; padding: 12px; text-align: center;
}
.refer-link-row { display: flex; gap: 8px; }
.refer-link-row input { flex: 1; }

/* --- Blog --- */
.blog-list { display: flex; flex-direction: column; gap: 14px; }
.blog-card { display: block; text-decoration: none; color: inherit; }
.blog-card h3 { margin: 6px 0 6px; color: var(--ink); }
.blog-readmore { color: var(--teal-600); font-weight: 700; font-size: 0.86rem; }

/* --- Promo / wallet in booking wizard --- */
.promo-row { display: flex; gap: 8px; margin-top: 14px; }
.promo-row input { flex: 1; }

/* --- Account tabs & sub-panels --- */
.acct-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0 24px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.acct-tab {
  padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff;
  font-weight: 700; font-size: 0.85rem; color: var(--slate); cursor: pointer;
}
.acct-tab.on { background: var(--teal-600); border-color: var(--teal-600); color: #fff; }
.acct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.wallet-balance { font-size: 2rem; font-weight: 800; color: var(--teal-700); margin: 6px 0 10px; }
.saved-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #F1F5F9; font-size: 0.88rem; }
.saved-row button { background: none; border: none; color: var(--red); cursor: pointer; font-size: 0.95rem; }
@media (max-width: 767px) {
  .acct-grid { grid-template-columns: 1fr; }
}

/* --- Account: sidebar shell (Figma "My Account" design system) --- */
.acct-head-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.acct-id { display: flex; align-items: center; gap: 16px; }
.acct-id h2 { text-align: left; margin: 0; }
.acct-member-since { color: var(--slate); font-size: 0.9rem; }
.acct-meta-row { display: flex; align-items: center; gap: 8px; }
.acct-flag { display: inline-flex; width: 24px; height: 16px; border-radius: 2px; overflow: hidden; flex-shrink: 0; border: 1px solid var(--line); }
.acct-flag span:first-child { width: 8px; background: #fff; }
.acct-flag span:last-child { flex: 1; background: #EF4444; }
.acct-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.acct-shell { display: flex; align-items: flex-start; gap: 0; border-top: 1px solid var(--line); margin-top: -1px; }
.acct-sidebar { width: 260px; flex-shrink: 0; padding: 24px 16px 24px 0; position: sticky; top: 90px; }
.acct-sidebar-label { display: block; padding: 0 12px 10px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate-lt); }
.acct-nav {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 11px 12px; border-radius: 10px; border: none; background: none; cursor: pointer;
  font-weight: 700; font-size: 0.92rem; color: var(--slate); margin-bottom: 2px; border-left: 3px solid transparent;
}
.acct-nav:hover { background: var(--bg-soft); color: var(--ink); }
.acct-nav.on { background: var(--teal-50); color: var(--teal-700); border-left-color: var(--teal-600); }
.acct-nav.danger { color: #B91C1C; margin-top: 10px; }
.acct-nav.danger:hover { background: #FEF2F2; }
.acct-content { flex: 1; min-width: 0; padding: 24px 0 24px 32px; border-left: 1px solid var(--line); }
.acct-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.acct-section-head h3 { font-size: 1.3rem; margin: 0 0 4px; }
.acct-section-head p { color: var(--slate); font-size: 0.9rem; margin: 0; }
@media (max-width: 767px) {
  .acct-shell { flex-direction: column; }
  .acct-sidebar { width: 100%; position: static; padding: 16px 0; display: flex; flex-wrap: wrap; gap: 6px; }
  .acct-sidebar-label { display: none; }
  .acct-nav { width: auto; border-left: none; border-bottom: 3px solid transparent; }
  .acct-nav.on { border-left-color: transparent; border-bottom-color: var(--teal-600); }
  .acct-content { padding: 20px 0; border-left: none; border-top: 1px solid var(--line); }
}

/* --- Dashboard section --- */
.dash-plan-badge { padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: 0.78rem; background: var(--teal-50); color: var(--teal-700); border: 1px solid var(--teal-100); }
.dash-plan-badge.off { background: var(--bg-soft); color: var(--slate); border-color: var(--line); }
/* Clickable wallet-balance chip surfaced at the top of the Dashboard (see DashboardPanel) --
   a real <button>, not a decorative badge, so tapping it takes the customer straight to the
   full Wallet & Referral panel further down the same page instead of just repeating the number. */
.dash-wallet-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px;
  font-weight: 700; font-size: 0.78rem; background: var(--green, #16A34A); color: #fff;
  border: 1px solid transparent; cursor: pointer; font-family: inherit;
}
.dash-wallet-badge:hover { opacity: 0.9; }
.dash-wallet-badge svg { flex-shrink: 0; }

/* --- Booking cards (My Bookings + Dashboard) --- */
.bkc { display: flex; align-items: center; gap: 22px; padding: 22px 24px; transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; }
.bkc:hover { box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08); border-color: #CBD5E1; transform: translateY(-1px); }
.bkc-date { width: 68px; flex-shrink: 0; text-align: center; background: linear-gradient(180deg, #F0FDFA, #F8FAFC); border: 1px solid #E2F3F1; border-radius: 14px; padding: 12px 6px 10px; }
.bkc-date .mon { display: block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; color: var(--teal-700); text-transform: uppercase; }
.bkc-date .day { display: block; font-size: 1.6rem; font-weight: 800; color: var(--ink); font-family: var(--font-display); line-height: 1.15; margin-top: 1px; }
.bkc-date .time { display: block; font-size: 0.68rem; color: var(--slate); margin-top: 3px; font-weight: 600; }
.bkc-div { width: 1px; align-self: stretch; background: var(--line); flex-shrink: 0; }
.bkc-body { flex: 1; min-width: 0; }
.bkc-body strong { font-size: 1.08rem; color: var(--ink); display: block; margin-bottom: 8px; letter-spacing: -0.01px; }
.bkc-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 0.8rem; font-weight: 600; }
.bkc-meta span { display: inline-flex; align-items: center; gap: 6px; background: #F8FAFC; border: 1px solid #EEF2F6; color: var(--slate); padding: 5px 11px; border-radius: 999px; }
.bkc-meta span svg { color: var(--slate-lt); flex-shrink: 0; }
.bkc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; }
.bkc-price { text-align: right; }
.bkc-price strong { display: block; font-size: 1.15rem; color: var(--ink); font-weight: 800; }
.bkc-price span { font-size: 0.7rem; color: var(--slate-lt); }
.bk-filter-tabs { display: flex; gap: 4px; background: var(--bg-soft); padding: 4px; border-radius: 10px; }
.bk-filter-tabs button { padding: 8px 16px; border-radius: 8px; border: none; background: none; font-weight: 700; font-size: 0.85rem; color: var(--slate); cursor: pointer; }
.bk-filter-tabs button.on { background: #fff; color: var(--teal-700); box-shadow: var(--shadow-sm); }

/* --- Vehicle cards --- */
.veh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.veh-card { border: 1.5px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.veh-card-default { border-color: var(--teal-300, var(--teal-600)); }
.veh-photo { position: relative; height: 130px; background: linear-gradient(135deg, var(--teal-50), var(--bg-soft)); display: flex; align-items: center; justify-content: center; color: var(--teal-300, var(--teal-600)); }
.veh-default-badge { position: absolute; top: 10px; left: 10px; background: var(--teal-700); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; letter-spacing: 0.02em; }
.veh-body { padding: 16px 18px; }
.veh-body strong { display: block; font-size: 1rem; margin-bottom: 8px; }
.veh-tags { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.veh-plate { font-size: 0.75rem; font-weight: 700; border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; color: var(--slate); }
.veh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.veh-actions button { background: none; border: none; cursor: pointer; font-weight: 700; font-size: 0.82rem; display: inline-flex; align-items: center; gap: 5px; }
.veh-actions .edit { color: var(--teal-700); }
.veh-actions .setdef { color: var(--slate); }
.veh-actions .del { color: #B91C1C; margin-left: auto; }

.saved-addr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.saved-addr-card { border: 1.5px solid var(--line); border-radius: var(--r-lg); background: #fff; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.saved-addr-top { display: flex; align-items: center; gap: 8px; }
.saved-addr-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--teal-50); color: var(--teal-700); flex-shrink: 0; }
.saved-addr-top strong { font-size: 0.98rem; }
.saved-addr-area { font-size: 0.78rem; font-weight: 700; color: var(--teal-700); text-transform: uppercase; letter-spacing: 0.02em; margin: 0; }
.saved-addr-text { font-size: 0.86rem; color: var(--slate); margin: 0; line-height: 1.4; }
.saved-addr-actions { display: flex; align-items: center; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 6px; }
.saved-addr-actions .del { background: none; border: none; cursor: pointer; font-weight: 700; font-size: 0.82rem; display: inline-flex; align-items: center; gap: 5px; color: #B91C1C; margin-left: auto; }

/* --- Payment methods --- */
.pm-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid #F1F5F9; }
.pm-left { display: flex; align-items: center; gap: 16px; }
.pm-brand { border: 1.5px solid var(--line); border-radius: 8px; padding: 6px 12px; font-weight: 800; font-size: 0.82rem; }
.pm-brand.visa { color: #1A1F71; }
.pm-brand.mastercard { color: #EB001B; }
.pm-num { font-weight: 700; color: var(--ink); font-size: 0.95rem; letter-spacing: 1px; }
.pm-exp { display: block; color: var(--slate-lt); font-size: 0.78rem; margin-top: 2px; letter-spacing: 0; }
.pm-default-tag { background: var(--teal-50); color: var(--teal-700); font-size: 0.68rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; margin-left: 10px; text-transform: uppercase; }
.pm-actions { display: flex; gap: 14px; align-items: center; flex-shrink: 0; }
.pm-actions button { background: none; border: none; cursor: pointer; font-weight: 700; font-size: 0.82rem; }
.pm-actions .set-default { color: var(--teal-700); }
.pm-actions .remove { color: #B91C1C; }
.billing-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px; border: 1.5px solid var(--line); border-radius: var(--r-md); }
.billing-left { display: flex; align-items: center; gap: 14px; }
.billing-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--teal-50); color: var(--teal-700); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* --- Invoices --- */
.inv-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.inv-table th { text-align: left; color: var(--slate-lt); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; padding: 10px 12px; border-bottom: 1.5px solid var(--line); }
.inv-table td { padding: 14px 12px; border-bottom: 1px solid #F1F5F9; color: var(--ink); font-weight: 600; }
.inv-table tr:last-child td { border-bottom: none; }
.inv-link { display: inline-flex; align-items: center; gap: 6px; color: var(--teal-700); font-weight: 700; font-size: 0.82rem; background: none; border: none; cursor: pointer; padding: 0; transition: color .15s; }
.inv-link:hover { color: var(--teal-600); text-decoration: underline; }
.inv-status { font-weight: 700; font-size: 0.82rem; }
.inv-status.paid { color: #166534; }
.inv-status.pending { color: #92400E; }

/* --- Invoice detail (printable) --- */
.invoice-doc { max-width: 620px; margin: 0 auto; border: 1.5px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.invoice-head { background: var(--ink); color: #fff; padding: 22px 28px; display: flex; justify-content: space-between; align-items: center; }
.invoice-body { padding: 28px; }
.invoice-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; }
.invoice-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.invoice-parties h5 { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--slate-lt); margin-bottom: 6px; }
.invoice-items { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.invoice-items th { background: var(--ink); color: #fff; text-align: left; padding: 10px 12px; font-size: 0.78rem; }
.invoice-items td { padding: 10px 12px; border-bottom: 1px solid #F1F5F9; font-size: 0.9rem; }
.invoice-items th.num, .invoice-items td.num { text-align: right; }
.invoice-bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 4px; }
.invoice-payment-method { flex: 1 1 220px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; }
.invoice-payment-method h5 { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--slate-lt); margin: 0 0 10px; }
.invoice-payment-method .pm-line { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); font-size: 0.92rem; margin: 0 0 8px; }
.invoice-payment-method .pm-sub { color: var(--slate); font-size: 0.78rem; margin: 0 0 2px; }
.invoice-totals { margin-left: auto; width: 240px; }
.invoice-totals .row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 0.9rem; color: var(--slate); }
.invoice-totals .row.total { font-weight: 800; color: var(--teal-700); font-size: 1.1rem; border-top: 1.5px solid var(--line); margin-top: 6px; padding-top: 10px; }
.invoice-status-pill { padding: 5px 14px; border-radius: 999px; font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; background: var(--teal-100); color: var(--teal-800); display: inline-flex; align-items: center; gap: 6px; }
.invoice-status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.invoice-status-pill.pending { background: #FEF3C7; color: #92400E; }
.invoice-footer { text-align: center; color: var(--slate); font-size: 0.85rem; margin-top: 26px; }
.invoice-footer a { color: var(--teal-700); text-decoration: none; }
.invoice-footer .powered { margin-top: 10px; font-size: 0.75rem; color: var(--slate-lt); }
.invoice-footer .powered strong { color: var(--teal-700); }

/* --- Subscription --- */
.sub-card { border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 22px; margin-bottom: 16px; }
.sub-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.sub-freq { font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.sub-meta { color: var(--slate); font-size: 0.88rem; margin-top: 4px; }
.sub-status { padding: 5px 12px; border-radius: 999px; font-weight: 700; font-size: 0.75rem; }
.sub-status.active { background: #DCFCE7; color: #166534; }
.sub-status.cancelled, .sub-status.rejected { background: #FEE2E2; color: #991B1B; }
.sub-status.pending_approval { background: #FEF3C7; color: #92400E; }

/* --- Account > Subscription page (Figma node 134:270) --- */
.sub-plan-row { display: flex; gap: 24px; align-items: flex-start; width: 100%; margin-bottom: 20px; flex-wrap: wrap; }
.sub-plan-card { flex: 1 1 380px; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.sub-plan-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.sub-plan-title-block { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sub-plan-title { font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.sub-plan-price { font-size: 1.3rem; font-weight: 800; color: var(--teal-600); white-space: nowrap; }
.sub-plan-price span { font-size: 0.78rem; font-weight: 600; color: var(--slate); margin-left: 2px; }
.sub-plan-divider { height: 1px; width: 100%; background: var(--line); }
.sub-plan-details { display: flex; flex-direction: column; gap: 8px; }
.sub-plan-detail { display: flex; gap: 8px; align-items: center; font-size: 0.85rem; color: var(--slate); }
.sub-plan-detail svg { color: var(--teal-600); flex-shrink: 0; }
.sub-plan-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 6px; flex-wrap: wrap; gap: 10px; }
.sub-plan-footer-note { font-size: 0.8rem; color: var(--slate-lt); }

/* Live price/cycle preview shown inside the new/edit recurring-plan form */
.series-price-preview { background: var(--teal-50); border-radius: 14px; padding: 16px 18px; margin: 18px 0 6px; display: flex; flex-direction: column; gap: 8px; }
.series-price-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.86rem; color: var(--ink); gap: 12px; }
.series-price-row span em { font-style: normal; color: var(--slate); font-size: 0.78rem; }
.series-price-row.total { padding-top: 8px; border-top: 1px solid rgba(13,148,136,0.25); font-weight: 700; }
.series-price-row.total strong { color: var(--teal-700); font-size: 1rem; }
.sub-usage-card { flex: 0 0 300px; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.sub-usage-card h4 { font-size: 0.95rem; font-weight: 800; color: var(--ink); margin: 0; }
.usage-metric { display: flex; flex-direction: column; gap: 10px; }
.usage-metric-labels { display: flex; justify-content: space-between; font-size: 0.85rem; }
.usage-metric-labels span:first-child { font-weight: 600; color: var(--ink); }
.usage-metric-labels span:last-child { font-weight: 700; color: var(--teal-600); }
.usage-bar-track { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.usage-bar-fill { height: 100%; background: var(--teal-600); border-radius: 4px; transition: width 0.2s ease; }
.usage-reset { display: flex; gap: 6px; align-items: center; font-size: 0.78rem; color: var(--slate); margin: 0; }
.usage-renew { background: var(--teal-50); border-radius: 10px; padding: 12px; }
.usage-renew p { margin: 0 0 8px; font-weight: 700; font-size: 0.82rem; color: var(--ink); }
.sub-next-row { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 14px; }
.sub-next-date { flex: none; width: 48px; text-align: center; background: var(--teal-50); color: var(--teal-600); border-radius: 8px; padding: 6px 4px; }
.sub-next-date span { display: block; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.sub-next-date strong { display: block; font-size: 1.05rem; font-weight: 800; }
.sub-next-text { flex: 1; min-width: 0; }
.sub-next-title { font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.sub-next-sub { font-size: 0.76rem; color: var(--slate); margin-top: 2px; }
/* Plan Type toggle — booking wizard Step 2 (Figma "WEB - RECURRING: Step 1 —
   Plan & Schedule" node 49:252, plan-type-tabs): One-Time Service vs Recurring
   Subscription, a level above the Frequency (twice/3x/daily) cadence picker. */
.plan-type-tabs { display: flex; gap: 12px; }
/* min-width: 0 overrides the flex-item default of min-width: auto, which otherwise floors
   each tab's width at its own unbreakable content size (a single-word "Subscription" plus
   the "10% OFF" badge next to it). Without it, on narrow screens the "Recurring
   Subscription" tab refused to shrink to its fair share of the row and instead overflowed
   its own pill and the page -- confirmed live on mistriconnect.com/book Step 2, where the
   badge was pushed off the right edge of the screen entirely. */
.plan-type-tab {
  flex: 1; min-width: 0; height: 44px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: 0.9rem; color: var(--ink); cursor: pointer; font-family: inherit;
}
.plan-type-tab.on { border: none; background: var(--teal-600); color: #fff; font-weight: 700; }
.plan-type-tab .off-badge { background: var(--teal-50); color: var(--teal-600); font-size: 0.68rem; font-weight: 800; padding: 3px 8px; border-radius: 6px; }
.plan-type-tab.on .off-badge { background: #E6FBF7; color: #10B981; }
.freq-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.freq-tabs button { flex: 1; padding: 12px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; font-weight: 700; font-size: 0.88rem; cursor: pointer; color: var(--slate); }
.freq-tabs button.on { border-color: var(--teal-600); background: var(--teal-50); color: var(--teal-700); }
.day-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.day-tabs button { width: 46px; height: 46px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; font-weight: 700; font-size: 0.82rem; cursor: pointer; color: var(--slate); }
.day-tabs button.on { border-color: var(--teal-600); background: var(--teal-600); color: #fff; }

/* --- Security / password --- */
.sec-form { max-width: 420px; }
.sec-form .field { margin-bottom: 14px; }

/* --- Help & Support --- */
.help-search { display: flex; align-items: center; gap: 10px; padding: 16px 20px; }
.help-search .icon { color: var(--slate-lt); flex-shrink: 0; }
.help-search input { border: none; background: none; padding: 0; font-size: 0.95rem; width: 100%; color: var(--ink); }
.help-search input:focus { box-shadow: none; }
.help-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.help-card { display: flex; align-items: center; gap: 14px; padding: 20px; }
.help-card-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--teal-50); color: var(--teal-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.help-channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.help-channels .panel { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
@media (max-width: 767px) {
  .help-grid { grid-template-columns: 1fr; }
  .help-channels { grid-template-columns: 1fr; }
}

/* --- Edit profile modal --- */
.mc-modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.5); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.mc-modal { background: #fff; border-radius: var(--r-lg); padding: 28px; width: 100%; max-width: 420px; box-shadow: var(--shadow-md); }
.mc-modal h3 { margin: 0 0 18px; }
.mc-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* "See How It Works" video modal (homepage hero CTA) */
.video-modal-backdrop { background: rgba(15,23,42,0.78); z-index: 300; }
.video-modal { position: relative; background: #000; border-radius: var(--r-lg); padding: 0; width: 100%; max-width: 860px; box-shadow: var(--shadow-lg); overflow: hidden; }
.video-modal video { width: 100%; max-height: 78vh; display: block; background: #000; }
.video-modal-close {
  position: absolute; top: 12px; right: 12px; z-index: 1; width: 34px; height: 34px; border-radius: 999px;
  background: rgba(15,23,42,0.6); color: #fff; border: none; font-size: 1rem; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.video-modal-close:hover { background: rgba(15,23,42,0.85); }

/* --- Global error/status popup system (Figma: node 20:4109, "Desktop Modal Overlays & Popups") --- */
.modal-scrim { position: fixed; inset: 0; background: rgba(27,42,74,0.4); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 24px; }
.modal-card { background: #fff; border-radius: 16px; padding: 32px; width: 480px; max-width: 100%; box-shadow: 0 12px 12px rgba(15,23,42,0.08); display: flex; flex-direction: column; gap: 24px; }
.modal-icon-header { display: flex; align-items: center; gap: 16px; }
.modal-icon-bg { width: 48px; height: 48px; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.modal-icon-bg.red { background: #FEF2F2; color: #DC2626; }
.modal-icon-bg.amber { background: #FEF3C7; color: #D97706; }
.modal-title-block { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.modal-title { font-weight: 800; font-size: 20px; color: #1B2A4A; }
.modal-subtitle { font-size: 14px; color: #94A3B8; }
.modal-message { font-size: 14px; line-height: 1.5; color: #475569; }
.modal-actions { display: flex; gap: 12px; justify-content: flex-end; }
.btn-modal-secondary { border: 1px solid #E2E8F0; background: #fff; border-radius: 8px; padding: 10px 18px; font-size: 14px; font-weight: 600; color: #475569; cursor: pointer; }
.btn-modal-secondary:hover { background: #F8FAFC; }
.btn-modal-primary { border: none; background: var(--teal-600); border-radius: 8px; padding: 10px 18px; font-size: 14px; font-weight: 700; color: #fff; cursor: pointer; }
.btn-modal-primary:hover { background: var(--teal-700); }
.btn-modal-destructive { border: none; background: #DC2626; border-radius: 8px; padding: 10px 18px; font-size: 14px; font-weight: 700; color: #fff; cursor: pointer; }
.btn-modal-destructive:hover { background: #B91C1C; }
@media (max-width: 560px) { .modal-card { padding: 24px; gap: 18px; } }

.change-option-tile { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 14px; cursor: pointer; transition: border-color .15s, background .15s; }
.change-option-tile:hover { border-color: var(--teal-600); background: #F0FDFA; }
.change-option-tile.destructive:hover { border-color: #DC2626; background: #FEF2F2; }
.change-option-icon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.change-option-icon.reschedule { background: #F0FDFA; color: var(--teal-600); }
.change-option-icon.cancel { background: #FEF2F2; color: #DC2626; }
.change-option-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.change-option-text strong { font-size: 14px; font-weight: 700; color: #1B2A4A; }
.change-option-text span { font-size: 12.5px; line-height: 1.4; color: #64748B; }
.slot-chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 600; color: #475569; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.slot-chip:hover { border-color: var(--teal-600); }
.slot-chip.on { border-color: var(--teal-600); background: var(--teal-600); color: #fff; }