/* ═══════════════════════════════════════════════════════════
   HUDPRO MAP v2 — Consumer Trust "Slate & Sky" theme
   Slate-50 #F8FAFC | Forest Green #166534 | Trusted Blue #0369A1
   ═══════════════════════════════════════════════════════════ */

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

/* Map page: hide all scrollbars so rail and map stay flush without grey strip */
#map-page-main,
#map-page-main * {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#map-page-main *::-webkit-scrollbar {
  display: none;
}

:root {
  /* Slate & Sky palette */
  --slate-50:      #F8FAFC;
  --forest-green:   #166534;
  --forest-green-hover: #14532d;
  --trusted-blue:   #0369A1;
  --card-bg:        #FFFFFF;
  --shadow-sm:      0 1px 2px 0 rgb(0 0 0 / 0.05);
  --radius-2xl:    1rem;

  /* Brand (retained for nav/chrome) */
  --navy:         #1F2A3A;
  --navy-mid:     #253244;
  --navy-light:   #2C3B52;
  --navy-deep:    #141D29;
  --navy-surface: #1A2433;
  --gold:         #FFC72C;
  --gold-dim:     rgba(255,199,44,0.18);
  --gold-dark:    #E6B020;
  --white:        #FFFFFF;
  --muted:        #6b7d8f;
  --muted-lt:     #7d8fa3;
  --border:       rgba(255,255,255,0.07);
  --border-mid:   rgba(255,255,255,0.11);

  /* Layout heights — order matters */
  --nav-h:        56px;
  --ticker-h:     0px; /* scrolling ticker strip removed */
  --filter-h:     62px; /* map control bar — light gray strip under nav (CTA row) */
  --chrome-h:     calc(var(--nav-h) + var(--ticker-h) + var(--filter-h));

  --ui-card-radius: 12px;
  --ui-card-gap: 12px;
  --ui-card-shadow: 0 2px 10px rgba(31,42,58,0.08);
  --ui-btn-height: 40px;
  --ui-btn-padding-x: 14px;
  --ui-btn-radius: 10px;

  /* Rail — slightly wider for breathing room (premium balance) */
  --rail-w:       372px;

  /* Radii */
  --r-sm:  6px;
  --r-md:  9px;
  --r-lg:  12px;

  /* Shadows */
  --sh-card:   0 1px 4px rgba(0,0,0,0.25), 0 4px 16px rgba(0,0,0,0.18);
  --sh-float:  0 4px 24px rgba(0,0,0,0.40), 0 1px 4px rgba(0,0,0,0.30);
  --sh-drawer: 6px 0 40px rgba(0,0,0,0.55);

  /* Map UI stacking (bottom → top). Keep floating tools/preview/chat in sync with TSX.
     Layer    Value   Use
     ─────    ─────   ─────────────────────────────────────────────────────────
     base     1       #map-canvas
     rail     10      #adv-rail
     search   100     #search-panel, map markers (active)
     zone-a   120     #zone-a (preview card placeholder, FAB)
     filter   190     #filter-row
     rail-dsk 191    #adv-rail.localpros-rail.adv-rail-desktop-host (above filter when widths overlap)
     nav      200     #top-nav
     scrim    300     #drawer-scrim (hamburger)
     drawer   310     #left-drawer
     pros     350     LocalProsDrawer.tsx
     backdrop 400     .tool-modal-backdrop, #filter-modal-backdrop
     tools    450     MapToolPanels (Mortgage calc from nav); Scratch Pad elsewhere
     modal    500     RequestSpecialistModal
     preview  600     PinPreviewCard
     chat     1000    GenieBubble (bubble)
     chat-panel 10000 GenieBubble (panel), SmartAssistWidget
  */
  --z-map-base:       1;
  --z-map-ui:         10;
  --z-map-search:     100;
  --z-zone-a:          120;
  --z-filter:          190;
  --z-nav:             200;
  --z-drawer-scrim:    300;
  --z-drawer-panel:    310;
  --z-local-pros:      350;
  --z-modal-backdrop:  400;
  /* Portals (filter modal, tool cards) must sit above MapClient_Page readiness wrapper (inline z-index 10000) */
  --z-map-floating-ui: 11000;
  --z-tool-cards:      450;
  --z-request-modal:   500;
  --z-pin-preview:     600;
  --z-chat:            1000;
  --z-chat-panel:      10000;
}

@media (max-width: 1439px) { :root { --rail-w: 308px; } }
@media (max-width: 1199px) { :root { --rail-w: 268px; } }

html, body {
  height: 100%;
  overflow: hidden !important;
  font-family: 'Barlow', sans-serif;
  background: #ffffff !important;
  color: #1e293b;
  -webkit-font-smoothing: antialiased;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none !important;
}


/* ══════════════════════════════════════
   1. TOP NAV  (56px)
   ══════════════════════════════════════ */
#top-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  background: var(--navy);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  z-index: var(--z-nav);
  /* refined shadow — not heavy */
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 2px 12px rgba(0,0,0,0.28);
}

/* Logo lockup — maximize size within 56px bar */
.top-logo {
  display: flex;
  align-items: center;
  padding: 2px 4px 2px 12px;
  margin-left: 0;
  text-decoration: none;
  flex-shrink: 0;
  height: var(--nav-h);
  cursor: pointer;
}

/* Spacing between logo and first nav item — slightly tighter after logo */
.top-nav-main {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  margin-left: 28px;
}

.top-logo img {
  height: 52px;
  width: auto;
  max-height: 52px;
  display: block;
  object-fit: contain;
  background: none;
}

/* Top nav: Map | Market News | Free HUD 101 | Menu | Sign In | Advertise */
.top-nav-main .nav-tabs {
  margin: 0;
}

.nav-tools-wrap {
  position: relative;
  flex-shrink: 0;
}

/* Menu first in tab row — breathing room before Map */
.nav-tabs .nav-tools-wrap--leading {
  margin-right: 10px;
}

/* Full nav lives in the left drawer; this opens it */
.nav-tabs .site-nav-drawer-trigger {
  margin-right: 10px;
}
.nav-tab.site-nav-drawer-trigger {
  color: #ffc72c !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  text-transform: none;
  letter-spacing: 0.055em;
}
.nav-tab.site-nav-drawer-trigger::after {
  display: none;
}
.nav-tab.site-nav-drawer-trigger:hover {
  color: #ffd54f !important;
  background: rgba(255, 199, 44, 0.12);
}
.nav-tab.site-nav-drawer-trigger[aria-expanded="true"] {
  color: #ffd54f !important;
}
.nav-tab.site-nav-drawer-trigger .site-nav-drawer-label {
  font-weight: 800;
}
.nav-tab.nav-tab--subtle {
  color: rgba(255, 255, 255, 0.55) !important;
}
.nav-tab.nav-tab--subtle::after {
  opacity: 0.4 !important;
  transform: scaleX(0.65) !important;
}

.nav-tools-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nav-tools-caret {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0.8;
}

.nav-tools-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  left: auto;
  width: min(300px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: min(72vh, 520px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--ui-card-radius);
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(15, 25, 33, 0.98);
  box-shadow: 0 18px 36px rgba(0,0,0,0.34);
  padding: 12px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 0;
  z-index: 240;
}

.nav-tools-group {
  padding: 10px 4px 12px;
  border-radius: 0;
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.nav-tools-group + .nav-tools-group {
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 4px;
  padding-top: 14px;
}

.nav-tools-heading {
  margin: 0 0 10px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

.nav-tools-link {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  text-decoration: none;
  color: rgba(255,255,255,0.88);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 10px;
  border-radius: var(--ui-btn-radius);
  min-height: 44px;
  line-height: 1.3;
}

.nav-tools-link:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.top-nav-main .nav-spacer {
  flex: 1;
  min-width: 24px;
}

/* Trailing cluster: alerts + Join / user menu — before Advertise divider */
.map-nav-trailing {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.map-nav-alerts-bell {
  margin-right: 2px;
}

.nav-sep {
  width: 1px;
  height: 22px;
  background: var(--border-mid);
  flex-shrink: 0;
  margin: 0 2px;
}

/* Tabs — left-aligned; only Map + Market News */
.nav-tabs {
  display: flex;
  align-items: center;
  height: 100%;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
}

/* Center spacer — pushes right block to end */
.nav-spacer {
  flex: 1;
  min-width: 0;
}
.nav-tabs::-webkit-scrollbar { display: none; }

.nav-tab {
  height: var(--nav-h);
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.95);
  border: none;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: color 0.15s, background 0.15s;
  text-decoration: none;
}
.nav-tabs button.nav-tab {
  font-family: inherit;
}
.nav-tab-two-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.25;
  gap: 0;
}
.nav-tab-two-line span {
  display: block;
  white-space: nowrap;
}
.nav-tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 8px; right: 8px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), opacity 0.15s;
  opacity: 0;
}
.nav-tab:hover { color: #ffffff; background: rgba(255,255,255,0.06); }
.nav-tab:hover::after { transform: scaleX(1); opacity: 0.35; }
.nav-tab.active { color: var(--gold); }
.nav-tab.active::after {
  transform: scaleX(1);
  opacity: 1;
  height: 2px;
  background: var(--gold);
}

@media (min-width: 768px) {
  .nav-tabs {
    overflow-x: visible !important;
    flex-wrap: nowrap;
  }
}
@media (min-width: 1100px) {
  .nav-tab {
    padding: 0 11px;
    font-size: 10.75px;
    letter-spacing: 0.05em;
  }
  .nav-tab::after {
    left: 11px;
    right: 11px;
  }
}
@media (min-width: 1320px) {
  .nav-tab {
    padding: 0 14px;
    font-size: 11.25px;
    letter-spacing: 0.052em;
  }
  .nav-tab::after {
    left: 14px;
    right: 14px;
  }
}
@media (min-width: 1536px) {
  .nav-tab {
    padding: 0 17px;
    font-size: 11.5px;
    letter-spacing: 0.055em;
  }
  .nav-tab::after {
    left: 17px;
    right: 17px;
  }
}
@media (min-width: 1100px) {
  .nav-tab.site-nav-drawer-trigger { font-size: 11.75px !important; }
}
@media (min-width: 1320px) {
  .nav-tab.site-nav-drawer-trigger { font-size: 12.25px !important; }
}
@media (min-width: 1536px) {
  .nav-tab.site-nav-drawer-trigger { font-size: 12.5px !important; }
}

/* Sign In — text-style (SaaS header); Advertise remains primary gold */
.nav-tab.nav-tab--signin {
  border: none;
  background: transparent;
  border-radius: var(--r-sm);
  padding: 0 10px;
  margin-left: 0;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
}
.nav-tab.nav-tab--signin::after {
  display: none;
}
.nav-tab.nav-tab--signin:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

/* Join — secondary outline (signed out); Advertise is the gold CTA */
.nav-tab.nav-tab--join {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.95);
  border-radius: var(--r-sm);
  padding: 0 12px;
  margin-left: 4px;
  text-decoration: none;
}
.nav-tab.nav-tab--join::after {
  display: none;
}
.nav-tab.nav-tab--join:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

/* Account — matches former Sign In outline */
.nav-tab.nav-tab--account {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--r-sm);
  padding: 0 12px;
  margin-left: 2px;
  text-decoration: none;
}
.nav-tab.nav-tab--account::after {
  display: none;
}
.nav-tab.nav-tab--account:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.3);
}
.map-nav-user-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 2px;
  height: var(--nav-h);
}
.nav-tab.nav-tab--user-menu {
  border: none !important;
  background: transparent !important;
  border-radius: var(--r-sm);
  padding: 0 10px !important;
  margin: 0;
  text-transform: none;
  letter-spacing: 0.03em;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  max-width: 124px;
  gap: 4px;
}
.nav-tab.nav-tab--user-menu::after {
  display: none;
}
.nav-tab.nav-tab--user-menu:hover,
.nav-tab.nav-tab--user-menu.is-open {
  color: var(--gold);
  background: rgba(255, 255, 255, 0.05) !important;
}
.map-nav-user-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map-nav-user-caret {
  flex-shrink: 0;
  font-size: 9px;
  opacity: 0.75;
  line-height: 1;
}
.map-nav-user-panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 200px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(13, 21, 34, 0.98);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  z-index: 260;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.map-nav-user-panel-link {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
}
.map-nav-user-panel-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.map-nav-user-panel-link--signout {
  color: rgba(255, 255, 255, 0.5);
  font-size: 11.5px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.map-nav-user-panel-link--signout:hover {
  color: rgba(255, 200, 200, 0.95);
}

.nav-tab-icon {
  width: 14px; height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  opacity: 0.65;
  transition: opacity 0.15s, filter 0.15s;
}
.nav-tab:hover .nav-tab-icon { opacity: 0.9; filter: drop-shadow(0 0 2px rgba(255,255,255,0.12)); }
.nav-tab.active .nav-tab-icon { opacity: 1; filter: drop-shadow(0 0 3px rgba(255,199,44,0.18)); }

/* Right controls — two groups with divider */
.nav-right {
  display: flex;
  align-items: center;
  padding: 0 14px;
  flex-shrink: 0;
}

.nav-right-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Utility pills: Mortgage, Scratch Pad — quick-access buyer tools */
.nav-utility {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.nav-utility-pill {
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border-mid);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.9);
  font-family: 'Barlow', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.13s, border-color 0.13s, color 0.13s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
}
.nav-utility-pill:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.2);
  color: var(--white);
}

/* Divider before Advertise — separates app/user actions from business CTA */
.nav-right-divider,
.nav-action-divider {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.28);
  display: inline-block;
  align-self: center;
  flex: 0 0 1px;
  margin: 0 12px;
}

.nav-btn {
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-mid);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.8);
  font-family: 'Barlow', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.045em;
  cursor: pointer;
  transition: background 0.13s, border-color 0.13s, color 0.13s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
}
.nav-btn:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
  color: var(--white);
}
.nav-btn.gold {
  background: var(--forest-green);
  border-color: var(--forest-green);
  color: var(--white);
  font-weight: 700;
}
.nav-btn.gold:hover { background: var(--forest-green-hover); border-color: var(--forest-green-hover); }

/* Advertise — primary gold CTA (map top nav) */
.nav-btn-advertise {
  background: linear-gradient(180deg, #ffe082 0%, #ffc72c 45%, #e6a800 100%);
  border: 1px solid rgba(184, 134, 11, 0.55);
  color: #1f2a3a;
  font-weight: 800;
  padding: 8px 16px;
  height: auto;
  border-radius: 8px;
  margin-right: 12px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.nav-btn-advertise:hover {
  filter: brightness(1.05);
  color: #1f2a3a;
  box-shadow: 0 2px 8px rgba(255, 199, 44, 0.35);
  border-color: rgba(184, 134, 11, 0.65);
}

.map-mobile-nav-toggle {
  display: none;
}

.avatar-btn {
  width: 24px;
  height: 24px;
  max-width: 24px;
  max-height: 24px;
  padding: 0;
  box-sizing: border-box;
  border-radius: 50%;
  background: #16202C;
  border: 1.5px solid rgba(255,255,255,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,199,44,0.85);
  transition: border-color 0.13s;
  letter-spacing: 0;
  flex-shrink: 0;
}
.avatar-btn:hover { border-color: rgba(255,199,44,0.30); }

.map-mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 13, 22, 0.56);
  z-index: 210;
}

.map-mobile-nav-drawer {
  position: fixed;
  top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  background: rgba(15, 25, 33, 0.98);
  border-top: 1px solid var(--border-mid);
  border-bottom: 1px solid var(--border-mid);
  padding: 12px 16px 16px;
  display: grid;
  gap: 10px;
  z-index: 220;
  max-height: calc(100vh - var(--nav-h) - env(safe-area-inset-top, 0px));
  overflow-y: auto;
}

.map-mobile-nav-group {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  padding: 8px 6px;
}

.map-mobile-nav-title {
  margin: 0 0 6px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}

.map-mobile-nav-link {
  display: block;
  padding: 10px 8px;
  border-radius: 8px;
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.map-mobile-nav-link:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.map-mobile-nav-link-accent {
  color: #FFC72C;
}


/* Ticker strip removed — keep tool card animation for MapToolPanels / floating tools */
@keyframes toolCardOpen {
  from { opacity: 0; transform: translateY(-24px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ══════════════════════════════════════
   3. MAP CONTROL BAR — light gray CTA strip under nav (taller, clearer hierarchy)
      Filters | tools — freshness + loading on the right
   ══════════════════════════════════════ */
#filter-row.map-control-bar,
#filter-row {
  position: fixed;
  top: calc(var(--nav-h) + var(--ticker-h));
  left: 0;
  right: 0;
  height: var(--filter-h);
  min-height: var(--filter-h);
  max-height: var(--filter-h);
  box-sizing: border-box;
  margin: 0;
  padding: 0 18px;
  background: linear-gradient(180deg, #FAFBFC 0%, #F0F2F5 100%);
  border-bottom: 1px solid #C5CED9;
  box-shadow: 0 3px 12px rgba(15, 25, 40, 0.1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: flex;
  align-items: center;
  gap: 0;
  z-index: var(--z-filter);
}

.filter-chips-zone.map-control-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  flex-wrap: nowrap;
}

.map-control-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.map-control-bar-left::-webkit-scrollbar { display: none; }

.map-control-bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Pills — white / neutral border (scoped to map control bar only) */
#filter-row .filter-btn-all {
  height: 42px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid #B8C5D4;
  background: #FFFFFF;
  color: #1F2937;
  font-family: 'Barlow', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#filter-row .filter-btn-all:hover {
  background: #E5E7EB;
  border-color: #D1D5DB;
  color: #111827;
}
#filter-row .filter-btn-all.is-open,
#filter-row .filter-btn-all[aria-expanded="true"] {
  background: rgba(255, 199, 44, 0.16);
  border-color: rgba(180, 130, 0, 0.42);
  color: #1F2A3A;
  box-shadow: inset 0 0 0 1px rgba(255, 199, 44, 0.28);
}
#filter-row .filter-btn-all svg { width: 10px; height: 10px; fill: currentColor; }

.f-sep { width: 1px; height: 20px; background: var(--border-mid); flex-shrink: 0; }

#filter-row .filter-chip.map-control-pill,
#filter-row .map-control-pill {
  height: 42px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid #B8C5D4;
  background: #FFFFFF;
  color: #1F2937;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
#filter-row .filter-chip.map-control-pill:hover,
#filter-row .map-control-pill:hover {
  background: #E5E7EB;
  border-color: #D1D5DB;
  color: #111827;
}

#filter-row .map-control-pill-hud101 {
  border-color: rgba(255, 199, 44, 0.85);
  color: #9a6b00;
  font-weight: 700;
  text-decoration: none;
}
#filter-row .map-control-pill-hud101:hover {
  background: #FFC72C;
  border-color: #FFC72C;
  color: #1F2A3A;
}

#filter-row button.map-control-pill.map-control-pill-toggle.is-active,
#filter-row button.map-control-pill-toggle[aria-pressed="true"] {
  background: rgba(255, 199, 44, 0.16);
  border-color: rgba(180, 130, 0, 0.42);
  color: #1F2A3A;
  box-shadow: inset 0 0 0 1px rgba(255, 199, 44, 0.28);
}

#filter-row a.map-control-pill.map-control-pill--quiet {
  cursor: pointer;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  padding: 0 10px;
  border-style: dashed;
  border-color: #b8c0cc;
  color: #4b5563;
  background: #f9fafb;
}
#filter-row a.map-control-pill.map-control-pill--quiet:hover {
  background: #eef2f7;
  color: #1f2937;
  border-color: #9ca3af;
}

@media (min-width: 1024px) {
  #filter-row {
    padding-left: 12px;
    padding-right: 10px;
  }
  .map-control-bar-left {
    justify-content: flex-start;
    gap: 8px;
    padding-left: 0;
    max-width: none;
    overflow-x: visible;
  }
}

/* Legacy newsletter link removed from map bar — keep class if reused elsewhere */
.newsletter-cta {
  height: 26px;
  padding: 0 12px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.70);
  font-family: 'Barlow', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.13s, border-color 0.13s, color 0.13s;
}
.newsletter-cta:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.22);
  color: var(--white);
}
.newsletter-cta svg { flex-shrink: 0; width: 13px; height: 13px; }

.result-count {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.result-count strong { color: var(--gold); font-weight: 500; }

/* Right tool zone — moved into left search panel; hide here */
.filter-tools-zone {
  display: none;
}

.tools-count {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.tools-count strong { color: var(--gold); font-weight: 500; }

.tool-btn {
  height: 28px;
  padding: 0 11px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-mid);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.72);
  font-family: 'Barlow', sans-serif;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: all 0.15s;
  position: relative;
  flex-shrink: 0;
}
/* Subtle gold underline accent — not loud */
.tool-btn::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  right: 50%;
  height: 1.5px;
  background: var(--gold);
  border-radius: 2px;
  transition: left 0.2s, right 0.2s;
}
.tool-btn:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.2);
  color: var(--white);
}
.tool-btn:hover::after { left: 12px; right: 12px; }

.tool-btn svg {
  width: 12px; height: 12px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}


/* ══════════════════════════════════════
   MAP PAGE — True 2-column layout (no overlay)
   >=768px: grid [map | rail]; Local Pros stays a right column (see max-width:767 for stacked mobile)
   >=1024px: collapsible adv rail (.map-page-main--adv-rail-desktop) narrows the rail column via CSS var
   ══════════════════════════════════════ */
/* Start below nav (ticker strip removed; filter row sits over map padding-top) */
#map-page-main {
  position: fixed;
  top: calc(var(--nav-h) + var(--ticker-h));
  left: 0;
  right: 0;
  bottom: auto;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 380px !important;
  height: calc(100vh - (var(--nav-h) + var(--ticker-h))) !important;
  width: 100vw !important;
  overflow: hidden !important;
  background: #1a1a1a !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0;
}

/* Keep map in column 1 and rail in column 2 (explicit placement avoids odd auto-placement if structure changes) */
#map-page-main > #map-canvas {
  grid-column: 1;
}
#map-page-main > #adv-rail {
  grid-column: 2;
}

/* Desktop advertiser rail: wide map + slim teaser at broad zoom; slow slide + fade at county scale */
@media (min-width: 1024px) {
  #map-page-main.map-page-main--adv-rail-desktop {
    grid-template-columns: minmax(0, 1fr) var(--map-adv-rail-outer, 40px) !important;
    transition: grid-template-columns 880ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  #filter-row {
    right: var(--map-adv-rail-outer, 40px);
    transition: right 880ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  #adv-rail.localpros-rail.adv-rail-desktop-host {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch;
    overflow: hidden !important;
    background: #0f1921 !important;
    /* Above #filter-row (z-index 190); was losing to filter when .adv-rail--panel-open forced z-index:25 */
    z-index: 191 !important;
  }

  /* Full teaser + slide chrome: one hit target so blank padding inside the open panel still owns the pointer (no map steal). */
  #adv-rail.localpros-rail.adv-rail-desktop-host .adv-rail-desktop-hitplate {
    flex: 1 1 auto;
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    cursor: default;
  }

  @keyframes adv-rail-teaser-county-pulse {
    0% {
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 0 0 0 rgba(232, 207, 148, 0);
    }
    35% {
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.1),
        0 0 20px 3px rgba(232, 207, 148, 0.28);
    }
    100% {
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 0 0 0 rgba(232, 207, 148, 0);
    }
  }

  .adv-rail-teaser-strip {
    flex: 0 0 36px;
    width: 100%;
    max-width: 36px;
    align-self: stretch;
    min-height: 0;
    appearance: none;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    background: linear-gradient(180deg, #152030 0%, #0f1921 48%, #0c141c 100%);
    border: 0;
    border-left: 1px solid rgba(197, 160, 89, 0.28);
    border-right: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    cursor: pointer;
    pointer-events: auto;
    transition:
      background 220ms ease,
      box-shadow 220ms ease,
      border-color 220ms ease;
  }

  .adv-rail-teaser-strip:focus-visible {
    outline: 2px solid rgba(255, 199, 44, 0.55);
    outline-offset: -2px;
  }

  .adv-rail-teaser-strip:hover {
    background: linear-gradient(180deg, #1b2a3d 0%, #121e2c 48%, #0f1822 100%);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.08),
      0 0 14px 2px rgba(232, 207, 148, 0.18);
  }

  .adv-rail-teaser-strip--county-pulse {
    animation: adv-rail-teaser-county-pulse 2.4s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  }

  /* Expanded rail: teaser reads as one surface with the slide panel / sidebar (#0f1921). */
  #adv-rail.localpros-rail.adv-rail-desktop-host.adv-rail--panel-open .adv-rail-teaser-strip,
  #adv-rail.localpros-rail.adv-rail-desktop-host:has(.adv-rail-slide-panel--open) .adv-rail-teaser-strip,
  .adv-rail-teaser-strip.adv-rail-teaser-strip--rail-connected {
    border-right-color: transparent;
    background: #0f1921;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  }

  #adv-rail.localpros-rail.adv-rail-desktop-host.adv-rail--panel-open .adv-rail-teaser-strip:hover,
  #adv-rail.localpros-rail.adv-rail-desktop-host:has(.adv-rail-slide-panel--open) .adv-rail-teaser-strip:hover,
  .adv-rail-teaser-strip.adv-rail-teaser-strip--rail-connected:hover {
    background: #121e2a;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.08),
      0 0 14px 2px rgba(232, 207, 148, 0.14);
  }

  .adv-rail-teaser-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 100%;
    width: 100%;
    min-height: 0;
    box-sizing: border-box;
    padding: 0;
    font-family: "Barlow Condensed", "Barlow", sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #e8cf94;
    line-height: 1;
    user-select: none;
    pointer-events: none;
  }

  .adv-rail-teaser-text > span:not(.adv-rail-teaser-gap) {
    display: block;
    text-align: center;
  }

  .adv-rail-teaser-text .adv-rail-teaser-gap {
    height: 16px;
    flex-shrink: 0;
  }

  .adv-rail-slide-panel {
    flex: 0 0 auto;
    align-self: stretch;
    width: 0;
    min-width: 0;
    max-width: 380px;
    min-height: 0;
    overflow: hidden;
    transition:
      width 880ms cubic-bezier(0.22, 1, 0.36, 1),
      min-width 880ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .adv-rail-slide-panel.adv-rail-slide-panel--open {
    width: 380px;
    min-width: 380px;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* Opaque flex fill behind drawer/finder: empty slide-panel area still hit-tests as rail (not the map). */
  #adv-rail.localpros-rail.adv-rail-desktop-host .adv-rail-panel-fill {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: #0f1921;
    pointer-events: auto;
    cursor: default;
  }

  #adv-rail.localpros-rail.adv-rail-desktop-host .adv-rail-panel-fill > .adv-rail-slide-inner {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 380px;
    max-width: 380px;
  }

  .adv-rail-slide-inner {
    width: 380px;
    opacity: 0;
    transition: opacity 520ms cubic-bezier(0.33, 1, 0.68, 1);
    /* Filled by desktop-host #rail-drawer rule: min-height 0 + flex column; avoid forcing 100% min-height past grid cell */
    min-height: 0;
  }

  .adv-rail-slide-inner.adv-rail-slide-inner--visible {
    opacity: 1;
    transition-delay: 240ms;
  }

  .adv-rail-slide-inner:not(.adv-rail-slide-inner--visible) {
    transition-delay: 0ms;
  }

  /*
   * Desktop open rail: one flex column filling the grid cell (viewport − nav).
   * Drawer clips; .sidebar is the sole scroll region so header/cards/footer don’t fight min-height:100% overflow.
   */
  #adv-rail.localpros-rail.adv-rail-desktop-host #rail-drawer.localpros-rail-drawer.adv-rail-slide-inner {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  #adv-rail.localpros-rail.adv-rail-desktop-host .sidebar {
    width: 380px;
    max-width: 380px;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding-top: 12px;
    padding-bottom: 12px;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #adv-rail.localpros-rail.adv-rail-desktop-host .sidebar .sidebar-header,
  #adv-rail.localpros-rail.adv-rail-desktop-host .sidebar .adv-rail-advertise-footer {
    flex-shrink: 0;
  }
}

/* LOCAL PROS rail — county finder + empty state */
#adv-rail .adv-rail-finder,
#adv-rail .adv-rail-empty {
  box-sizing: border-box;
  padding: 18px 18px 22px;
  min-height: 100%;
  background: #0f1921;
}

#adv-rail .adv-rail-finder-brand {
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(232, 207, 148, 0.75);
  margin-bottom: 10px;
}

#adv-rail .adv-rail-finder-title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.25;
}

#adv-rail .adv-rail-finder-lead {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.5;
  color: #94a3b8;
}

#adv-rail .adv-rail-finder-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 6px;
}

#adv-rail .adv-rail-finder-select {
  width: 100%;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(197, 160, 89, 0.35);
  background: rgba(15, 25, 33, 0.95);
  color: #e2e8f0;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}

#adv-rail .adv-rail-finder-select:focus {
  border-color: rgba(255, 199, 44, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 199, 44, 0.2);
}

#adv-rail .adv-rail-finder-select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#adv-rail .adv-rail-finder-error {
  margin: -6px 0 12px;
  font-size: 12px;
  color: #fca5a5;
}

#adv-rail .adv-rail-finder-submit {
  width: 100%;
  margin-top: 6px;
  padding: 12px 16px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(180deg, #c5a059 0%, #a6843f 100%);
  color: #0f1921;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

#adv-rail .adv-rail-finder-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#adv-rail .adv-rail-finder-submit:not(:disabled):hover {
  filter: brightness(1.06);
}

#adv-rail .adv-rail-finder-note {
  margin: 14px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: #64748b;
}

#adv-rail .adv-rail-empty-title {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.3;
}

#adv-rail .adv-rail-empty-body {
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.55;
  color: #94a3b8;
}

#adv-rail .adv-rail-loading {
  padding: 28px 18px;
  text-align: center;
  font-size: 13px;
  color: #94a3b8;
  background: #0f1921;
  min-height: 120px;
}

/* ══════════════════════════════════════
   MAP CANVAS  (left column — does NOT extend under rail)
   ══════════════════════════════════════ */
#map-canvas {
  position: relative;
  width: 100% !important;
  flex-grow: 1 !important;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  background: #ffffff !important;
  z-index: var(--z-map-base);
  padding-top: var(--filter-h);
  box-sizing: border-box;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-right: none !important;
  border: none !important;
}

#map-canvas #map,
#map-canvas #hudpro-map {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Map container: only the Google map; overlays live in .map-overlay-ui outside it */
#hudpro-map {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Scratch Pad: isolate from map search input focus — never change appearance when focus is elsewhere */
.hudpro-scratch-pad-root {
  outline: none !important;
  pointer-events: auto; /* hitbox only on the visible card; wrapper has pointer-events: none */
}
.hudpro-scratch-pad-root:not(:focus-within) {
  background: #fefde3 !important;
  border-color: #e5e0b8 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06) !important;
}

/* Overlay layer: search, Explore Outside — top-left under nav+ticker+filter. position:fixed + z-index 20
   so it stacks above the ShellAndFooter fixed overlay (z 10). top = chrome height + 16px so overlay is
   not hidden behind nav/ticker/filter (fixes missing search bar and territory title). */
.map-overlay-ui,
.hudpro-map-search {
  position: fixed;
  top: calc(var(--chrome-h, 100px) + 16px);
  left: 16px;
  z-index: 20;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* Zero-inventory county advertiser message: same fixed slot as map search overlay; pointer-events none on shell. */
.map-zero-inv-advertiser-card-wrap {
  position: fixed;
  top: calc(var(--chrome-h, 100px) + 16px);
  left: 16px;
  z-index: 19;
  max-width: 420px;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
  box-sizing: border-box;
}
.map-zero-inv-advertiser-card-inner {
  pointer-events: auto;
}
/* Search input focus: do not bleed to other overlays (Scratch Pad, Genie) */
.map-overlay-ui input:focus,
.hudpro-map-search input:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Map glass: mainland panel and other overlays (search pill is solid white). */
:root {
  --map-glass-bg:    rgba(255, 255, 255, 0.22);
  --map-glass-border: rgba(255, 255, 255, 0.18);
  --map-glass-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px var(--map-glass-border);
}

/* Map search bar: solid white for clarity and reliable click/focus. */
.hudpro-map-search-pill {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  min-height: 42px;
}
.hudpro-map-search-pill input {
  color: #1a2332;
}
.hudpro-map-search-pill input::placeholder {
  color: #6b7280;
}
.location-search-wrap {
  flex: 1;
  min-width: 0;
}

/* Explore Outside the Mainland — same glass; title width = VI badge row (header width driven by badge row only). */
.hudpro-outside-mainland {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--map-glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--map-glass-shadow);
}
/* Header width = first child (badge row); title gets width: 0 min-width: 100% so it doesn't expand header, ends at VI. */
.hudpro-outside-mainland-header {
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  align-items: flex-start;
  width: fit-content;
}
.hudpro-outside-mainland-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.hudpro-outside-mainland-toggle-caret {
  font-size: 11px;
  line-height: 1;
  color: #1a2332;
  transform: rotate(-90deg);
  transition: transform 0.18s ease;
}
.hudpro-outside-mainland-toggle.is-open .hudpro-outside-mainland-toggle-caret {
  transform: rotate(0deg);
}
.hudpro-outside-mainland-badges-row1 {
  width: max-content;
  min-width: max-content;
  flex-shrink: 0;
}
.hudpro-outside-mainland-title {
  width: 0;
  min-width: 100%;
  display: block;
  font-family: 'Barlow', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #1a2332;
  margin: 0;
  line-height: 1.35;
  box-sizing: border-box;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.95), 0 1px 2px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hudpro-outside-mainland-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Use my location: same glass as search + mainland panel */
.hudpro-map-glass-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: #1a2332;
  cursor: pointer;
  width: fit-content;
  border: none;
  border-radius: 8px;
  background: var(--map-glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--map-glass-shadow);
  transition: background 0.15s, color 0.15s;
}
.hudpro-map-glass-btn:hover {
  background: rgba(255, 255, 255, 0.32);
}
.hudpro-territory-badge {
  font-family: 'Barlow', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid #FFC72C;
  background: #1F2A3A;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.hudpro-territory-badge:hover {
  background: #FFC72C;
  color: #1F2A3A;
}

.map-mobile-zoom-hint {
  display: none;
}

.map-mobile-territories {
  display: none;
}
@media (max-width: 767px) {
  [data-testid="map-search-overlay"] {
    display: none !important;
  }
  .map-mobile-zoom-hint {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    z-index: 140;
    width: min(320px, calc(100% - 24px));
    pointer-events: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.35;
    color: #1F2A3A;
    text-align: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(31, 42, 58, 0.14);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
  }
  .map-mobile-territories {
    display: block;
    padding: 10px 12px 8px;
    background: #0f1921;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .map-mobile-territories-title {
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.78);
  }
  .map-mobile-territories-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .map-mobile-territories .hudpro-territory-badge {
    font-size: 10px;
    min-height: 24px;
    padding: 4px 9px;
  }

  [data-testid="map-search-overlay"] {
    top: auto !important;
    bottom: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(338px, calc(100% - 16px)) !important;
    z-index: 140 !important;
    pointer-events: none !important;
  }
  [data-testid="map-search-overlay"] > div:first-child {
    padding: 10px 10px 9px !important;
    border-radius: 12px !important;
    gap: 8px !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14) !important;
    pointer-events: none !important;
  }
  [data-testid="map-search-overlay"] > div:first-child > div:first-child > div:first-child {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }
  [data-testid="map-search-overlay"] > div:first-child > div:first-child > div:last-child {
    margin-top: 2px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }
  [data-testid="map-search-overlay"] section[aria-label="Explore outside the mainland"] > div:first-child {
    margin-bottom: 6px !important;
    font-size: 11px !important;
  }
  [data-testid="map-search-overlay"] section[aria-label="Explore outside the mainland"] > div:last-child {
    gap: 6px !important;
  }
  [data-testid="map-search-overlay"] .hudpro-map-search-pill {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 10px !important;
    border-radius: 18px !important;
  }
  [data-testid="map-search-overlay"] .hudpro-map-search-pill svg {
    width: 18px !important;
    height: 18px !important;
  }
  [data-testid="map-search-overlay"] .hudpro-map-search-pill input {
    font-size: 13px !important;
  }
  [data-testid="map-search-overlay"] .hudpro-territory-badge {
    font-size: 10px !important;
    padding: 4px 7px !important;
    min-height: 22px !important;
    border-radius: 6px !important;
  }
  [data-testid="map-search-overlay"] .hudpro-map-search-pill,
  [data-testid="map-search-overlay"] .hudpro-map-search-pill *,
  [data-testid="map-search-overlay"] .hudpro-territory-badge {
    pointer-events: auto !important;
  }

  .map-overlay-ui,
  .hudpro-map-search {
    top: calc(var(--chrome-h, 100px) + 8px);
    left: 10px;
    gap: 6px;
  }
  .hudpro-map-search > div {
    max-width: min(360px, calc(100vw - 20px)) !important;
    gap: 6px !important;
  }
  .hudpro-map-search-pill {
    min-height: 36px;
    height: 36px;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  }
  .hudpro-map-search-pill svg {
    width: 18px;
    height: 18px;
    shape-rendering: geometricPrecision;
  }
  .hudpro-map-search-pill input {
    font-size: 13px;
  }
  .hudpro-outside-mainland {
    gap: 5px;
    padding: 6px 8px;
    border-radius: 8px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }
  .hudpro-outside-mainland-title {
    font-size: 10px;
    letter-spacing: 0.02em;
    line-height: 1.25;
    text-shadow: none;
  }
  .hudpro-outside-mainland-badges {
    gap: 5px;
  }
  .hudpro-territory-badge {
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 6px;
    min-height: 24px;
  }
}

/* Left-side search panel — single authoritative rule: compact transparent stack */
#search-panel {
  position: absolute;
  top: 16px;
  left: 16px;
  width: clamp(320px, 28vw, 420px);
  z-index: var(--z-map-search);
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (max-width: 767px) {
  #search-panel {
    width: calc(100vw - 32px);
    left: 16px;
    right: auto;
  }
}

/* 1) Sign Up for Newsletter — dark translucent pill, ~40px */
.search-panel-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.search-panel-tool {
  font-family: 'Barlow', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 10px 14px;
  border-radius: 999px;
  border: none;
  background: rgba(15, 22, 34, 0.72);
  color: rgba(255, 255, 255, 0.88);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.13s, color 0.13s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  box-sizing: border-box;
}

.search-panel-tool:hover {
  background: rgba(15, 22, 34, 0.88);
  color: var(--white);
}

.search-panel-tool-newsletter svg,
.search-panel-tool-link svg {
  flex-shrink: 0;
}

/* 2) City, State, or ZIP — white pill, subtle shadow, left icon */
.search-panel-single-field {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: none;
  border-radius: 999px;
  padding: 0 14px;
  min-height: 44px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
}

.search-panel-field-icon {
  flex-shrink: 0;
  color: var(--muted);
}

.search-panel-input-single {
  flex: 1;
  min-width: 0;
  border: none !important;
  background: transparent !important;
  padding: 10px 0 !important;
  font-size: 14px !important;
  border-radius: 0 !important;
  color: var(--navy-deep);
}

.search-panel-input-single::placeholder {
  color: var(--muted);
}

.search-panel-input-single:focus {
  box-shadow: none !important;
  outline: none !important;
}

/* 3) Use My Location — blue filled pill, helper text inside same block */
.search-panel-btn-use-location {
  width: 100%;
  min-height: 52px;
  padding: 10px 16px !important;
  font-size: 13px !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 2px;
  border-radius: 999px;
  border: none;
  background: var(--forest-green);
  color: var(--white);
  cursor: pointer;
  transition: background 0.13s;
}

.search-panel-btn-use-location:hover {
  background: var(--forest-green-hover);
}

.search-panel-btn-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-panel-btn-icon {
  flex-shrink: 0;
}

.search-panel-primary-helper {
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  margin-left: 30px;
  display: block;
}

/* 4) Search Manually — white filled pill */
.search-panel-btn-search-manually {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px !important;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--white);
  color: var(--navy-deep);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.search-panel-btn-search-manually:hover:not(:disabled) {
  background: #f5f5f5;
}

.search-panel-btn-search-manually:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.search-panel-btn-search-manually .search-panel-btn-icon {
  color: var(--navy-deep);
  opacity: 0.7;
}

/* 5) Beds, Price, Filters — small grouped pill chips (tight, not full-width bars) */
.search-panel-chips-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
}

.search-panel-filter-chip,
.search-panel-chip {
  width: auto;
  padding: 6px 10px;
  border-radius: 999px;
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: 'Barlow', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  border: none;
  background: var(--white);
  color: var(--navy-deep);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.13s, color 0.13s, box-shadow 0.13s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.search-panel-filter-chip:hover {
  background: #f5f5f5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.search-panel-filter-chip svg:first-of-type {
  flex-shrink: 0;
  opacity: 0.8;
  color: var(--navy-deep);
}

.search-panel-chip-chevron {
  flex-shrink: 0;
  opacity: 0.6;
  margin-left: 2px;
  color: var(--navy-deep);
}

/* Legacy section/action classes — keep for any reuse, no visual impact */
.search-panel-section,
.search-panel-section-inputs,
.search-panel-section-actions,
.search-panel-section-filter-chips {
  display: contents;
}

.search-panel-btn-primary:not(.search-panel-btn-use-location) {
  background: var(--gold-dim);
  border-color: rgba(255, 199, 44, 0.45);
  color: var(--gold);
}

.search-panel-btn-primary:not(.search-panel-btn-use-location):hover:not(:disabled) {
  background: rgba(255, 199, 44, 0.25);
  border-color: var(--gold);
  color: var(--white);
}

.search-panel-btn {
  font-family: 'Barlow', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.13s, border-color 0.13s, color 0.13s;
}

.search-panel-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.search-panel-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
  display: block;
}

.search-panel-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.search-panel-input,
.search-panel-select {
  font-family: 'Barlow', sans-serif;
  font-size: 12px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  min-width: 0;
}

.search-panel-input::placeholder {
  color: var(--muted);
}

.search-panel-input:focus,
.search-panel-select:focus {
  outline: none;
  border-color: rgba(255, 199, 44, 0.4);
  background: rgba(255, 255, 255, 0.08);
}

.search-panel-input {
  flex: 1 1 80px;
}

.search-panel-input-zip {
  flex: 0 0 72px;
  max-width: 72px;
}

.search-panel-select {
  flex: 0 0 auto;
  min-width: 90px;
  cursor: pointer;
}

.search-panel-select option {
  background: var(--navy);
  color: var(--white);
}

.search-panel-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.search-panel-btn {
  font-family: 'Barlow', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  border: 1px solid;
  cursor: pointer;
  transition: background 0.13s, border-color 0.13s, color 0.13s;
}

.search-panel-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.search-panel-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.search-panel-chip-row:last-child {
  margin-bottom: 0;
}

.search-panel-chip-row-price {
  margin-top: 2px;
}

.search-panel-chip {
  font-family: 'Barlow', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 5px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.13s;
}

.search-panel-chip:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--white);
}

.search-panel-chip.active {
  background: var(--gold-dim);
  border-color: rgba(255, 199, 44, 0.45);
  color: var(--gold);
}

#map, #hudpro-map { width: 100%; height: 100%; overflow: visible; }

/* Google Maps controls — both map type and zoom at RIGHT_BOTTOM (bottom-right cluster); cameraControl: false in MapClient. */
/* Pegman: show and place safely above the zoom stack so it does NOT mix into the control pod (baseline: zoom + Map/Satellite only). */
#map-canvas .gm-svpc,
#map .gm-svpc,
#hudpro-map .gm-svpc {
  display: block !important;
  position: absolute !important;
  bottom: 152px !important;
  right: 16px !important;
  z-index: 2;
}
/* Fullscreen kill switch (in case fullscreenControl:false still injects DOM) */
.gm-fullscreen-control { display: none !important; }
#map .gm-fullscreen-control,
#hudpro-map .gm-fullscreen-control,
#map-canvas .gm-fullscreen-control { display: none !important; }
#map button[aria-label*="fullscreen" i],
#map button[title*="fullscreen" i],
#hudpro-map button[aria-label*="fullscreen" i],
#hudpro-map button[title*="fullscreen" i],
#map-canvas button[aria-label*="fullscreen" i],
#map-canvas button[title*="fullscreen" i] { display: none !important; }

/* Reset only margins on Google control wrappers; do NOT position or flex all .gmnoprint (causes overlap). */
#map .gmnoprint,
#hudpro-map .gmnoprint,
#map-canvas .gmnoprint {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

/* Bottom-right controls: baseline from 447541e — zoom on top, Map/Satellite below; one control pod. Pegman is positioned separately above (see .gm-svpc). */
/* 1) Map type wrapper — bottom of corner, same right edge as zoom */
#map-canvas .gmnoprint.gm-style-mtc-bbw[role="menubar"],
#map .gmnoprint.gm-style-mtc-bbw[role="menubar"],
#hudpro-map .gmnoprint.gm-style-mtc-bbw[role="menubar"] {
  position: absolute !important;
  bottom: 16px !important;
  right: 16px !important;
  z-index: 2;
}
/* 2) Zoom wrapper — sit above Map/Satellite; force visible (Google can hide when Pegman enabled); above Pegman in stack */
#map-canvas .gmnoprint:has(button[aria-label*="Zoom" i]),
#map .gmnoprint:has(button[aria-label*="Zoom" i]),
#hudpro-map .gmnoprint:has(button[aria-label*="Zoom" i]) {
  position: absolute !important;
  bottom: 76px !important;
  right: 16px !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
/* When Pegman is enabled Google can re-render into a bundled container; same baseline + visible */
#map-canvas [class*="gm-bundled"] .gmnoprint.gm-style-mtc-bbw[role="menubar"],
#hudpro-map [class*="gm-bundled"] .gmnoprint.gm-style-mtc-bbw[role="menubar"] {
  position: absolute !important;
  bottom: 16px !important;
  right: 16px !important;
  z-index: 2;
}
#map-canvas [class*="gm-bundled"] .gmnoprint:has(button[aria-label*="Zoom" i]),
#hudpro-map [class*="gm-bundled"] .gmnoprint:has(button[aria-label*="Zoom" i]) {
  position: absolute !important;
  bottom: 76px !important;
  right: 16px !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
/* Fallback: zoom wrapper may not have .gmnoprint when Pegman re-bundles; target by content (parent of both Zoom in/out) */
#map-canvas div:has(> button[aria-label*="Zoom in" i]):has(> button[aria-label*="Zoom out" i]),
#hudpro-map div:has(> button[aria-label*="Zoom in" i]):has(> button[aria-label*="Zoom out" i]) {
  position: absolute !important;
  bottom: 76px !important;
  right: 16px !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Hide fullscreen/expand control and the round recenter/location button (Google does not expose a separate disable) */
#map button[aria-label*="Full screen"],
#map button[aria-label*="Exit full screen"],
#map button[title*="Full screen"],
#map button[title*="full screen"],
#hudpro-map button[aria-label*="Full screen"],
#hudpro-map button[aria-label*="Exit full screen"],
#hudpro-map button[title*="Full screen"],
#hudpro-map button[title*="full screen"],
#map-canvas button[aria-label*="Full screen"],
#map-canvas button[aria-label*="Exit full screen"],
#map-canvas button[title*="Full screen"],
#map-canvas button[title*="full screen"] {
  display: none !important;
}
#map button[aria-label*="Location" i],
#map button[aria-label*="My location" i],
#map button[aria-label*="Center map" i],
#map button[title*="Location" i],
#map button[title*="My location" i],
#hudpro-map button[aria-label*="Location" i],
#hudpro-map button[aria-label*="My location" i],
#hudpro-map button[aria-label*="Center map" i],
#hudpro-map button[title*="Location" i],
#hudpro-map button[title*="My location" i],
#map-canvas button[aria-label*="Location" i],
#map-canvas button[aria-label*="My location" i],
#map-canvas button[aria-label*="Center map" i],
#map-canvas button[title*="Location" i],
#map-canvas button[title*="My location" i] {
  display: none !important;
}
#map button[aria-label*="recenter" i],
#map button[aria-label*="your location" i],
#hudpro-map button[aria-label*="recenter" i],
#hudpro-map button[aria-label*="your location" i],
#map-canvas button[aria-label*="recenter" i],
#map-canvas button[aria-label*="your location" i] {
  display: none !important;
}

/* Hide 4-arrow expand / "Open in Google Maps" button below Map/Satellite (bottom-right) */
#map button[aria-label*="Open in Google Maps"],
#map button[aria-label*="Expand"],
#map button[aria-label*="View larger"],
#map button[aria-label*="opens in new tab"],
#map button[aria-label*="this area"],
#map button[title*="Open in Google Maps"],
#map a[aria-label*="Open in Google Maps"],
#map a[title*="Open in Google Maps"],
#map a[href*="google.com/maps"][target="_blank"],
#hudpro-map button[aria-label*="Open in Google Maps"],
#hudpro-map button[aria-label*="Expand"],
#hudpro-map button[aria-label*="View larger"],
#hudpro-map button[aria-label*="opens in new tab"],
#hudpro-map button[aria-label*="this area"],
#hudpro-map button[title*="Open in Google Maps"],
#hudpro-map a[aria-label*="Open in Google Maps"],
#hudpro-map a[title*="Open in Google Maps"],
#hudpro-map a[href*="google.com/maps"][target="_blank"],
#map-canvas button[aria-label*="Open in Google Maps"],
#map-canvas button[aria-label*="Expand"],
#map-canvas button[aria-label*="View larger"],
#map-canvas button[aria-label*="opens in new tab"],
#map-canvas button[aria-label*="this area"],
#map-canvas button[title*="Open in Google Maps"],
#map-canvas a[aria-label*="Open in Google Maps"],
#map-canvas a[title*="Open in Google Maps"],
#map-canvas a[href*="google.com/maps"][target="_blank"] {
  display: none !important;
}

/* Map/Satellite toggle: compact, full width in cluster, no clipping */
#map .gm-style-mtc,
#hudpro-map .gm-style-mtc,
#map-canvas .gm-style-mtc {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  min-width: 1px !important;
  flex-shrink: 0 !important;
}
#map .gm-style-mtc div,
#hudpro-map .gm-style-mtc div,
#map-canvas .gm-style-mtc div {
  height: 28px !important;
  min-height: 28px !important;
  font-size: 11px !important;
  padding: 0 8px !important;
  gap: 0 !important;
}
#map .gm-style-mtc button,
#hudpro-map .gm-style-mtc button,
#map-canvas .gm-style-mtc button {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
  line-height: 26px !important;
}
#map .gm-style-mtc .gm-control-active,
#hudpro-map .gm-style-mtc .gm-control-active,
#map-canvas .gm-style-mtc .gm-control-active {
  padding: 0 10px !important;
}

/* Zoom control: proportional size (~28–32px) so it doesn’t dominate the corner */
#map button[aria-label*="Zoom in" i],
#map button[aria-label*="Zoom out" i],
#hudpro-map button[aria-label*="Zoom in" i],
#hudpro-map button[aria-label*="Zoom out" i],
#map-canvas button[aria-label*="Zoom in" i],
#map-canvas button[aria-label*="Zoom out" i] {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
/* Zoom control container (stack of + / -) so it doesn’t stretch or clip */
#map-canvas .gmnoprint:has(button[aria-label*="Zoom in" i]),
#map .gmnoprint:has(button[aria-label*="Zoom in" i]),
#hudpro-map .gmnoprint:has(button[aria-label*="Zoom in" i]) {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
}

/* Fetch loading pill */
#map-loading {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20,29,41,0.92);
  border: 1px solid var(--border-mid);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted-lt);
  display: flex;
  align-items: center;
  gap: 7px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
  backdrop-filter: blur(8px);
}
#map-loading.visible { opacity: 1; }

/* Inline loading pill — neutral on gray control bar */
#filter-row .filter-loading-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1px solid #D1D5DB;
  color: #6B7280;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
#filter-row .filter-loading-pill .spinner {
  width: 8px;
  height: 8px;
  border-width: 1.5px;
  border: 1.5px solid #E5E7EB;
  border-top-color: #6B7280;
}

.spinner {
  width: 10px; height: 10px;
  border: 1.5px solid rgba(255,255,255,0.12);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ══════════════════════════════════════
   RIGHT RAIL — In grid flow (not overlay)
   Second column; standard flow layout.
   Desktop collapsible rail uses .adv-rail-desktop-host (width from grid column).
   ══════════════════════════════════════ */
#adv-rail:not(.adv-rail-desktop-host) {
  position: relative;
  width: 380px !important;
  min-width: 380px !important;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  background: #f4f4f5 !important;
  border: none !important;
  border-left: none !important;
  z-index: var(--z-map-ui);
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  transform: none;
  box-shadow: none !important;
  outline: none !important;
  margin: 0 !important;
  margin-left: 0 !important;
  padding: 0 !important;
  padding-bottom: 0;
}

#adv-rail.adv-rail-desktop-host {
  position: relative;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  z-index: var(--z-map-ui);
  margin: 0 !important;
  padding: 0 !important;
}

/* Open rail: above filter bar (190); keep isolation so children stack predictably */
#adv-rail.localpros-rail.adv-rail-desktop-host.adv-rail--panel-open {
  z-index: 191;
  isolation: isolate;
  cursor: default;
}

#adv-rail.localpros-rail.adv-rail-desktop-host.adv-rail--panel-open .adv-rail-desktop-hitplate {
  pointer-events: auto;
  cursor: default;
}

#adv-rail.localpros-rail.adv-rail-desktop-host .adv-rail-slide-panel.adv-rail-slide-panel--open {
  pointer-events: auto;
}

#adv-rail.localpros-rail.adv-rail-desktop-host .adv-rail-slide-inner.adv-rail-slide-inner--visible {
  pointer-events: auto;
  cursor: default;
}

#adv-rail.localpros-rail.adv-rail-desktop-host .adv-rail-slide-inner:not(.adv-rail-slide-inner--visible) {
  pointer-events: none;
}

/* Rail drawer — normal flex column, fills rail */
#rail-drawer {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-evenly !important;
  height: 100% !important;
  overflow: hidden;
  min-height: 0;
}

.rail-scroll {
  flex: 1 !important;
  overflow: hidden;
  padding: 0;
  padding-bottom: 0;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-evenly !important;
  height: 100% !important;
  min-height: 0;
  max-height: 100%;
}

/* Desktop: rail scrolls so all 3 cards are reachable (no overflow hidden) */

/* ── Module header ── */
.rail-module-header {
  padding: 8px 10px 4px;
  position: relative;
  flex-shrink: 0;
  text-align: center;
}
.rail-module-header::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 3px;
  width: 4px;
  background: var(--trusted-blue);
  border-radius: 0 2px 2px 0;
  opacity: 0.92;
}
.rail-module-title {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1A1C1E;
  line-height: 1.2;
}
.rail-module-sub {
  font-size: 10px;
  font-weight: 600;
  color: #1A1C1E;
  opacity: 0.9;
  margin-top: 2px;
  letter-spacing: 0.02em;
}

/* ── Pro Zone — light surface; no bottom gap so cards sit flush */
.pro-zone {
  margin: 0 8px 0;
  background: transparent;
  border-radius: var(--radius-2xl);
  border: none;
  box-shadow: none;
  padding: 0 6px 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 4px;
  flex-shrink: 0;
  overflow: visible;
}

/* ── Card — white, crisp gold edge, high-contrast ── */
.adv-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #C5A059;
  border-radius: 12px;
  padding: 4px 12px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: default;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 0 0 1px rgba(197,160,89,0.08);
  margin-bottom: 12px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  font-family: 'Barlow', 'DM Sans', sans-serif;
  overflow: hidden;
}
.adv-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--trusted-blue);
  border-radius: 12px 0 0 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.adv-card:hover { border-color: #94a3b8; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.adv-card:hover::before { opacity: 0.9; }

/* Unsold rail cards — premium closed layout, all 3 visible, scroll if needed */
.adv-card-unsold {
  min-height: 0;
  padding: 0 6px 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.adv-card-unsold .adv-type { margin-top: 0; font-size: 13px; letter-spacing: -0.01em; text-align: left; color: #B18E38; }
.adv-card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap;
}
.adv-card-top-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.adv-card-unsold .adv-county { margin-bottom: 2px; margin-top: 0; font-size: 11px; color: #64748b; }
.adv-card-unsold .adv-county-inline {
  width: auto !important;
  text-align: right !important;
  flex-shrink: 0;
  margin-left: auto;
}
.adv-card-top-row .adv-type { margin-bottom: 0; }
.adv-pro-link {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #1A1C1E;
  background: rgba(15,23,42,0.06);
  border: 1px solid rgba(15,23,42,0.2);
  border-radius: 999px;
  padding: 3px 8px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
  appearance: none;
  font-family: inherit;
}
.adv-pro-link:hover {
  text-decoration: none;
  background: rgba(15,23,42,0.12);
  border-color: rgba(15,23,42,0.3);
  color: #1A1C1E;
}

/* VACANT card: contained wrapper so bar stays inside 12px radius */
.adv-card-vacant-contained {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 38px;
}
.adv-card-vacant-contained .adv-cta-full:last-child {
  border-radius: 0 0 12px 12px;
}

/* VACANT card: high-conversion advertiser state */
.adv-card-vacant-wrap {
  width: 100%;
  align-items: center;
}
.adv-card-vacant-pro {
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: 1px solid #e2e8f0;
}
.adv-card-vacant-leftbox-wrap {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.adv-card-role-realtor.adv-card-vacant .adv-card-vacant-leftbox-wrap { background: #f1f5f9; }
.adv-card-role-mortgage.adv-card-vacant .adv-card-vacant-leftbox-wrap { background: #f0fdf4; }
.adv-card-role-inspector.adv-card-vacant .adv-card-vacant-leftbox-wrap { background: #fffbeb; }
/* Neon yellow pulse ONLY on middle card (mortgage) left icon */
.adv-card-role-mortgage.adv-card-vacant .adv-card-vacant-leftbox {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse-vacant 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.adv-card-vacant-leftbox {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.adv-card-role-realtor.adv-card-vacant .adv-card-vacant-leftbox,
.adv-card-role-inspector.adv-card-vacant .adv-card-vacant-leftbox {
  animation: none;
}
.adv-referral-module-vacant {
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
  border: 1px solid rgba(197,160,89,0.35);
  height: 80px;
  min-height: 80px;
  max-height: 80px;
}
.adv-card-vacant-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding: 8px 0 10px;
  min-height: 0;
  flex-shrink: 0;
}
.adv-card-vacant-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #334155;
  filter: drop-shadow(0 0 6px rgba(197,160,89,0.35));
}
.adv-card-vacant-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-align: left;
  color: #1e293b;
  line-height: 1.3;
}
.adv-card-vacant-subtitle {
  font-size: 11px;
  font-weight: 500;
  text-align: left;
  color: #475569;
  line-height: 1.35;
}
.adv-pro-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(197,160,89,0.5);
  background: rgba(197,160,89,0.12);
  color: #C5A059;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@keyframes pulse-vacant {
  0%, 100% {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }
  50% {
    background: #FFFF00;
    box-shadow: inset 0 0 25px rgba(255, 255, 0, 0.5);
  }
}
.adv-cta-connect {
  background: var(--trusted-blue) !important;
  color: #fff !important;
  border-color: var(--trusted-blue) !important;
}
.adv-cta-connect:hover {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #fff !important;
}

/* OCCUPIED card: pro photo + name — headshot pushed left for more data room */
.adv-card-occupied {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  padding: 2px 4px 2px 2px;
}
.adv-card-occupied-photo-wrap {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 2px;
}
.adv-card-occupied-photo-wrap::after {
  content: '';
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 1.5px #fff;
  animation: pulse-ready 2.4s ease-in-out infinite;
}
@keyframes pulse-ready {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.18); opacity: 0.72; }
}
.adv-card-occupied-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.adv-card-occupied-initials {
  font-size: 11px;
  font-weight: 700;
  color: var(--trusted-blue);
}
.adv-card-occupied-name {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  text-align: left;
  line-height: 1.2;
  width: 100%;
}

.adv-card-inner-wrap {
  display: flex;
  align-items: stretch;
  gap: 5px;
  min-height: 0;
  flex-shrink: 0;
}
.adv-card-occupied-wrap {
  flex-direction: row;
}
.adv-card-inner {
  flex: 1;
  min-width: 0;
  background: #ffffff;
  border-radius: 8px;
  padding: 2px 6px 2px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid #CBD5E1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.adv-card-role-mortgage .adv-card-inner {
  padding-top: 1px;
  padding-bottom: 1px;
  margin-top: -4px;
  margin-bottom: -4px;
}
.adv-card-inner.adv-card-occupied {
  background: #ffffff;
  border: 1px solid #CBD5E1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.adv-card-inner .adv-territory { margin-bottom: 2px; }
.adv-card-inner .adv-exclusivity { color: var(--trusted-blue); font-size: 12px; font-weight: 600; margin-bottom: 2px; line-height: 1.3; }
.adv-card-inner .adv-opportunity { margin-bottom: 0; font-size: 10px; line-height: 1.35; color: #1e293b; font-weight: 600; }
.adv-referral-module {
  flex-shrink: 0;
  width: 155px;
  min-width: 155px;
  min-height: 81px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  padding: 10px 12px;
  background: rgba(28,36,50,0.95);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.adv-referral-module-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.98);
  line-height: 1.3;
}
.adv-referral-module-cta {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
  margin-top: 2px;
}
.adv-referral-module-cta:hover { text-decoration: underline; color: #ffd54f; }
.adv-referral-module-supporting {
  font-size: 9px;
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  line-height: 1.35;
}
.adv-territory {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffffff;
  margin-bottom: 2px;
}
.adv-card-unsold .adv-opportunity { margin-bottom: 0; }
.adv-card-unsold .adv-type-gold { color: #B18E38; font-weight: 700; letter-spacing: -0.01em; }
.adv-referral-wrap {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 9px;
  line-height: 1.25;
}
.adv-referral-line { display: block; margin-bottom: 0; }
.adv-referral-link {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
}
.adv-referral-link:hover { text-decoration: underline; }
.adv-referral-highlight { color: var(--gold); font-weight: 600; }
.adv-card-unsold .adv-cta { height: 34px !important; min-height: 34px !important; padding: 6px 10px; line-height: 1.25; font-size: 11px; font-weight: 800; letter-spacing: 0.03em; border-radius: 8px; color: var(--navy); display: flex; align-items: center; justify-content: center; }
.adv-card-unsold .adv-cta-primary { line-height: 24px; background: var(--forest-green); color: #fff; border: 1px solid var(--forest-green); }
.adv-card-unsold .adv-cta-primary:not(.adv-cta-connect):hover { background: var(--forest-green-hover); color: #fff; border-color: var(--forest-green-hover); }
.adv-card-unsold .adv-cta-full { width: 85%; align-self: center; margin-left: auto; margin-right: auto; margin-top: 2px; text-align: center; box-sizing: border-box; border-radius: 10px; }
.adv-card-vacant .adv-cta-full { width: 100%; align-self: stretch; margin-left: 0; margin-right: 0; }
.adv-card-role-mortgage .adv-cta-full { margin-bottom: 6px !important; }
.adv-selling-point-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  background: #111827;
  color: #ffffff;
  border-radius: 0 0 12px 12px;
  border: none;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
  box-sizing: border-box;
}
.adv-pro-stats {
  flex: 1;
  min-width: 0;
  min-height: 72px;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  background: #ffffff;
  padding: 4px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.adv-pro-stat-line {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: 0.01em;
  text-align: left;
  line-height: 1.2;
}

/* Badge — dead rule kept for safety, no HTML badge exists */
.adv-badge {
  position: absolute;
  top: 9px; right: 10px;
  background: rgba(255,199,44,0.10);
  color: rgba(255,199,44,0.8);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 3px;
  border: 1px solid rgba(255,199,44,0.18);
}

.adv-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.adv-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--navy-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  flex-shrink: 0;
  border: 1.5px solid rgba(255,199,44,0.15);
}
.adv-avatar-img-wrap {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.adv-avatar-img-wrap .adv-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255,199,44,0.15);
}
.adv-avatar-img-wrap .adv-avatar-fallback {
  position: absolute;
  inset: 0;
  display: none;
}
.adv-avatar-img-wrap .adv-avatar-fallback.adv-avatar-show {
  display: flex;
}
.drawer-headshot-hide { display: none !important; }
.adv-info { flex: 1; min-width: 0; }
/* Name — white, prominent */
.adv-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
/* Role — gold accent */
.adv-type {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,199,44,0.75);
  letter-spacing: 0.02em;
  margin-top: 1px;
}
/* County — muted */
.adv-county {
  font-size: 10px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
  margin-top: 1px;
}
.adv-county svg { width: 8px; height: 8px; fill: var(--muted); flex-shrink: 0; }

/* Opportunity / status line — sold cards */
.adv-opportunity {
  font-size: 10px;
  color: rgba(255,255,255,0.75);
  margin-bottom: 6px;
  line-height: 1.25;
}

/* CTA — compact, 6px vertical padding */
.adv-cta {
  width: 100%;
  height: 30px !important;
  min-height: 30px !important;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-mid);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.7);
  font-family: 'Barlow', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.13s, border-color 0.13s, color 0.13s;
  display: block;
  box-sizing: border-box;
}
.adv-cta:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); }

/* Available Slot cards — compact: role + territory + tagline + one CTA */
.adv-card-available .adv-type-gold { color: var(--gold); font-weight: 700; letter-spacing: 0.04em; }
.adv-card-available .adv-name-available,
.adv-card-available .adv-name-territory { color: rgba(255,255,255,0.9); font-size: 11px; }
.adv-avatar-slot { background: rgba(255,255,255,0.08); color: var(--muted); font-size: 12px; font-weight: 400; }
.adv-cta-primary { background: var(--gold); color: var(--navy); border-color: var(--gold); text-align: center; text-decoration: none; line-height: 24px; }
.adv-cta-primary:hover { background: var(--gold-dark); color: var(--navy); border-color: var(--gold-dark); }
/* Real estate agent / home inspector CTAs: Forest Green; Connect with Specialist stays Trusted Blue (.adv-cta-connect) */
.adv-cta-primary:not(.adv-cta-connect) { background: var(--forest-green); color: #fff; border-color: var(--forest-green); }
.adv-cta-primary:not(.adv-cta-connect):hover { background: var(--forest-green-hover); color: #fff; border-color: var(--forest-green-hover); }
.adv-card-unsold .adv-cta-primary:not(.adv-cta-connect) { background: var(--forest-green); color: #fff; border-color: var(--forest-green); }
.adv-card-unsold .adv-cta-primary:not(.adv-cta-connect):hover { background: var(--forest-green-hover); color: #fff; border-color: var(--forest-green-hover); }
/* Removed: scarcity badge, sub copy, exclusive line, buyer helper, secondary CTA — no rules needed */

/* SOLD card — click opens drawer; active state (stronger border/shadow) */
.adv-card-sold { cursor: pointer; }
.adv-card-sold .adv-cta { pointer-events: none; }
.adv-card-active {
  border-color: rgba(255,199,44,0.45);
  box-shadow: 0 0 0 1px rgba(255,199,44,0.2), 0 2px 8px rgba(0,0,0,0.2);
}
.adv-card-active::before { opacity: 1; }
.pro-zone .adv-card:not(.adv-card-active) { opacity: 0.92; }
.pro-zone .adv-card.adv-card-active { opacity: 1; }

/* More Info toggle */
.adv-more-btn {
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid rgba(255,255,255,0.06);
  color: var(--muted);
  font-family: 'Barlow', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 7px 0 0;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  transition: color 0.13s;
}
.adv-more-btn:hover { color: var(--white); }
.adv-more-btn .chevron { font-size: 10px; transition: transform 0.2s; }
.adv-card.expanded .adv-more-btn .chevron { transform: rotate(180deg); }

/* More Info panel — absolute overlay, directional */
.adv-more-panel {
  display: none;
  position: absolute;
  left: 0; right: 0;
  z-index: 60;
  flex-direction: column;
  gap: 8px;
  padding: 13px 14px;
  background: #1E2D42;
  border: 1px solid rgba(255,255,255,0.12);
  border-top: 2px solid rgba(255,199,44,0.45);
  border-radius: var(--r-md);
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
}
.adv-more-panel.dir-down {
  top: calc(100% + 4px); bottom: auto;
}
.adv-more-panel.dir-up {
  bottom: calc(100% + 4px); top: auto;
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 2px solid rgba(255,199,44,0.45);
}
.adv-card.expanded .adv-more-panel { display: flex; }

.adv-more-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  color: rgba(255,255,255,0.6);
}
.adv-more-row a {
  color: var(--gold);
  text-decoration: none;
  font-weight: 600;
}
.adv-more-row a:hover { text-decoration: underline; }
.adv-more-icon {
  width: 13px; height: 13px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.adv-more-photo {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--navy-light);
  border: 1.5px solid rgba(255,199,44,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  flex-shrink: 0;
}
.adv-more-bio {
  font-size: 10.5px;
  color: rgba(255,255,255,0.38);
  line-height: 1.5;
  margin-top: 1px;
}

/* Rail footer */
.rail-footer {
  padding: 6px 10px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.rail-advertise-btn {
  width: 100%;
  height: 26px;
  border-radius: var(--r-sm);
  background: var(--forest-green);
  border: none;
  color: var(--white);
  font-family: 'Barlow', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background 0.13s;
}
.rail-advertise-btn:hover { background: var(--forest-green-hover); }
.rail-advertise-btn svg { width: 10px; height: 10px; fill: var(--white); }

/* ── Banner section inside rail ── */
.rail-banner-section {
  border-top: 1px solid var(--border);
  padding: 12px 10px 10px;
  flex-shrink: 0;
}
.rail-banner-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.adv-banner {
  background: var(--navy-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.adv-banner:hover { border-color: rgba(255,199,44,0.3); }
.adv-banner-logo {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: var(--navy-light);
  border: 1px solid var(--border-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.adv-banner-info { flex: 1; min-width: 0; }
.adv-banner-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adv-banner-tag {
  font-size: 10px;
  color: var(--muted);
  margin-top: 1px;
}
.adv-banner-cta {
  font-size: 10px;
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
  letter-spacing: 0.03em;
}


/* ══════════════════════════════════════
   LEFT DRAWER (overlay)
   ══════════════════════════════════════ */
#drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: var(--z-drawer-scrim);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s;
}
#drawer-scrim.open { opacity: 1; pointer-events: all; }

#left-drawer {
  position: fixed;
  top: 0; left: 0;
  width: 388px;
  height: 100vh;
  background: var(--navy);
  border-right: 1px solid var(--border-mid);
  z-index: var(--z-drawer-panel);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.32,0,0,1);
  box-shadow: var(--sh-drawer);
}
#left-drawer.open { transform: translateX(0); }

.drawer-head {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.drawer-wordmark {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.drawer-wordmark span { color: var(--gold); }

.drawer-close {
  width: 30px; height: 30px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-mid);
  background: none;
  color: var(--muted-lt);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.13s;
  line-height: 1;
}
.drawer-close:hover { background: rgba(255,255,255,0.08); color: var(--white); }

.drawer-user {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
}
.d-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--navy-light);
  border: 1.5px solid rgba(255,199,44,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--gold);
  flex-shrink: 0;
}
.d-user-name { font-size: 13.5px; font-weight: 700; color: var(--white); }
.d-user-plan {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}
.plan-tag {
  background: rgba(255,199,44,0.13);
  color: rgba(255,199,44,0.85);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid rgba(255,199,44,0.2);
}

.drawer-nav { flex: 1; overflow-y: auto; padding: 8px; }

.d-section {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 11px 9px 5px;
}

.d-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 7px;
  color: rgba(255,255,255,0.68);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.13s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.d-item:hover { background: rgba(255,255,255,0.05); color: var(--white); }
.d-item.active { background: rgba(255,199,44,0.09); color: var(--gold); }

.d-icon {
  width: 18px; height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.65;
}
.d-item.active .d-icon { opacity: 1; }
.d-icon svg { width: 16px; height: 16px; }

.d-badge {
  margin-left: auto;
  background: var(--gold);
  color: var(--navy);
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 10px;
}

.drawer-foot {
  padding: 11px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.drawer-upgrade {
  width: 100%;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--gold);
  border: none;
  color: var(--navy);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.13s;
}
.drawer-upgrade:hover { background: var(--gold-dark); }


/* ══════════════════════════════════════
   ZONE A — Bottom-right stack
   Preview Card → Smart Assist → FAB
   ══════════════════════════════════════ */
#zone-a {
  position: fixed;
  bottom: 18px;
  right: calc(380px + 18px);
  z-index: var(--z-zone-a);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}
#zone-a > * { pointer-events: all; }


/* ── Preview Card ── */
#preview-card {
  width: 368px;
  border-radius: var(--radius-2xl);
  background: var(--card-bg);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
  max-height: 40vh;
  display: flex;
  flex-direction: column;
}
#preview-card.open {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.pc-img-wrap {
  width: 100%;
  height: 130px;
  background: #f1f5f9;
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 11px;
}
.pc-img-badge {
  position: absolute;
  top: 8px; left: 10px;
  background: var(--forest-green);
  color: var(--white);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
}
.pc-close {
  position: absolute;
  top: 8px; right: 8px;
  width: 26px; height: 26px;
  border-radius: 5px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.08);
  color: #475569;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.13s;
  line-height: 1;
}
.pc-close:hover { background: #fff; color: #1e293b; }

.pc-body {
  padding: 13px 14px;
  overflow-y: auto;
  flex: 1;
}
.pc-address { font-size: 13.5px; font-weight: 700; color: #1e293b; line-height: 1.3; }
.pc-city { font-size: 11.5px; color: #64748b; margin: 2px 0 10px; }

.pc-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.pc-stat {
  background: #f8fafc;
  border-radius: var(--r-sm);
  padding: 7px 6px;
  text-align: center;
}
.pc-stat-val { font-size: 13.5px; font-weight: 700; color: var(--trusted-blue); }
.pc-stat-lbl { font-size: 9px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 1px; }

.pc-deadline {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: #64748b;
  margin-bottom: 11px;
}
.pc-deadline svg { width: 11px; height: 11px; fill: var(--trusted-blue); }
.pc-deadline strong { color: var(--trusted-blue); font-weight: 700; }

.pc-actions { display: flex; gap: 7px; }
.pc-btn {
  flex: 1;
  height: 30px;
  border-radius: var(--r-sm);
  font-family: 'Barlow', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.13s;
  letter-spacing: 0.02em;
}
.pc-btn.primary { background: var(--forest-green); color: var(--white); }
.pc-btn.primary:hover { background: var(--forest-green-hover); }
.pc-btn.secondary { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.8); border: 1px solid var(--border-mid); }
.pc-btn.secondary:hover { background: rgba(255,255,255,0.12); }


/* ── Smart Assist ── */
#smart-assist {
  width: 352px;
  border-radius: var(--r-lg);
  background: var(--navy);
  border: 1px solid rgba(255,199,44,0.18);
  box-shadow: var(--sh-float);
  overflow: hidden;
  transition: max-height 0.28s cubic-bezier(0.4,0,0.2,1), opacity 0.18s;
  max-height: 52px;
  opacity: 0;
  pointer-events: none;
}
#smart-assist.visible { opacity: 1; pointer-events: all; }
#smart-assist.docked { max-height: 310px; }
/* Hard cap: 65vh */
#smart-assist.expanded { max-height: min(480px, 65vh); }

.sa-header {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
  flex-shrink: 0;
}
#smart-assist.docked .sa-header,
#smart-assist.expanded .sa-header { border-color: var(--border); }

.sa-pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 5px rgba(34,197,94,0.55);
  flex-shrink: 0;
  animation: td-pulse 2.4s ease-in-out infinite;
}
.sa-title-wrap { flex: 1; }
.sa-title { font-size: 12.5px; font-weight: 700; color: var(--white); }
.sa-sub { font-size: 10.5px; color: var(--muted); margin-top: 1px; }

.sa-chevron {
  color: var(--muted);
  font-size: 11px;
  transition: transform 0.22s;
  flex-shrink: 0;
}
#smart-assist.docked .sa-chevron,
#smart-assist.expanded .sa-chevron { transform: rotate(180deg); }

.sa-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 9px; }

.sa-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.07) transparent;
}
.sa-msg {
  padding: 8px 11px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  line-height: 1.5;
}
.sa-msg.assistant { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.82); }
.sa-msg.user {
  background: var(--gold-dim);
  color: var(--white);
  align-self: flex-end;
  border: 1px solid rgba(255,199,44,0.18);
  max-width: 88%;
}

.sa-input-row { display: flex; gap: 7px; }
.sa-input {
  flex: 1;
  height: 34px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-mid);
  background: var(--navy-light);
  color: var(--white);
  font-family: 'Barlow', sans-serif;
  font-size: 12.5px;
  padding: 0 11px;
  outline: none;
  transition: border-color 0.13s;
}
.sa-input:focus { border-color: rgba(255,199,44,0.45); }
.sa-input::placeholder { color: var(--muted); }

.sa-send {
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  background: var(--gold);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.13s;
}
.sa-send:hover { background: var(--gold-dark); }
.sa-send svg { width: 13px; height: 13px; fill: var(--navy); }


/* ── Chat FAB ── */
#chat-fab {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--gold);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 16px rgba(255,199,44,0.38), 0 1px 4px rgba(0,0,0,0.3);
  transition: transform 0.18s, box-shadow 0.18s;
  flex-shrink: 0;
}
#chat-fab:hover {
  transform: scale(1.07);
  box-shadow: 0 5px 20px rgba(255,199,44,0.52), 0 2px 6px rgba(0,0,0,0.3);
}
#chat-fab svg { width: 20px; height: 20px; fill: var(--navy); }


/* ══════════════════════════════════════
   TOOL MODALS — Mortgage & Reno
   ══════════════════════════════════════ */
.tool-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal-backdrop);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: calc(var(--chrome-h) + 20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
}
.tool-modal-backdrop.open { opacity: 1; pointer-events: all; }

.tool-modal {
  background: var(--navy);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-lg);
  width: 560px;
  max-height: 72vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-float);
  transform: translateY(-6px);
  transition: transform 0.18s;
}
.tool-modal-backdrop.open .tool-modal { transform: translateY(0); }

/* Scratch Pad — consistent with map tools, clean positioning, smooth open/close */
.scratch-pad-teaser {
  position: fixed;
  left: 24px;
  bottom: 88px;
  z-index: 398;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Barlow', sans-serif;
  background: var(--navy-surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-md);
  color: var(--gold);
  cursor: pointer;
  box-shadow: var(--sh-card);
  transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.scratch-pad-teaser:hover {
  background: var(--navy-light);
  border-color: rgba(255,199,44,0.25);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.scratch-pad-panel {
  animation: scratch-pad-in 0.2s ease-out;
}
@keyframes scratch-pad-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.tm-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.tm-title-wrap { display: flex; align-items: center; gap: 9px; }
.tm-icon {
  width: 30px; height: 30px;
  border-radius: var(--r-sm);
  background: var(--gold-dim);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tm-icon svg { width: 14px; height: 14px; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tm-title { font-size: 14.5px; font-weight: 700; color: var(--white); }
.tm-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }

.tm-close {
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.07);
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 15px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.13s;
  line-height: 1;
}
.tm-close:hover { background: rgba(255,255,255,0.13); color: var(--white); }

.tm-body { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; }

.tm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tm-group { display: flex; flex-direction: column; gap: 5px; }
.tm-group.full { grid-column: span 2; }

.tm-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.tm-input {
  height: 38px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-mid);
  background: var(--navy-light);
  color: var(--white);
  font-family: 'Barlow', sans-serif;
  font-size: 13.5px;
  padding: 0 12px;
  outline: none;
  transition: border-color 0.13s;
  width: 100%;
}
.tm-input:focus { border-color: rgba(255,199,44,0.45); }

.tm-select {
  height: 38px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-mid);
  background: var(--navy-light);
  color: var(--white);
  font-family: 'Barlow', sans-serif;
  font-size: 13.5px;
  padding: 0 12px;
  outline: none;
  cursor: pointer;
  width: 100%;
  transition: border-color 0.13s;
}
.tm-select option { background: var(--navy-light); }

/* Result display */
.tm-result {
  background: var(--navy-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
}
.tm-result-item { text-align: center; }
.tm-result-val { font-size: 18px; font-weight: 700; color: var(--gold); font-family: 'Barlow Condensed', sans-serif; }
.tm-result-lbl { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin-top: 2px; }

.tm-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-shrink: 0;
}
.tm-btn {
  height: 34px;
  padding: 0 16px;
  border-radius: var(--r-sm);
  font-family: 'Barlow', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.13s;
  border: none;
}
.tm-btn.ghost { background: rgba(255,255,255,0.07); color: var(--white); }
.tm-btn.ghost:hover { background: rgba(255,255,255,0.12); }
.tm-btn.primary { background: var(--gold); color: var(--navy); font-weight: 700; }
.tm-btn.primary:hover { background: var(--gold-dark); }

/* ══════════════════════════════════════
   FILTER MODAL
   ══════════════════════════════════════ */
#filter-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  z-index: var(--z-map-floating-ui);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: calc(var(--chrome-h) + 16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
}
#filter-modal-backdrop.open { opacity: 1; pointer-events: all; }

#filter-modal {
  background: var(--navy);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-lg);
  width: min(620px, calc(100vw - 24px));
  max-height: 72vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-float);
  transform: translateY(-6px);
  transition: transform 0.18s;
}
#filter-modal-backdrop.open #filter-modal { transform: translateY(0); }

.modal-head {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.modal-title { font-size: 15px; font-weight: 700; color: var(--white); }
.modal-close {
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.07);
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 15px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.13s;
  line-height: 1;
}
.modal-close:hover { background: rgba(255,255,255,0.13); color: var(--white); }

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Map filter modal: single-column stacked sections (HUD buyer filters) */
.modal-body.filter-modal-body--stacked {
  display: flex;
  flex-direction: column;
  gap: 0;
  grid-template-columns: 1fr;
}
.filter-modal-section {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.filter-modal-section:first-child {
  padding-top: 0;
}
.filter-modal-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.filter-modal-section-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.filter-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--white);
  cursor: pointer;
  line-height: 1.35;
}
.filter-toggle-row input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  width: auto;
  height: auto;
  accent-color: var(--gold);
}
.filter-modal-note {
  font-size: 11px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 10px 0;
}

.fgroup label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.fgroup select, .fgroup input {
  width: 100%;
  height: 36px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-mid);
  background: var(--navy-light);
  color: var(--white);
  font-family: 'Barlow', sans-serif;
  font-size: 13px;
  padding: 0 11px;
  outline: none;
  transition: border-color 0.13s;
}
.fgroup select:focus, .fgroup input:focus { border-color: rgba(255,199,44,0.45); }
.fgroup select option { background: var(--navy-light); }
.fgroup.full { grid-column: span 2; }
.dual-input { display: flex; gap: 7px; }
.dual-input input { flex: 1; }

.modal-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-shrink: 0;
}
.modal-btn {
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--r-sm);
  font-family: 'Barlow', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.13s;
  border: none;
}
.modal-btn.ghost { background: rgba(255,255,255,0.07); color: var(--white); }
.modal-btn.ghost:hover { background: rgba(255,255,255,0.12); }
.modal-btn.primary { background: var(--gold); color: var(--navy); font-weight: 700; }
.modal-btn.primary:hover { background: var(--gold-dark); }
.modal-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}


/* ══════════════════════════════════════
   MOBILE  (<1024px)
   ══════════════════════════════════════ */
@media (max-width: 767px) {
  :root { --rail-w: 0px; }

  #adv-rail {
    top: auto;
    right: 0; left: 0;
    bottom: 0;
    width: 100%;
    height: 52px;
    border-left: none;
    border-top: 1px solid var(--border);
    flex-direction: column;
    transition: height 0.28s ease;
  }
  #adv-rail.expanded { height: 38vh; }

  #map-canvas { min-height: 200px; }
  #filter-row { right: 0; }

  #zone-a { right: 12px; bottom: 66px; }
  #smart-assist, #preview-card { width: min(360px, calc(100vw - 24px)); }

  .rail-scroll { flex-direction: row; overflow-x: auto; overflow-y: hidden; height: 52px; padding: 8px; gap: 8px; }
  #adv-rail.expanded .rail-scroll { flex-direction: column; height: auto; overflow-x: hidden; overflow-y: auto; }
  .adv-card { flex-shrink: 0; min-width: 200px; }
  .rail-header, .rail-footer { display: none; }
  #adv-rail.expanded .rail-header,
  #adv-rail.expanded .rail-footer { display: block; }

  #left-drawer { width: min(388px, 90vw); }
}

@media (max-width: 767px) {
  #top-nav {
    height: 58px;
    min-height: 58px;
    max-height: 58px;
  }
  .top-logo {
    height: 58px;
    padding-left: 12px;
  }
  .top-logo img {
    height: 44px;
    max-height: 44px;
  }
  .top-nav-main {
    margin-left: 8px;
    padding-right: 12px;
  }
  .top-nav-main .nav-tabs {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .top-nav-main .nav-spacer {
    flex: 0 0 6px;
    min-width: 6px;
    max-width: 6px;
  }
  .nav-tab.site-nav-drawer-trigger .site-nav-drawer-label {
    display: none;
  }
  .map-mobile-nav-toggle {
    display: none !important;
  }
  #filter-modal-backdrop {
    align-items: flex-end;
    padding-top: 0;
    background: rgba(0,0,0,0.56);
    backdrop-filter: blur(4px);
  }
  #filter-modal {
    width: 100vw;
    max-width: 100vw;
    height: min(88vh, 800px);
    max-height: min(88vh, 800px);
    border-radius: 18px 18px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -16px 36px rgba(0, 0, 0, 0.35);
    transform: translateY(100%);
  }
  #filter-modal-backdrop.open #filter-modal {
    transform: translateY(0);
  }
  .modal-head {
    padding: 12px 16px 10px;
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(20, 29, 41, 0.98), rgba(20, 29, 41, 0.94));
    border-bottom: 1px solid var(--border-mid);
  }
  .modal-head::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
  }
  .modal-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.015em;
    padding-top: 6px;
  }
  .modal-close {
    width: 40px;
    height: 40px;
    font-size: 22px;
    border-radius: 12px;
  }
  .modal-body {
    padding: 14px 16px 18px;
    gap: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .filter-modal-section {
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  }
  .filter-modal-section-title {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.07em;
    margin-bottom: 14px;
  }
  .filter-modal-note {
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255,255,255,0.76);
    margin: 0 0 12px 0;
  }
  .filter-toggle-row {
    min-height: 48px;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 15px;
  }
  .filter-toggle-row input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 0;
  }
  .modal-body [role="group"],
  .modal-body .fgroup > div {
    gap: 10px !important;
    row-gap: 10px !important;
  }
  .modal-body .modal-btn {
    min-height: 46px;
    font-size: 14.5px;
    padding: 0 15px;
    border-radius: 12px;
    white-space: nowrap;
  }
  .fgroup label {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.86);
    margin-bottom: 10px;
  }
  .fgroup select,
  .fgroup input {
    height: 46px;
    font-size: 15px;
    border-radius: 12px;
  }
  .modal-foot {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: rgba(20, 29, 41, 0.99);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--border-mid);
    padding: 12px 16px max(14px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .modal-foot .modal-btn {
    min-height: 50px;
    height: 50px;
    font-size: 15px;
    border-radius: 12px;
  }
  .modal-foot .modal-btn.ghost {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
  }
  .modal-foot .modal-btn.primary {
    grid-column: span 2;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(255, 199, 44, 0.24);
  }

  html,
  body {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
  }

  #map-page-main {
    position: relative !important;
    top: calc(var(--nav-h) + var(--ticker-h)) !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
  }

  #map-canvas {
    height: 60vh !important;
    min-height: 55vh !important;
    max-height: 65vh !important;
    flex: 0 0 auto !important;
  }

  #adv-rail {
    position: relative !important;
    bottom: auto !important;
    height: auto !important;
    max-height: none !important;
    border-top: none !important;
    overflow: visible !important;
  }

  #rail-drawer,
  .rail-scroll {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }
  .rail-scroll {
    flex-direction: column !important;
    overflow-x: hidden !important;
    padding: 12px 8px !important;
    gap: 12px !important;
  }
  .adv-card {
    width: 100% !important;
    min-width: 0 !important;
  }
  .rail-header,
  .rail-footer {
    display: block !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root { --rail-w: 256px; }

  #map-page-main {
    grid-template-columns: minmax(0, 1fr) var(--rail-w);
  }
  #adv-rail {
    width: var(--rail-w);
  }
  .map-overlay-ui,
  .hudpro-map-search {
    top: calc(var(--chrome-h, 100px) + 10px);
    left: 12px;
    gap: 8px;
  }
  .hudpro-map-search > div {
    max-width: min(420px, calc(100vw - var(--rail-w) - 36px)) !important;
  }
  .hudpro-map-search-pill {
    min-height: 40px;
    height: 40px;
    border-radius: 20px;
  }
  .hudpro-map-search-pill input {
    font-size: 14px;
  }
  .hudpro-outside-mainland {
    padding: 8px 10px;
    gap: 6px;
    border-radius: 9px;
  }
  .hudpro-outside-mainland-title {
    font-size: 11px;
  }
  .hudpro-territory-badge {
    font-size: 11px;
    padding: 5px 9px;
    min-height: 26px;
  }
}

@media (min-width: 1280px) {
  #top-nav {
    border-bottom-color: rgba(255,255,255,0.1);
    box-shadow: 0 1px 0 rgba(255,255,255,0.05), 0 4px 18px rgba(0,0,0,0.28);
  }
  .top-logo { padding-left: 14px; }
  .top-nav-main { margin-left: 22px; }
  .nav-tab { padding: 0 15px; }
  .nav-right { padding: 0 12px; }

  #map-page-main:not(.map-page-main--adv-rail-desktop) {
    grid-template-columns: minmax(0, 1fr) 392px !important;
  }
  #adv-rail:not(.adv-rail-desktop-host) {
    width: 392px !important;
    min-width: 392px !important;
  }
  #map-page-main.map-page-main--adv-rail-desktop {
    grid-template-columns: minmax(0, 1fr) var(--map-adv-rail-outer, 44px) !important;
  }
  #filter-row {
    right: var(--map-adv-rail-outer, 40px);
    padding: 0 14px;
  }
  .filter-chips-zone.map-control-bar-inner {
    gap: 12px;
  }
  .map-control-bar-left { gap: 10px; }
  .map-control-bar-right { gap: 10px; }
  #filter-row .filter-btn-all,
  #filter-row .filter-chip.map-control-pill,
  #filter-row .map-control-pill {
    height: 42px;
    min-height: 42px;
    padding: 0 18px;
  }

  .map-overlay-ui,
  .hudpro-map-search {
    top: calc(var(--chrome-h, 100px) + 14px);
    left: 14px;
    gap: 9px;
  }
  .hudpro-map-search > div {
    max-width: min(460px, calc(100vw - var(--map-adv-rail-outer, 44px) - 48px)) !important;
  }
  .hudpro-map-search-pill {
    min-height: 40px;
    border-radius: 20px;
  }
  .hudpro-outside-mainland {
    padding: 9px 11px;
    border-radius: 10px;
  }
  .hudpro-outside-mainland-badges { gap: 6px; }
  .hudpro-territory-badge { padding: 5px 10px; min-height: 27px; }

  #adv-rail.localpros-rail:not(.adv-rail-desktop-host) .sidebar {
    width: 392px;
  }
  #adv-rail.localpros-rail .pro-card {
    margin: 6px 10px;
  }
}

/*
 * Laptop vertical chrome compression (~1366×768, ~1536×864):
 * Shorter --filter-h updates #filter-row height, --chrome-h, and #map-canvas padding-top together.
 * Filter chips pack left; Local Pros rail starts higher (desktop host used higher-specificity padding
 * before, so overrides must include .adv-rail-desktop-host).
 */
@media (min-width: 1024px) and (max-height: 900px) {
  :root {
    --filter-h: 52px;
  }

  #filter-row.map-control-bar,
  #filter-row {
    padding: 0 10px;
  }

  .filter-chips-zone.map-control-bar-inner {
    gap: 8px;
  }

  .map-control-bar-left {
    justify-content: flex-start;
    gap: 4px;
    padding-left: 0;
    max-width: none;
  }

  .map-control-bar-right {
    gap: 6px;
  }

  #filter-row .filter-btn-all,
  #filter-row .filter-chip.map-control-pill,
  #filter-row .map-control-pill {
    height: 36px;
    min-height: 36px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 800;
    border-radius: 9px;
  }

  #filter-row a.map-control-pill.map-control-pill--quiet {
    height: 30px;
    min-height: 30px;
    padding: 0 13px;
    font-size: 11px;
    border-radius: 8px;
  }

  #filter-row .filter-btn-all svg {
    width: 10px;
    height: 10px;
  }

  #filter-row .filter-loading-pill {
    padding: 1px 6px;
    font-size: 10px;
    gap: 4px;
    border-radius: 6px;
  }

  .data-freshness-badge {
    font-size: 10px;
    line-height: 1.25;
  }

  #filter-row .f-sep {
    height: 16px;
  }

  /*
   * Laptop desktop open rail: header + 3 cards + bottom padding only — no in-rail “Advertise” footer
   * (frees vertical space at 1366×768 and 1536×864). Spacing: rail 8px top / 10px bottom; 10px between cards.
   */
  #adv-rail.localpros-rail.adv-rail-desktop-host .sidebar {
    padding-top: 8px;
    padding-bottom: 10px;
  }

  #adv-rail.localpros-rail.adv-rail-desktop-host .sidebar-header {
    padding: 6px 10px 5px;
  }

  #adv-rail.localpros-rail.adv-rail-desktop-host .sidebar-header-sub {
    margin-top: 3px;
  }

  #adv-rail.localpros-rail.adv-rail-desktop-host .sidebar.localpros-shell--property {
    padding-top: 8px;
    padding-bottom: 10px;
    gap: 10px;
  }

  #adv-rail.localpros-rail.adv-rail-desktop-host .localpros-shell--property .sidebar-header {
    padding: 5px 10px 5px;
  }

  #adv-rail.localpros-rail.adv-rail-desktop-host .localpros-shell--property .sidebar-header-sub {
    margin-top: 3px;
  }

  #adv-rail.localpros-rail.adv-rail-desktop-host .localpros-shell--property .pro-card {
    margin: 0 8px;
  }

  #adv-rail.localpros-rail.adv-rail-desktop-host .sidebar .adv-rail-advertise-footer {
    display: none !important;
  }

  #adv-rail.localpros-rail.adv-rail-desktop-host .sidebar.localpros-shell--property .pro-card.referral-vacant.localpros-exclusive-vacant {
    margin: 0 8px;
    min-height: 168px;
    max-height: 176px;
    height: 172px;
    box-sizing: border-box;
  }
  #adv-rail.localpros-rail.adv-rail-desktop-host .sidebar.localpros-shell--property .localpros-vacant-inner-grid {
    gap: 8px;
    padding: 10px 12px;
    box-sizing: border-box;
  }
  #adv-rail.localpros-rail.adv-rail-desktop-host .sidebar.localpros-shell--property .localpros-vacant-mini {
    gap: 4px;
    padding: 8px 10px;
  }
  #adv-rail.localpros-rail.adv-rail-desktop-host .sidebar.localpros-shell--property .localpros-vacant-mini-headline {
    font-size: 11px;
    line-height: 1.25;
  }
  #adv-rail.localpros-rail.adv-rail-desktop-host .sidebar.localpros-shell--property .localpros-vacant-mini-sub {
    font-size: 10px;
    line-height: 1.35;
  }
  #adv-rail.localpros-rail.adv-rail-desktop-host .sidebar.localpros-shell--property .localpros-vacant-btn-referral {
    padding: 6px 8px;
    font-size: 9px;
  }
  #adv-rail.localpros-rail.adv-rail-desktop-host .sidebar.localpros-shell--property .localpros-vacant-btn-claim {
    padding: 5px 8px;
    font-size: 9px;
  }
  /* Card shell: target 172px, clamp 168–176px; inner body padding 10px × 12px */
  #adv-rail.localpros-rail.adv-rail-desktop-host .sidebar.localpros-shell--property .pro-card:not(.vacant-card) {
    height: 172px;
    min-height: 168px;
    max-height: 176px;
    margin: 0 8px;
    box-sizing: border-box;
  }
  #adv-rail.localpros-rail.adv-rail-desktop-host .sidebar.localpros-shell--property .pro-card.adv-paid-banner-card:not(.vacant-card) {
    height: auto;
    min-height: 0;
    max-width: 363px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  #adv-rail.localpros-rail.adv-rail-desktop-host .sidebar.localpros-shell--property .pro-card.adv-paid-banner-card .adv-paid-shell {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
  }
  #adv-rail.localpros-rail.adv-rail-desktop-host .sidebar.localpros-shell--property .pro-card:not(.vacant-card) .card-body {
    padding: 10px 12px;
    box-sizing: border-box;
  }
  #adv-rail.localpros-rail.adv-rail-desktop-host .sidebar.localpros-shell--property .pro-card:not(.vacant-card) .headshot {
    width: 54px;
    height: 54px;
  }
  #adv-rail.localpros-rail.adv-rail-desktop-host .sidebar.localpros-shell--property .pro-card:not(.vacant-card) .photo-col {
    width: 54px;
  }
  #adv-rail.localpros-rail.adv-rail-desktop-host .sidebar.localpros-shell--property .pro-card:not(.vacant-card) .pro-name {
    font-size: 13px;
  }

  /* Non-desktop-host rail (e.g. some tablet widths): same vertical tuck */
  #adv-rail.localpros-rail:not(.adv-rail-desktop-host) .sidebar {
    padding-top: 4px;
    padding-bottom: 6px;
  }

  .map-overlay-ui,
  .hudpro-map-search,
  .map-zero-inv-advertiser-card-wrap {
    top: calc(var(--chrome-h, 100px) + 8px);
  }
}

/*
 * Implementation rule: no in-rail “Are you a local pro?” / Advertise CTA on short laptop viewports
 * (primary 1366×768). Taller laptop heights (e.g. 1536×864) use the (max-height:900px) block above.
 */
@media (min-width: 1024px) and (max-height: 800px) {
  #adv-rail.localpros-rail.adv-rail-desktop-host .sidebar .adv-rail-advertise-footer {
    display: none !important;
  }
}

/* Metrics verification (admin / ?debug=1) */
.metrics-verification-block {
  margin: 0;
  padding: 12px 16px;
  background: var(--navy-deep);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--muted-lt);
  max-width: 100%;
}
.metrics-verification-inner { max-width: 560px; }
.metrics-verification-title {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}
.metrics-verification-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 20px;
  margin: 0 0 10px;
}
.metrics-verification-dl dt { color: var(--muted); }
.metrics-verification-dl dd { margin: 0; }
.metrics-verification-eq {
  margin: 0 0 8px;
  font-size: 11px;
  color: var(--muted);
}
.metrics-verification-warning {
  margin: 0;
  padding: 6px 10px;
  background: rgba(229, 57, 53, 0.15);
  border: 1px solid rgba(229, 57, 53, 0.4);
  border-radius: var(--r-sm);
  color: #E53935;
  font-weight: 600;
  font-size: 11px;
}

/* ─────────────────────────────────────────
   LocalProsSidebar — LOCKED v4 styles
   Scoped to map right rail
───────────────────────────────────────── */
#adv-rail.localpros-rail {
  background: #0f1921 !important;
}
/* Non-desktop rail: allow dropdowns; desktop collapsible host keeps overflow:hidden in .adv-rail-desktop-host rules */
#adv-rail.localpros-rail:not(.adv-rail-desktop-host) {
  overflow: visible !important;
}

#adv-rail.localpros-rail:not(.adv-rail-desktop-host) .adv-rail-mobile-hitplate {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  width: 100%;
  pointer-events: auto;
  cursor: default;
}
#adv-rail.localpros-rail #rail-drawer.localpros-rail-drawer {
  justify-content: flex-start !important;
  overflow: visible !important;
}
#adv-rail.localpros-rail .sidebar {
  width: 380px;
  background: #0f1921;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  min-height: 0;
  padding-top: 12px;
  padding-bottom: 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#adv-rail.localpros-rail .localpro-card-anchor,
#adv-rail.localpros-rail .pro-card,
#adv-rail.localpros-rail .vacant-card {
  flex: 1;
  display: flex;
  flex-direction: column;
}
#adv-rail.localpros-rail .sidebar-header {
  padding: 8px 12px 7px;
  text-align: center;
  border-bottom: 1px solid rgba(197,160,89,0.22);
  flex-shrink: 0;
}
#adv-rail.localpros-rail .sidebar-header-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #fff;
  text-transform: uppercase;
}
#adv-rail.localpros-rail .sidebar-header-sub {
  font-size: 12px;
  font-weight: 600;
  color: #C5A059;
  margin-top: 6px;
  letter-spacing: 0.2px;
}
/* Property / pin context: fixed card heights; flex:1 was shrinking cards on short laptop viewports */
#adv-rail.localpros-rail .localpros-shell--property .localpro-card-anchor {
  flex: 0 0 auto;
}
/* Property / pin context: tighter rail so three slots + header fit a ~900px-tall map panel */
#adv-rail.localpros-rail .localpros-shell--property .sidebar-header {
  padding: 5px 10px 5px;
}
#adv-rail.localpros-rail .localpros-shell--property .sidebar-header-title {
  font-size: 11px;
  letter-spacing: 1.6px;
}
#adv-rail.localpros-rail .localpros-shell--property .sidebar-header-sub {
  font-size: 10.5px;
  margin-top: 3px;
}
#adv-rail.localpros-rail .localpros-shell--property .pro-card {
  margin: 3px 8px;
  height: 132px;
  flex: 0 0 auto;
}
#adv-rail.localpros-rail .localpros-shell--property .pro-card.adv-paid-banner-card {
  height: auto;
  min-height: 0;
  max-width: 363px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#adv-rail.localpros-rail .localpros-shell--property .pro-card.adv-paid-banner-card .adv-paid-shell {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
}
#adv-rail.localpros-rail .localpros-shell--property .vacant-card {
  flex: 0 0 auto;
}
#adv-rail.localpros-rail .localpros-shell--property .card-body {
  padding: 4px 6px 3px;
}
#adv-rail.localpros-rail .localpros-shell--property .headshot {
  width: 52px;
  height: 52px;
}
#adv-rail.localpros-rail .localpros-shell--property .pro-name {
  font-size: 13px;
}
#adv-rail.localpros-rail .localpros-shell--property .info-company {
  font-size: 10px;
}
#adv-rail.localpros-rail .localpros-shell--property .info-title,
#adv-rail.localpros-rail .localpros-shell--property .info-tagline {
  font-size: 9px !important;
}
#adv-rail.localpros-rail .localpros-shell--property .adv-rail-advertise-footer {
  margin-top: 8px;
  padding-top: 8px;
  padding-bottom: 16px;
}

/* Bottom breathing room: mirror header padding-top so inspector slot + footer are not clipped */
#adv-rail.localpros-rail .sidebar {
  padding-bottom: 12px;
}
#adv-rail.localpros-rail .adv-rail-advertise-footer {
  padding-bottom: 16px;
}

#adv-rail.localpros-rail .localpro-card-anchor {
  position: relative;
}
#adv-rail.localpros-rail .pro-card {
  margin: 5px 8px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #C5A059;
  background: #f0f2f5;
  display: flex;
  flex-direction: column;
  height: 158px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  flex-shrink: 0;
}
#adv-rail.localpros-rail .card-header {
  display: flex;
  align-items: center;
  height: 22px;
  flex-shrink: 0;
  background: #1F2A3A;
}
#adv-rail.localpros-rail .dept-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  padding: 0 9px;
  height: 22px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
#adv-rail.localpros-rail .dept-label.realtor { color: #FFC72C; }
#adv-rail.localpros-rail .dept-label.mortgage { color: #6dd4b0; }
#adv-rail.localpros-rail .dept-label.inspector { color: #f0a050; }
#adv-rail.localpros-rail .dept-label.vacant { color: rgba(255,255,255,0.45); }
#adv-rail.localpros-rail .header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding-right: 9px;
}
#adv-rail.localpros-rail .pro-badge {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #C5A059;
  border: 1px solid rgba(197,160,89,0.5);
  padding: 1px 5px;
  border-radius: 2px;
  text-transform: uppercase;
}
#adv-rail.localpros-rail .county-label {
  font-size: 9.5px;
  color: rgba(255,255,255,0.36);
  white-space: nowrap;
}
#adv-rail.localpros-rail .card-body {
  display: flex;
  flex: 1;
  min-height: 0;
  padding: 5px 8px 4px;
  gap: 0;
  flex-direction: column;
}
#adv-rail.localpros-rail .card-body-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  flex: 1;
}
#adv-rail.localpros-rail .card-body-bottom {
  padding: 0 0 2px 0;
  width: 100%;
}
#adv-rail.localpros-rail .photo-col {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 68px;
}
#adv-rail.localpros-rail .headshot {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #C5A059;
  display: block;
  box-shadow: 0 1px 6px rgba(0,0,0,0.15);
}
#adv-rail.localpros-rail .pro-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #1F2A3A;
  white-space: nowrap;
  line-height: 1;
  padding: 2px 0 0 0;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
#adv-rail.localpros-rail .info-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 1px;
}
#adv-rail.localpros-rail .info-top { display: flex; flex-direction: column; gap: 2px; flex: 1; }
#adv-rail.localpros-rail .info-bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 2px 0;
}
#adv-rail.localpros-rail .info-company {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #1F2A3A;
  letter-spacing: 0.4px;
  line-height: 1.1;
  text-transform: uppercase;
}
#adv-rail.localpros-rail .info-title {
  font-size: 11px;
  font-weight: 600;
  color: #1F2A3A;
  line-height: 1.2;
}
#adv-rail.localpros-rail .info-tagline {
  font-size: 10.5px;
  font-weight: 500;
  font-style: italic;
  color: #3a5570;
  line-height: 1.2;
}
#adv-rail.localpros-rail .experience-row {
  display: flex;
  align-items: baseline;
  gap: 3px;
}
#adv-rail.localpros-rail .exp-num,
#adv-rail.localpros-rail .exp-word {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: #3a5570;
  line-height: 1;
}
#adv-rail.localpros-rail .exp-unit {
  font-family: 'DM Sans', sans-serif;
  font-size: 8px;
  font-weight: 400;
  color: #3a5570;
  line-height: 1;
  margin: 0 1px;
}
#adv-rail.localpros-rail .specialty-row {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}
#adv-rail.localpros-rail .specialty-pill {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(197,160,89,0.1);
  color: #8B6914;
  border: 1px solid rgba(197,160,89,0.3);
  white-space: nowrap;
}
#adv-rail.localpros-rail .cta-bar {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.18s ease;
  position: relative;
  overflow: hidden;
  border: none;
}
#adv-rail.localpros-rail .cta-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
#adv-rail.localpros-rail .cta-bar:hover { filter: brightness(1.15); transform: scaleY(1.03); }
#adv-rail.localpros-rail .cta-bar:active { filter: brightness(0.92); }
#adv-rail.localpros-rail .cta-bar.realtor-cta,
#adv-rail.localpros-rail .cta-bar.inspector-cta {
  background: linear-gradient(180deg, #3a8a3a 0%, #236023 100%);
  box-shadow: 0 -1px 0 rgba(255,255,255,0.12) inset, 0 2px 6px rgba(0,0,0,0.3);
}
#adv-rail.localpros-rail .cta-text {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  z-index: 1;
}
#adv-rail.localpros-rail .cta-bar .cta-arrow {
  font-size: 12px;
  margin-left: 6px;
  opacity: 0.75;
  z-index: 1;
  transition: transform 0.18s;
}
#adv-rail.localpros-rail .cta-bar:hover .cta-arrow { transform: translateX(3px); }

/* Referral-help cards (missing category) — premium, not error-state */
#adv-rail.localpros-rail .pro-card.referral-card {
  background: linear-gradient(165deg, #1a2838 0%, #152433 100%);
  border: 1px solid rgba(197, 160, 89, 0.22);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
#adv-rail.localpros-rail .referral-card-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#adv-rail.localpros-rail .referral-card-title {
  margin: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #f1f5f9;
  line-height: 1.2;
}
#adv-rail.localpros-rail .referral-card-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(226, 232, 240, 0.88);
}
#adv-rail.localpros-rail .referral-card-email {
  color: #fcd34d;
  font-weight: 700;
  text-decoration: none;
}
#adv-rail.localpros-rail .referral-card-email:hover {
  text-decoration: underline;
}
#adv-rail.localpros-rail a.cta-bar.referral-cta {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  margin-top: 2px;
  background: linear-gradient(180deg, #3d5a7a 0%, #2a4258 100%);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1) inset, 0 2px 6px rgba(0, 0, 0, 0.28);
}
#adv-rail.localpros-rail a.cta-bar.referral-cta:hover {
  filter: brightness(1.12);
}
#adv-rail.localpros-rail .referral-card--compact .referral-card-body {
  padding-top: 8px;
  padding-bottom: 10px;
}
#adv-rail.localpros-rail .referral-card--compact .referral-card-title {
  font-size: 14px;
}
#adv-rail.localpros-rail .referral-card--hero {
  border-color: rgba(255, 199, 44, 0.35);
  margin-bottom: 4px;
}
#adv-rail.localpros-rail .referral-hero-kicker {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 199, 44, 0.75);
  padding: 10px 12px 0;
}
#adv-rail.localpros-rail .referral-hero-title {
  margin: 0;
  padding: 4px 12px 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
}
#adv-rail.localpros-rail .referral-hero-text {
  margin: 0;
  padding: 0 12px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(226, 232, 240, 0.9);
}
#adv-rail.localpros-rail a.cta-bar.referral-cta--hero {
  margin: 10px 12px 12px;
  width: calc(100% - 24px);
  background: linear-gradient(90deg, #7a5510 0%, #C5A059 45%, #e8c97a 50%, #C5A059 55%, #7a5510 100%);
  background-size: 250% 100%;
  animation: goldShimmer 3s linear infinite;
  box-shadow: 0 2px 10px rgba(197, 160, 89, 0.25);
}
#adv-rail.localpros-rail a.cta-bar.referral-cta--hero .cta-text {
  color: #0f1921;
  text-shadow: none;
}
#adv-rail.localpros-rail .adv-rail-advertise-footer {
  flex-shrink: 0;
  margin-top: 14px;
  padding-top: 14px;
  padding-bottom: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
#adv-rail.localpros-rail .adv-rail-advertise-footnote {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
}

@keyframes hudproCtaPulse {
  0%, 100% {
    background-color: rgba(212, 160, 23, 0.15);
    box-shadow: 0 0 0 0 rgba(212, 160, 23, 0.6);
  }
  50% {
    background-color: rgba(212, 160, 23, 0.35);
    box-shadow: 0 0 0 8px rgba(212, 160, 23, 0);
  }
}

#adv-rail.localpros-rail .adv-rail-advertise-secondary-btn {
  animation: hudproCtaPulse 1.8s ease-in-out infinite;
  border: 1px solid rgba(212, 160, 23, 0.6);
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(212, 160, 23, 0.15);
  color: rgba(255, 255, 255, 0.88);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s ease;
}
#adv-rail.localpros-rail .adv-rail-advertise-secondary-btn:hover {
  color: #fff;
}

/* Vacant Local Pros — outer card + 2-col mini-cards */
@keyframes exclusiveFlash {
  0%,
  100% {
    color: #ffffff;
    text-shadow: none;
  }
  50% {
    color: #ffe500;
    text-shadow: 0 0 12px rgba(255, 229, 0, 0.9), 0 0 24px rgba(255, 229, 0, 0.5);
  }
}
@keyframes claimPulse {
  0%,
  100% {
    border-color: rgba(212, 160, 23, 0.5);
    box-shadow: none;
  }
  50% {
    border-color: #ffe500;
    box-shadow: 0 0 8px rgba(255, 229, 0, 0.6);
  }
}
#adv-rail.localpros-rail .pro-card.referral-vacant.localpros-exclusive-vacant {
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  border-radius: 10px;
  border: 1px solid #2a3a4a;
  overflow: hidden;
}
#adv-rail.localpros-rail .pro-card.referral-vacant.localpros-exclusive-vacant.localpros-vacant-outer--realtor {
  background: #1a2535;
}
#adv-rail.localpros-rail .pro-card.referral-vacant.localpros-exclusive-vacant.localpros-vacant-outer--mortgage {
  background: #1c2030;
}
#adv-rail.localpros-rail .pro-card.referral-vacant.localpros-exclusive-vacant.localpros-vacant-outer--inspector {
  background: #1e2228;
}
#adv-rail.localpros-rail .localpros-shell--property .pro-card.referral-vacant.localpros-exclusive-vacant {
  height: auto;
}
#adv-rail.localpros-rail .localpros-vacant-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}
#adv-rail.localpros-rail .localpros-vacant-inner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 8px;
  padding: 10px;
  box-sizing: border-box;
}
#adv-rail.localpros-rail .localpros-vacant-mini {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border-radius: 7px;
  box-sizing: border-box;
  min-width: 0;
  min-height: 100%;
  height: 100%;
  text-align: left;
}
#adv-rail.localpros-rail .localpros-vacant-mini--buyer {
  background: rgba(212, 160, 23, 0.08);
  border: 1px solid rgba(212, 160, 23, 0.25);
}
#adv-rail.localpros-rail .localpros-vacant-mini--pro {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
#adv-rail.localpros-rail .localpros-vacant-mini-label--buyer {
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #d4a017;
  line-height: 1.2;
}
#adv-rail.localpros-rail .localpros-vacant-mini-label--pro {
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7f94;
  line-height: 1.2;
}
#adv-rail.localpros-rail .localpros-vacant-mini-headline {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}
#adv-rail.localpros-rail .localpros-vacant-mini-sub {
  margin: 0;
  font-size: 10px;
  line-height: 1.5;
  color: #8a9bb0;
  flex: 1 1 auto;
  min-height: 0;
}
#adv-rail.localpros-rail .localpros-exclusive-headline {
  animation: exclusiveFlash 2s ease-in-out infinite;
}
#adv-rail.localpros-rail .localpros-vacant-btn-referral {
  width: 100%;
  margin: 0;
  margin-top: auto;
  padding: 7px;
  border: none;
  border-radius: 5px;
  box-sizing: border-box;
  background: #d4a017;
  color: #1a2535;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  transition: filter 0.15s ease;
}
#adv-rail.localpros-rail .localpros-vacant-btn-referral:hover {
  filter: brightness(1.05);
}
#adv-rail.localpros-rail .localpros-vacant-btn-claim {
  width: 100%;
  margin: 0;
  margin-top: auto;
  padding: 6px;
  border: 1px solid rgba(212, 160, 23, 0.5);
  border-radius: 5px;
  box-sizing: border-box;
  background: transparent;
  color: #d4a017;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  transition: background 0.15s ease, border-color 0.15s ease;
}
#adv-rail.localpros-rail .localpros-vacant-btn-claim:hover {
  background: rgba(212, 160, 23, 0.08);
}
#adv-rail.localpros-rail .localpros-btn-claim {
  animation: claimPulse 2s ease-in-out infinite;
  color: #d4a017 !important;
}

#adv-rail.localpros-rail .pro-card.vacant-card:not(.localpros-exclusive-vacant) {
  background: #1e3248;
}
#adv-rail.localpros-rail .vacant-body {
  display: flex;
  flex: 1;
  min-height: 0;
  padding: 5px 8px 0;
  gap: 8px;
  align-items: center;
}
#adv-rail.localpros-rail .vacant-left {
  width: 50px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(20,60,50,0.55);
  border: 1px solid rgba(80,200,160,0.18);
  border-radius: 6px;
  padding: 5px 3px;
  align-self: stretch;
  animation: vacancyPulse 4s ease-in-out infinite;
}
@keyframes vacancyPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(197,160,89,0); }
  40% { box-shadow: 0 0 0 5px rgba(197,160,89,0.2); }
  60% { box-shadow: 0 0 0 9px rgba(197,160,89,0.06); }
}
#adv-rail.localpros-rail .vacant-icon-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(197,160,89,0.07);
  border: 2px dashed rgba(197,160,89,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
#adv-rail.localpros-rail .vacant-spot-text {
  font-size: 7px;
  color: rgba(197,160,89,0.5);
  text-align: center;
  margin-top: 2px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.3;
}
#adv-rail.localpros-rail .vacant-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
#adv-rail.localpros-rail .vacant-headline {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  line-height: 1;
}
#adv-rail.localpros-rail .vacant-headline span { color: #C5A059; }
#adv-rail.localpros-rail .vacant-sub {
  font-size: 8px;
  color: rgba(255,255,255,0.82);
  line-height: 1.35;
}
#adv-rail.localpros-rail .vacant-stats {
  display: flex;
  gap: 8px;
  margin-top: 1px;
}
#adv-rail.localpros-rail .vacant-stat-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: #C5A059;
  line-height: 1;
}
#adv-rail.localpros-rail .vacant-stat-label {
  font-size: 7px;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 1px;
}
#adv-rail.localpros-rail .selling-bar {
  background: #000;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-shrink: 0;
  border-top: 1px solid rgba(197,160,89,0.15);
}
#adv-rail.localpros-rail .selling-bar-text {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
}
#adv-rail.localpros-rail .selling-dot {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #C5A059;
  opacity: 0.5;
  flex-shrink: 0;
}
#adv-rail.localpros-rail .cta-bar.vacant-cta {
  background: linear-gradient(90deg, #7a5510 0%, #C5A059 45%, #e8c97a 50%, #C5A059 55%, #7a5510 100%);
  background-size: 250% 100%;
  animation: goldShimmer 3s linear infinite;
  border-top: none;
}
#adv-rail.localpros-rail .cta-bar.vacant-cta .cta-text { color: #0f1921; }
@keyframes goldShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
#adv-rail.localpros-rail .drawer-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 48px rgba(0,0,0,0.32);
  width: 380px;
  overflow: visible;
  font-family: 'DM Sans', sans-serif;
}
#adv-rail.localpros-rail .localpros-drawer {
  position: absolute;
  top: 50%;
  right: calc(100% + 12px);
  transform: translate(390px, -50%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.24s ease, opacity 0.2s ease;
  z-index: 40;
}
#adv-rail.localpros-rail .localpros-drawer.is-open {
  transform: translate(0, -50%);
  opacity: 1;
  pointer-events: auto;
}
#adv-rail.localpros-rail .drawer-header {
  background: #1F2A3A;
  padding: 14px 14px 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  position: relative;
  overflow: visible;
}
#adv-rail.localpros-rail .drawer-headshot {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #C5A059;
  flex: 0 0 52px;
  min-width: 52px;
  min-height: 52px;
  display: block;
  overflow: hidden;
}
#adv-rail.localpros-rail .drawer-close-btn {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(15,25,33,0.45);
  color: #fff;
  border-radius: 999px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#adv-rail.localpros-rail .drawer-header-info { flex: 1; min-width: 0; }
#adv-rail.localpros-rail .drawer-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
}
#adv-rail.localpros-rail .drawer-title {
  font-size: 11px;
  font-weight: 600;
  color: #C5A059;
  margin-top: 1px;
}
#adv-rail.localpros-rail .drawer-company {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  margin-top: 1px;
}
#adv-rail.localpros-rail .drawer-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#adv-rail.localpros-rail .drawer-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
#adv-rail.localpros-rail .drawer-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(197,160,89,0.1);
  color: #8B6914;
  border: 1px solid rgba(197,160,89,0.3);
}
#adv-rail.localpros-rail .drawer-bio {
  font-size: 11px;
  color: #3a5570;
  line-height: 1.5;
}
#adv-rail.localpros-rail .drawer-actions {
  display: flex;
  gap: 6px;
  padding: 0 14px 13px;
}
#adv-rail.localpros-rail .drawer-btn {
  flex: 1;
  height: 36px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
#adv-rail.localpros-rail .drawer-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
#adv-rail.localpros-rail .drawer-btn:active { transform: translateY(0); filter: brightness(0.92); }
#adv-rail.localpros-rail .drawer-btn.btn-email,
#adv-rail.localpros-rail .drawer-btn.btn-call {
  background: #f0f2f5;
  color: #1F2A3A;
  border: 1px solid #d0d8e0;
}
#adv-rail.localpros-rail .drawer-btn.btn-website {
  background: linear-gradient(180deg, #C5A059 0%, #9a7830 100%);
  color: #fff;
  box-shadow: 0 2px 6px rgba(197,160,89,0.35), 0 -1px 0 rgba(255,255,255,0.15) inset;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Map control bar — low-emphasis freshness (right side) */
.data-freshness-badge {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: #6B7280;
  background: transparent;
  border: none;
  border-radius: 0;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* Local Pros buyer referral — portaled modal (above map UI; not inside #adv-rail stacking context) */
.localpros-referral-modal-root {
  position: fixed;
  inset: 0;
  z-index: 11050;
  pointer-events: none;
}
.localpros-referral-modal-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.localpros-referral-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 11051;
  pointer-events: auto;
  box-sizing: border-box;
  width: calc(100vw - 32px);
  max-width: 480px;
  max-height: min(92vh, 720px);
  overflow-y: auto;
  padding: 28px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
  font-family: 'Barlow', 'DM Sans', sans-serif;
}
.localpros-referral-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.localpros-referral-modal-close:hover {
  background: #f1f5f9;
  color: #1f2a3a;
}
.localpros-referral-modal-title {
  margin: 0 36px 10px 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  color: #1f2a3a;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.02em;
}
.localpros-referral-modal-sub {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.45;
  color: #64748b;
}
.localpros-referral-modal-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.localpros-referral-modal-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}
.localpros-referral-modal-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.localpros-referral-modal-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}
.localpros-referral-modal-optional {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  color: #94a3b8;
}
.localpros-referral-modal-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: 15px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #1e293b;
}
.localpros-referral-modal-input:focus {
  outline: 2px solid rgba(212, 160, 23, 0.45);
  outline-offset: 0;
  border-color: #c5a059;
}
.localpros-referral-modal-submit {
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  border: none;
  border-radius: 8px;
  background: #d4a017;
  color: #1f2a3a;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  transition: filter 0.15s ease, opacity 0.15s ease;
}
.localpros-referral-modal-submit:disabled {
  cursor: not-allowed;
  opacity: 0.88;
}
.localpros-referral-modal-submit:not(:disabled):hover {
  filter: brightness(1.05);
}
@keyframes localprosReferralModalSpin {
  to {
    transform: rotate(360deg);
  }
}
.localpros-referral-modal-spinner {
  width: 22px;
  height: 22px;
  border: 3px solid rgba(31, 42, 58, 0.15);
  border-top-color: #1f2a3a;
  border-radius: 50%;
  animation: localprosReferralModalSpin 0.65s linear infinite;
}
.localpros-referral-modal-error {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.35;
  color: #dc2626;
  text-align: center;
}
.localpros-referral-modal-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 4px 4px;
  gap: 12px;
}
.localpros-referral-modal-success-check {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #1a6b35;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
}
.localpros-referral-modal-success-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: #1f2a3a;
  font-family: 'Barlow Condensed', sans-serif;
}
.localpros-referral-modal-success-sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #64748b;
  max-width: 360px;
}
.localpros-referral-modal-done {
  margin-top: 8px;
  padding: 10px 28px;
  border-radius: 8px;
  border: 2px solid #d4a017;
  background: transparent;
  color: #b45309;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.localpros-referral-modal-done:hover {
  background: rgba(212, 160, 23, 0.12);
  color: #92400e;
}