/* ========================================
   * GOOGLE MAPS TERMS OF SERVICE COMPLIANCE
   * ========================================
   *
   * CRITICAL: Google Maps Terms of Service REQUIRE:
   * 1. Attribution links must remain visible and clickable
   * 2. "Terms of Use" and "Report a map error" links must be accessible
   * 3. Google logo/branding must not be hidden or obscured
   * 4. Map data attribution must remain visible
   *
   * APPROACH:
   * - Use JavaScript disableDefaultUI: true (hides controls, preserves attribution)
   * - Style attribution elements for design consistency (but keep visible)
   * - Never use display: none or visibility: hidden on attribution
   * - Preserve all required links and functionality
   *
   * VIOLATION CONSEQUENCES:
   * - API key suspension/termination
   * - Legal action from Google
   * - Loss of Google Maps access
   * ======================================== */
  /* Style attribution area to blend with design while keeping it visible */
  .gm-style-cc {
    background: rgba(255, 255, 255, 0.9) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 10px !important;
    padding: 2px 4px !important;
    box-shadow: var(--shadow-sm) !important;
    backdrop-filter: blur(4px) !important;
  }
  /* Dark mode styles for .gm-style-cc moved to dark-mode.css */
  /* Position attribution in bottom-right corner */
  /* Note: Google Maps attribution, "Report a map error", and "Terms" links must remain visible per TOS */
  /* SELECTIVE GOOGLE MAPS UI STYLING - TOS COMPLIANT */
  /* Only style specific non-attribution elements */
/* ========================================
   * GOOGLE MAPS ELEMENT IDENTIFICATION
   * ========================================
   * CRITICAL: Know what each element does before hiding!
   *
   * .gm-style-iw     = InfoWindow (POIs, tooltips, interactions) - NEVER HIDE
   * .gm-style-moc    = Keyboard shortcuts toast - disable via API
   * .gm-style-pbc    = Keyboard shortcuts panel - disable via API
   * .gm-style-cc     = Attribution/copyright - MUST REMAIN VISIBLE
   * .gm-style-mtc    = Map type controls - can style but not hide
   *
   * SAFE APPROACH: Use API options, not CSS hiding
   * - keyboardShortcuts: false (disables .gm-style-moc/.gm-style-pbc)
   * - disableDefaultUI: true (hides controls, preserves attribution)
   * - clickableIcons: false (disables POI clicks if needed)
   * ======================================== */
  /* Style map data/satellite labels to be less intrusive */
  .gm-style .gm-style-mtc {
    background: rgba(255, 255, 255, 0.8) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 11px !important;
    padding: 2px 6px !important;
    backdrop-filter: blur(4px) !important;
  }
  .dark .gm-style .gm-style-mtc {
    background: rgba(31, 41, 55, 0.8) !important;
    color: var(--neutral-300) !important;
  }
     /* GOOGLE MAPS BRANDING - PRESERVE REQUIRED ELEMENTS */
  /* Terms of Service requires keeping attribution visible and functional */
  /* Ensure attribution links remain clickable */
  .gm-style-cc a {
    color: var(--primary-blue) !important;
    text-decoration: none !important;
    pointer-events: auto !important;
  }
  .gm-style-cc a:hover {
    text-decoration: underline !important;
    color: var(--primary-blue-dark) !important;
  }
  .dark .gm-style-cc a {
    color: var(--primary-blue-light) !important;
  }
  .dark .gm-style-cc a:hover {
    color: var(--primary-blue-lighter) !important;
  }
     /* CUSTOM MAP CONTROLS INTEGRATION */
  /* Ensure our custom controls work well with Google Maps elements */
  /* Custom map controls - moved to unified definition above */
  /* Ensure map tiles and core functionality remain untouched */
  /* Preserve map interaction layers — do not force opacity/visibility on Google's
     tile panes; that fights tile fade-in and can flash wrong tiles on dragend. */
  .gm-style > div[style*="cursor"] {
    pointer-events: auto !important;
  }

/* Do not set overflow/border-radius on .gm-style or clip #map-container during
   pan — Google Maps pans tiles via internal transforms; clipping causes a brief
   wrong-position flash on dragend/idle. */

/* Tailwind / discover-page-shell set img,video{max-width:100%;height:auto}.
   Cap max-width only. Do NOT force width/height (revert/unset distorted tiles on iOS). */
#map-container img,
#map-container .gm-style img,
#map-container .gm-style video {
  max-width: none !important;
  max-height: none !important;
}

/* Compact satellite toggle — discover warm chrome (matches topbar / list controls). */
.map-control-satellite-icon {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border: 1px solid var(--discover-premium-line, rgba(120, 113, 108, 0.28)) !important;
  background: var(--discover-premium-surface-solid, #ffffff) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--discover-premium-ink-soft, #44403c) !important;
  border-radius: 0.5rem !important;
  box-shadow: var(--discover-control-shadow, 0 1px 2px rgba(28, 25, 23, 0.05)) !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: manipulation !important;
}

.map-control-satellite-icon:hover {
  background: var(--discover-premium-hover, rgba(250, 247, 242, 0.96)) !important;
  border-color: var(--discover-premium-line-strong, rgba(87, 83, 78, 0.34)) !important;
  color: var(--discover-premium-ink, #171412) !important;
  box-shadow: 0 2px 6px rgba(28, 25, 23, 0.1) !important;
}

.map-control-satellite-icon:active {
  transform: none !important;
}

.map-control-satellite-icon:focus {
  outline: none !important;
}

.map-control-satellite-icon:focus-visible {
  outline: 2px solid var(--discover-premium-muted, #78716c) !important;
  outline-offset: 2px !important;
  box-shadow: var(--discover-premium-focus, 0 0 0 3px rgba(120, 113, 108, 0.16)) !important;
}

.dark .map-control-satellite-icon {
  border-color: var(--discover-premium-line, rgba(168, 162, 158, 0.42)) !important;
  background: var(--discover-premium-surface-solid, #1c1917) !important;
  color: var(--discover-premium-ink-soft, #e7e5e4) !important;
}

.dark .map-control-satellite-icon:hover {
  background: var(--discover-premium-hover, rgba(68, 64, 60, 0.88)) !important;
  color: var(--discover-premium-ink, #fafaf9) !important;
}

.dark .map-control-satellite-icon:focus-visible {
  outline-color: var(--discover-premium-muted, #a8a29e) !important;
  box-shadow: var(--discover-premium-focus, 0 0 0 3px rgba(168, 162, 158, 0.2)) !important;
}

.map-control-satellite-icon svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  pointer-events: none !important;
}

.map-control-satellite-icon * {
  pointer-events: none !important;
}

/* Active satellite (hybrid): ink-filled chip in discover palette */
.map-control-satellite-icon.active,
.map-control-satellite-icon.is-active {
  background: var(--discover-premium-ink, #171412) !important;
  border-color: var(--discover-premium-ink, #171412) !important;
  color: var(--discover-premium-surface-solid, #ffffff) !important;
  box-shadow: 0 2px 8px rgba(28, 25, 23, 0.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.dark .map-control-satellite-icon.active,
.dark .map-control-satellite-icon.is-active {
  background: var(--discover-premium-ink, #fafaf9) !important;
  border-color: var(--discover-premium-ink, #fafaf9) !important;
  color: #1c1917 !important;
}

/* Custom map controls (Google Maps TOP_RIGHT). #map-container is already offset below the
   discover top bar (see map.css #map-container top), so use a small inset only — do not add
   --discover-current-topbar-height again or the control sits a full header too low. */
.custom-map-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: var(--z-overlay) !important;
  pointer-events: none !important; /* Allow clicks to pass through container to button */
}

@media (max-width: 1100px) {
  .custom-map-controls {
    top: 17px !important;
    right: 7px !important;
  }
}

@media (max-width: 567px) {
  .custom-map-controls {
    top: 17px !important;
    right: 7px !important;
  }
}

.custom-map-controls > * {
  pointer-events: auto !important;
}

.custom-map-controls-satellite-wrap {
  pointer-events: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
}

.custom-map-controls-satellite-wrap .map-control-satellite-icon {
  pointer-events: auto !important;
}

/* Dark mode — discover warm chrome (overrides earlier glass slabs). */
.dark .map-control-satellite-icon {
  border-color: var(--discover-premium-line, rgba(168, 162, 158, 0.42)) !important;
  background: var(--discover-premium-surface-solid, #1c1917) !important;
  color: var(--discover-premium-ink-soft, #e7e5e4) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

.dark .map-control-satellite-icon:hover {
  background: var(--discover-premium-hover, rgba(68, 64, 60, 0.88)) !important;
  color: var(--discover-premium-ink, #fafaf9) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.dark .map-control-satellite-icon.active,
.dark .map-control-satellite-icon.is-active {
  background: var(--discover-premium-ink, #fafaf9) !important;
  border-color: var(--discover-premium-ink, #fafaf9) !important;
  color: #1c1917 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Responsive satellite control sizing. Inset from map pane edges (see .custom-map-controls). */
@media (max-width: 767px) {
  .custom-map-controls-satellite-wrap {
    transform: none !important;
  }

  .map-control-satellite-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }

  .map-control-satellite-icon svg {
    width: 16px !important;
    height: 16px !important;
  }

  .map-control-satellite-icon:active {
    transform: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  .custom-map-controls-satellite-wrap {
    transform: none !important;
  }

  .map-control-satellite-icon:active {
    transform: none !important;
  }
}

@media (min-width: 1101px) {
  .custom-map-controls-satellite-wrap {
    transform: none !important;
  }

  .map-control-satellite-icon:active {
    transform: none !important;
  }
}

/* Map control dropdown interactions */
.map-control-menu {
  transform-origin: top right;
}

.map-control-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.map-control-menu.hide {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.95);
}

.map-control-dropdown svg {
  width: 12px !important;
  height: 12px !important;
  transition: transform var(--transition-normal, 0.2s ease);
}

.map-control-dropdown:hover svg {
  transform: scale(1.1);
}

.map-control-menu-item svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
/* ========================================
   * COMPLIANCE VERIFICATION CHECKLIST ✅
   * ========================================
   * ✅ Attribution (.gm-style-cc) - VISIBLE & STYLED
   * ✅ Terms/Report links - CLICKABLE & FUNCTIONAL
   * ✅ Google branding - PRESERVED
   * ✅ Map tiles - NEVER HIDDEN
   * ✅ Core functionality - INTACT
   * ✅ JavaScript controls - TOS COMPLIANT
   * ======================================== */
  /* Enhanced quick time presets */
  /* map.css - quick time button animations */
  .quick-time-btn {
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
  }
  .quick-time-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left var(--transition-slow);
  }
  .quick-time-btn:hover::before {
    left: 100%;
  }
  /* Enhanced map search indicator */
  #map-search-indicator {
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 32px #00000033;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  /* Enhanced auto-search toggle */
  #auto-search-toggle {
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
  }
  #auto-search-toggle:hover {
    transform: var(--transform-hover);
    box-shadow: 0 8px 25px #00000026;
  }
  #auto-search-toggle:active {
    transform: translateY(0);
  }
  /* High DPI display enhancements - CONSOLIDATED */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Sharper borders and shadows for high DPI displays */
  .amenity-chip,
  .quick-time-btn,
  #auto-search-toggle,
  button,
  input,
  select {
    border-width: 0.5px;
  }

  #map-search-indicator {
    box-shadow: 0 1px 4px #0000001a;
  }

  /* Enhanced shadows for better touch feedback */
  button:active,
  .quick-time-btn:active {
    box-shadow: var(--shadow-active);
  }

  /* Filter chip active state handled in main filter chip section */
}
/* Map panel within content area */
#map-panel {
  position: relative;
  flex: 1;
  /* Do not clip — Google Maps tile transforms flash wrong position under overflow:hidden. */
  overflow: visible;
  z-index: var(--z-map-container);
  width: 100%;
  height: 100%;
  min-height: 400px; /* Ensure minimum height */
}

/* MOBILE/TABLET: Ensure map panel fills available space */
@media (max-width: 1100px) {
  body.discover-page .discover-map-row {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
  }

  #map-panel {
    position: relative !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    align-self: stretch !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #discover-map-studio {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
}
/* Ensure map panel is visible on desktop */
  #map-loading {
    position: absolute !important;
    z-index: var(--z-blocker) !important;
    overflow: visible !important;
  }
  /* Show loading overlay with flex layout when visible */
  #map-loading:not(.hidden) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Ensure loading overlay is hidden when map loads successfully */
  #map-loading.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
/* Map container within the content area - DESKTOP DEFAULT */
#map-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-map-container);
  /* Ensure visibility without aggressive overrides */
  display: block;
  visibility: visible;
  opacity: 1;
  /* Match boot wash / sheet so the peek strip never reads as a black gap. */
  background: var(--discover-premium-wash, #f3f4f6);

  /* Soft corner hint only. Keep overflow visible — clipping GMaps tile transforms flashes. */
  border-radius: 0 0 20px 20px !important;
  overflow: visible !important;
}

html.dark #map-container,
.dark #map-container,
body.dark #map-container {
  background: var(--color-dark-surface, #171717);
}

/* DESKTOP: Ensure map container is properly positioned on desktop */
@media (min-width: 1101px) {
  body.discover-page #map-container {
    position: fixed !important;
    top: var(--discover-current-topbar-height, 4.5rem) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important; /* Base positioning - JavaScript can override with transforms */
    width: 100% !important;
    height: calc(100vh - var(--discover-current-topbar-height, 4.5rem)) !important;
    height: calc(100svh - var(--discover-current-topbar-height, 4.5rem)) !important;
    z-index: var(--z-map-container) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: var(--discover-premium-wash) !important;
    overflow: visible !important;
    /* Hardware acceleration applied via .hw-accel utility class */
    contain: none !important; /* Remove containment on desktop for better layout */
  }

  html.dark body.discover-page #map-container,
  .dark body.discover-page #map-container,
  body.dark.discover-page #map-container {
    background: var(--color-dark-surface, #171717) !important;
  }

  /* Ensure map container visibility on desktop */
  body.discover-page #map-container,
  body.discover-page .map-container,
  body.discover-page #mini-map {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* MOBILE/TABLET: ListSpot-style map studio — stable frame, absolute-fill canvas */
@media (max-width: 1100px) {
  body.discover-page #discover-map-studio {
    position: relative !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    touch-action: none !important;
    overscroll-behavior: none !important;
  }

  body.discover-page #map-container {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    z-index: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: var(--discover-premium-wash) !important;
    overflow: visible !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    contain: none !important;
    touch-action: none !important;
  }

  body.discover-page #map-panel {
    overflow: visible !important;
    touch-action: none !important;
    overscroll-behavior: none !important;
  }

  body.discover-page .discover-map-row {
    overflow: visible !important;
  }

  body.discover-page #map-container .gm-style,
  body.discover-page #map-container .gm-style > div {
    width: 100% !important;
    height: 100% !important;
    touch-action: none !important;
  }

  body.discover-page #map-container,
  body.discover-page #map-container .gm-style,
  body.discover-page #map-container .gm-style > div {
    touch-action: none !important;
  }

  body.discover-page #map-container > div,
  body.discover-page #map-container .gm-style,
  body.discover-page #map-container iframe {
    pointer-events: auto !important;
  }

}

/* Amenities / commercial overlays — swiftspot-overlay-modal + overlayModal.js */
#amenities-popup.swiftspot-overlay-modal {
  z-index: var(--z-high-modal, 999999) !important;
  contain: layout paint !important;
}

#commercial-use-popup.swiftspot-overlay-modal {
  z-index: var(--z-below-maximum) !important;
  contain: none !important;
}

/* ==========================================================================
 * Amenities / Refine popup — single source of truth for Discover.
 * Do not redeclare this chrome in amenity-badge.css (badges only).
 * Mobile docking (bottom sheet ≤767px) comes from components/modals.css;
 * this file owns panel chrome, density, chips, fields, and footer.
 * ========================================================================== */

#amenities-popup-container {
  background-color: var(--discover-premium-surface-soft) !important;
  border: 1px solid var(--discover-premium-line, rgba(214, 211, 208, 0.72)) !important;
  border-radius: var(--discover-chrome-radius-md, 1rem) !important;
  box-shadow:
    0 18px 44px rgba(15, 23, 42, 0.16),
    0 3px 10px rgba(15, 23, 42, 0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: min(90vh, 90dvh) !important;
  min-height: 0 !important;
  contain: layout paint !important;
  overflow: hidden !important;
}

.dark #amenities-popup-container,
html.dark #amenities-popup-container,
body.dark #amenities-popup-container {
  background-color: var(--discover-premium-surface-solid) !important;
  border-color: var(--discover-premium-line, rgba(82, 82, 82, 0.72)) !important;
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.45),
    0 3px 10px rgba(0, 0, 0, 0.25) !important;
}

#amenities-popup-container > .amenities-popup-header,
#amenities-popup-container > div:first-child {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  padding: 1rem 1.25rem !important;
  border-bottom: 1px solid var(--discover-premium-line, rgba(214, 211, 208, 0.6)) !important;
}

#amenities-popup-container .amenities-popup-content,
#amenities-popup .amenities-popup-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 1.25rem !important;
  max-height: none !important; /* flex child scrolls; avoid Tailwind max-h fighting sheet height */
}

#amenities-popup-title {
  margin: 0 !important;
  font-size: 1.0625rem !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.015em !important;
  color: rgb(28, 25, 23) !important;
}

.dark #amenities-popup-title,
html.dark #amenities-popup-title,
body.dark #amenities-popup-title {
  color: rgb(255, 255, 255) !important;
}

#amenities-popup-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-width: 2.25rem !important;
  min-height: 2.25rem !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 999px !important;
  background-color: transparent !important;
  color: rgb(120, 113, 108) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

#amenities-popup-close:hover {
  background-color: rgba(28, 25, 23, 0.06) !important;
  color: rgb(28, 25, 23) !important;
}

.dark #amenities-popup-close {
  color: rgb(168, 162, 158) !important;
}

.dark #amenities-popup-close:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: rgb(245, 245, 244) !important;
}

#amenities-popup-close svg {
  width: 1.125rem !important;
  height: 1.125rem !important;
}

/* Section rhythm — one divider scale, no competing mt/pt utilities */
#amenities-popup .amenities-popup-section,
#amenities-popup #popular-needs-section,
#amenities-popup #space-type-filter-section,
#amenities-popup #price-filter-section,
#amenities-popup #more-filters-section,
#amenities-popup #space-requirements-section,
#amenities-popup .amenities-for-business-section {
  margin-top: 1.125rem !important;
  padding-top: 1.125rem !important;
  border-top: 1px solid var(--discover-premium-line, rgba(214, 211, 208, 0.55)) !important;
}

#amenities-popup #popular-needs-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
  margin-bottom: 0 !important;
}

#amenities-popup .amenities-section-label,
#amenities-popup summary.amenities-popup-summary,
#amenities-popup summary {
  display: block !important;
  margin: 0 0 0.625rem !important;
  font-size: 0.6875rem !important;
  font-weight: 650 !important;
  line-height: 1rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgb(87, 83, 78) !important;
  list-style: none !important;
  cursor: pointer;
}

#amenities-popup summary::-webkit-details-marker {
  display: none;
}

.dark #amenities-popup .amenities-section-label,
.dark #amenities-popup summary.amenities-popup-summary,
.dark #amenities-popup summary,
html.dark #amenities-popup .amenities-section-label,
html.dark #amenities-popup summary,
body.dark #amenities-popup .amenities-section-label,
body.dark #amenities-popup summary {
  color: rgb(161, 161, 170) !important;
}

#amenities-popup .amenities-commercial-help-link,
#amenities-popup #commercial-use-help-link {
  color: rgb(87, 83, 78) !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

#amenities-popup .amenities-commercial-help-link:hover,
#amenities-popup #commercial-use-help-link:hover {
  color: rgb(28, 25, 23) !important;
  text-decoration: underline !important;
}

.dark #amenities-popup .amenities-commercial-help-link,
html.dark #amenities-popup .amenities-commercial-help-link,
body.dark #amenities-popup .amenities-commercial-help-link {
  color: rgb(161, 161, 170) !important;
}

.dark #amenities-popup .amenities-commercial-help-link:hover,
html.dark #amenities-popup .amenities-commercial-help-link:hover,
body.dark #amenities-popup .amenities-commercial-help-link:hover {
  color: rgb(228, 228, 231) !important;
}

/* Chip grid */
#amenities-popup .popular-needs-group,
#amenities-popup .spot-type-groups,
#amenities-popup .amenities-unified .grid,
#parking-amenities-popup .grid,
#storage-amenities-popup .grid {
  gap: 0.5rem !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#amenities-popup #parking-spot-type-groups-popup:not(.hidden) + #storage-spot-type-groups-popup:not(.hidden) {
  margin-top: 0.5rem !important;
}

#amenities-popup .amenity-chip-button {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 0.5rem 0.75rem !important;
  cursor: pointer !important;
  border: 1px solid #d6d3d1 !important;
  border-radius: 0.75rem !important;
  font-size: 0.8125rem !important;
  font-weight: 550 !important;
  line-height: 1.2 !important;
  min-height: 2.5rem !important;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease !important;
  background-color: #fafaf9 !important;
  color: #44403c !important;
  box-sizing: border-box !important;
}

#amenities-popup .amenity-chip-button:hover {
  background-color: #e7e5e4 !important;
}

.dark #amenities-popup .amenity-chip-button,
html.dark #amenities-popup .amenity-chip-button {
  background-color: #3f3f46 !important;
  border-color: #52525b !important;
  color: #e7e5e4 !important;
}

.dark #amenities-popup .amenity-chip-button:hover,
html.dark #amenities-popup .amenity-chip-button:hover {
  background-color: #52525b !important;
  border-color: #71717a !important;
}

#amenities-popup .amenity-chip-button[aria-pressed="true"],
#amenities-popup .amenity-chip-button.active {
  background-color: rgba(15, 90, 86, 0.1) !important;
  border-color: var(--color-brand-accent, #0f5a56) !important;
  color: var(--color-brand-accent-fg, #0f5a56) !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}

.dark #amenities-popup .amenity-chip-button[aria-pressed="true"],
.dark #amenities-popup .amenity-chip-button.active,
html.dark #amenities-popup .amenity-chip-button[aria-pressed="true"],
html.dark #amenities-popup .amenity-chip-button.active {
  background-color: rgba(94, 234, 212, 0.14) !important;
  border-color: var(--color-brand-accent-fg, #5eead4) !important;
  color: #99f6e4 !important;
}

#amenities-popup .amenity-chip-button span {
  text-align: center !important;
  width: 100% !important;
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  color: inherit !important;
}

#amenities-popup .amenity-chip-button:focus-visible {
  outline: 2px solid #78716c !important;
  outline-offset: 2px !important;
}

#amenities-popup .amenity-chip-button input[type="checkbox"].sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Commercial chip: selected amber to distinguish from teal amenity selection */
#amenities-popup .amenity-chip-commercial {
  background-color: #fafaf9 !important;
  border-color: #d6d3d1 !important;
  color: #44403c !important;
}

#amenities-popup .amenity-chip-commercial:hover {
  background-color: #e7e5e4 !important;
  border-color: #a8a29e !important;
}

.dark #amenities-popup .amenity-chip-commercial,
html.dark #amenities-popup .amenity-chip-commercial {
  background-color: #3f3f46 !important;
  border-color: #52525b !important;
  color: #e7e5e4 !important;
}

.dark #amenities-popup .amenity-chip-commercial:hover,
html.dark #amenities-popup .amenity-chip-commercial:hover {
  background-color: #52525b !important;
  border-color: #71717a !important;
}

#amenities-popup .amenity-chip-commercial[aria-pressed="true"],
#amenities-popup .amenity-chip-commercial.active {
  background-color: #c2410c !important;
  color: #ffffff !important;
  border-color: #9a3412 !important;
  font-weight: 650 !important;
  box-shadow: 0 1px 2px rgba(194, 65, 12, 0.3) !important;
}

.dark #amenities-popup .amenity-chip-commercial[aria-pressed="true"],
.dark #amenities-popup .amenity-chip-commercial.active,
html.dark #amenities-popup .amenity-chip-commercial[aria-pressed="true"],
html.dark #amenities-popup .amenity-chip-commercial.active {
  background-color: #fb923c !important;
  color: #431407 !important;
  border-color: #fdba74 !important;
}

/* Fields */
#amenities-popup label {
  display: block !important;
  font-size: 0.75rem !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  color: rgb(68, 64, 60) !important;
}

.dark #amenities-popup label {
  color: rgb(214, 211, 208) !important;
}

#amenities-popup input[type="number"],
#amenities-popup select {
  display: block !important;
  width: 100% !important;
  margin-top: 0.35rem !important;
  min-height: 2.375rem !important;
  padding: 0.45rem 0.65rem !important;
  border: 1px solid #d6d3d1 !important;
  border-radius: 0.625rem !important;
  background-color: #ffffff !important;
  color: rgb(28, 25, 23) !important;
  font-size: 0.875rem !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
}

.dark #amenities-popup input[type="number"],
.dark #amenities-popup select {
  background-color: #171717 !important;
  border-color: #52525b !important;
  color: #fafaf9 !important;
}

#amenities-popup #price-filter-section .grid,
#amenities-popup #space-requirements-fields-grid {
  gap: 0.75rem !important;
}

#amenities-popup #price-filter-helper,
#amenities-popup .amenities-helper-text,
#amenities-popup p.text-xs {
  margin-top: 0.5rem !important;
  font-size: 0.75rem !important;
  line-height: 1.35 !important;
  color: rgb(120, 113, 108) !important;
}

.dark #amenities-popup #price-filter-helper,
.dark #amenities-popup .amenities-helper-text,
.dark #amenities-popup p.text-xs {
  color: rgb(161, 161, 170) !important;
}

/* Footer */
#amenities-popup-footer {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  padding: 0.875rem 1.25rem !important;
  padding-bottom: max(0.875rem, env(safe-area-inset-bottom, 0px)) !important;
  border-top: 1px solid var(--discover-premium-line, rgba(214, 211, 208, 0.6)) !important;
  background-color: rgba(245, 245, 244, 0.72) !important;
}

.dark #amenities-popup-footer {
  background-color: rgba(23, 23, 23, 0.85) !important;
  border-top-color: rgba(82, 82, 82, 0.72) !important;
}

#amenities-clear-all.amenities-clear-all-btn,
#amenities-clear-all {
  min-height: 2.5rem !important;
  padding: 0.5rem 0.75rem !important;
  border: none !important;
  border-radius: 0.75rem !important;
  background: transparent !important;
  color: #78716c !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

#amenities-clear-all.amenities-clear-all-btn:hover,
#amenities-clear-all:hover {
  color: #1c1917 !important;
  background-color: rgba(28, 25, 23, 0.05) !important;
}

.dark #amenities-clear-all,
html.dark #amenities-clear-all,
body.dark #amenities-clear-all {
  color: rgb(161, 161, 170) !important;
}

.dark #amenities-clear-all:hover,
html.dark #amenities-clear-all:hover,
body.dark #amenities-clear-all:hover {
  color: rgb(229, 231, 235) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
}

#amenities-apply {
  min-height: 2.5rem !important;
  padding: 0.5rem 1.25rem !important;
  border: none !important;
  border-radius: 0.75rem !important;
  background-color: #292524 !important;
  color: #ffffff !important;
  font-size: 0.875rem !important;
  font-weight: 650 !important;
  cursor: pointer !important;
}

#amenities-apply:hover {
  background-color: #1c1917 !important;
}

.dark #amenities-apply,
html.dark #amenities-apply {
  background-color: #44403c !important;
  color: #ffffff !important;
}

.dark #amenities-apply:hover,
html.dark #amenities-apply:hover {
  background-color: #57534e !important;
}

/* NOTE: Discover macros put .amenity-checkbox on <button.amenity-chip-button>, not a native input.
   Do not size .amenity-checkbox like a checkbox — it collapses chip width. */

/* Commercial Use info modal — layered above amenities popup */
#commercial-use-popup-container {
  background-color: var(--discover-premium-surface-soft) !important;
  border-radius: var(--discover-chrome-radius-md, 1rem) !important;
  border: 1px solid var(--discover-premium-line, rgba(214, 211, 208, 0.72)) !important;
}

.dark #commercial-use-popup-container,
html.dark #commercial-use-popup-container,
body.dark #commercial-use-popup-container {
  background-color: var(--discover-premium-surface-solid) !important;
  border-color: var(--discover-premium-line, rgba(82, 82, 82, 0.72)) !important;
}

#commercial-use-popup-title {
  color: rgb(17, 24, 39) !important;
}

.dark #commercial-use-popup-title,
html.dark #commercial-use-popup-title,
body.dark #commercial-use-popup-title {
  color: rgb(255, 255, 255) !important;
}

#commercial-use-popup-body {
  color: rgb(55, 65, 81) !important;
}

.dark #commercial-use-popup-body,
html.dark #commercial-use-popup-body,
body.dark #commercial-use-popup-body {
  color: rgb(212, 212, 216) !important;
}

#commercial-use-popup-body strong {
  color: rgb(17, 24, 39) !important;
}

.dark #commercial-use-popup-body strong,
html.dark #commercial-use-popup-body strong,
body.dark #commercial-use-popup-body strong {
  color: rgb(255, 255, 255) !important;
}

.commercial-use-popup-backdrop {
  cursor: pointer;
}

/* Phone / sheet density — one breakpoint; docks via modals.css */
@media (max-width: 767px) {
  #amenities-popup-container {
    max-height: min(
      92dvh,
      calc(100dvh - env(safe-area-inset-top, 0px) - 0.75rem)
    ) !important;
    border-radius: 1.25rem 1.25rem 0 0 !important;
    /* Footer owns home-indicator inset; avoid stacking with modals.css panel padding. */
    padding-bottom: 0 !important;
  }

  #amenities-popup-container > .amenities-popup-header,
  #amenities-popup-container > div:first-child {
    padding: 0.7rem 0.875rem !important;
  }

  #amenities-popup-title {
    font-size: 0.9375rem !important;
  }

  #amenities-popup-close {
    width: 2.125rem !important;
    height: 2.125rem !important;
    min-width: 2.125rem !important;
    min-height: 2.125rem !important;
  }

  #amenities-popup-container .amenities-popup-content,
  #amenities-popup .amenities-popup-content {
    padding: 0.7rem 0.875rem !important;
  }

  #amenities-popup .amenities-popup-section,
  #amenities-popup #popular-needs-section,
  #amenities-popup #space-type-filter-section,
  #amenities-popup #price-filter-section,
  #amenities-popup #more-filters-section,
  #amenities-popup #space-requirements-section,
  #amenities-popup .amenities-for-business-section {
    margin-top: 0.65rem !important;
    padding-top: 0.65rem !important;
  }

  #amenities-popup #popular-needs-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
  }

  #amenities-popup .amenities-section-label,
  #amenities-popup summary.amenities-popup-summary,
  #amenities-popup summary {
    margin-bottom: 0.375rem !important;
    font-size: 0.625rem !important;
    letter-spacing: 0.11em !important;
  }

  #amenities-popup .popular-needs-group,
  #amenities-popup .spot-type-groups,
  #amenities-popup .amenities-unified .grid,
  #parking-amenities-popup .grid,
  #storage-amenities-popup .grid {
    gap: 0.3rem !important;
  }

  /* Dense filter chips — not primary CTAs; keep below global touch-target token */
  #amenities-popup .amenity-chip-button {
    min-height: 2rem !important;
    padding: 0.3rem 0.45rem !important;
    border-radius: 0.5rem !important;
    font-size: 0.71875rem !important;
    line-height: 1.15 !important;
  }

  #amenities-popup .discover-space-type-mode-toggle,
  #amenities-popup #discover-space-type-mode-toggle {
    padding: 0.18rem !important;
    gap: 0.15rem !important;
    margin-bottom: 0.5rem !important;
  }

  #amenities-popup .discover-space-type-mode-toggle .space-type-btn {
    padding: 0.32rem 0.4rem !important;
    font-size: 0.75rem !important;
    min-height: 1.875rem !important;
  }

  #amenities-popup input[type="number"],
  #amenities-popup select {
    min-height: 2.125rem !important;
    font-size: 0.8125rem !important;
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
  }

  #amenities-popup #price-filter-section .grid,
  #amenities-popup #space-requirements-fields-grid {
    gap: 0.4rem !important;
  }

  #amenities-popup-footer {
    padding: 0.625rem 0.875rem !important;
    padding-bottom: max(0.625rem, env(safe-area-inset-bottom, 0px)) !important;
    gap: 0.4rem !important;
  }

  #amenities-clear-all,
  #amenities-apply {
    min-height: 2.25rem !important;
    font-size: 0.8125rem !important;
    border-radius: 0.5rem !important;
  }

  #amenities-apply {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
  }

  #commercial-use-popup-container {
    border-radius: 1.25rem 1.25rem 0 0 !important;
  }

  #commercial-use-popup-title {
    font-size: 1rem !important;
    line-height: 1.25 !important;
  }

  #commercial-use-popup-body {
    font-size: 0.8125rem !important;
    line-height: 1.45 !important;
  }
}

@media (max-width: 380px) {
  #amenities-popup-container > .amenities-popup-header,
  #amenities-popup-container > div:first-child,
  #amenities-popup-container .amenities-popup-content,
  #amenities-popup .amenities-popup-content,
  #amenities-popup-footer {
    padding-left: 0.7rem !important;
    padding-right: 0.7rem !important;
  }

  #amenities-popup .amenity-chip-button {
    min-height: 1.875rem !important;
    padding: 0.25rem 0.35rem !important;
    font-size: 0.6875rem !important;
  }
}

/* SPOT DETAIL VIEW - RESPONSIVE MODAL/OVERLAY */

/* BASE: Default dialog behavior - ensure it can be displayed */
#spot-detail-view {
  /* CRITICAL: Ensure dialog can be displayed when not hidden */
  flex-direction: column !important;
  background: white !important;
  z-index: var(--z-high-modal) !important; /* High z-index but allows maps modal to appear above */
  border: none !important; /* Remove default dialog border */
  padding: 0 !important; /* Remove default dialog padding */
  margin: 0 !important; /* Remove default dialog margin */
}

/* CRITICAL: Ensure dialog has display when visible */
#spot-detail-view:not(.hidden) {
  display: flex !important;
}

/* Force recalculation helper */
#spot-detail-view.force-recalc {
  transform: translateZ(0) !important; /* Force GPU layer to trigger recalc */
}
/* SEARCH DISPLAY CONTAINER - RESPONSIVE SCALING */

/* Narrow desktop: single scale (was three duplicate 1101–1199 blocks; only the last rule applied) */
@media (min-width: 1101px) and (max-width: 1279px) {
  .search-display-container {
    transform: scale(0.9) !important;
    transform-origin: left center !important;
    transition: transform var(--transition-base, 0.2s ease) !important;
  }
}

/* MOBILE/TABLET: Full-screen positioning for viewports ≤1100px */
@media (max-width: 1100px) {
  #spot-detail-view[open]:not(.hidden),
  #spot-detail-view:not(.hidden) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    border-radius: 0 !important;
    border-top: 1px solid var(--discover-premium-line) !important;
    background: var(--discover-premium-surface-solid) !important;
    z-index: var(--z-high-modal) !important; /* High z-index but allows maps modal to appear above */
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: hidden !important; /* Dialog itself should not scroll vertically - only content area scrolls */
    overflow-x: visible !important; /* CRITICAL: Allow photo navigation buttons to extend horizontally */
    clip: none !important;
    clip-path: none !important;
    isolation: auto !important; /* CRITICAL: Don't create stacking context that traps photo navigation buttons */
  }
}

/* DESKTOP: Spot details as side overlay (≥1101px) - Similar to listings overlay */
@media (min-width: 1101px) {
  #spot-detail-view[open]:not(.hidden),
  #spot-detail-view.visible:not(.hidden),
  #spot-detail-view:not(.hidden) {
    /* Override mobile full-screen positioning for desktop */
    position: fixed !important;
    display: flex !important; /* CRITICAL: Ensure display is set */
    top: calc(var(--discover-current-topbar-height, 4.5rem) + 0.75rem) !important;
    /* Slightly past listings rail + gap so detail chrome does not crowd the rail edge */
    left: calc(400px + 1rem + 2rem + 0.375rem) !important;
    right: auto !important;
    bottom: auto !important;
    width: 420px !important;
    height: calc(100vh - var(--discover-current-topbar-height, 4.5rem) - 0.75rem - 1.25rem) !important;
    height: calc(100dvh - var(--discover-current-topbar-height, 4.5rem) - 0.75rem - 1.25rem) !important;
    max-width: calc(100vw - 400px - 3.25rem) !important;
    max-height: calc(100vh - var(--discover-current-topbar-height, 4.5rem) - 0.75rem - 1.25rem) !important;
    max-height: calc(100dvh - var(--discover-current-topbar-height, 4.5rem) - 0.75rem - 1.25rem) !important;
    min-width: 340px !important;
    min-height: 200px !important;

    /* Desktop styling to match listings overlay */
    border-radius: var(--discover-chrome-radius-md, 1rem) !important;
    background: var(--discover-premium-surface-solid) !important;
    border: 1px solid var(--discover-premium-line) !important;
    border-top: 1px solid var(--discover-premium-line) !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: var(--discover-premium-shadow) !important;

    /* Desktop container behavior - dialog itself should NOT scroll */
    overflow: hidden !important; /* Dialog should not scroll - only #spot-detail-content scrolls */
    overflow-y: hidden !important;
    overflow-x: visible !important; /* CRITICAL: Allow photo navigation buttons to extend horizontally */
    overscroll-behavior: contain !important;
    box-sizing: border-box !important;
    isolation: auto !important; /* CRITICAL: Don't create stacking context that traps photo navigation buttons */
    flex-direction: column !important; /* Ensure flex layout for proper scrolling */
  }

  /* Dark mode desktop styling */
  .dark #spot-detail-view[open]:not(.hidden),
  .dark #spot-detail-view.visible:not(.hidden),
  .dark #spot-detail-view:not(.hidden) {
    background: var(--discover-premium-surface-solid) !important;
    border: 1px solid var(--discover-premium-line) !important;
    border-top: 1px solid var(--discover-premium-line) !important;
  }
}

@media (min-width: 1400px) {
  #spot-detail-view[open]:not(.hidden),
  #spot-detail-view.visible:not(.hidden),
  #spot-detail-view:not(.hidden) {
    left: calc(400px + 1rem + 2rem + 0.375rem + 1.25rem) !important;
    max-width: calc(100vw - 400px - 3.25rem - 1.25rem) !important;
  }
}

#spot-detail-view.visible {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#spot-detail-view.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  /* JavaScript will remove .hidden class before calling dialog.show() */
}

/* Last-spot dock: reopen the listing that was just minimized, without losing map radius. */
.discover-last-spot-dock {
  display: none;
  align-items: stretch;
  max-width: min(16.5rem, calc(100vw - 2rem));
  pointer-events: none;
}

.discover-last-spot-dock:not([hidden]) {
  display: flex;
  pointer-events: auto;
}

.discover-last-spot-dock__open,
.discover-last-spot-dock__dismiss {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.discover-last-spot-dock__open {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
  padding: 0.45rem 0.7rem;
  text-align: left;
}

.discover-last-spot-dock__label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.discover-last-spot-dock__dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  color: inherit;
  opacity: 0.62;
}

.discover-last-spot-dock__dismiss:hover,
.discover-last-spot-dock__dismiss:focus-visible {
  opacity: 1;
}

@media (min-width: 1101px) {
  /* Sit in the details-column origin (same tokens as #spot-detail-view / listings rail).
     A side-tab on a hardcoded 400px rail overlapped the real overlay, header, and Search this area. */
  body.discover-page .discover-last-spot-dock--desktop:not([hidden]),
  .discover-last-spot-dock--desktop:not([hidden]) {
    position: fixed;
    z-index: calc(var(--z-overlay, 40) + 2);
    top: calc(var(--discover-current-topbar-height, 4.5rem) + 1rem);
    left: calc(
      var(--discover-desktop-listings-rail-left, 1rem) +
        var(--discover-desktop-listings-rail-width, 24rem) +
        var(--discover-spot-detail-dialog-gap, 1rem)
    );
    max-width: min(
      16.5rem,
      calc(
        100vw
        - var(--discover-desktop-listings-rail-left, 1rem)
        - var(--discover-desktop-listings-rail-width, 24rem)
        - var(--discover-spot-detail-dialog-gap, 1rem)
        - 4.5rem
      )
    );
    background: var(--discover-chrome-surface, var(--discover-premium-surface-solid, #fff));
    border: 1px solid var(--discover-chrome-border, var(--discover-premium-line, rgba(23, 20, 18, 0.12)));
    border-radius: var(--discover-chrome-radius-md, 0.85rem);
    box-shadow: var(--discover-chrome-shadow-panel, var(--discover-premium-shadow-soft, 0 10px 24px rgba(28, 25, 23, 0.16)));
    color: var(--discover-premium-ink, #171412);
  }

  .discover-last-spot-dock--sheet {
    display: none !important;
  }
}

@media (max-width: 1100px) {
  .discover-last-spot-dock--desktop {
    display: none !important;
  }

  .discover-last-spot-dock--sheet:not([hidden]) {
    margin: 0 0.75rem 0.55rem;
    border: 1px solid var(--discover-premium-line, rgba(23, 20, 18, 0.12));
    border-radius: var(--discover-chrome-radius-md, 0.85rem);
    background: var(--discover-premium-surface-solid, #fff);
    color: var(--discover-premium-ink, #171412);
    box-shadow: var(--discover-premium-shadow-soft, 0 6px 16px rgba(28, 25, 23, 0.1));
  }

  body.discover-page[data-discover-map-mode="map"] .discover-last-spot-dock--sheet:not([hidden]) {
    position: fixed;
    left: 0.75rem;
    right: auto;
    bottom: max(
      4.65rem,
      calc(var(--discover-bottom-nav-clearance, 0px) + env(safe-area-inset-bottom, 0px) + 4.35rem)
    );
    z-index: calc(var(--z-sheet, 100) + 38);
    margin: 0;
    max-width: min(18rem, calc(100vw - 6.5rem));
  }
}

.dark .discover-last-spot-dock--desktop:not([hidden]),
.dark .discover-last-spot-dock--sheet:not([hidden]) {
  background: var(--discover-premium-surface-solid, #1c1917);
  border-color: var(--discover-premium-line, rgba(250, 250, 249, 0.14));
  color: var(--discover-premium-ink, #fafaf9);
}

/* CRITICAL: Force hide dialog with .hidden class even if [open] attribute is present */
/* This handles race conditions during viewport transitions */
#spot-detail-view.hidden,
#spot-detail-view[open].hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* CRITICAL: On mobile and tablet/tablet, the desktop spot detail dialog should NEVER be visible */
/* Spot details are shown in the bottom sheet on these viewports instead */
/* This rule MUST override inline styles set by JavaScript during viewport transitions */
@media (max-width: 1100px) {
  #spot-detail-view,
  #spot-detail-view.visible,
  #spot-detail-view[open],
  #spot-detail-view.hidden,
  #spot-detail-view[open].hidden,
  #spot-detail-view.visible.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
  }
}

/* Additional spot detail view properties - merged with base rule above */
/* Base properties already defined above - no duplication needed */

/* SIMPLE: Basic spot detail structure */
.spot-detail-header {
  padding: 1rem;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.spot-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.spot-detail-footer {
  padding: 1rem;
  border-top: 1px solid #e5e7eb;
  flex-shrink: 0;
}

#spot-detail-content {
  width: 100%;
  height: 100%;
}

/* Desktop loading shell: keep a visible surface while HTML is fetched (not empty/black). */
#spot-detail-view.spot-detail-loading #spot-detail-content {
  background: var(--discover-premium-surface-solid, #ffffff);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dark #spot-detail-view.spot-detail-loading #spot-detail-content {
  background: var(--discover-premium-surface-solid, #111827);
}

/* SIMPLE: Basic styling for simplified content */
.simple-spot-details {
  padding: 1rem;
}

.simple-spot-details h3 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.simple-spot-details p {
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.simple-spot-details button {
  background: var(--discover-premium-ink);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  border: none;
  font-weight: 600;
  margin-top: 1rem;
  cursor: pointer;
}

.simple-spot-details button:hover {
  background: var(--discover-premium-ink-soft);
}
/* Spot detail back button */
#spot-detail-back:hover {
  transform: translateX(-2px);
}

@media (min-width: 1101px) {
  #spot-detail-view .spot-detail-desktop-header {
    display: grid !important;
    grid-template-columns: minmax(7.5rem, auto) minmax(0, 1fr) minmax(7.5rem, auto);
    align-items: center;
    column-gap: 0.75rem;
    min-width: 0;
  }

  #spot-detail-view .spot-detail-desktop-back {
    position: static !important;
    grid-column: 1;
    justify-self: start;
    min-width: 0;
    white-space: nowrap;
    gap: 0.25rem;
  }

  #spot-detail-view .spot-detail-desktop-title {
    grid-column: 2;
    justify-self: stretch;
    max-width: none !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: none !important;
    font-size: clamp(0.95rem, 1.15vw, 1.125rem) !important;
    line-height: 1.25 !important;
  }
}

/* Desktop overlay spot details: Add small left transform to back button */
#spot-detail-view #spot-detail-back-sheet,
#spot-detail-view button#spot-detail-back-sheet {
  transform: translateX(-10px) !important; /* Small left transform (4px) */
}
/* Spot detail images */
#spot-detail-view .spot-image {
  border-radius: 0.5rem;
  overflow: hidden;
}
#spot-detail-view .spot-image img {
  transition: transform 0.3s ease-out;
}
#spot-detail-view .spot-image:hover img {
  transform: scale(1.02);
}
/* Bottom sheet scroll lock */
/* map.css - prevent body scroll when bottom sheet open */
body.bs-open {
  overflow: hidden;
}
/* Dark mode handled by Tailwind classes */
/* Enhanced Mobile Touch Screen Support - Fixes oversized containers and usability issues */
/* Dark mode top bar */
.dark .flex-shrink-0.fixed {
  background: rgba(38, 38, 38, 0.95);
}
/* CONSOLIDATED DARK MODE STYLES FROM THEMES/DARK-MODE.CSS */
/* Moved discover-related dark mode styles here for better organization */
.dark .map-container,
.dark #mini-map {
  border-color: var(--primary-blue);
  box-shadow: none;
}
.dark .map-full-height {
  border-color: var(--neutral-700);
}
/* Consolidated responsive rules moved to main responsive section */
/* Touch Device Specific Enhancements */
/* 6. BROWSER-SPECIFIC FIXES */
/* iOS Safari Specific Fixes */
@supports (-webkit-touch-callout: none) {
  /* Prevent iOS zoom on input focus. Discover: discover-touch.css loads later and
     sets body.discover-page … { font-size: 16px !important } for controls that
     use smaller compact sizes with !important elsewhere. */
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="datetime-local"],
  select,
  textarea {
    font-size: 16px;
  }

  /* iOS: Enhanced mobile sheet touch behavior */

  /* iOS: Optimize drag handle for touch */
  #listings-sheet .bottom-sheet-drag-button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
  }

  /* iOS: compositor hint for the primary scroller — overflow/touch contract lives in listings.css */
  body.bottom-sheet-spot-details-mode #listings-content-sheet.spot-details-scroll-active {
    transform: translateZ(0);
    will-change: scroll-position;
  }

  body.discover-page:not(.bottom-sheet-spot-details-mode) #listings-content-sheet {
    overflow-y: visible !important;
    overflow-x: hidden !important;
    overscroll-behavior: auto !important;
    height: auto !important;
    max-height: none !important;
  }

  body.discover-page:not(.bottom-sheet-spot-details-mode) #listings-scroll-shell.listings-scroll-active {
    transform: translateZ(0);
    -webkit-overflow-scrolling: touch;
  }
} /* Single closing brace for @supports block */

/* HORIZONTAL SCROLL PREVENTION */
/* CRITICAL: Prevent horizontal overflow in all listings overlay content */
#listings-overlay * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Ensure spot cards don't cause horizontal overflow */
/* CHROME FIX: Changed overflow-x from 'hidden' to 'visible' - hidden creates a scroll context
   that Chrome interprets as the card wanting to handle scroll events, blocking parent scroll.
   The parent container (#listings-overlay) has overflow-x: hidden which handles horizontal clipping. */
#listings-overlay .spot-card {
  max-width: 100% !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
}

/* Ensure all text content wraps properly */
#listings-overlay .spot-card * {
  word-wrap: break-word !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}
/* Android Chrome Specific Fixes */
@supports (-webkit-appearance: none) and (not (overflow: -webkit-marquee)) {
  /* Android touch target optimization */
  button,
  .amenity-chip,
  .quick-time-btn {
    touch-action: manipulation;
  }

  /* Android scroll optimization */
  #mobile-listings-container {
    overscroll-behavior: contain;
  }
}

/*   MAP PIN FLASH ANIMATION*/

/* map.css - flash effect for map markers */
.marker-flash-highlight {
  filter: brightness(1.5) saturate(1.3) drop-shadow(0 0 8px rgba(255, 215, 0, 0.8)) !important;
  transition: opacity 0.15s ease-in-out, filter 0.15s ease-in-out, background-color 0.15s ease-in-out !important;
}

/* Enhanced flash for cover-image pins — static filter only (no animation; setIcon replaces the img). */
.map-cover-pin.marker-flash-highlight,
.map-price-pin.marker-flash-highlight {
  filter: brightness(1.12) saturate(1.08) !important;
  z-index: var(--z-dropdown) !important;
  animation: none !important;
  transition: none !important;
}

/* Legacy price pins only — cover pins must never run markerFlash (causes pan/zoom jump). */
.gm-style .map-price-pin.marker-flash-highlight {
  animation: markerFlash 0.3s ease-in-out;
}

@keyframes markerFlash {
  0% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.6) saturate(1.4) drop-shadow(0 0 15px rgba(255, 215, 0, 1));
  }
  100% {
    filter: brightness(1);
  }
}

/* Map pin sizing is owned by MapPinImageCompositor so Google Maps can keep the
   marker anchor stable. Avoid CSS min/max dimensions on marker images. */
#map-container .gm-style img[src*="data:image/svg"],
#map-container .gm-style img[src*="data:image/svg+xml"],
#map-container .gm-style img[src*="data:image/png"] {
  object-fit: contain !important;
  image-rendering: -webkit-optimize-contrast;
}

#map-container .gm-style img.map-cover-pin {
  filter: none !important;
  opacity: 1 !important;
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* Cover pins: no entrance/selection animation — Google Maps replaces the <img> on every
   setIcon(), which retriggered keyframes/transitions and caused pan/zoom jump. */
/* NOTE: Dark mode contrast styles consolidated in dark-mode.css */

/* SPOT DETAIL VIEW CONTAINER FIXES */

/* Spot detail / modal escape: sheet content only; do not clip the map container.
   Listings browse mode must keep #listings-content-sheet overflow visible so the
   shell remains the only scroller — do not force overflow:visible onto the shell. */
body.bottom-sheet-spot-details-mode #listings-content-sheet,
.bottom-sheet-container {
  contain: none !important;
  isolation: auto !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

body.discover-page:not(.bottom-sheet-spot-details-mode) #listings-content-sheet {
  contain: none !important;
  isolation: auto !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  clip: auto !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

/* Allow normal gap properties for proper layout */

/* TARGETED: Ensure spot detail view breaks out of containers when visible */
html body.discover-page #spot-detail-view:not(.hidden) {
  /* Force it to be positioned relative to the viewport, not any parent */
  position: fixed !important;
  z-index: var(--z-high-modal) !important; /* High z-index but allows maps modal to appear above */
  transform: none !important;
  contain: none !important;
  isolation: auto !important;
}

/* Discover: auth above spot detail (spot uses --z-high-modal; see --z-auth-modal) */
html body.discover-page #auth-modal:not(.hidden),
html body.discover-page #auth-modal.show {
  z-index: var(--z-auth-modal) !important;
}

/* Slight frost so map/top bar/listings recede behind auth. Sibling backdrop only;
   keep blur light — heavy backdrop-filter over Maps is costly on interaction. */
html body.discover-page #auth-modal.show #auth-modal-backdrop,
html body.discover-page #auth-modal:not(.hidden) #auth-modal-backdrop,
html body.discover-page #forgot-password-popup.show .auth-modal-backdrop {
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;
}

@media (prefers-reduced-transparency: reduce) {
  html body.discover-page #auth-modal.show #auth-modal-backdrop,
  html body.discover-page #auth-modal:not(.hidden) #auth-modal-backdrop,
  html body.discover-page #forgot-password-popup.show .auth-modal-backdrop {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* MOBILE/TABLET: Full-screen high-specificity overlay positioning */
@media (max-width: 1100px) {
  html body.discover-page #spot-detail-view:not(.hidden) {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    border-radius: 0 !important;
  }
}

/* DESKTOP: Side high-specificity overlay positioning */
@media (min-width: 1101px) {
  html body.discover-page #spot-detail-view[open]:not(.hidden),
  html body.discover-page #spot-detail-view.visible:not(.hidden),
  html body.discover-page #spot-detail-view:not(.hidden) {
    display: flex !important; /* CRITICAL: Ensure display is set */
    position: fixed !important;
    top: calc(var(--discover-current-topbar-height, 4.5rem) + 0.75rem) !important;
    left: calc(
      var(--discover-desktop-listings-rail-left, 0.75rem) +
        var(--discover-desktop-listings-rail-width, 24rem) +
        var(--discover-spot-detail-dialog-gap, 1rem)
    ) !important;
    right: auto !important;
    bottom: auto !important;
    width: min(
      600px,
      calc(
        100vw - var(--discover-desktop-listings-rail-left, 0.75rem) -
          var(--discover-desktop-listings-rail-width, 24rem) -
          var(--discover-spot-detail-dialog-gap, 1rem) - 40px
      )
    ) !important;
    height: calc(100vh - var(--discover-current-topbar-height, 4.5rem) - 0.75rem - 1.25rem) !important;
    height: calc(100dvh - var(--discover-current-topbar-height, 4.5rem) - 0.75rem - 1.25rem) !important;
    max-height: calc(100vh - var(--discover-current-topbar-height, 4.5rem) - 0.75rem - 1.25rem) !important;
    max-height: calc(100dvh - var(--discover-current-topbar-height, 4.5rem) - 0.75rem - 1.25rem) !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Discover map chrome formerly owned by the page-level responsive refresh layer. */
body.discover-page #map-container {
  background: var(--discover-premium-wash) !important;
}

body.discover-page #map-search-indicator {
  top: calc(var(--discover-current-topbar-height, 4.5rem) + 0.9rem) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.5rem 0.9rem !important;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--color-brand-accent, #0f5a56) 45%, transparent) !important;
  background: color-mix(in srgb, var(--color-brand-accent, #0f5a56) 92%, #083f3c) !important;
  color: var(--color-brand-accent-text, #ffffff) !important;
  box-shadow:
    0 10px 28px color-mix(in srgb, var(--color-brand-accent, #0f5a56) 32%, transparent),
    0 1px 2px rgba(15, 23, 42, 0.12) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

body.discover-page #map-search-indicator.hidden {
  display: none !important;
}

.dark body.discover-page #map-search-indicator {
  border-color: color-mix(in srgb, var(--color-brand-accent-on-dark-surface, #5eead4) 35%, transparent) !important;
  background: color-mix(in srgb, var(--discover-premium-surface-solid, #1c1917) 88%, var(--color-brand-accent, #0f5a56)) !important;
  color: var(--color-brand-accent-on-dark-surface, #5eead4) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
}

/* Pass 2: intentional "Search this area" after meaningful pan / zoom */
body.discover-page #search-area-btn.discover-search-this-area,
body.discover-page .discover-search-this-area {
  position: fixed;
  top: calc(var(--discover-current-topbar-height, 4.5rem) + 0.75rem);
  /* Center with left/right + margin — not translateX. Global button:active scale
     would otherwise wipe translateX(-50%) and shove the pill sideways on press. */
  left: max(1rem, env(safe-area-inset-left, 0px));
  right: max(1rem, env(safe-area-inset-right, 0px));
  width: max-content;
  max-width: min(18rem, calc(100vw - 2rem));
  margin-inline: auto;
  transform: none;
  z-index: calc(var(--z-sheet, 100) + 32);
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--discover-premium-line, rgba(120, 113, 108, 0.22));
  background: var(--discover-premium-surface-solid, #ffffff);
  color: var(--discover-premium-ink, #171412);
  box-shadow: var(--discover-premium-shadow-soft, 0 10px 28px rgba(28, 25, 23, 0.14));
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

body.discover-page #search-area-btn.discover-search-this-area:not(.hidden):not([hidden]),
body.discover-page .discover-search-this-area:not(.hidden):not([hidden]) {
  display: inline-flex;
}

body.discover-page #search-area-btn.discover-search-this-area.hidden,
body.discover-page #search-area-btn.discover-search-this-area[hidden],
body.discover-page .discover-search-this-area.hidden,
body.discover-page .discover-search-this-area[hidden] {
  display: none !important;
}

body.discover-page #search-area-btn.discover-search-this-area:hover,
body.discover-page .discover-search-this-area:hover {
  background: var(--discover-premium-hover, rgba(250, 247, 242, 0.98));
  border-color: var(--discover-premium-line-strong, rgba(87, 83, 78, 0.34));
  box-shadow: var(--discover-premium-shadow, 0 16px 36px rgba(28, 25, 23, 0.16));
}

body.discover-page #search-area-btn.discover-search-this-area:active,
body.discover-page .discover-search-this-area:active {
  transform: scale(0.98);
}

body.discover-page #search-area-btn.discover-search-this-area:focus-visible,
body.discover-page .discover-search-this-area:focus-visible {
  outline: none;
  box-shadow: var(--discover-premium-focus, 0 0 0 3px rgba(120, 113, 108, 0.2));
}

body.discover-page .discover-search-this-area__icon {
  flex: 0 0 auto;
  color: inherit;
}

body.discover-page .discover-search-this-area__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark body.discover-page #search-area-btn.discover-search-this-area,
.dark body.discover-page .discover-search-this-area {
  border-color: var(--discover-premium-line, rgba(168, 162, 158, 0.42));
  background: var(--discover-premium-surface, rgba(28, 25, 23, 0.94));
  color: var(--discover-premium-ink, #fafaf9);
  box-shadow: var(--discover-premium-shadow-soft, 0 12px 30px rgba(0, 0, 0, 0.4));
}

.dark body.discover-page #search-area-btn.discover-search-this-area:hover,
.dark body.discover-page .discover-search-this-area:hover {
  background: var(--discover-premium-hover, rgba(68, 64, 60, 0.92));
  border-color: var(--discover-premium-line-strong, rgba(168, 162, 158, 0.5));
}

.dark body.discover-page .discover-search-this-area__icon {
  color: inherit;
}

/* Hide intentional CTA during spot details, full-list mobile overlay, or location search composing */
body.discover-page.bottom-sheet-spot-details-mode #search-area-btn,
body.discover-page[data-discover-map-mode="list"] #search-area-btn,
body.discover-page:has(.is-location-search-composing) #search-area-btn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 1100px) {
  body.discover-page[data-discover-map-mode="map"] #search-area-btn.discover-search-this-area:not(.hidden):not([hidden]) {
    top: calc(var(--discover-current-topbar-height, 4.5rem) + 0.55rem);
    z-index: calc(var(--z-sheet, 100) + 35);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.discover-page #search-area-btn.discover-search-this-area,
  body.discover-page .discover-search-this-area {
    transition: none;
  }

  body.discover-page #search-area-btn.discover-search-this-area:active,
  body.discover-page .discover-search-this-area:active {
    transform: none;
  }
}

body.discover-page .custom-map-controls .map-control-satellite-icon,
body.discover-page .map-control-satellite-icon {
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-width: 2.25rem !important;
  min-height: 2.25rem !important;
}

@media (max-width: 1100px) {
  body.discover-page .custom-map-controls {
    top: 12px !important;
    right: 10px !important;
  }
}

/* -------------------------------------------------------------------------
   Mobile Map ↔ List full-overlay browse mode (≤1100)
   data-discover-map-mode="list" | "map"
   ------------------------------------------------------------------------- */

.discover-map-preview-hit,
.discover-map-mode-fab,
.discover-map-spaces-badge {
  display: none;
}

@media (max-width: 1100px) {
  body.discover-page[data-discover-map-mode="list"] .custom-map-controls,
  body.discover-page[data-discover-map-mode="list"] .custom-map-controls.is-map-controls-hidden {
    display: none !important;
    pointer-events: none !important;
  }

  body.discover-page[data-discover-map-mode="list"] #map-container {
    pointer-events: none !important;
    touch-action: pan-y !important;
  }

  body.discover-page[data-discover-map-mode="map"] #map-container {
    pointer-events: auto !important;
    touch-action: none !important;
  }

  /*
   * Phone map mode: pin the map studio to the physical viewport bottom so tiles run
   * flush under the fixed bottom tab bar (no body-color strip above the nav).
   */
  @media (max-width: 767px) {
    body.discover-page[data-discover-map-mode="map"]:has(#mobile-bottom-nav) #map-panel {
      position: fixed !important;
      top: var(--discover-current-topbar-height, 3.5rem) !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100% !important;
      height: auto !important;
      min-height: 0 !important;
      flex: none !important;
      z-index: 0 !important;
    }
  }

  /*
   * Map-mode bottom chrome rail: spaces count (left) | List FAB (center) | support chat (right).
   * One bottom inset + symmetric side slots so horizontal spacing stays balanced on all phones.
   */
  body.discover-page[data-discover-map-mode="map"] {
    --discover-map-chrome-bottom: max(
      0.75rem,
      calc(var(--discover-bottom-nav-clearance, 0px) + env(safe-area-inset-bottom, 0px) + 0.5rem)
    );
    --discover-map-chrome-edge: max(0.75rem, env(safe-area-inset-left, 0px));
    --discover-map-chrome-edge-right: max(0.75rem, env(safe-area-inset-right, 0px));
    --discover-map-chrome-rail-height: 2.5rem;
    --discover-map-chrome-side-slot: max(3rem, calc(var(--support-chat-fab-size, 2.25rem) + 0.5rem));
    --discover-support-chat-fab-bottom: var(--discover-map-chrome-bottom);
    --support-chat-fab-bottom: var(--discover-map-chrome-bottom);
    --support-chat-fab-right: var(--discover-map-chrome-edge-right);
  }

  @media (max-width: 640px) {
    body.discover-page[data-discover-map-mode="map"] {
      --discover-map-chrome-side-slot: max(2.75rem, calc(var(--support-chat-fab-size, 2.25rem) + 0.4rem));
      --support-chat-fab-size: 2.5rem;
    }
  }

  /* Preview hit retired — list is a full overlay with no tappable map strip. */
  .discover-map-preview-hit {
    display: none !important;
    pointer-events: none !important;
  }

  /*
   * Mode-split Map ↔ List chrome (≤1100):
   * - List mode: Map chip in sheet header (#discover-map-mode-header-btn)
   * - Map mode: List FAB over the map (#discover-map-mode-fab)
   *
   * Center FAB with left/right + margin (not translateX). Global device-compatibility
   * button:active { transform: scale(...) } would otherwise wipe translateX(-50%)
   * and shove the pill sideways on press.
   */
  body.discover-page .discover-map-mode-fab:not([hidden]) {
    display: grid;
    grid-template-columns: 18px auto;
    align-items: center;
    justify-content: center;
    column-gap: 0.4rem;
    position: fixed;
    left: calc(var(--discover-map-chrome-edge, 0.75rem) + var(--discover-map-chrome-side-slot, 3rem));
    right: calc(var(--discover-map-chrome-edge-right, 0.75rem) + var(--discover-map-chrome-side-slot, 3rem));
    width: max-content;
    max-width: calc(
      100vw - var(--discover-map-chrome-edge, 0.75rem) - var(--discover-map-chrome-edge-right, 0.75rem) -
        (2 * var(--discover-map-chrome-side-slot, 3rem))
    );
    margin-inline: auto;
    bottom: var(
      --discover-map-chrome-bottom,
      max(
        1.15rem,
        calc(var(--discover-bottom-nav-clearance, 0px) + env(safe-area-inset-bottom, 0px) + 0.85rem)
      )
    );
    transform: none;
    z-index: calc(var(--z-sheet, 100) + 40);
    box-sizing: border-box;
    min-height: var(--discover-map-chrome-rail-height, 2.75rem);
    padding: 0.55rem 1.15rem;
    border-radius: 999px;
    border: 1px solid var(--discover-premium-ink, #171412);
    background: var(--discover-premium-ink, #171412);
    color: var(--discover-premium-surface-solid, #ffffff);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: var(--discover-premium-shadow-soft, 0 10px 28px rgba(28, 25, 23, 0.22));
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    /* Keep press scale on the centered box; never substitute a bare scale. */
    transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.15s ease;
  }

  body.discover-page .discover-map-mode-fab:not([hidden]):active {
    transform: scale(0.98);
  }

  @media (max-width: 640px) {
    body.discover-page .discover-map-mode-fab:not([hidden]) {
      min-height: var(--discover-map-chrome-rail-height, 2.5rem);
      padding: 0.48rem 1rem;
      font-size: 0.875rem;
      box-shadow: 0 8px 20px rgba(28, 25, 23, 0.18);
    }
  }

  body.discover-page .discover-map-mode-fab-icon {
    grid-column: 1;
    grid-row: 1;
    width: 18px;
    height: 18px;
    justify-self: center;
    align-self: center;
  }

  body.discover-page .discover-map-mode-fab-label {
    grid-column: 2;
    grid-row: 1;
    white-space: nowrap;
    justify-self: start;
    align-self: center;
  }

  /*
   * Map mode: compact result count bottom-left (title lives in aria-label only).
   * Cap width to the left half of the rail so long idle copy ("Search to get started")
   * never runs under the centered List FAB; ellipsis on the count text.
   */
  body.discover-page .discover-map-spaces-badge:not([hidden]) {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    position: fixed;
    left: var(--discover-map-chrome-edge, max(0.75rem, env(safe-area-inset-left, 0px)));
    bottom: var(
      --discover-map-chrome-bottom,
      max(
        1.15rem,
        calc(var(--discover-bottom-nav-clearance, 0px) + env(safe-area-inset-bottom, 0px) + 0.85rem)
      )
    );
    z-index: calc(var(--z-sheet-elevated, 110) + 45);
    width: max-content;
    /* 3rem ≈ half List FAB + breathing room; keep badge fully left of the centered pill. */
    max-width: min(
      calc(
        100vw - var(--discover-map-chrome-edge, 0.75rem) - var(--discover-map-chrome-edge-right, 0.75rem) -
          (2 * var(--discover-map-chrome-side-slot, 3rem)) - 0.5rem
      ),
      calc(50vw - var(--discover-map-chrome-edge, 0.75rem) - 3rem)
    );
    box-sizing: border-box;
    min-height: calc(var(--discover-map-chrome-rail-height, 2.5rem) - 0.85rem);
    padding: 0.38rem 0.62rem;
    border-radius: 999px;
    border: 1px solid var(--discover-premium-line, rgba(120, 113, 108, 0.2));
    background: color-mix(in srgb, var(--discover-premium-surface-solid, #ffffff) 94%, transparent);
    color: var(--discover-premium-ink, #171412);
    box-shadow: var(--discover-premium-shadow-soft, 0 6px 16px rgba(28, 25, 23, 0.1));
    pointer-events: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    overflow: hidden;
    flex-shrink: 1;
    min-width: 0;
    transition:
      border-color 0.28s ease,
      box-shadow 0.32s ease,
      background-color 0.28s ease;
  }

  body.discover-page .discover-map-spaces-badge__title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  body.discover-page .discover-map-spaces-badge__value-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: max-content;
    max-width: 100%;
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
  }

  body.discover-page .discover-map-spaces-badge__spinner {
    display: inline-block !important;
    flex: 0 0 0.625rem;
    width: 0.625rem;
    height: 0.625rem;
    border-width: 1.5px;
    opacity: 0;
    visibility: hidden;
    /* Idle: no animation. Transform stays free for rotate when shown. */
    animation: none;
  }

  body.discover-page .discover-map-spaces-badge__count {
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--discover-premium-ink, #171412);
    line-height: 1.25;
    min-width: 0;
    width: auto;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    position: relative;
    font-variant-numeric: tabular-nums;
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }

  @media (max-width: 640px) {
    body.discover-page .discover-map-spaces-badge:not([hidden]) {
      padding: 0.32rem 0.55rem;
      opacity: 0.94;
      box-shadow: 0 4px 12px rgba(28, 25, 23, 0.08);
    }
  }

  body.discover-page[data-discover-map-mode="map"] #supportChatButton.support-chat-fab {
    width: var(--support-chat-fab-size, 2.5rem) !important;
    height: var(--support-chat-fab-size, 2.5rem) !important;
    min-width: var(--support-chat-fab-size, 2.5rem) !important;
    min-height: var(--support-chat-fab-size, 2.5rem) !important;
  }

  /* Boot: shimmer until first confirmed total (no Loading word reflow). */
  body.discover-page .discover-map-spaces-badge.is-count-pending .discover-map-spaces-badge__count {
    color: transparent;
    min-height: 1rem;
  }

  body.discover-page .discover-map-spaces-badge.is-count-pending .discover-map-spaces-badge__count::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4rem;
    height: 0.6rem;
    border-radius: 999px;
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--discover-premium-muted, #78716c) 20%, transparent) 0%,
      color-mix(in srgb, var(--discover-premium-muted, #78716c) 42%, transparent) 45%,
      color-mix(in srgb, var(--discover-premium-muted, #78716c) 20%, transparent) 100%
    );
    background-size: 200% 100%;
    animation: discover-count-shimmer 1.15s ease-in-out infinite;
  }

  body.discover-page .discover-map-spaces-badge.is-count-pending .discover-map-spaces-badge__spinner {
    opacity: 1;
    visibility: visible;
    animation: discover-spinner-rotate 0.7s linear infinite;
  }

  /* Confirmed space-count change only: premium hold + swap (not every pan/search pending) */
  body.discover-page .discover-map-spaces-badge.is-spaces-updating {
    border-color: color-mix(in srgb, var(--color-brand-accent, #0f5a56) 40%, var(--discover-premium-line));
    box-shadow:
      var(--discover-premium-shadow-soft, 0 8px 22px rgba(28, 25, 23, 0.12)),
      0 0 0 1px color-mix(in srgb, var(--color-brand-accent, #0f5a56) 18%, transparent),
      0 0 16px color-mix(in srgb, var(--color-brand-accent, #0f5a56) 14%, transparent);
  }

  body.discover-page .discover-map-spaces-badge.is-spaces-updating .discover-map-spaces-badge__spinner {
    opacity: 1;
    visibility: visible;
    animation: discover-spinner-rotate 0.7s linear infinite;
  }

  body.discover-page .discover-map-spaces-badge__count.is-count-out {
    opacity: 0;
    transform: translateY(3px);
  }

  body.discover-page .discover-map-spaces-badge__count.is-count-in {
    animation: discover-map-spaces-count-settle 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  @keyframes discover-map-spaces-count-settle {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .dark body.discover-page .discover-map-spaces-badge:not([hidden]) {
    border-color: var(--discover-premium-line, rgba(226, 232, 240, 0.16));
    background: var(--discover-premium-surface, rgba(28, 25, 23, 0.92));
    color: var(--discover-premium-ink, #fafaf9);
    box-shadow: var(--discover-premium-shadow-soft, 0 8px 22px rgba(0, 0, 0, 0.4));
  }

  .dark body.discover-page .discover-map-spaces-badge.is-spaces-updating {
    border-color: color-mix(in srgb, var(--color-brand-accent-on-dark-surface, #5eead4) 45%, transparent);
    box-shadow:
      var(--discover-premium-shadow-soft, 0 8px 22px rgba(0, 0, 0, 0.4)),
      0 0 0 1px color-mix(in srgb, var(--color-brand-accent-on-dark-surface, #5eead4) 18%, transparent),
      0 0 18px color-mix(in srgb, var(--color-brand-accent, #0f5a56) 22%, transparent);
  }

  .dark body.discover-page .discover-map-spaces-badge__title {
    color: var(--discover-premium-muted, #a8a29e);
  }

  .dark body.discover-page .discover-map-spaces-badge__count {
    color: var(--discover-premium-ink, #fafaf9);
  }

  @media (prefers-reduced-motion: reduce) {
    body.discover-page .discover-map-spaces-badge:not([hidden]),
    body.discover-page .discover-map-spaces-badge__count {
      transition: none;
    }

    body.discover-page .discover-map-spaces-badge__count.is-count-in {
      animation: none;
    }

    body.discover-page .discover-map-spaces-badge.is-count-pending .discover-map-spaces-badge__count::after {
      animation: none;
    }
  }

  /* List mode: no bottom FAB clearance needed (Map lives in the sheet header) */
  body.discover-page[data-discover-map-mode="list"]:not(.bottom-sheet-spot-details-mode) #listings-scroll-shell {
    padding-bottom: max(
      0.75rem,
      var(--discover-sheet-bottom-gap, 0.5rem)
    ) !important;
    scroll-padding-bottom: max(
      0.75rem,
      var(--discover-sheet-bottom-gap, 0.5rem)
    ) !important;
  }

  .dark body.discover-page .discover-map-mode-fab:not([hidden]) {
    /* Invert ink/surface: light pill on dark map (premium tokens flip in .dark). */
    border-color: color-mix(in srgb, var(--discover-premium-ink, #fafaf9) 55%, transparent);
    background: var(--discover-premium-ink, #fafaf9);
    color: var(--discover-premium-surface-solid, #1c1917);
    box-shadow: var(--discover-premium-shadow-soft, 0 10px 28px rgba(0, 0, 0, 0.45));
  }

  /* Spot details: hide Map/List entry chrome */
  body.discover-page.bottom-sheet-spot-details-mode .discover-map-mode-fab,
  body.discover-page.bottom-sheet-spot-details-mode .discover-map-mode-header-btn,
  body.discover-page.bottom-sheet-spot-details-mode .discover-map-preview-hit,
  body.discover-page.bottom-sheet-spot-details-mode .discover-map-spaces-badge {
    display: none !important;
  }

  /*
   * Header Map chip — primary mode switch (paired with map-mode List FAB).
   * Filled ink pill matches List FAB; distinct from secondary Refine/Filters.
   */
  body.discover-page .discover-map-mode-header-btn[hidden] {
    display: none !important;
  }

  body.discover-page[data-discover-map-mode="list"]:not(.bottom-sheet-spot-details-mode)
    #discover-map-mode-header-btn[hidden] {
    display: inline-flex !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.discover-page .discover-map-mode-header-btn:not([hidden]) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--discover-listings-header-control-gap, 0.28rem);
    column-gap: var(--discover-listings-header-control-gap, 0.28rem);
    min-height: var(--discover-listings-header-control-min-height, 1.95rem);
    padding: var(--discover-listings-header-control-pad-y, 0.36rem) var(--discover-listings-header-control-pad-x, 0.5rem) !important;
    border-radius: var(--discover-listings-header-control-radius, 999px) !important;
    border: 1px solid var(--discover-premium-ink, #171412) !important;
    background: var(--discover-premium-ink, #171412) !important;
    color: var(--discover-premium-surface-solid, #ffffff) !important;
    font-size: var(--discover-listings-header-control-font, 0.75rem) !important;
    font-weight: var(--font-weight-semibold, 600) !important;
    letter-spacing: -0.01em;
    line-height: 1.2 !important;
    box-shadow: var(--discover-premium-shadow-soft, 0 1px 2px rgba(28, 25, 23, 0.12)) !important;
    -webkit-tap-highlight-color: transparent;
    /* Color is intentional ink from first paint — only animate press/hover after shell settles. */
    transition: transform 0.1s ease, box-shadow 0.15s ease;
  }

  body.discover-page:not(.discover-shell-ready) .discover-map-mode-header-btn:not([hidden]),
  body.discover-page:not(.discover-shell-ready) .listings-header-control {
    transition: none !important;
  }

  body.discover-page .discover-map-mode-header-btn:not([hidden]):hover,
  body.discover-page .discover-map-mode-header-btn:not([hidden]):active {
    background: var(--discover-premium-ink, #171412) !important;
    border-color: var(--discover-premium-ink, #171412) !important;
    color: var(--discover-premium-surface-solid, #ffffff) !important;
    transform: none;
    box-shadow: var(--discover-premium-shadow-soft, 0 2px 8px rgba(28, 25, 23, 0.18)) !important;
  }

  body.discover-page .discover-map-mode-header-btn__icon {
    width: var(--discover-listings-header-control-icon, 0.75rem) !important;
    height: var(--discover-listings-header-control-icon, 0.75rem) !important;
    min-width: var(--discover-listings-header-control-icon, 0.75rem) !important;
    min-height: var(--discover-listings-header-control-icon, 0.75rem) !important;
    color: inherit;
  }

  body.discover-page .discover-map-mode-header-btn__label {
    color: inherit;
    font-weight: inherit;
    white-space: nowrap;
  }

  html.dark body.discover-page .discover-map-mode-header-btn:not([hidden]),
  .dark body.discover-page .discover-map-mode-header-btn:not([hidden]),
  body.dark.discover-page .discover-map-mode-header-btn:not([hidden]) {
    border-color: color-mix(in srgb, var(--discover-premium-ink, #fafaf9) 55%, transparent) !important;
    background: var(--discover-premium-ink, #fafaf9) !important;
    color: var(--discover-premium-surface-solid, #1c1917) !important;
    box-shadow: var(--discover-premium-shadow-soft, 0 1px 2px rgba(0, 0, 0, 0.35)) !important;
  }

  html.dark body.discover-page .discover-map-mode-header-btn:not([hidden]):hover,
  html.dark body.discover-page .discover-map-mode-header-btn:not([hidden]):active,
  .dark body.discover-page .discover-map-mode-header-btn:not([hidden]):hover,
  .dark body.discover-page .discover-map-mode-header-btn:not([hidden]):active,
  body.dark.discover-page .discover-map-mode-header-btn:not([hidden]):hover,
  body.dark.discover-page .discover-map-mode-header-btn:not([hidden]):active {
    background: var(--discover-premium-ink, #fafaf9) !important;
    border-color: color-mix(in srgb, var(--discover-premium-ink, #fafaf9) 70%, transparent) !important;
    color: var(--discover-premium-surface-solid, #1c1917) !important;
  }
}