/* ────────────────────────────────────────────────────────────────────────────
   SideStops — design system
──────────────────────────────────────────────────────────────────────────── */

:root {
  /* SideStops light theme — greens, gold, yellow, purple, white.
     Cream-green canvas, white surfaces, deep forest text, royal purple
     accent, gold for deals. Designed to sit calmly on top of a light
     basemap (Carto Positron) without competing for contrast. */
  --bg-base: #f5f7f1;          /* soft cream-green canvas */
  --bg-surface: #ffffff;       /* card & panel surface */
  --bg-elevated: #fbfaf3;      /* warm off-white (popovers, menus) */
  --bg-overlay: rgba(31, 64, 47, 0.55);  /* forest-tinted modal scrim */
  --bg-popup: #ffffff;

  --border-subtle: rgba(28, 70, 50, 0.08);
  --border-default: rgba(28, 70, 50, 0.16);
  --border-strong: rgba(28, 70, 50, 0.30);

  --text-primary: #122a1a;     /* deep forest, body copy (darker) */
  --text-secondary: rgba(18, 42, 26, 0.78);
  --text-tertiary: rgba(18, 42, 26, 0.58);
  --text-quaternary: rgba(18, 42, 26, 0.36);

  /* Deep royal purple — less "Yahoo violet", more aubergine */
  --accent: #5b21b6;
  --accent-hover: #6d28d9;
  --accent-active: #4c1d95;
  --accent-soft: rgba(91, 33, 182, 0.10);

  /* Gold/yellow for deals — the "stop and look" colour */
  --deal: #ca8a04;
  --deal-hover: #eab308;
  --deal-soft: rgba(202, 138, 4, 0.12);
  --deal-soft-strong: rgba(202, 138, 4, 0.22);

  --success: #15803d;          /* deeper forest green */
  --warning: #b45309;          /* deeper amber */
  --error:   #b91c1c;          /* deeper red */

  /* Surface-tint helpers — subtle dark washes over light bg
     (replaces the rgba(255,255,255,X) hover/border tints from the
     dark theme). Use these for hover, active, and chip backgrounds. */
  --surface-tint-1: rgba(18, 42, 26, 0.04);
  --surface-tint-2: rgba(18, 42, 26, 0.07);
  --surface-tint-3: rgba(18, 42, 26, 0.10);
  --surface-tint-4: rgba(18, 42, 26, 0.14);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 999px;

  --shadow-sm: 0 1px 3px rgba(18, 42, 26, 0.08);
  --shadow-md: 0 6px 18px rgba(18, 42, 26, 0.12);
  --shadow-lg: 0 16px 40px rgba(18, 42, 26, 0.18);

  --font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;

  --t-fast: 0.12s ease;
  --t-base: 0.2s ease;
  --t-slow: 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  --header-h: 56px;
  --rail-w: 425px;
  --filter-bar-h: 57px; /* desktop filter toolbar height (kept visible above the wallet) */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font);
  background: var(--bg-base);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button { font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* ── Layout shell ─────────────────────────────────────────────────────────── */

#app {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.app-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
  gap: var(--space-3);
  z-index: 60;
}

.brand {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
  background: none;
  border: none;
  cursor: default;
  padding: 0;
  user-select: none;
}

.header-spacer { flex: 1; }

.header-link {
  color: var(--text-tertiary);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-md);
  transition: color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
}

.header-link:hover {
  color: var(--text-primary);
  background: rgba(18, 42, 26, 0.04);
}

/* Prominent header nav button (Map / Merchant) */
.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, rgba(91, 33, 182, 0.18), rgba(91, 33, 182, 0.08));
  color: var(--accent);
  border: 1px solid rgba(91, 33, 182, 0.35);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all var(--t-fast);
  white-space: nowrap;
  cursor: pointer;
}

.nav-pill:hover {
  background: linear-gradient(135deg, rgba(91, 33, 182, 0.28), rgba(91, 33, 182, 0.16));
  border-color: rgba(91, 33, 182, 0.55);
  transform: translateY(-1px);
}

.nav-pill:active { transform: translateY(0); }

.nav-pill .nav-pill-icon { font-size: 0.95rem; line-height: 1; }

/* City selector pill */
.city-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: var(--r-full);
  background: rgba(18, 42, 26, 0.05);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t-fast);
  white-space: nowrap;
  max-width: 200px;
}

.city-pill:hover {
  background: rgba(18, 42, 26, 0.08);
  color: var(--text-primary);
}

.city-pill-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 130px;
}

.city-pill-caret {
  font-size: 0.7rem;
  opacity: 0.6;
}

/* Wrapper anchors the menu directly under the city pill (not the viewport) */
.city-pill-wrap { position: relative; display: inline-flex; }

/* City menu dropdown (popover anchored under the pill) */
.city-menu {
  position: absolute;
  z-index: 100;
  top: calc(100% + 8px);
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  width: 280px;
  max-height: 60vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity var(--t-base), transform var(--t-base);
}

.city-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.city-menu-title {
  padding: var(--space-3) var(--space-4) var(--space-2);
  font-size: 0.72rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.city-menu-list { overflow-y: auto; }

.city-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--space-4);
  cursor: pointer;
  font-size: 0.9rem;
  transition: background var(--t-fast);
  border-bottom: 1px solid var(--border-subtle);
}

.city-item:hover { background: rgba(18, 42, 26, 0.05); }
.city-item.selected { background: var(--accent-soft); color: var(--accent); }
.city-item-check { margin-left: auto; opacity: 0.7; }

.city-menu-request {
  padding: 10px var(--space-4);
  color: var(--text-tertiary);
  text-decoration: none;
  font-size: 0.85rem;
  border-top: 1px solid var(--border-subtle);
  display: block;
  transition: background var(--t-fast), color var(--t-fast);
}

.city-menu-request:hover {
  background: rgba(18, 42, 26, 0.04);
  color: var(--accent);
}

/* Merchant page header label */
.merchant-label {
  color: var(--text-tertiary);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 4px 10px;
  background: rgba(18, 42, 26, 0.05);
  border-radius: var(--r-full);
}

/* Saved routes list (commuter mode) */
.saved-routes {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.saved-routes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
  font-size: 0.72rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.saved-route {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  background: rgba(18, 42, 26, 0.025);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
  margin-bottom: 5px;
}

.saved-route:hover {
  background: rgba(18, 42, 26, 0.05);
  border-color: var(--border-default);
}

.saved-route-icon {
  font-size: 0.9rem;
  opacity: 0.8;
}

.saved-route-body {
  flex: 1;
  min-width: 0;
}

.saved-route-name {
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.saved-route-meta {
  font-size: 0.74rem;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.saved-route-del {
  background: none;
  border: none;
  color: var(--text-quaternary);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--r-sm);
  font-size: 0.9rem;
  flex-shrink: 0;
  transition: color var(--t-fast), background var(--t-fast);
}

.saved-route-del:hover {
  background: rgba(239, 68, 68, 0.12);
  color: var(--error);
}

.upgrade-note {
  margin-top: var(--space-2);
  padding: 8px 10px;
  background: linear-gradient(135deg, rgba(202, 138, 4, 0.12), rgba(91, 33, 182, 0.08));
  border: 1px solid rgba(202, 138, 4, 0.25);
  border-radius: var(--r-md);
  font-size: 0.78rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.upgrade-note strong { color: var(--deal); font-weight: 600; }

/* Prompt modal (for naming a saved route) */
.prompt-modal-content {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xl);
  padding: var(--space-5);
  width: min(360px, 92vw);
  box-shadow: var(--shadow-lg);
}

.prompt-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.prompt-sub {
  font-size: 0.85rem;
  color: var(--text-tertiary);
  margin-bottom: var(--space-3);
}

.prompt-actions {
  display: flex;
  gap: 8px;
  margin-top: var(--space-3);
}

.prompt-actions .btn { flex: 1; }

/* ── Mode toggle ─────────────────────────────────────────────────────────── */

.mode-toggle {
  display: inline-flex;
  background: rgba(18, 42, 26, 0.06);
  border-radius: var(--r-full);
  padding: 3px;
  gap: 2px;
}

.mode-btn {
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  padding: 6px 16px;
  border-radius: var(--r-full);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all var(--t-fast);
  white-space: nowrap;
  text-decoration: none;   /* needed when an <a> uses this class */
  display: inline-block;
}

.mode-btn:hover { color: var(--text-secondary); }

.mode-btn.active {
  background: var(--accent);
  color: white;
}

/* Primary mode (Commute) — soft accent tint when inactive so it draws
   the eye as the app's main feature. Active state is the same blue fill. */
.mode-btn-primary:not(.active) {
  background: rgba(91, 33, 182, 0.15);
  color: var(--accent);
}

.mode-btn-primary:not(.active):hover {
  background: rgba(91, 33, 182, 0.22);
  color: var(--accent-hover);
}

/* Standalone mode button (not wrapped in .mode-toggle pill). Used when
   Commute/Explore are split across the header. Each gets its own pill.
   Both share the blue family — Commute (primary) is more saturated, Explore
   is a lighter tint, active state is solid blue for either. */
.mode-btn-pill {
  background: rgba(91, 33, 182, 0.08);
  color: rgba(91, 33, 182, 0.7);
  padding: 6px 14px;
}
.mode-btn-pill:hover {
  background: rgba(91, 33, 182, 0.16);
  color: var(--accent);
}
.mode-btn-pill.active {
  background: var(--accent);
  color: white;
}
.mode-btn-pill.active:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(91, 33, 182, 0.4);
}
.mode-btn-pill.active:active { transform: translateY(0); }
/* Primary mode (Commute) always reserves 1px border + 5/13 padding so the
   active ↔ inactive swap doesn't shift structure (no width jump = no flash). */
.mode-btn-pill.mode-btn-primary {
  border: 1px solid transparent;
  padding: 5px 13px;
}
.mode-btn-pill.mode-btn-primary:not(.active) {
  background: rgba(91, 33, 182, 0.18);
  color: var(--accent);
  border-color: rgba(91, 33, 182, 0.4);
}
.mode-btn-pill.mode-btn-primary:not(.active):hover {
  background: rgba(91, 33, 182, 0.32);
  border-color: rgba(91, 33, 182, 0.6);
  color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(91, 33, 182, 0.35);
}
.mode-btn-pill.mode-btn-primary:not(.active):active { transform: translateY(0); }

/* Wallet pill — golden accent, sits next to Merchant */
.mode-btn-wallet {
  border: 1px solid rgba(202, 138, 4, 0.35) !important;
  background: rgba(202, 138, 4, 0.12) !important;
  color: var(--deal) !important;
}
.mode-btn-wallet:hover {
  background: rgba(202, 138, 4, 0.22) !important;
  border-color: rgba(202, 138, 4, 0.55) !important;
}
.mode-btn-wallet.active {
  background: linear-gradient(135deg, #d97706, #b45309) !important;
  color: #fff !important;
  border-color: #92400e !important;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.35);
}

/* Header nav divider between consumer buttons (Places/Wallet) and Merchant */
.header-nav-divider {
  width: 1px;
  height: 22px;
  background: var(--border-color);
  margin: 0 4px;
  opacity: 0.6;
}
@media (max-width: 768px) {
  .header-nav-divider { display: none; }
}

/* Remove old circle wallet pill styles */
.wallet-pill { display: none; }

/* ── Icon button ─────────────────────────────────────────────────────────── */

.icon-btn {
  background: none;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  cursor: pointer;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  transition: background var(--t-fast), color var(--t-fast);
}

.icon-btn:hover {
  background: rgba(18, 42, 26, 0.06);
  color: var(--text-primary);
}

.icon-btn svg { width: 18px; height: 18px; }

/* ── Layout: left rail + right results panel ─────────────────────────────── */

#map { position: absolute; inset: 0; }

.maplibregl-ctrl-bottom-right { margin-bottom: 70px !important; }

.left-rail {
  position: absolute;
  top: var(--header-h);
  left: 0; bottom: 0;
  width: var(--rail-w);
  background: rgba(255, 255, 255, 0.97);
  border-right: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  z-index: 5;
  transition: transform var(--t-slow);
}

/* Rail toggle tab — sits on the right edge of the rail (or left edge of viewport
   when rail is hidden). Always visible and clickable on any viewport size. */
.rail-toggle {
  position: absolute;
  top: 50%;
  left: var(--rail-w);
  transform: translate(0, -50%);
  width: 26px;
  min-height: 90px;
  background: #f59e0b;   /* amber — deliberately not the purple accent so it pops */
  border: 1px solid #f59e0b;
  border-left: none;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: #1e293b;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: 20;
  transition: left var(--t-slow), background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
  padding: 8px 0;
  box-shadow: 2px 0 6px rgba(245, 158, 11, 0.35);
}
.rail-toggle:hover {
  background: #d97706;
  border-color: #d97706;
  color: white;
  box-shadow: 2px 0 10px rgba(245, 158, 11, 0.5);
}
.rail-toggle-arrow { font-size: 0.95rem; }
.rail-toggle-text  { font-size: 0.72rem; }
.rail-toggle-arrow {
  font-size: 1.1rem;
  line-height: 1;
  font-weight: 700;
}
.rail-toggle-text {
  /* Upright stacked letters (each rune stays horizontal, but they stack
     top-to-bottom) — much more readable than rotated text at small sizes. */
  writing-mode: vertical-lr;
  text-orientation: upright;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
  line-height: 1;
}

/* Hidden rail state */
.results-panel { transition: left var(--t-slow); }

body.rail-hidden .left-rail { transform: translateX(-100%); }
body.rail-hidden .results-panel { left: 0; }
body.rail-hidden .rail-toggle { left: 0; transform: translate(0, -50%); border-radius: 0 var(--r-md) var(--r-md) 0; }

.left-rail-section { display: flex; flex-direction: column; }

.saved-routes-section {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}
.section-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.saved-routes-label { margin-right: 2px; }

/* Explore + its GPS toggle sit together on the left of the section header. */
.explore-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.gps-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-full);
  background: rgba(18, 42, 26, 0.05);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  transition: all var(--t-fast);
}
.gps-toggle input { margin: 0; cursor: pointer; accent-color: var(--accent); }
.gps-toggle:has(input:checked) {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: rgba(91, 33, 182, 0.4);
}

.left-rail-label {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.count-pill {
  background: rgba(18, 42, 26, 0.06);
  border-radius: var(--r-full);
  padding: 2px 7px;
  font-size: 0.65rem;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.saved-routes-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.btn-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(18, 42, 26, 0.06);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  border-radius: var(--r-sm);
  padding: 0;
  width: 28px;
  height: 28px;
  min-width: 28px;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  text-align: center;
  transition: all var(--t-fast);
}
.btn-mini:hover:not(:disabled) { background: rgba(18, 42, 26, 0.12); color: var(--text-primary); }
.btn-mini:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-mini-danger:hover:not(:disabled) { background: rgba(239,68,68,0.15); color: var(--error); border-color: rgba(239,68,68,0.3); }
.btn-mini-clear {
  color: #e11d48;
  font-weight: 700;
  font-size: 0.8rem;
}
.btn-mini-clear:hover:not(:disabled) {
  background: rgba(225, 29, 72, 0.12);
  color: #be123c;
  border-color: rgba(225, 29, 72, 0.3);
}

.map-section {
  flex: 1;
  position: relative;
  min-height: 250px;
}

/* ── Results panel (right side, primary surface) ─────────────────────────── */

.results-panel {
  position: absolute;
  top: var(--header-h);
  left: var(--rail-w);
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-base);
  overflow: hidden;
}

.results-toolbar {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.route-toolbar {
  background: rgba(255, 255, 255, 0.92);
  gap: var(--space-3);
  align-items: flex-end;     /* labels + inputs align at bottom of each cell */
}

.toolbar-fields {
  display: flex;
  flex: 1 1 360px;
  min-width: 260px;
  gap: var(--space-2);
  align-items: flex-end;
}

.toolbar-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.toolbar-field-from,
.toolbar-field-to { flex: 1 1 140px; min-width: 110px; }

.toolbar-field-corridor { flex: 0 0 auto; }

/* Per-route on/off pills, populated only when >1 route is loaded. */
.results-count-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: space-between;
}
#route-toggles-filter {
  display: inline-flex;
}
#route-toggles-filter.hidden { display: none; }

/* Plan route button — accent pill, same size as Map/Places toggles */
.route-plan-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: var(--r-full);
  background: rgba(139, 92, 246, 0.18);
  color: #8b5cf6;
  border: 1px solid rgba(139, 92, 246, 0.25);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--t-fast);
}
.route-plan-btn:hover {
  background: rgba(139, 92, 246, 0.28);
  border-color: rgba(139, 92, 246, 0.40);
}
.route-toggles {
  display: flex;
  gap: 6px;
  align-items: center;
}
.route-toggles.hidden { display: none; }
.route-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-full);
  background: var(--bg-surface);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  user-select: none;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.route-toggle input { display: none; }
.route-toggle-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--rc, var(--accent));
  flex-shrink: 0;
}
.route-toggle.on {
  border-color: var(--rc, var(--accent));
  color: var(--text-primary);
  background: color-mix(in srgb, var(--rc, var(--accent)) 12%, var(--bg-surface));
}
.route-toggle.off { opacity: 0.55; }
.route-toggle.off .route-toggle-swatch { filter: grayscale(0.7); }
.route-toggle:hover { border-color: var(--rc, var(--accent)); }

.toolbar-label {
  font-size: 0.62rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  padding-left: 2px;
}

.toolbar-input {
  width: 100%;
  background: rgba(18, 42, 26, 0.05);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  color: var(--text-primary);
  padding: 7px 28px 7px 10px;   /* right padding for the X */
  font-size: 0.88rem;
  outline: none;
  transition: border-color var(--t-fast);
  font-family: inherit;
}
.toolbar-input:focus { border-color: var(--accent); background: rgba(18, 42, 26, 0.08); }
.toolbar-input::placeholder { color: var(--text-quaternary); }

/* Inline X clear button inside each input */
.input-with-clear {
  position: relative;
  display: flex;
  align-items: center;
}

/* Address typeahead dropdown — hangs under the From/To input */
.suggest-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  z-index: 40;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 0;
}
.suggest-dropdown.hidden { display: none; }
.suggest-item {
  padding: 6px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--t-fast);
}
.suggest-item:last-child { border-bottom: none; }
.suggest-item:hover,
.suggest-item.active { background: var(--surface-tint-2); }
.suggest-item-name {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.suggest-item-addr {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}
.input-clear-x {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(18, 42, 26, 0.08);
  border: none;
  border-radius: 50%;
  color: var(--text-quaternary);
  cursor: pointer;
  padding: 0;
  width: 18px;
  height: 18px;
  font-size: 0.7rem;
  line-height: 1;
  display: none;             /* JS toggles to inline-flex when input has value */
  align-items: center;
  justify-content: center;
  transition: color var(--t-fast), background var(--t-fast);
}
.input-clear-x:hover {
  background: rgba(239, 68, 68, 0.2);
  color: var(--error);
}
.input-clear-x.show { display: inline-flex; }

.toolbar-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-shrink: 0;
}

.route-toggles {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

/* Corridor slider — always visible, no popover toggle */
.corridor-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.corridor-slider-row input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
}
.corridor-slider-val {
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  min-width: 48px;
  text-align: right;
}

/* Temp search-result pin — blue, distinct from business markers,
   appears when the user searches an address via the 🔍 detour button. */
.map-marker-search {
  background: #3b82f6 !important;
  border-color: rgba(59, 130, 246, 0.5);
  color: white;
  font-size: 18px;
  width: 36px;
  height: 36px;
  line-height: 36px;
}
.map-marker-search::after,
.map-marker-search::before { display: none; }   /* no tooltip on search pins */
.explore-group { position: relative; display: flex; align-items: center; gap: 6px; }
.detour-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
  z-index: 20;
  min-width: 260px;
}
.detour-popover.hidden { display: none; }
.detour-popover .toolbar-input {
  width: 100%;
  height: 36px;
  font-size: 0.82rem;
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  padding: 0 10px;
  background: var(--bg-surface);
  color: var(--text-primary);
}
.detour-popover .suggest-dropdown {
  position: absolute;
  left: 8px;
  right: 8px;
  top: calc(100% - 4px);
  z-index: 21;
}
.filter-toolbar {
  background: rgba(255, 255, 255, 0.75);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  align-items: center;
}

.filter-toolbar.hidden { display: none; }

/* Inline search input + recents dropdown */
.inline-search {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(18, 42, 26, 0.05);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  height: 34px;
  padding: 0 8px 0 30px;
  min-width: 180px;
  flex: 0 1 240px;
}
.inline-search-icon {
  position: absolute;
  left: 10px;
  font-size: 0.85rem;
  pointer-events: none;
  color: var(--text-tertiary);
}
.inline-search input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 0.85rem;
  outline: none;
  min-width: 0;
  padding: 0;
}
.inline-search input::placeholder { color: var(--text-quaternary); }
.inline-search-clear {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 0 4px;
  font-size: 0.85rem;
}
.inline-search-clear:hover { color: var(--text-primary); }
.inline-search-clear.hidden { display: none; }

.inline-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
  z-index: 30;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px 0;
}
.inline-search-dropdown.hidden { display: none; }
.inline-search-section {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  padding: 6px 12px 4px;
}
.inline-search-empty {
  padding: 10px 12px;
  color: var(--text-tertiary);
  font-size: 0.82rem;
  font-style: italic;
}
.inline-search-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  cursor: pointer;
  transition: background var(--t-fast);
}
.inline-search-item:hover { background: rgba(18, 42, 26, 0.06); }
.inline-search-item-icon { font-size: 0.85rem; opacity: 0.7; }
.inline-search-item-text { flex: 1; color: var(--text-primary); font-size: 0.86rem; }
.inline-search-item-x {
  background: none;
  border: none;
  color: var(--text-quaternary);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 0.85rem;
}
.inline-search-item-x:hover { color: var(--text-primary); }
.inline-search-footer {
  border-top: 1px solid var(--border-subtle);
  padding: 6px 12px;
  text-align: right;
}
.inline-search-footer a {
  color: var(--accent);
  font-size: 0.78rem;
  text-decoration: none;
}
.inline-search-footer a:hover { text-decoration: underline; }

/* Inline results count sits at the far right of the filter row */
.results-count-inline {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
}

/* Mobile view toggle (cards/map) — hidden on desktop */
.mobile-view-toggle { display: none; }

/* Mobile-only collapsible tab above the route toolbar. Hidden on desktop. */
.mobile-route-tab { display: none; }

/* ── Results grid (the star) ─────────────────────────────────────────────── */

.results-grid {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4) var(--space-5);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  align-content: start;
}

/* When the map rail is hidden, use the reclaimed width for a 3rd column
   instead of stretching the existing 2 to card-fills-half-screen size. */
body.rail-hidden .results-grid { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1100px) {
  .results-grid,
  body.rail-hidden .results-grid { grid-template-columns: 1fr; }
}
@media (min-width: 1101px) and (max-width: 1500px) {
  /* At medium widths with the rail hidden, 3 cols is too cramped — stay at 2. */
  body.rail-hidden .results-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Result card (rebuilt — image hero or category-emoji hero) ───────────── */

.result-card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  display: flex;
  flex-direction: column;
  height: 280px;            /* fixed — every card same size */
}
.result-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-default);
  box-shadow: var(--shadow-md);
}
.result-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-md);
}
.result-card.has-deal { border-color: rgba(202, 138, 4, 0.32); }
.result-card.has-deal.selected { border-color: var(--deal); }

/* ─── Top row: business header ─── */
.card-business-row {
  display: flex;
  gap: 12px;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  align-items: flex-start;
  height: 110px;
  flex-shrink: 0;
}

.biz-logo {
  width: 54px;
  height: 54px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(18, 42, 26, 0.04);
  overflow: hidden;
}
.biz-logo-emoji {
  font-size: 1.8rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
.biz-logo-img { background: rgba(0,0,0,0.3); }
.biz-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.biz-logo.tier-1     { background-color: #ffba7a; }
.biz-logo.tier-2     { background-color: #ff8c42; }
.biz-logo.tier-3     { background-color: #e63946; }
.biz-logo.tier-gold  { background: radial-gradient(circle at 30% 30%, #fff5cc, #ffd700 55%, #d4a017); }
.biz-logo.tier-verified { background-color: rgba(91, 33, 182, 0.18); }

.biz-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.biz-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.biz-addr {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.biz-contact-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.biz-link {
  font-size: 0.78rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.biz-link:hover { text-decoration: underline; }
.biz-link-directions { color: var(--success); }

.biz-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.biz-actions-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.biz-action-directions {
  color: var(--success);
  transform: rotate(-45deg);
  font-size: 0.85rem;
}
.biz-action-directions:hover { color: var(--success); }

.biz-action-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  background: rgba(18, 42, 26, 0.05);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.biz-action-btn:hover {
  background: rgba(18, 42, 26, 0.12);
  color: var(--text-primary);
}

.result-tier-badge {
  background: rgba(202, 138, 4, 0.18);
  color: var(--deal);
  border-radius: var(--r-full);
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 700;
}

/* Super-tier "Premium" badge — visible-now signal that this merchant invested.
   Gold-on-purple gradient ties to the brand. */
.premium-badge {
  background: linear-gradient(135deg, #ca8a04, #5b21b6);
  color: #fff;
  border-radius: var(--r-full);
  padding: 2px 9px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 0 1px 2px rgba(91, 33, 182, 0.25);
  white-space: nowrap;
}

.result-fav {
  background: rgba(18, 42, 26, 0.05);
  border: 1px solid var(--border-subtle);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.result-fav:hover { background: rgba(18, 42, 26, 0.1); }
.result-fav.active { color: #e11d48; border-color: rgba(225,29,72,0.4); background: rgba(225,29,72,0.1); }

/* ─── Bottom row: item showcase / deal ─── */
.card-item-row {
  display: flex;
  gap: 12px;
  padding: var(--space-3) var(--space-4);
  align-items: center;
  flex: 1;
  min-height: 0;
}

.item-image {
  width: 88px;
  height: 88px;
  border-radius: var(--r-md);
  background: center/cover no-repeat;
  flex-shrink: 0;
  background-color: rgba(0,0,0,0.3);
}
.item-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

/* ── Card mini-image gallery (multi-image dot nav) ─────────────────────── */

.item-image-gallery {
  position: relative;
  overflow: hidden;
}

.item-image-slide {
  position: absolute;
  inset: 0;
  background: center/cover no-repeat;
  opacity: 0;
  transition: opacity 0.25s;
}

.item-image-slide.active { opacity: 1; }

.item-gallery-dots {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  z-index: 1;
}

.item-gallery-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  border: none;
  padding: 0;
  transition: background 0.2s;
}

.item-gallery-dot.active,
.item-gallery-dot:hover { background: #fff; }

.item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.item-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--deal);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.item-discount {
  font-size: 0.78rem;
  color: var(--deal);
  font-weight: 600;
}
.item-countdown {
  font-size: 0.74rem;
  color: var(--text-tertiary);
  font-weight: 500;
}
.item-countdown.urgent { color: var(--deal); font-weight: 600; }

.item-recurrence {
  font-size: 0.74rem;
  color: var(--accent);
  font-weight: 500;
}

.item-empty {
  flex: 1;
  text-align: center;
  color: var(--text-quaternary);
  font-size: 0.82rem;
  font-style: italic;
  padding: var(--space-3) 0;
}

.card-item-row .btn-deal.btn-sm {
  flex-shrink: 0;
  padding: 7px 14px;
  font-size: 0.82rem;
}

.item-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.deal-pager {
  display: flex;
  align-items: center;
  gap: 4px;
}
.deal-arrow {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  background: rgba(18, 42, 26, 0.04);
  color: var(--text-secondary);
  font-size: 0.7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.deal-arrow:hover {
  background: rgba(18, 42, 26, 0.12);
  color: var(--text-primary);
}
.deal-pager-count {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  font-weight: 600;
  min-width: 32px;
  text-align: center;
}

/* Mobile: hint that the row is swipeable */
.card-item-row { touch-action: pan-y; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--r-md);
  padding: 10px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast), opacity var(--t-fast);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
}

.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:disabled:active { transform: none; }

.btn-block { width: 100%; }

.btn-primary { background: var(--accent); color: white; }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }

.btn-secondary {
  background: rgba(18, 42, 26, 0.07);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
}
.btn-secondary:hover:not(:disabled) { background: rgba(18, 42, 26, 0.11); }

/* Header Sign-in button — amber accent so it stands out from every purple
   accent everywhere else in the app. */
#btn-auth-open {
  background: #f59e0b;
  color: #1e293b;
  border-color: #f59e0b;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
}
#btn-auth-open:hover:not(:disabled) {
  background: #d97706;
  border-color: #d97706;
  color: white;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.5);
}

.btn-deal {
  background: var(--deal);
  color: white;
}
.btn-deal:hover:not(:disabled) { background: var(--deal-hover); }

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover:not(:disabled) {
  background: rgba(18, 42, 26, 0.06);
  color: var(--text-primary);
}

.btn-sm { padding: 6px 12px; font-size: 0.8rem; }

.btn-row {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.btn-row .btn { flex: 1; }
.btn-row .btn-icon-only { flex: 0 0 auto; width: 42px; padding: 10px; }

/* ── Day picker chips (recurring deals) ─────────────────────────────────── */

.day-picker {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.day-chip {
  padding: 5px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-full);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 0.82rem;
  cursor: pointer;
  transition: all var(--t-fast);
  font-family: inherit;
}

.day-chip:hover { border-color: var(--accent); color: var(--text-primary); }
.day-chip.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.recurrence-config { margin-top: var(--space-3); }

/* In edit mode, the deal modal only edits text + linked product, so hide the
   expiry / recurrence / image sections that the PATCH endpoint doesn't touch. */
#deal-modal.editing .deal-edit-hide { display: none; }

/* ── Inputs ──────────────────────────────────────────────────────────────── */

.input-group {
  margin-bottom: var(--space-3);
  position: relative;
}

.input-group label {
  display: block;
  font-size: 0.72rem;
  color: var(--text-tertiary);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.input,
.input-group input,
.input-group textarea,
.input-group select {
  width: 100%;
  background: rgba(18, 42, 26, 0.05);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  color: var(--text-primary);
  padding: 10px 12px;
  font-size: 0.92rem;
  outline: none;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.input:focus,
.input-group input:focus,
.input-group textarea:focus,
.input-group select:focus {
  border-color: var(--accent);
  background: rgba(18, 42, 26, 0.07);
}

.input::placeholder,
.input-group input::placeholder,
.input-group textarea::placeholder {
  color: var(--text-quaternary);
}

.input-group textarea {
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
}

.input-error {
  color: var(--error);
  font-size: 0.78rem;
  margin-top: 4px;
}

.input-hint {
  color: var(--text-tertiary);
  font-size: 0.78rem;
  margin-top: 5px;
}

.select {
  background-color: rgba(18, 42, 26, 0.05);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  color: var(--text-primary);
  padding: 6px 24px 6px 10px;
  font-size: 0.82rem;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath fill='%23f1f5f9' d='M6 8L2 4h8z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px;
  flex-shrink: 0;
}

/* Native <option> dropdown: white surface, dark forest text */
.select option,
select option {
  background-color: #ffffff;
  color: #1b3324;
}

/* ── Radius slider ───────────────────────────────────────────────────────── */

.radius-control { margin-top: var(--space-2); }
.radius-control-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.radius-control-head label {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.radius-control-head strong {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
}

input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ── Filter bar ──────────────────────────────────────────────────────────── */

.filter-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-default);   /* separator from form above */
  border-bottom: 1px solid var(--border-subtle);
  margin: var(--space-3) 0;
}

/* Active search-filter chip — visible when a sticky search filter is applied */
.chip-search-filter {
  background: rgba(91, 33, 182, 0.18);
  color: var(--accent);
  border: 1px solid rgba(91, 33, 182, 0.4);
  padding: 4px 10px;
  border-radius: var(--r-full);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all var(--t-fast);
}
.chip-search-filter:hover {
  background: rgba(91, 33, 182, 0.28);
  border-color: rgba(91, 33, 182, 0.55);
}
.chip-search-filter-x {
  color: var(--text-tertiary);
  font-size: 0.85rem;
  margin-left: 2px;
}
.chip-search-filter:hover .chip-search-filter-x {
  color: var(--error);
}

/* Icon-only chip for the search button living in the filter row */
.chip-icon {
  background: rgba(18, 42, 26, 0.06);
  border: 1px solid transparent;
  color: var(--text-secondary);
  padding: 5px 11px;
  border-radius: var(--r-full);
  cursor: pointer;
  font-size: 0.88rem;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--t-fast);
  line-height: 1;
}
.chip-icon:hover {
  background: rgba(18, 42, 26, 0.12);
  color: var(--text-primary);
}

.filter-bar.hidden { display: none; }

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 0;
}

.filter-bar-sort {
  display: flex;
  justify-content: flex-end;
}

.chip {
  background: rgba(18, 42, 26, 0.06);
  border: 1px solid transparent;
  color: var(--text-secondary);
  padding: 5px 12px;
  border-radius: var(--r-full);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  transition: all var(--t-fast);
}

.chip:hover {
  background: rgba(18, 42, 26, 0.1);
  color: var(--text-primary);
}

.chip.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: rgba(91, 33, 182, 0.35);
}

.chip.active[data-filter="deals"] {
  background: var(--deal-soft);
  color: var(--deal);
  border-color: rgba(202, 138, 4, 0.4);
}

/* Category dropdown styled as a chip so it lives alongside All / Deals */
.chip-select {
  background: rgba(18, 42, 26, 0.06);
  border: 1px solid transparent;
  color: var(--text-secondary);
  height: 32px;
  padding: 0 26px 0 12px;
  border-radius: var(--r-full);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath fill='%23f1f5f9' d='M6 8L2 4h8z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px;
  outline: none;
  flex-shrink: 0;
  transition: all var(--t-fast);
}
.chip-select:hover {
  background-color: rgba(18, 42, 26, 0.1);
  color: var(--text-primary);
}
.chip-select.active {
  background-color: var(--accent-soft);
  color: var(--accent);
  border-color: rgba(91, 33, 182, 0.35);
}
.chip-select option {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
}

/* ── Category multi-select / toggle dropdown ──────────────────────────────── */

.category-dropdown-wrap {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

.category-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(18, 42, 26, 0.06);
  border: 1px solid transparent;
  color: var(--text-secondary);
  height: 32px;
  padding: 0 12px;
  border-radius: var(--r-full);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  outline: none;
  transition: all var(--t-fast);
}
.category-dropdown-toggle:hover {
  background-color: rgba(18, 42, 26, 0.1);
  color: var(--text-primary);
}
.category-dropdown-toggle.active {
  background-color: var(--accent-soft);
  color: var(--accent);
  border-color: rgba(91, 33, 182, 0.35);
}
.category-count-badge {
  background: var(--accent);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--r-full);
  line-height: 1.2;
}
.chip-caret {
  font-size: 0.75rem;
  opacity: 0.7;
}

.category-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 290px;
  max-width: 90vw;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  z-index: 60;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: dropdown-fade-in 0.15s ease-out;
}
@keyframes dropdown-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cat-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(18, 42, 26, 0.03);
}
.cat-menu-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
}
.cat-menu-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cat-action-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}
.cat-action-link:hover {
  color: #4c1d95;
}
.cat-action-sep {
  font-size: 0.7rem;
  color: var(--text-tertiary);
}

.cat-menu-search-wrap {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.cat-menu-search-input {
  width: 100%;
  padding: 6px 10px;
  font-size: 0.8rem;
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  outline: none;
  box-sizing: border-box;
}
.cat-menu-search-input:focus {
  border-color: var(--accent);
}

.cat-menu-groups {
  max-height: 300px;
  overflow-y: auto;
  padding: 4px 0;
}

.cat-group {
  border-bottom: 1px solid var(--border-subtle);
}
.cat-group:last-child {
  border-bottom: none;
}

.cat-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  transition: background var(--t-fast);
}
.cat-group-header:hover {
  background: rgba(18, 42, 26, 0.04);
}

.cat-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex: 1;
  user-select: none;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
}
.cat-checkbox-label input[type="checkbox"],
.cat-sub-item input[type="checkbox"] {
  cursor: pointer;
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  margin: 0;
}
.cat-group-icon {
  font-size: 0.95rem;
  line-height: 1;
}

.cat-group-expand {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 0.8rem;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: color var(--t-fast);
}
.cat-group-expand:hover {
  color: var(--text-primary);
  background: rgba(18, 42, 26, 0.08);
}

.cat-sub-list {
  background: rgba(18, 42, 26, 0.02);
  padding: 4px 8px 6px 28px;
  border-top: 1px dashed var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cat-sub-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 6px;
  border-radius: var(--r-sm);
  cursor: pointer;
  user-select: none;
  font-size: 0.78rem;
  color: var(--text-secondary);
  transition: background var(--t-fast), color var(--t-fast);
}
.cat-sub-item:hover {
  background: rgba(18, 42, 26, 0.06);
  color: var(--text-primary);
}
.cat-sub-icon {
  font-size: 0.85rem;
  line-height: 1;
}

/* Saved route select — compact pill, one-line with toggles */
#saved-routes-select {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 28px 6px 10px;
  color: var(--text-primary);
  border-color: var(--border-default);
  background-color: var(--bg-surface);
  max-width: 160px;
}
#saved-routes-select:hover {
  border-color: var(--accent);
  background-color: var(--bg-surface);
}
#saved-routes-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* City pill inside explore-group — expand to fill space */
.explore-group .city-pill-wrap {
  flex: 1;
}

/* Route controls row — saved route pill + toggles + panel button */
.route-controls-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  margin-bottom: 6px;
}

/* Toggle chips (Favorites / Deals Only) — sit in the filter toolbar */
.toggle-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(18, 42, 26, 0.05);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  border-radius: var(--r-full);
  height: 32px;
  padding: 0 12px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.toggle-chip:hover { background: rgba(18, 42, 26, 0.09); color: var(--text-primary); }
.toggle-chip-icon { font-size: 0.95rem; line-height: 1; }
/* While the Wallet is open the whole Saved Places list is already favorites,
   so the Favorites pill is redundant — gray it out and disable it. */
body.mobile-wallet-view .toggle-chip-favorites {
  opacity: 0.45;
  pointer-events: none;
}

.toggle-chip-favorites.active {
  background: rgba(225,29,72,0.15);
  border-color: rgba(225,29,72,0.5);
  color: #e11d48;
}

.toggle-chip-deals.active {
  background: rgba(202, 138, 4, 0.15);
  border-color: rgba(202, 138, 4, 0.5);
  color: var(--deal);
}

/* ── Results list ────────────────────────────────────────────────────────── */

.results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 8px;
}

.results-count {
  font-size: 0.92rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.results-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* ── Skeleton loading ────────────────────────────────────────────────────── */

.skeleton-card {
  background: rgba(18, 42, 26, 0.025);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--space-3) var(--space-4);
  display: flex;
  gap: var(--space-3);
}

.skeleton-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-body { flex: 1; }
.skeleton-line {
  height: 10px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.skeleton-icon,
.skeleton-line {
  background: linear-gradient(90deg,
    rgba(18, 42, 26, 0.04) 0%,
    rgba(18, 42, 26, 0.1) 50%,
    rgba(18, 42, 26, 0.04) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}

.skeleton-line.s1 { width: 70%; }
.skeleton-line.s2 { width: 45%; }

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Empty state ─────────────────────────────────────────────────────────── */

.empty-state {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--text-tertiary);
}

.empty-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-3);
  opacity: 0.6;
}

.empty-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.empty-sub {
  font-size: 0.85rem;
  color: var(--text-tertiary);
  max-width: 280px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ── Welcome / Intro guide (empty state) ─────────────────────────────────── */
.welcome-guide {
  padding: var(--space-6) var(--space-4);
  max-width: 480px;
  margin: 0 auto;
}
.welcome-head {
  text-align: center;
  margin-bottom: var(--space-5);
}
.welcome-eyebrow {
  font-size: 0.68rem;
  font-weight: 600;
  color: #d97706;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}
.welcome-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.welcome-sub {
  font-size: 0.9rem;
  color: var(--text-secondary);
  max-width: 420px;
  margin: 0 auto;
  line-height: 1.5;
}
.welcome-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.welcome-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
}
.welcome-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: var(--r-full);
  background: rgba(91, 33, 182, 0.12);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
  margin-top: 1px;
}
.welcome-step-content {
  flex: 1;
}
.welcome-step-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.welcome-step-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* ── Badges ──────────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: var(--r-full);
  font-weight: 600;
}

.badge-deal {
  background: var(--deal-soft);
  color: var(--deal);
}

.badge.hidden { display: none; }

/* ── FAB ─────────────────────────────────────────────────────────────────── */

.fab {
  position: absolute;
  bottom: 70px;
  right: 14px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 15;
  transition: transform var(--t-fast), background var(--t-fast);
}

.fab:hover { background: #1f2845; }
.fab:active { transform: scale(0.94); }

/* ── Search overlay ──────────────────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 18, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base);
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-overlay.hidden { display: none; }

.search-modal {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xl);
  width: min(560px, 92vw);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.search-input-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-default);
}

.search-input-wrap input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 0.98rem;
  padding: 6px 4px;
  outline: none;
}

.search-input-wrap input::placeholder { color: var(--text-quaternary); }

.search-icon {
  color: var(--text-tertiary);
  font-size: 1rem;
}

.search-body {
  overflow-y: auto;
  flex: 1;
}

.search-section-label {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  padding: var(--space-3) var(--space-4) 6px;
}

.search-section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: var(--space-4);
}
.search-section-row .search-section-label { padding-right: 0; }

.search-section-action {
  font-size: 0.74rem;
  color: var(--text-tertiary);
  text-decoration: none;
  cursor: pointer;
  font-weight: 500;
}
.search-section-action:hover { color: var(--accent); }

.search-result-remove {
  background: none;
  border: none;
  color: var(--text-quaternary);
  cursor: pointer;
  padding: 6px 10px;
  font-size: 0.85rem;
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
  flex-shrink: 0;
}
.search-result-remove:hover {
  color: var(--error);
  background: rgba(239, 68, 68, 0.1);
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-4);
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--t-fast);
}

.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: rgba(18, 42, 26, 0.04); }

.search-result-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(18, 42, 26, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.95rem;
}

.search-result-body { flex: 1; min-width: 0; }
.search-result-name {
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-result-meta {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.notif-unread {
  background: rgba(47, 125, 79, 0.06);
}

.search-empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--text-tertiary);
  font-size: 0.88rem;
}

.search-scope-banner {
  background: rgba(91, 33, 182, 0.12);
  color: var(--accent);
  padding: 8px var(--space-4);
  font-size: 0.78rem;
  font-weight: 600;
  border-bottom: 1px solid rgba(91, 33, 182, 0.25);
}

/* ── Autocomplete ────────────────────────────────────────────────────────── */

.autocomplete-wrap { position: relative; }

.autocomplete-list {
  position: absolute;
  top: calc(100% + 4px); left: 0; right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  z-index: 50;
  max-height: 240px;
  overflow-y: auto;
  display: none;
  box-shadow: var(--shadow-md);
}

.autocomplete-list.open { display: block; }

.autocomplete-item {
  padding: 9px 12px;
  cursor: pointer;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--t-fast);
}

.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover { background: rgba(18, 42, 26, 0.06); }

.autocomplete-item strong { display: block; margin-bottom: 2px; }
.autocomplete-item span {
  color: var(--text-tertiary);
  font-size: 0.78rem;
}

/* ── Map popup overrides ─────────────────────────────────────────────────── */

.maplibregl-popup-content {
  background: var(--bg-popup) !important;
  color: var(--text-primary) !important;
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--border-default) !important;
  padding: 0 !important;
  max-width: 300px;
  overflow: hidden;
  box-shadow: var(--shadow-lg) !important;
}

.maplibregl-popup-tip { display: none !important; }

.maplibregl-popup-close-button {
  color: var(--text-tertiary) !important;
  font-size: 1.2rem !important;
  padding: 6px 9px !important;
  right: 4px !important;
  top: 2px !important;
}

.popup {
  padding: 14px 16px;
}

.popup-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 8px;
}

.popup-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(18, 42, 26, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.popup.has-deal .popup-icon {
  background: var(--deal-soft-strong);
}

.popup-name {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 2px;
  padding-right: 18px;
}

.popup-cat {
  font-size: 0.72rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.popup-row {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 3px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.popup-row-icon { width: 14px; color: var(--text-tertiary); text-align: center; }

.popup-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.popup-link:hover { text-decoration: underline; }

.popup-deal {
  margin-top: 10px;
  background: var(--deal-soft);
  border-left: 3px solid var(--deal);
  padding: 9px 12px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.popup-deal-label {
  font-size: 0.68rem;
  color: var(--deal);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-bottom: 3px;
}

.popup-deal-text {
  font-size: 0.88rem;
  color: var(--deal);
  font-weight: 500;
  line-height: 1.35;
}

.popup-deal-countdown {
  margin-top: 5px;
  font-size: 0.72rem;
  color: var(--text-tertiary);
  font-weight: 500;
}

.popup-deal-countdown.urgent {
  color: var(--deal);
  font-weight: 600;
}

.popup-deal-recurrence {
  margin-top: 5px;
  font-size: 0.72rem;
  color: var(--accent);
  font-weight: 500;
}

.popup-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.popup-actions .btn { flex: 1; }

.popup-route-action { margin-top: 8px; }
.btn-route-through {
  display: block;
  width: 100%;
  padding: 6px 10px;
  font-size: 0.78rem;
  background: var(--bg-surface);
  border: 1px dashed var(--border-default);
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.btn-route-through:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Wallet notification badge ───────────────────────────────────────────── */
.wallet-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 10px;
  background: #dc2626;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
}
.mobile-view-pill { position: relative; }   /* anchor for badge */
#btn-wallet-desktop { position: relative; } /* anchor for the desktop badge */

/* ── QR Modal ────────────────────────────────────────────────────────────── */

.qr-modal-content {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xl);
  padding: var(--space-6);
  width: min(360px, 92vw);
  text-align: center;
  position: relative;
  box-shadow: var(--shadow-lg);
}

/* Merchant plan-picker modal (Pro / Super selection — stub until Stripe) */
.upgrade-modal-content {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xl);
  padding: var(--space-6);
  width: min(900px, 95vw);
  position: relative;
  box-shadow: var(--shadow-lg);
  max-height: 90vh;
  overflow-y: auto;
}
.upgrade-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.upgrade-sub {
  color: var(--text-tertiary);
  font-size: 0.9rem;
  margin-bottom: 16px;
}
.upgrade-pending {
  background: rgba(202, 138, 4, 0.10);
  border: 1px solid rgba(202, 138, 4, 0.30);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: 0.86rem;
  color: var(--text-secondary);
  margin-bottom: 18px;
  line-height: 1.5;
}
.upgrade-pending strong { color: var(--deal); display: block; margin-bottom: 2px; }
.upgrade-grid .pricing-card { padding-bottom: 14px; }
.upgrade-grid .btn-block { margin-top: 12px; }

/* Consumer auth modal */
.auth-modal-content {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xl);
  padding: var(--space-6);
  width: min(420px, 92vw);
  position: relative;
  box-shadow: var(--shadow-lg);
}

/* ── Route popup modal (mobile) ────────────────────────────────────────── */

.route-popup-content {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xl);
  padding: var(--space-5);
  width: min(400px, 92vw);
  position: relative;
  box-shadow: var(--shadow-lg);
}

.route-popup-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

.route-popup-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.route-popup-actions .btn { flex: 1; }

.auth-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.auth-sub {
  font-size: 0.86rem;
  color: var(--text-tertiary);
  margin-bottom: var(--space-4);
}
.auth-error {
  background: rgba(185, 28, 28, 0.10);
  border: 1px solid rgba(185, 28, 28, 0.30);
  color: var(--error);
  padding: 8px 12px;
  border-radius: var(--r-md);
  font-size: 0.85rem;
  margin: 4px 0 12px;
}
.auth-error.hidden { display: none; }
.auth-info {
  background: rgba(91, 33, 182, 0.08);
  border: 1px solid rgba(91, 33, 182, 0.28);
  color: var(--accent);
  padding: 8px 12px;
  border-radius: var(--r-md);
  font-size: 0.85rem;
  margin: 4px 0 12px;
}
.auth-info.hidden { display: none; }
.auth-forgot {
  text-align: center;
  margin-top: 12px;
  font-size: 0.82rem;
}
.auth-forgot a {
  color: var(--text-tertiary);
  text-decoration: none;
}
.auth-forgot a:hover { color: var(--accent); text-decoration: underline; }

/* Header user pill (signed-in state) */
.user-pill-wrap { position: relative; display: inline-flex; }
.user-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-soft);
  border: 1px solid rgba(91, 33, 182, 0.25);
  color: var(--accent);
  padding: 6px 12px;
  border-radius: var(--r-full);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  max-width: 200px;
  transition: background var(--t-fast);
}
.user-pill:hover { background: rgba(91, 33, 182, 0.18); }
.user-pill.hidden { display: none; }
.user-pill-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}
.user-pill-icon { font-size: 0.9rem; }
.user-pill-caret { font-size: 0.7rem; opacity: 0.7; }

/* Unverified email — subtle amber pulse on the pill so the user notices
   without an interruptive popup. Toggled via JS (user-pill.unverified). */
.user-pill.unverified,
body.welcome-active .mobile-view-pill[data-view="map"] {
  border-color: rgba(217, 119, 6, 0.55);
  animation: user-pill-verify-pulse 2.4s ease-in-out infinite;
}
@keyframes user-pill-verify-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0); }
  50%      { box-shadow: 0 0 7px 1px rgba(217, 119, 6, 0.4); }
}

.user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  min-width: 220px;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity var(--t-base), transform var(--t-base);
  overflow: hidden;
}
.user-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.user-menu-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.user-menu-email {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-menu-plan {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  margin-top: 2px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.user-menu-item {
  display: block;
  padding: 10px 14px;
  font-size: 0.86rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.user-menu-item:hover {
  background: rgba(18, 42, 26, 0.05);
  color: var(--text-primary);
}
.user-menu-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.user-menu-toggle input[type="checkbox"] {
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.user-menu-danger { color: var(--error, #b91c1c); }
.user-menu-danger:hover { background: rgba(185, 28, 28, 0.07); color: var(--error, #b91c1c); }

/* "My SideStops" menu item with a small unread-count badge. Layout has the
   badge floated to the right of the label. Hidden by default until JS shows it. */
#user-menu-dashboard {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.user-menu-badge {
  background: #e11d48;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
  line-height: 1.2;
}
.user-menu-badge.hidden { display: none; }

/* ── Dashboard hub (/dashboard.html) ─────────────────────────────────────── */

/* Three-tab picker at the top — big square buttons, lightly separated. Tap
   one to switch which panel shows below. Active tab is filled purple. */
.dash-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 16px;
}
.dash-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 4px;
  min-height: 64px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t-fast);
  color: var(--text-secondary);
}
.dash-tab:hover {
  border-color: var(--border-default);
  background: rgba(18, 42, 26, 0.02);
}
.dash-tab.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 2px 6px rgba(91, 33, 182, 0.28);
}
.dash-tab-icon { font-size: 1.35rem; line-height: 1; }
.dash-tab-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
}
.dash-tab-count {
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 0.85;
  background: rgba(0,0,0,0.08);
  padding: 1px 8px;
  border-radius: 999px;
  min-width: 20px;
  text-align: center;
}
.dash-tab.active .dash-tab-count { background: rgba(255,255,255,0.22); }
/* Saved Places heart icon — green to match the app's save/favorite color */
.dash-tab[data-tab="favorites"] .dash-tab-icon { color: #16a34a; }
.dash-tab[data-tab="favorites"].active .dash-tab-icon { color: #fff; }

.dash-panel { padding-top: 4px; }
.dash-panel.hidden { display: none; }
.dash-signed-out {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.95rem;
  padding: 40px 20px;
}

/* Wallet frame — the iframe on index.html that embeds /dashboard.html?embed=1.
   Slides in from the right when body.mobile-wallet-view is set. Off-screen
   otherwise; stays in the DOM so iframe state (tab selection, scroll pos)
   survives view switches.
   Height uses 100dvh (dynamic viewport height) so iOS Safari's collapsing
   URL bar doesn't push the iframe bottom below the visible viewport — which
   would clip the tail of the wallet content. 100vh fallback for older browsers. */
.wallet-frame {
  position: fixed;
  top: calc(var(--header-h) + 42px);
  left: 0; right: 0;
  width: 100%;
  height: calc(100vh - var(--header-h) - 42px);
  height: calc(100dvh - var(--header-h) - 42px);
  border: 0;
  background: var(--bg-base);
  z-index: 25;
  transform: translateX(100%);
  transition: transform var(--t-slow);
}
body.mobile-wallet-view .wallet-frame { transform: translateX(0); }

/* Desktop (≥901px): the wallet is a right-side panel that leaves the map
   column (left rail) visible. When the map column is hidden (rail-hidden),
   the wallet can use the full width.
   NOTE: the wallet is an <iframe> (a replaced element) — it does NOT stretch
   with `width:auto` + left/right, so we must use an explicit calc() width. */
@media (min-width: 901px) {
  .wallet-frame {
    /* Start below the filter toolbar so filters stay usable while the wallet
       is open. The +42px offset in the base rule is for the mobile toggle row
       (hidden on desktop). */
    top: calc(var(--header-h) + var(--filter-bar-h));
    height: calc(100vh - var(--header-h) - var(--filter-bar-h));
    height: calc(100dvh - var(--header-h) - var(--filter-bar-h));
    left: var(--rail-w);
    width: calc(100% - var(--rail-w));
  }
  body.rail-hidden .wallet-frame { left: 0; width: 100%; }
}

/* When the dashboard page is loaded inside the wallet iframe (?embed=1) it
   hides its own header + collapses padding so the tabs appear right at the
   top of the iframe. !important is needed because the mobile @media query
   at the bottom of the file uses shorthand `padding` which would otherwise
   win over a property-specific override here. */
body.dash-embed .about-header { display: none; }
body.dash-embed .about-main {
  padding: 0 16px 12px !important;
  max-width: none;
}
/* Keep the Coupons / Saved Places / Notifications tab row pinned to the top
   of the wallet iframe so it stays visible while the list below scrolls.
   No top padding — the iframe already sits flush below the Map/Places/Wallet
   row, so the tabs should touch it with no gap. */
body.dash-embed .dash-tabs {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-base);
  margin-bottom: 12px;
}
.dash-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Push notification settings card (Pro consumers) — sits above the
   notifications list in the Notifications tab. */
.dash-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 14px 16px;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.dash-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.dash-card-sub {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.dash-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.dash-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent, #5b21b6);
  background: var(--accent-soft, rgba(91, 33, 182, 0.12));
  border-radius: 999px;
  padding: 3px 10px;
}
.dash-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 0 2px;
}
.dash-section-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dash-coupon-timer {
  font-size: 0.78rem;
  font-weight: 700;
  color: #15803d;
  background: rgba(22, 163, 74, 0.12);
  border: 1px solid rgba(22, 163, 74, 0.25);
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.dash-item {
  display: block;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 12px 14px;
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.dash-item-active {
  border-left: 3px solid #16a34a;
}
.dash-item-past {
  opacity: 0.75;
  border-left: 3px solid var(--border-default);
}
.dash-item:hover {
  border-color: var(--border-default);
  background: rgba(18, 42, 26, 0.02);
}
.dash-item-title {
  font-size: 0.95rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.dash-item-time {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  font-weight: 500;
  flex-shrink: 0;
}
.dash-item-sub {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 3px;
}
.dash-item-name {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.dash-item-icon {
  flex-shrink: 0;
  margin-right: 6px;
}
/* Private custom places — "WP" label in a colored box to stand apart from
   favorited businesses (which use the plain category emoji). */
.dash-place-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 6px;
  border-radius: 6px;
  background: var(--accent-soft, rgba(91, 33, 182, 0.12));
  color: var(--accent, #5b21b6);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.dash-place-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 4px;
  margin-left: 6px;
  border-radius: 4px;
  background: var(--accent-soft, rgba(91, 33, 182, 0.12));
  color: var(--accent, #5b21b6);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
.dash-notif.unread {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
}
.dash-empty {
  padding: 16px;
  color: var(--text-tertiary);
  font-size: 0.88rem;
  font-style: italic;
  text-align: center;
  border: 1px dashed var(--border-subtle);
  border-radius: var(--r-md);
}
/* Saved Places rows — link + remove button side by side */
.dash-fav-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-fav-link {
  flex: 1;
  min-width: 0;
  display: block;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 12px 14px;
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.dash-fav-link:hover {
  border-color: var(--border-default);
  background: rgba(18, 42, 26, 0.02);
}
.dash-fav-remove {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-tertiary);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.dash-fav-remove:hover {
  color: var(--error, #b91c1c);
  border-color: var(--error, #b91c1c);
  background: rgba(185, 28, 28, 0.06);
}
/* Last-selected saved place — tinted so you remember which one you opened. */
.dash-fav-row.dash-fav-selected .dash-fav-link {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* Destructive primary in the custom dialog (used for Close account, etc.) */
.btn.btn-danger { background: var(--error, #b91c1c); color: white; border-color: var(--error, #b91c1c); }
.btn.btn-danger:hover:not(:disabled) { background: #991b1b; border-color: #991b1b; }

/* Header help (?) pill — links to /about.html */
.help-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.95rem;
  font-weight: 800;
  text-decoration: none;
  border: 1px solid rgba(91, 33, 182, 0.25);
  transition: background var(--t-fast), transform var(--t-fast);
  flex-shrink: 0;
}
.help-pill:hover {
  background: rgba(91, 33, 182, 0.20);
  transform: translateY(-1px);
}


.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast);
}

.modal-close:hover {
  background: rgba(18, 42, 26, 0.07);
  color: var(--text-primary);
}

.qr-biz {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.qr-deal {
  font-size: 0.85rem;
  color: var(--deal);
  background: var(--deal-soft);
  padding: 6px 10px;
  border-radius: var(--r-md);
  margin-bottom: var(--space-4);
}

.qr-img-wrap {
  background: white;
  padding: 14px;
  border-radius: var(--r-md);
  margin: 0 auto var(--space-4);
  display: inline-block;
}

.qr-img-wrap img {
  display: block;
  width: 240px;
  height: 240px;
}

.qr-sub {
  color: var(--text-tertiary);
  font-size: 0.82rem;
  line-height: 1.4;
  margin-bottom: 10px;
}

.qr-countdown {
  font-size: 0.82rem;
  color: var(--text-tertiary);
  font-weight: 500;
  margin-bottom: var(--space-4);
}

.qr-countdown.urgent { color: var(--deal); font-weight: 600; }

/* ── Toasts ──────────────────────────────────────────────────────────────── */

.toast-stack {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 200;
  pointer-events: none;
  width: min(420px, 92vw);
}

.toast {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
  pointer-events: auto;
  animation: toast-in 0.25s ease;
  transition: opacity var(--t-base), transform var(--t-base);
}

.toast.leaving {
  opacity: 0;
  transform: translateY(-8px);
}

.toast-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.toast-success { border-left: 3px solid var(--success); }
.toast-success .toast-icon { background: rgba(34,197,94,0.18); color: var(--success); }

.toast-error { border-left: 3px solid var(--error); }
.toast-error .toast-icon { background: rgba(239,68,68,0.18); color: var(--error); }

.toast-info { border-left: 3px solid var(--accent); }
.toast-info .toast-icon { background: var(--accent-soft); color: var(--accent); }

.toast-warning { border-left: 3px solid var(--warning); }
.toast-warning .toast-icon { background: rgba(245,158,11,0.18); color: var(--warning); }

.toast-body { flex: 1; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Email Verification Modal ──────────────────────────────────────────── */

.verification-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31, 64, 47, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: 20px;
}

.verification-modal-content {
  background: var(--bg-surface);
  border-radius: 12px;
  padding: 32px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
  position: relative;
}

.verification-modal-icon {
  font-size: 3rem;
  margin-bottom: 16px;
}

.verification-modal-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.verification-modal-message {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 24px;
}

.verification-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.verification-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 1.2rem;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}

.verification-modal-close:hover {
  background: var(--surface-tint-2);
  color: var(--text-primary);
}

@media (max-width: 600px) {
  .verification-modal-content {
    padding: 24px;
  }
  
  .verification-modal-title {
    font-size: 1.2rem;
  }
  
  .verification-modal-actions {
    flex-direction: column;
  }
  
  .verification-modal-actions .btn {
    width: 100%;
  }
}

/* ── Merchant page ───────────────────────────────────────────────────────── */

.merchant-shell {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  background: var(--bg-base);
}

.merchant-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: calc(var(--header-h) + var(--space-5)) var(--space-4) var(--space-10);
}

.merchant-hero {
  text-align: center;
  padding: var(--space-6) var(--space-2) var(--space-5);
}

.merchant-hero h1 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.merchant-hero p {
  color: var(--text-tertiary);
  font-size: 0.95rem;
  max-width: 460px;
  margin: 0 auto;
  line-height: 1.5;
}

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  gap: var(--space-2);
}

.card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.card-sub {
  font-size: 0.85rem;
  color: var(--text-tertiary);
  margin-top: -8px;
  margin-bottom: var(--space-4);
}

.biz-summary {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  background: rgba(18, 42, 26, 0.025);
  border-radius: var(--r-md);
  border: 1px solid var(--border-subtle);
}

.biz-summary-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.biz-summary-body { flex: 1; }
.biz-summary-name { font-size: 1.02rem; font-weight: 700; }
.biz-summary-meta { font-size: 0.82rem; color: var(--text-tertiary); margin-top: 2px; }
.biz-summary-id {
  font-size: 0.72rem;
  color: var(--text-quaternary);
  margin-top: 4px;
  font-family: 'SF Mono', Monaco, 'Roboto Mono', monospace;
}

.deal-active-card {
  background: var(--deal-soft);
  border: 1px solid rgba(202, 138, 4, 0.25);
  border-radius: var(--r-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

.deal-active-label {
  font-size: 0.68rem;
  color: var(--deal);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-bottom: 5px;
}

.deal-active-text {
  font-size: 0.95rem;
  color: var(--deal);
  font-weight: 500;
  line-height: 1.4;
}

.deal-active-meta {
  display: flex;
  gap: var(--space-3);
  font-size: 0.78rem;
  color: var(--text-tertiary);
  margin-top: 8px;
  flex-wrap: wrap;
}

.deal-active-meta strong { color: var(--text-secondary); }

.scanner-frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #000;
  margin-bottom: var(--space-3);
}

#scanner-video {
  width: 100%;
  display: block;
}

#scanner-canvas { display: none; }

.scanner-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-4);
  color: var(--text-tertiary);
}

.scanner-placeholder-icon {
  font-size: 3rem;
  margin-bottom: var(--space-2);
  opacity: 0.5;
}

.scan-result {
  margin-top: var(--space-3);
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: 0.9rem;
  font-weight: 500;
  display: none;
}

.scan-result.show { display: block; }
.scan-result.ok { background: rgba(34,197,94,0.15); color: var(--success); border-left: 3px solid var(--success); }
.scan-result.err { background: rgba(239,68,68,0.15); color: var(--error); border-left: 3px solid var(--error); }

.geocode-status {
  font-size: 0.85rem;
  margin-top: var(--space-2);
  padding: 8px 12px;
  border-radius: var(--r-md);
  display: none;
}

.geocode-status.show { display: block; }
.geocode-status.ok { background: rgba(34,197,94,0.12); color: var(--success); }
.geocode-status.err { background: rgba(239,68,68,0.12); color: var(--error); }

/* ── Merchant auth / dashboard ───────────────────────────────────────────── */

.auth-card {
  max-width: 460px;
  margin: 32px auto 0;
}

.auth-card h2 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.auth-tabs {
  display: flex;
  background: rgba(18, 42, 26, 0.05);
  border-radius: var(--r-md);
  padding: 4px;
  margin: var(--space-4) 0;
  gap: 2px;
}

.auth-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast);
}

.auth-tab:hover { color: var(--text-primary); }
.auth-tab.active { background: var(--accent); color: white; }

.dashboard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding: 0 var(--space-2);
  gap: var(--space-3);
}

.merchant-tabs {
  display: flex;
  gap: 6px;
  padding: 0 var(--space-2);
  margin-bottom: var(--space-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.merchant-tabs::-webkit-scrollbar { display: none; }

.merchant-tab {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-tertiary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.merchant-tab.active {
  background: rgba(47, 125, 79, 0.1);
  border-color: var(--accent, #2f7d4f);
  color: var(--accent, #2f7d4f);
}

.merchant-tab-panel { padding: 0 var(--space-2); }

.dashboard-head-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.notif-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent, #2f7d4f);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  margin-left: 4px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-tertiary);
  font-size: 0.8rem;
  margin: var(--space-3) 0;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(18, 42, 26, 0.12);
}

.dashboard-greeting {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.dashboard-email {
  font-size: 0.82rem;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.plan-badge {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.7rem;
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.plan-badge.free  { background: rgba(18, 42, 26, 0.08); color: var(--text-secondary); }
.plan-badge.pro   { background: rgba(91, 33, 182, 0.18); color: var(--accent); }
.plan-badge.super { background: linear-gradient(135deg, rgba(202, 138, 4, 0.22), rgba(91, 33, 182, 0.18)); color: var(--deal); }

.claim-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border-subtle);
}
.claim-row:last-child { border-bottom: none; }

.claim-row-body { flex: 1; min-width: 0; }
.claim-row-title { font-weight: 600; font-size: 0.95rem; }
.claim-row-meta  { font-size: 0.78rem; color: var(--text-tertiary); margin-top: 2px; }
.claim-row-note  { font-size: 0.78rem; color: var(--text-secondary); margin-top: 5px; font-style: italic; }

.claim-row-status {
  font-size: 0.68rem;
  padding: 3px 8px;
  border-radius: var(--r-full);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  white-space: nowrap;
}
.claim-row-status.pending  { background: rgba(245,158,11,0.18); color: var(--warning); }
.claim-row-status.approved { background: rgba(34,197,94,0.18);  color: var(--success); }
.claim-row-status.rejected { background: rgba(239,68,68,0.18);  color: var(--error); }

.claim-row-cancel {
  background: none;
  border: 1px solid var(--border-default);
  color: var(--text-tertiary);
  padding: 4px 10px;
  font-size: 0.75rem;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t-fast);
}
.claim-row-cancel:hover { color: var(--error); border-color: rgba(239,68,68,0.4); }

.biz-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border-subtle);
}
.biz-tile:last-child { border-bottom: none; }

.biz-tile-clickable { cursor: pointer; transition: background var(--t-fast); }
.biz-tile-clickable:hover { background: rgba(18, 42, 26, 0.025); }

.biz-tile-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(91, 33, 182, 0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.biz-tile-body { flex: 1; min-width: 0; }
.biz-tile-name { font-weight: 600; font-size: 0.95rem; }
.biz-tile-meta { font-size: 0.78rem; color: var(--text-tertiary); margin-top: 2px; }

.biz-tile-counts {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.biz-tile-counts strong { color: var(--text-secondary); }

.biz-expand-icon {
  font-size: 0.85rem;
  color: var(--text-tertiary);
  transition: transform var(--t-base);
  flex-shrink: 0;
}
.biz-manage.open .biz-expand-icon { transform: rotate(180deg); }

.biz-manage-body {
  display: none;
  padding: 12px 4px 4px;
  border-bottom: 1px solid var(--border-subtle);
}
.biz-manage.open .biz-manage-body { display: block; }

.manage-section { margin-bottom: var(--space-4); }
.manage-section:last-child { margin-bottom: 0; }

/* Per-business stats — small grid of numbers + 7-day click sparkline */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.stat-tile {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 12px 14px;
  text-align: center;
}
.stat-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.stat-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-top: 4px;
}
.spark-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.spark-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}
.sparkline {
  display: flex;
  align-items: flex-end;
  height: 50px;
  gap: 4px;
}
.spark-bar {
  flex: 1;
  background: linear-gradient(to top, var(--accent), var(--accent-hover));
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  transition: opacity var(--t-fast);
}
.spark-bar:hover { opacity: 0.7; }

.manage-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 8px;
}

.manage-section-title {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.product-row, .deal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.product-row:last-child, .deal-row:last-child { border-bottom: none; }

.product-row-body, .deal-row-body { flex: 1; min-width: 0; }
.product-row-name, .deal-row-title { font-weight: 600; font-size: 0.92rem; }
.product-row-meta, .deal-row-meta { font-size: 0.76rem; color: var(--text-tertiary); margin-top: 2px; }
.product-row-price { font-size: 0.85rem; color: var(--accent); font-weight: 600; }

.deal-row-status {
  font-size: 0.68rem;
  padding: 3px 8px;
  border-radius: var(--r-full);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.deal-row-status.live { background: var(--deal-soft); color: var(--deal); }
.deal-row-status.ended { background: rgba(18, 42, 26, 0.08); color: var(--text-tertiary); }
.deal-row-status.hidden { background: rgba(120, 120, 120, 0.12); color: var(--text-tertiary); }

.row-action-btn {
  background: none;
  border: 1px solid var(--border-default);
  color: var(--text-tertiary);
  padding: 4px 10px;
  font-size: 0.75rem;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t-fast);
}
.row-action-btn:hover { color: var(--error); border-color: rgba(239,68,68,0.4); }

.empty-mini {
  font-size: 0.85rem;
  color: var(--text-tertiary);
  padding: 10px 0;
  text-align: center;
}

/* Gated control — clearly disabled-looking but still clickable to surface the
   upgrade toast. Used for image upload on free tier. */
.btn-gated {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.35);
}
.btn-gated:hover {
  opacity: 0.65;
}

/* Image upload preview */
.image-preview {
  position: relative;
  margin-top: 8px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-default);
  max-width: 280px;
}

.image-preview img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: cover;
}

.image-preview-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.65);
  color: white;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast);
}
.image-preview-remove:hover { background: var(--error); }

/* ── Multi-image gallery grid (merchant dashboard) ──────────────────────── */

.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
  min-height: 0;
}

.image-gallery:empty { display: none; }

.image-gallery-item {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid var(--border-subtle);
  flex-shrink: 0;
}

.image-gallery-item:first-child {
  border-color: var(--accent, #007bff);
}

.image-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.image-gallery-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 2px;
  background: rgba(0,0,0,0.55);
  padding: 2px 0;
}

.img-act {
  background: none;
  border: none;
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.4;
  opacity: 0.85;
}

.img-act:hover { opacity: 1; background: rgba(255,255,255,0.15); }
.img-act.active { color: gold; opacity: 1; }
.img-remove:hover { color: #ff6b6b; }

.image-count {
  font-weight: 400;
  font-size: 0.85em;
  color: var(--text-quaternary);
}

/* Checkbox row used in modals */
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(18, 42, 26, 0.025);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  cursor: pointer;
  margin-bottom: var(--space-3);
}
.checkbox-row:hover { background: rgba(18, 42, 26, 0.05); }
.checkbox-row input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--accent);
  cursor: pointer;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.checkbox-row span { font-size: 0.88rem; color: var(--text-secondary); }
.checkbox-row strong { color: var(--text-primary); font-weight: 600; }

/* "Featured on map" badge inside product rows */
.featured-flag {
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: var(--r-full);
  background: rgba(91, 33, 182, 0.2);
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: 6px;
}

/* Popup image */
.popup-image {
  margin: -14px -16px 10px;
  height: 140px;
  background: rgba(0,0,0,0.4) center/cover no-repeat;
  border-bottom: 1px solid var(--border-subtle);
}

/* ── Multi-image gallery carousel (consumer popup) ──────────────────────── */

.popup-gallery {
  position: relative;
  margin: -14px -16px 10px;
  height: 180px;
  overflow: hidden;
  background: rgba(0,0,0,0.4);
}

.popup-gallery-slide {
  position: absolute;
  inset: 0;
  background: center/cover no-repeat;
  opacity: 0;
  transition: opacity 0.3s;
}

.popup-gallery-slide.active { opacity: 1; }

.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.45);
  color: #fff;
  border: none;
  font-size: 22px;
  line-height: 1;
  width: 28px;
  height: 44px;
  cursor: pointer;
  z-index: 2;
  padding: 0;
}

.gallery-prev { left: 0; border-radius: 0 4px 4px 0; }
.gallery-next { right: 0; border-radius: 4px 0 0 4px; }
.gallery-arrow:hover { background: rgba(0,0,0,0.65); }

.gallery-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}

.gallery-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  cursor: pointer;
  border: none;
  padding: 0;
  transition: background 0.2s;
}

.gallery-dot.active,
.gallery-dot:hover { background: #fff; }

/* ── HTML map markers ────────────────────────────────────────────────────── */

/* Outer wrapper — MapLibre positions this. Raised above peers on hover so
   the tooltip + scaled pin aren't covered by nearby markers. */
.marker-wrap:hover { z-index: 100 !important; }

.map-marker {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  /* Default (unclaimed/no-deal) — subtle so real deals stand out */
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid rgba(18, 42, 26, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(18, 42, 26, 0.18);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.map-marker:hover {
  transform: scale(1.18);
  z-index: 10;
  box-shadow: 0 2px 8px rgba(18, 42, 26, 0.35);
}

.map-marker.verified {
  background: rgba(91, 33, 182, 0.15);
  border-color: rgba(91, 33, 182, 0.55);
}

.map-marker.has-deal {
  background: var(--deal);
  border-color: rgba(202, 138, 4, 0.35);
  animation: deal-pulse 2.4s ease-in-out infinite;
}

/* Deal-count tier coloring — overrides the default has-deal background.
   1-2 deals = pale gold, 3-5 = gold, 6-10 = deep gold, 11+ = shining gold. */
.map-marker.tier-1   { background: #f5d67a; border-color: rgba(202, 138, 4, 0.35); }
.map-marker.tier-2   { background: #eab308; border-color: rgba(202, 138, 4, 0.55); }
.map-marker.tier-3   { background: #ca8a04; border-color: rgba(180, 83, 9, 0.7); color: #fff; }
.map-marker.tier-gold {
  background: radial-gradient(circle at 30% 30%, #fff5cc, #eab308 55%, #ca8a04);
  border-color: #ffffff;
  box-shadow: 0 2px 6px rgba(202, 138, 4, 0.55), 0 0 12px rgba(234, 179, 8, 0.6);
  animation: gold-shine 3s ease-in-out infinite;
  color: #fff;
}

@keyframes gold-shine {
  0%, 100% { box-shadow: 0 2px 6px rgba(202, 138, 4, 0.4), 0 0 10px rgba(234, 179, 8, 0.5); }
  50%      { box-shadow: 0 2px 6px rgba(202, 138, 4, 0.4), 0 0 18px rgba(234, 179, 8, 0.9); }
}

.map-marker.selected {
  border-color: #ffffff;
  border-width: 3px;
  transform: scale(1.2);
  z-index: 1000 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.6);
  filter: drop-shadow(0 0 8px var(--accent));
  animation: pulse 2s ease-in-out infinite;
}

.map-marker.selected:hover { transform: scale(1.3); }

/* Search marker (waypoint find) — blue tint, always glowing */
.map-marker.search-marker {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.6);
}
.map-marker.search-marker.selected {
  border-color: #ffffff;
  border-width: 3px;
  transform: scale(1.2);
  z-index: 1000 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.6);
  filter: drop-shadow(0 0 8px #3b82f6);
  animation: search-pulse 2s ease-in-out infinite;
}
@keyframes search-pulse {
  0%, 100% {
    transform: scale(1.2);
    filter: drop-shadow(0 0 8px #3b82f6);
  }
  50% {
    transform: scale(1.3);
    filter: drop-shadow(0 0 14px #3b82f6);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1.2);
    filter: drop-shadow(0 0 8px var(--accent));
  }
  50% {
    transform: scale(1.3);
    filter: drop-shadow(0 0 12px var(--accent));
  }
}

/* Paid-tier merchants with an uploaded logo: pin becomes the logo, no
   background tint or emoji. Slightly larger than the emoji pin so the brand
   reads at a glance, with a crisp white ring so it stands out on any basemap. */
.map-marker.has-logo {
  width: 38px;
  height: 38px;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(18, 42, 26, 0.35);
}
.map-marker-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
/* When a logo-pin also has a deal, keep the amber ring so users still see
   "there's a deal here" at a glance without losing the logo. */
.map-marker.has-logo.has-deal { border-color: #f59e0b; }
.map-marker.has-logo.tier-gold { border-color: #eab308; box-shadow: 0 2px 6px rgba(202, 138, 4, 0.55), 0 0 12px rgba(234, 179, 8, 0.6); }

/* Hover tooltip above marker — only renders when data-name is present
   (set by renderMarkers for route-loaded mode). Without [data-name] gating
   the ::after pseudo-element renders an empty white bubble. */
.map-marker[data-name]::after {
  content: attr(data-name);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.98);
  color: var(--text-primary);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  border: 1px solid rgba(18, 42, 26, 0.1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-marker[data-name]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.96);
  opacity: 0;
  transition: opacity 0.12s;
  pointer-events: none;
}

.map-marker[data-name]:hover::after,
.map-marker[data-name]:hover::before { opacity: 1; }

@keyframes deal-pulse {
  0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,0.45), 0 0 0 0 rgba(202, 138, 4, 0.55); }
  50%      { box-shadow: 0 2px 6px rgba(0,0,0,0.45), 0 0 0 10px rgba(202, 138, 4, 0); }
}

/* Origin / destination markers — A green, B red. Larger and on top of biz pins. */
.endpoint-marker {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(0,0,0,0.55);
  z-index: 50;
  position: relative;
}
.endpoint-start { background: #22c55e; }   /* origin */
.endpoint-end   { background: #ef4444; }   /* destination */

.usage-meta {
  display: inline-block;
  font-size: 0.78rem;
  color: var(--text-tertiary);
  vertical-align: middle;
}

.usage-meta strong { color: var(--text-secondary); }

/* ── Stats grid ──────────────────────────────────────────────────────────── */

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.stat-box {
  background: rgba(18, 42, 26, 0.025);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: var(--space-3) var(--space-4);
}

.stat-label {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.stat-value.deal { color: var(--deal); }

/* ── Narrow header ───────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .brand { display: none; }
  .city-pill-name { max-width: 90px; }
}

@media (max-width: 500px) {
  .app-header {
    padding: 0 10px;
    gap: 8px;
    /* Anchor to the viewport, not the #app container. iOS Safari can end up
       scrolled after a keyboard shows/hides — an absolutely-positioned header
       would scroll off the top with the page. Fixed keeps it pinned. */
    position: fixed;
  }
  /* Slimmer header on mobile — this CSS var flows through to every
     `top: var(--header-h)` reference (results-panel, left-rail, sticky pills). */
  .mode-btn-wallet { display: none; }
  :root { --header-h: 48px; }
  .city-pill-name { display: none; }
  .mode-btn { padding: 5px 11px; font-size: 0.78rem; }
  .nav-pill { padding: 6px 11px; }
}

/* ── Mobile layout — stack everything, map as overlay ───────────────────── */

@media (max-width: 900px) {
  /* Left rail collapses — saved routes selector becomes inline in results, map is full-screen overlay */
  .left-rail {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0; bottom: 0;
    width: 100%;
    z-index: 30;
    background: var(--bg-base);
    transform: translateX(-100%);
    transition: transform var(--t-slow);
  }
  .left-rail.show-mobile { transform: translateX(0); }

  /* Push results-panel + left-rail down by the height of the sticky Cards/Map
     toggle (~46px including padding + border-bottom) so it doesn't cover the
     top of either container. Prevents the .mobile-route-tab from hiding a few
     pixels behind the toggle. */
  .results-panel { left: 0; top: calc(var(--header-h) + 42px); }
  .left-rail { top: calc(var(--header-h) + 42px); }

  /* Cards/Map toggle: pinned right below the header row, stays above the
     fullscreen map overlay so users can always switch back to Cards. */
  .mobile-view-toggle {
    display: flex !important;
    gap: 6px;
    padding: 5px var(--space-3);
    background: var(--bg-base);
    border-bottom: 1px solid var(--border-subtle);
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: 40;
  }
  /* Second row (view toggles) uses the amber family — visually distinct from
     the purple header pills (Commute / Merchant / About / user pill).
     Purple = app-level nav; amber = view toggles within the app. Matches the
     rail-toggle and mobile-route-tab which are also amber. */
  .mobile-view-pill {
    flex: 1;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.38);
    color: #b45309;
    padding: 5px 6px;
    border-radius: var(--r-full);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    transition: all var(--t-fast);
    text-align: center;
    white-space: nowrap;
  }
  .mobile-view-pill-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }
  .mobile-view-pill.active {
    background: #d97706;
    color: white;
    border-color: #d97706;
  }

  /* Map view: hide Places-view content, show the rail (which now also
     contains the route toolbar + its toggle above the saved-routes row). */
  body.mobile-map-view .results-grid,
  body.mobile-map-view .results-header,
  body.mobile-map-view .filter-toolbar,
  body.mobile-map-view .mobile-search-row,
  body.mobile-map-view .ads-ticker { display: none; }
  body.mobile-map-view .left-rail { transform: translateX(0); }

  /* Wallet view: hide Places-view content. The route toolbar lives inside
     .left-rail now, which is naturally offscreen when neither map nor
     wallet view is active (well, wallet slides in its own overlay above). */
  body.mobile-wallet-view .results-grid,
  body.mobile-wallet-view .results-header,
  body.mobile-wallet-view .filter-toolbar,
  body.mobile-wallet-view .mobile-search-row,
  body.mobile-wallet-view .ads-ticker { display: none; }

  /* Header tweaks */
  .results-grid { padding: var(--space-3); }

  .toast-stack { top: 64px; }

  /* ── Header: Sign in matches Commute/Merchant height ── */
  #btn-auth-open {
    padding: 7px 14px;
    font-size: 0.86rem;
    min-height: 0;
    border-radius: var(--r-full);
  }

  /* ── Hide the desktop rail-toggle tab on mobile — the Cards/Map pill
     serves the same purpose and the tab was ambiguous anyway. ── */
  .rail-toggle { display: none; }

  /* ── Route toolbar reflow ──
     Row 1: From (full width)
     Row 2: To (full width)
     Row 3: Find route (full width side-to-side)
     Row 4: Corridor + Route 1 + Route 2 + Update route + Save
     Row 5: Search input (full width so autofill dropdown has room)
     Uses display:contents so all children become direct flex items of the
     toolbar and can be ordered together across the two wrappers. */
  .route-toolbar { flex-wrap: wrap; gap: 8px; padding: 10px var(--space-3); }
  .toolbar-fields { display: contents; }
  .toolbar-actions { display: contents; }
  .toolbar-field-from { order: 1; flex: 1 1 100%; min-width: 0; }
  .toolbar-field-to   { order: 2; flex: 1 1 100%; min-width: 0; }
  #btn-route { order: 3; flex: 1 1 100%; padding: 5px 12px; font-size: 0.88rem; min-height: 30px; }
  .toolbar-field-corridor { order: 4; flex: 0 0 auto; }
  .route-toggles { order: 5; display: flex; gap: 6px; flex-wrap: wrap; }
  #btn-save-commute   { order: 7; }
  /* The "SAVED 3/5" label sits to the RIGHT of the Save (💾) button. Without
     an explicit order it defaulted to 0 and appeared before every other item. */
  #route-toolbar .saved-routes-label { order: 8; }
  /* Route toggle pills — Route 1 / Route 2 etc. */
  .route-toggle { padding: 5px 9px; font-size: 0.76rem; }
  /* Save button stays compact on the row. */
  #btn-save-commute { padding: 6px 10px; min-height: 34px; }
  /* Places view: search + route pills share one horizontal row above cards.
     Search shrinks (flex: 1) to make room for the Route 1/2 pills on the right.
     JS wraps them in .mobile-search-row on page load. */
  .mobile-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px var(--space-3) 6px;
  }
  .mobile-search-row .inline-search {
    display: flex;
    flex: 1 1 auto;
    height: 32px;
    min-width: 0;
    margin: 0;
    padding: 0 8px 0 28px;
    background: var(--bg-surface);
    border: 1px solid rgba(91, 33, 182, 0.28);
    font-size: 0.85rem;
  }
  .mobile-search-row .inline-search input { font-size: 0.85rem; }
  .mobile-search-row .route-toggles {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
    padding: 0;
  }
  .mobile-search-row .route-toggles.hidden { display: none; }

  /* ── Collapsible route panel: the tab handle above the toolbar toggles
     body.route-closed which hides the whole route-toolbar and gives all the
     freed vertical space to the cards/ads below. ── */
  .mobile-route-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 7px 12px;
    background: rgba(245, 158, 11, 0.22);
    border: none;
    border-bottom: 1px solid rgba(245, 158, 11, 0.45);
    color: #b45309;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--t-fast);
  }
  .mobile-route-tab:hover { background: rgba(245, 158, 11, 0.32); }
  .mobile-route-tab-icon { font-size: 0.9rem; line-height: 1; }
  body.route-closed .route-toolbar { display: none; }
  /* NOTE: no CSS rotation on the icon — JS swaps the character (▴/▾) on
     toggle. Doing both was rotating the swapped-down character back up,
     making the arrow always look like it pointed up. */

  /* ── Filters live behind a ⚙️ tab. Hidden by default on mobile regardless
     of JS-managed .hidden class (results-count logic still runs, just not
     shown). Tapping ⚙️ toggles body.tools-open which reveals the panel as
     a floating dropdown just below the Cards/Map row. ── */
  .filter-toolbar { display: none !important; }
  body.tools-open .filter-toolbar {
    display: flex !important;
    position: fixed;
    top: calc(var(--header-h) + 42px);
    left: 0;
    right: 0;
    z-index: 39;
    background: var(--bg-elevated);
    box-shadow: var(--shadow-md);
    padding: 12px var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  /* Inside the tools panel, the inline-search stays hidden — search is the
     separate 🔍 button in the route toolbar. */
  body.tools-open .inline-search { display: none; }
  body.tools-open .category-dropdown-wrap { width: 100%; }
  body.tools-open .category-dropdown-toggle { width: 100%; justify-content: space-between; }
  body.tools-open .category-dropdown-menu {
    position: static;
    width: 100%;
    max-width: none;
    box-shadow: none;
    margin-top: 4px;
  }

  /* ⚙️ Filters button — amber to match the sibling Places/Map/Wallet pills. */
  .mobile-tools-btn {
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.38);
    color: #b45309;
    padding: 6px 12px;
    border-radius: var(--r-full);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    flex: 0 0 auto;
    transition: all var(--t-fast);
  }
  body.tools-open .mobile-tools-btn {
    background: #d97706;
    color: white;
    border-color: #d97706;
  }
  /* Slow pulse on the ⚙️ border when any filter is active, so users know
     filters are applied even when they're on Map or Wallet view. Toggled via
     JS. No glow — just the border color breathing. */
  .mobile-tools-btn.filters-active {
    animation: filters-gear-pulse 2.4s ease-in-out infinite;
  }
  @keyframes filters-gear-pulse {
    0%, 100% { border-color: rgba(245, 158, 11, 0.38); box-shadow: 0 0 0 0 rgba(217, 119, 6, 0); }
    50%      { border-color: #d97706; box-shadow: 0 0 6px 1px rgba(217, 119, 6, 0.35); }
  }

  /* ── Saved-routes area (Map view): compact. Dropdown visible again — shows
     the currently-selected route's name so users know which route is loaded. ── */
  .saved-routes-section { padding: 6px var(--space-3) 8px; gap: 6px; }
  .section-header-row { flex-wrap: nowrap; align-items: center; gap: 6px; }
  .section-header-actions { flex-wrap: nowrap; gap: 4px; }
  /* All controls in the saved-routes row share the same height (32px), border
     radius, and font-size so they look like a unified toolbar rather than a
     mix of pills, buttons, and text-labels. */
  .btn-mini {
    padding: 0;
    font-size: 0.9rem;
    width: 32px;
    min-width: 32px;
    height: 32px;
    border-radius: var(--r-full);
  }
  .gps-toggle {
    padding: 0 10px;
    height: 32px;
    font-size: 0.78rem;
    border-radius: var(--r-full);
  }
  .explore-group .btn-sm {
    padding: 0 12px;
    height: 32px;
    font-size: 0.78rem;
    border-radius: var(--r-full);
    min-height: 0;
  }
  .saved-routes-section .city-pill {
    padding: 0 10px;
    height: 32px;
    font-size: 0.78rem;
    border-radius: var(--r-full);
    min-height: 0;
  }
  .saved-routes-label { font-size: 0.65rem; }

  /* Hide the city-picker pill in the header — JS moves it into the
     saved-routes row on load (map-view only). This CSS keeps it invisible
     while it's still in the header for the split-second before JS fires,
     preventing a visual flash. Once moved, it's no longer a descendant of
     .app-header so this selector stops matching. */
  .app-header .city-pill-wrap { display: none; }

  /* Compact city pill inside the map-view saved-routes row. */
  .saved-routes-section .city-pill {
    padding: 5px 8px;
    font-size: 0.78rem;
    min-height: 30px;
    max-width: none;
  }
  /* On mobile the city name is already hidden (only 📍 + ▾ show), keep it. */
  .saved-routes-section .city-pill-wrap { flex-shrink: 0; }

  /* City menu on mobile: don't anchor to the pill's right edge (would clip
     off-screen since the pill now sits in the middle of the row). Instead
     span the viewport with a small inset. */
  .saved-routes-section .city-menu {
    position: fixed;
    z-index: 200;
    top: calc(var(--header-h) + 96px);
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }

  /* ── Mobile: slightly taller cards + a bit bigger text so item photos breathe ── */
  .result-card { height: 310px; }
  .card-business-row { height: 118px; padding: 12px; }
  .biz-name { font-size: 1.02rem; }
  .biz-addr { font-size: 0.84rem; }
  .biz-link { font-size: 0.84rem; }
  .card-item-row { padding: 12px; gap: 12px; }
  .item-image { width: 98px; height: 98px; }
  .item-title { font-size: 0.98rem; }
  .item-discount { font-size: 0.84rem; }
  .item-countdown { font-size: 0.8rem; }
  .biz-action-btn { width: 34px; height: 34px; }
  .result-fav { width: 34px; height: 34px; }

  /* ── Modest button bumps for touch (kept smaller than before) ── */
  .btn { padding: 8px 14px; font-size: 0.9rem; min-height: 38px; }
  .mode-btn-pill { padding: 7px 14px; font-size: 0.86rem; }
  .mode-btn-pill.mode-btn-primary { padding: 6px 13px; }
  .nav-pill { padding: 7px 14px; font-size: 0.86rem; }
  .toolbar-input { font-size: 0.94rem; padding-top: 8px; padding-bottom: 8px; }
  .icon-btn { width: 40px; height: 40px; }
}

/* ── Desktop tweaks ──────────────────────────────────────────────────────── */

@media (min-width: 901px) {
  .fab { display: none; }
}

/* Soft-upsell banner shown on free merchant dashboard when they're rotating ad slots */
.upsell-banner {
  background: linear-gradient(135deg, rgba(202, 138, 4, 0.10), rgba(91, 33, 182, 0.07));
  border: 1px solid rgba(202, 138, 4, 0.32);
  padding: var(--space-3) var(--space-4);
}

.upsell-banner-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.upsell-banner-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.upsell-banner-body {
  flex: 1;
  min-width: 0;
}

.upsell-banner-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--deal);
}

.upsell-banner-text {
  font-size: 0.83rem;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.4;
}

/* Inline CLEAR link sitting opposite the From label */
.label-with-action {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 5px;
}
.label-with-action label { margin-bottom: 0; }

.text-link-clear {
  color: var(--text-tertiary);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--t-fast);
}
.text-link-clear:hover { color: var(--accent); }

/* ── Utility ─────────────────────────────────────────────────────────────── */

.hidden { display: none !important; }
.text-tertiary { color: var(--text-tertiary); }

.text-mono {
  font-family: 'SF Mono', Monaco, 'Roboto Mono', monospace;
  font-size: 0.85em;
}

/* Cluster pin label */
.cluster-count {
  color: white;
  font-weight: 700;
  font-size: 0.78rem;
}

/* Minimal N/E/S/W compass — top-left of the map. Rotates with map bearing. */
.map-compass {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 44px;
  height: 44px;
  z-index: 4;
  pointer-events: none;
  user-select: none;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: transform 0.2s ease;
}
.map-compass-cardinal {
  position: absolute;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--text-tertiary);
  line-height: 1;
}
.map-compass-n {
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--accent);   /* highlight North */
}
.map-compass-s { bottom: 3px; left: 50%; transform: translateX(-50%); }
.map-compass-e { right: 4px;  top: 50%; transform: translateY(-50%); }
.map-compass-w { left: 4px;   top: 50%; transform: translateY(-50%); }

/* ── Custom confirm() / prompt() modal (replaces browser-native dialogs that
      show the site's URL/IP as a prefix). ────────────────────────────────── */
.dialog-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 100px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base);
}
.dialog-overlay.open       { opacity: 1; pointer-events: auto; }
.dialog-overlay.hidden     { display: none; }

.dialog-modal {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xl);
  padding: var(--space-5) var(--space-5) var(--space-4);
  width: min(440px, 92vw);
  box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.dialog-message {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-4);
}
.dialog-input-wrap { margin-bottom: var(--space-4); }
.dialog-input-wrap .input { width: 100%; }
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* ──────────────────────────────────────────────────────────────────────────
   Route ads ticker — bottom scrolling bar (Phase L)
   ────────────────────────────────────────────────────────────────────────── */
.ads-ticker {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: stretch;
  background: linear-gradient(90deg, rgba(91, 33, 182, 0.06), rgba(202, 138, 4, 0.05));
  border-top: 1px solid var(--border-default);
  overflow: hidden;
  flex-shrink: 0;
  z-index: 5;
}
.ads-ticker.hidden { display: none; }

.ads-ticker-label {
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--bg-surface);
  border-right: 1px solid var(--border-default);
  flex-shrink: 0;
  white-space: nowrap;
}

.ads-ticker-track {
  display: flex;
  gap: 12px;
  padding: 8px 12px;
  animation: ads-ticker-scroll 50s linear infinite;
  flex-shrink: 0;
}
.ads-ticker:hover .ads-ticker-track {
  animation-play-state: paused;
}

@keyframes ads-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* track is duplicated; -50% loops seamlessly */
}

.ads-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 6px 12px 6px 6px;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
  min-width: 220px;
  max-width: 280px;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.ads-ticker-item:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.ads-ticker-img {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(18, 42, 26, 0.04);
}
.ads-ticker-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.ads-ticker-text {
  min-width: 0;
  flex: 1;
}
.ads-ticker-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}
.ads-ticker-biz {
  font-size: 0.74rem;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}
.ads-ticker-price {
  color: var(--deal);
  font-weight: 700;
}

/* ──────────────────────────────────────────────────────────────────────────
   About page — narrative layout that breaks out of the app shell
   ────────────────────────────────────────────────────────────────────────── */
.about-body {
  overflow: auto;   /* unlike the app, the about page scrolls */
  background: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh;
  scroll-behavior: smooth;
}
.about-section { scroll-margin-top: 80px; }

.about-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid var(--border-subtle);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.about-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.about-logo-name {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.about-nav {
  display: flex;
  gap: 22px;
  flex: 1;
  justify-content: center;
}
.about-nav a {
  font-size: 0.88rem;
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 600;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.about-nav a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Pricing grid + cards */
.about-pricing-subhead {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin: 24px 0 12px;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 8px;
}
.pricing-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 20px 18px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.pricing-card-featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-md);
}
.pricing-badge {
  position: absolute;
  top: -10px;
  right: 14px;
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: var(--r-full);
}
.pricing-tier {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.pricing-price {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.pricing-price-unit {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-left: 2px;
}
.pricing-meta {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin: -8px 0 12px;
}
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}
.pricing-features li {
  padding: 5px 0 5px 18px;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.45;
  position: relative;
}
.pricing-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 5px;
  color: var(--success);
  font-weight: 800;
  font-size: 0.85rem;
}
.about-pricing-note {
  margin-top: 14px;
  font-size: 0.88rem;
  color: var(--text-tertiary);
  font-style: italic;
  text-align: center;
}

.about-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 24px 48px;
}

.about-hero {
  text-align: center;
  margin-bottom: 56px;
}
.about-hero-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 5px 12px;
  border-radius: var(--r-full);
  margin-bottom: 18px;
}
.about-hero-title {
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 20px;
  color: var(--text-primary);
}
.about-hero-sub {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
}
.about-hero-sub em {
  font-style: italic;
  color: var(--accent);
  font-weight: 600;
}

.about-section {
  margin-bottom: 48px;
}

.about-callout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: linear-gradient(135deg, rgba(91, 33, 182, 0.08), rgba(202, 138, 4, 0.06));
  border: 1px solid rgba(91, 33, 182, 0.22);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin-bottom: 48px;
}
.about-callout-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
  line-height: 1.1;
}
.about-callout-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.about-callout-sub {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* Coverage callout — softer gold gradient, distinct from the purple/gold one */
.about-callout-coverage {
  background: linear-gradient(135deg, rgba(21, 128, 61, 0.06), rgba(202, 138, 4, 0.06));
  border-color: rgba(21, 128, 61, 0.22);
  margin-top: -32px;   /* pull it closer to the callout above so they read as a pair */
}
.about-cities-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 14px;
  margin-bottom: 4px;
}
.about-cities-container {
  margin-top: 4px;
}
.about-cities-loading,
.about-cities-fallback {
  font-size: 0.85rem;
  color: var(--text-tertiary);
}
.about-city-group {
  margin-bottom: 8px;
}
.about-city-group:last-child { margin-bottom: 0; }
.about-city-state {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  min-width: 30px;
  letter-spacing: 0.04em;
}
.about-city-sep {
  color: var(--text-tertiary);
}
.about-city-list {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.about-section-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.about-section-body {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.about-section-body strong {
  color: var(--text-primary);
  font-weight: 700;
}
.about-section-merchant {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 28px;
}

.about-steps {
  display: grid;
  gap: 16px;
}
.about-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 16px 18px;
}
.about-step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
}
.about-step-body { flex: 1; }
.about-step-title {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.about-step-sub {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.about-step-sub strong { color: var(--accent); font-weight: 600; }

.about-tips {
  list-style: none;
  padding: 0;
  margin: 0;
}
.about-tips li {
  padding: 10px 0 10px 22px;
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
  color: var(--text-secondary);
  line-height: 1.55;
}
.about-tips li::before {
  content: '◆';
  position: absolute;
  left: 0;
  top: 12px;
  color: var(--deal);
  font-size: 0.7rem;
}
.about-tips li:last-child { border-bottom: none; }
.about-tips strong { color: var(--text-primary); font-weight: 700; }
.about-tips em { color: var(--accent); font-style: normal; font-weight: 600; }

.about-footer {
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  margin-top: 32px;
}
.about-footer-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.86rem;
  color: var(--text-tertiary);
}

/* ── Mobile Hamburger Menu (Phase E) ──────────────────────────────────────── */

/* Hide mobile menu on desktop, show desktop buttons */
@media (min-width: 769px) {
  .merchant-menu-toggle { display: none !important; }
  .merchant-menu-dropdown { display: none !important; }
}

/* Hide desktop buttons on mobile, show hamburger */
@media (max-width: 768px) {
  .merchant-menu-desktop { display: none !important; }
  .merchant-menu-toggle { display: block !important; }
}

/* Hamburger button */
.merchant-menu-toggle {
  font-size: 20px;
  padding: 4px 12px;
  cursor: pointer;
  position: relative;
}

/* Dropdown container */
.merchant-menu-dropdown {
  position: absolute;
  top: 56px;
  right: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 200px;
  z-index: 1000;
  padding: 4px 0;
}

.merchant-menu-dropdown.hidden {
  display: none;
}

/* Menu items */
.merchant-menu-item {
  display: block !important;
  width: 100%;
  padding: 12px 16px;
  text-align: left;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}

.merchant-menu-item.hidden {
  display: none !important;
}

.merchant-menu-dropdown .merchant-menu-item {
  display: block !important;
}

.merchant-menu-item:hover {
  background: var(--surface-tint-2);
}

.merchant-menu-item:active {
  background: var(--surface-tint-3);
}
.about-footer a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.about-footer a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .about-nav { display: none; }
}
@media (max-width: 600px) {
  .about-header { padding: 12px 16px; }
  .about-main { padding: 40px 18px 32px; }
  .about-section-merchant { padding: 20px; }
}

/* ── Admin Accounts Page ──────────────────────────────────────────────────── */

/* Analytics tab */
.analytics-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.analytics-stat {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 16px;
  text-align: center;
}
.analytics-stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}
.analytics-stat-label {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.analytics-list {
  margin-top: 8px;
}
.analytics-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.88rem;
}
.analytics-row:last-child { border-bottom: none; }
.analytics-row-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.analytics-row-sub { font-size: 0.75rem; color: var(--text-tertiary); }
.analytics-row-count {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--accent);
}

.admin-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-default);
}

.admin-tab {
  padding: 12px 20px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.admin-tab:hover {
  color: var(--text-primary);
}

.admin-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* City Management — geocode search results */
.city-search-item {
  padding: 10px 12px;
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-primary);
  transition: background 0.12s;
}
.city-search-item:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Admin filters */
.admin-filters {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.admin-filter-row {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  align-items: flex-end;
}

.admin-filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 150px;
}

.admin-filter-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.input-sm {
  padding: 6px 10px;
  font-size: 14px;
}

.admin-search-bar {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.admin-search-bar .input {
  flex: 1;
  min-width: 200px;
}

.admin-account-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  transition: border-color 0.15s;
}

.admin-account-card:hover {
  border-color: var(--border-strong);
}

.admin-account-card.deleted {
  opacity: 0.6;
  background: var(--bg-base);
}

.admin-account-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
}

.admin-account-email {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  word-break: break-all;
}

.admin-account-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-account-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.admin-account-details strong {
  color: var(--text-primary);
  font-weight: 600;
}

.admin-account-actions {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

.prompt-warning {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 6px;
  padding: 12px;
  margin: 16px 0;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ── Admin is desktop-only (mobile-admin removed) ─────────────────────────── */
/* Widen the admin container so the Cities map + 2-column list have room.
   Scoped to the admin page only — consumer pages keep their own layout. */
body.admin-page .merchant-wrap { max-width: 1400px; }

/* ── Admin: City Management ───────────────────────────────────────────────── */
/* The Cities tab is a fixed-height flex column: the toolbar stays put and
   ONLY the city list scrolls (the map is fixed in place). */
#cities-view {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-h) - 64px);
  overflow: hidden;
}
#cities-view .dashboard-head { flex-shrink: 0; }
.cities-toolbar {
  flex-shrink: 0;
  background: var(--bg-base);
  padding-bottom: 12px;
  margin-bottom: 12px;
}
.city-add-row {
  display: flex;
  gap: 8px;
}
.city-add-row .input { flex: 1; }
#city-preview { margin-top: 6px; }

.cities-split {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 16px;
}
.cities-map-pane {
  flex: 0 0 33.333%;
  min-height: 0;
}
#cities-map {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-default);
  overflow: hidden;
  background: var(--bg-base);
}
.cities-list-pane {
  flex: 1 1 66.667%;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}
#cities-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  align-items: start;
}
#cities-list .card { margin-bottom: 0 !important; }
.cities-list-pane .card.city-selected {
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 3px rgba(91, 33, 182, 0.3);
}