/* ========================================
   * 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 */
  .gm-style > div[style*="position: absolute"][style*="left: 0px"][style*="top: 0px"] {
    /* Map tiles container - never hide */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  /* Preserve map interaction layers */
  .gm-style > div[style*="cursor"] {
    pointer-events: auto !important;
  }
/* ========================================
   * 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
   * ======================================== */
/* UNIFIED LISTINGS OVERLAY - Main Container */
#listings-overlay {
  position: absolute;
  top: calc(8rem + 0.75rem); /* Position below fixed header + filters bar with gap for map peek */
  left: 1rem;
  width: 400px; /* Increased from 300px for wider desktop view */
  max-width: calc(100vw - 3rem);
  min-width: 280px;
  max-height: calc(100vh - 8rem - 0.75rem - 20px); /* Account for gap at top */
  max-height: calc(min(100dvh, 100vh) - 8rem - 0.75rem - 20px); /* Account for top positioning + gap */
  z-index: var(--z-overlay);
  background: rgba(255, 255, 255, 0.95);

  /* CRITICAL: Prevent horizontal scroll completely */
  overflow-x: hidden !important;
  box-sizing: border-box;
  border: 1px solid rgba(209, 213, 219, 0.3);
  border-radius: 0.5rem;
  backdrop-filter: blur(8px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  isolation: isolate;
  /* Default to visible - responsive rules will hide on mobile */
  display: block;
  visibility: visible;
  opacity: 1;
}
.dark #listings-overlay {
  background: rgba(38, 38, 38, 0.95);
  border: 1px solid rgba(75, 85, 99, 0.3);
}

/* DESKTOP: Ensure listings overlay is properly positioned and visible */
@media (min-width: 1024px) {
  body.discover-page #listings-overlay {
    position: fixed !important;
    top: calc(8rem + 0.75rem) !important; /* Below desktop top bar with gap for map peek */
    left: 1rem !important;
    width: 400px !important; /* Fixed width for desktop */
    max-width: calc(100vw - 3rem) !important;
    max-height: calc(100vh - 8rem - 0.75rem - 20px) !important;
    z-index: var(--z-overlay) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  
  /* CRITICAL: Override Tailwind's hidden class on desktop */
  body.discover-page #listings-overlay.hidden {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* DESKTOP: Show listings toggle */
  body.discover-page #listings-toggle {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: 8rem !important; /* Below desktop top bar with proper padding */
    left: 1rem !important;
    z-index: var(--z-overlay) !important;
  }

  /* Ensure listings overlay visibility on desktop */
  body.discover-page #listings-overlay,
  body.discover-page #listings-toggle {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}
  /* 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 rgba(0, 0, 0, 0.2);
    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 rgba(0, 0, 0, 0.15);
  }
  #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,
  #amenities-toggle,
  #auto-search-toggle,
  button,
  input,
  select {
    border-width: 0.5px;
  }

  #map-search-indicator {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  }

  /* 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;
  overflow: hidden;
  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: 1023px) {
  #map-panel {
    position: relative !important;
    flex: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 400px !important;
    overflow: visible !important; /* CHANGED: Make content visible */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !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;
  background: #f3f4f6;
  
  /* Rounded corners to soften the edge where map meets topbar */
  border-radius: 0 0 20px 20px !important; /* Rounded bottom corners to match bottom sheet */
  overflow: hidden !important; /* Clip map content to rounded corners */
  
  will-change: contents;
}

/* Ensure Google Maps content respects rounded corners */
#map-container .gm-style {
  border-radius: 0 0 20px 20px !important;
  overflow: hidden !important;
}

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

  /* 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: Override map container positioning - MUST COME AFTER GENERAL RULE */
@media (max-width: 1023px) {
  body.discover-page #map-container {
    position: fixed !important; /* FIXED: Use fixed positioning for mobile to match base_renter.html */
    top: 4rem !important; /* Below top bar */
    left: 0px !important;
    right: 0px !important;
    bottom: 120px !important; /* CRITICAL: Leave space for bottom sheet (min-height: 120px) */
    width: 100vw !important;
    height: calc(100vh - 4rem - 120px) !important; /* CRITICAL: Account for top bar and bottom sheet space */
    z-index: var(--z-map-container) !important; /* LOWER than listings sheet (var(--z-sheet)) */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #f3f4f6 !important; /* Map background */
    /* Hardware acceleration applied via .hw-accel utility class */
    contain: none !important; /* Remove containment on mobile for better layout */
  }
}
/* Dark mode support for hamburger menu */
.dark #discover-menu {
  background: #1f2937;
  border-color: #374151;
}

#discover-menu a {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease-out;
}

#discover-menu a:hover {
  background-color: rgba(0, 0, 0, 0.05);
  transform: translateX(2px);
}

.dark #discover-menu a {
  color: #d1d5db;
}

.dark #discover-menu a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

#discover-menu .border-t {
  margin: 0.25rem 0;
}
/* Responsive adjustments for dropdown */
/* DISCOVER PAGE OVERRIDES - AGGRESSIVE BYPASS */
body.discover-page {
  overflow: hidden !important;
}
/* DISCOVER PAGE: Hide cookie banner to prevent conflicts with mobile sheet */
body.discover-page #cookie-banner,
body.discover-page [data-cookie-banner="true"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -999 !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
}
/* AESTHETIC DEBUG: Enhanced responsive state indicator - NO EFFECT ON LAYOUT */
#responsive-debug-indicator {
  position: fixed !important;
  top: 0.25rem !important;
  left: 0.25rem !important;
  z-index: var(--z-high-modal) !important;
  background: rgba(0, 0, 0, 0.85) !important;
  color: #00ff00 !important; /* Bright green for better visibility */
  font-size: 0.6rem !important; /* Slightly larger for better readability */
  line-height: 0.8rem !important;
  padding: 0.2rem 0.4rem !important; /* More padding for better clickability */
  border-radius: 0.25rem !important;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', 'Courier New', monospace !important;
  font-weight: 500 !important; /* Medium weight for better readability */
  white-space: nowrap !important;
  opacity: 0.8 !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important; /* Indicate clickable for copy */
  user-select: text !important; /* Make text selectable */
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  pointer-events: auto !important; /* Enable interaction */
  border: 1px solid rgba(0, 255, 0, 0.3) !important; /* Subtle green border */
  backdrop-filter: blur(4px) !important; /* Background blur for better readability */
  -webkit-backdrop-filter: blur(4px) !important;
  text-rendering: optimizeLegibility !important; /* Better text rendering */
  -webkit-font-smoothing: antialiased !important; /* Smooth text on WebKit */
  -moz-osx-font-smoothing: grayscale !important; /* Smooth text on Firefox */
}

#responsive-debug-indicator:hover {
  opacity: 1 !important;
  background: rgba(0, 0, 0, 0.95) !important;
  color: #00ff88 !important; /* Brighter green on hover */
  border-color: rgba(0, 255, 0, 0.6) !important;
  transform: scale(1.05) !important; /* Slight scale on hover */
}

#responsive-debug-indicator:active {
  background: rgba(0, 0, 0, 1) !important;
  color: #ffffff !important; /* White when clicked for copy feedback */
}
/* ========================================
 * PROFESSIONAL AMENITIES POPUP MODAL
 * ======================================== */
/* Popup overlay - CENTERED ON MAIN PAGE */
#amenities-popup {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: var(--z-maximum) !important; /* Maximum safe z-index */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  backdrop-filter: none !important; /* PERFORMANCE: Disabled */
  isolation: isolate !important; /* Create new stacking context */
  background-color: rgba(0, 0, 0, 0.4) !important;
  transition: all 0.3s ease-out;
  contain: none !important; /* Don't contain z-index */
  /* CRITICAL: Force popup to be independent of any parent stacking contexts */
  transform: translateZ(0) !important; /* Force new layer */
  will-change: auto !important; /* Don't create unnecessary layers */
}

/* CRITICAL: Ensure popup is visible on all screen sizes */
@media (min-width: 1024px) {
  #amenities-popup {
    /* Desktop: Ensure popup appears above desktop list sheet */
    z-index: var(--z-maximum) !important;
    /* Desktop: Ensure popup is centered and not affected by any container */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Desktop: Ensure popup is visible when not hidden */
  #amenities-popup:not(.hidden) {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

@media (max-width: 1023px) {
  #amenities-popup {
    /* Mobile/Tablet: Ensure popup appears above bottom sheet */
    z-index: var(--z-maximum) !important;
    /* CRITICAL: Ensure popup is NOT constrained by bottom sheet container */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Mobile/Tablet: Ensure popup is visible when not hidden */
  #amenities-popup:not(.hidden) {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

#amenities-popup.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  display: none !important; /* Completely remove from layout when hidden */
}

#amenities-popup:not(.hidden) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  display: flex !important; /* Restore flex display when visible */
}
/* Modal container */
#amenities-popup > div {
  transform: scale(0.95);
  transition: transform 0.3s ease-out;
}
#amenities-popup:not(.hidden) > div {
  transform: scale(1);
}

/* Modal container background - force grey */
#amenities-popup-container {
  background-color: #F3F4F6 !important; /* gray-100 in light mode */
}
.dark #amenities-popup-container {
  background-color: #262626 !important; /* neutral-800 in dark mode */
}

/* Amenities popup title - override Tailwind dark:text-white */
#amenities-popup-title {
  color: rgb(17, 24, 39) !important; /* neutral-900 - dark text in light mode */
}
.dark #amenities-popup-title,
html.dark #amenities-popup-title,
body.dark #amenities-popup-title {
  color: rgb(255, 255, 255) !important; /* white - light text in dark mode */
}
/* Override Tailwind's dark:text-white class specifically */
#amenities-popup-title.dark\\:text-white,
#amenities-popup-title[class*="dark:text-white"] {
  color: rgb(17, 24, 39) !important; /* Force dark text in light mode */
}
.dark #amenities-popup-title.dark\\:text-white,
.dark #amenities-popup-title[class*="dark:text-white"],
html.dark #amenities-popup-title.dark\\:text-white,
html.dark #amenities-popup-title[class*="dark:text-white"],
body.dark #amenities-popup-title.dark\\:text-white,
body.dark #amenities-popup-title[class*="dark:text-white"] {
  color: rgb(255, 255, 255) !important; /* Keep white in dark mode */
}

/* Amenity checkbox styling in popup - specialized sizing */
#amenities-popup .amenity-checkbox {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.375rem;
}
#amenities-popup .amenity-checkbox + span {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  color: rgb(55, 65, 81) !important; /* neutral-700 - proper dark text */
}

.dark #amenities-popup .amenity-checkbox + span {
  color: rgb(209, 213, 219) !important; /* neutral-300 - proper light text */
}
#amenities-popup .amenity-checkbox:checked + span {
  color: var(--primary-blue-darker);
  font-weight: 600;
}

/* ========================================
 * RESPONSIVE SIZING FOR AMENITIES POPUP
 * ======================================== */

/* Small phones (< 520px) - Ultra compact */
@media (max-width: 519px) {
  #amenities-popup-container {
    max-height: 55vh !important;
    margin: 0.5rem !important;
  }
  
  /* Compact header */
  #amenities-popup-container .flex.items-center.justify-between {
    padding: 0.625rem 0.75rem !important;
  }
  
  #amenities-popup-title {
    font-size: 1rem !important;
    color: rgb(17, 24, 39) !important; /* neutral-900 - dark text in light mode */
  }
  .dark #amenities-popup-title {
    color: rgb(255, 255, 255) !important; /* white - light text in dark mode */
  }
  
  #amenities-popup-close {
    padding: 0.375rem !important;
  }
  
  #amenities-popup-close svg {
    width: 1.125rem !important;
    height: 1.125rem !important;
    color: rgb(75, 85, 99) !important; /* neutral-600 - dark gray for visibility on white background */
  }
  
  .dark #amenities-popup-close svg {
    color: rgb(209, 213, 219) !important; /* neutral-300 - light gray for dark mode */
  }
  
  /* Compact content area */
  #amenities-popup-container > div.overflow-y-auto {
    padding: 0.75rem !important;
    max-height: calc(90vh - 120px) !important;
  }
  
  /* Smaller checkboxes and text */
  #amenities-popup .amenity-checkbox {
    width: 1rem !important;
    height: 1rem !important;
    flex-shrink: 0 !important;
  }
  
  #amenities-popup .amenity-checkbox + span {
    font-size: 0.8125rem !important; /* 13px */
    line-height: 1.3 !important;
    font-weight: 400 !important;
    color: rgb(55, 65, 81) !important; /* neutral-700 - proper dark text */
  }

  .dark #amenities-popup .amenity-checkbox + span {
    color: rgb(209, 213, 219) !important; /* neutral-300 - proper light text */
  }
  
  /* Reduce spacing between items */
  #amenities-popup .space-y-3 {
    gap: 0.5rem !important;
  }
  
  #amenities-popup .space-y-3 > * + * {
    margin-top: 0.5rem !important;
  }
  
  /* Compact footer */
  #amenities-popup-container > div.flex.items-center.justify-between:last-child {
    padding: 0.75rem !important;
  }
  
  #amenities-clear-all,
  #amenities-apply {
    font-size: 0.8125rem !important;
    padding: 0.5rem 0.875rem !important;
  }
}

/* Mobile (520px-767px) - Compact */
@media (min-width: 520px) and (max-width: 767px) {
  #amenities-popup-container {
    max-height: 85vh !important;
  }
  
  /* Compact header */
  #amenities-popup-container .flex.items-center.justify-between {
    padding: 0.75rem 1rem !important;
  }
  
  #amenities-popup-title {
    font-size: 1.125rem !important;
    color: rgb(17, 24, 39) !important; /* neutral-900 - dark text in light mode */
  }
  .dark #amenities-popup-title {
    color: rgb(255, 255, 255) !important; /* white - light text in dark mode */
  }
  
  /* Compact content area */
  #amenities-popup-container > div.overflow-y-auto {
    padding: 1rem !important;
    max-height: calc(85vh - 130px) !important;
  }
  
  /* Smaller checkboxes and text */
  #amenities-popup .amenity-checkbox {
    width: 1.125rem !important;
    height: 1.125rem !important;
    flex-shrink: 0 !important;
  }
  
  #amenities-popup .amenity-checkbox + span {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.4 !important;
    font-weight: 400 !important;
    color: rgb(55, 65, 81) !important; /* neutral-700 - proper dark text */
  }

  .dark #amenities-popup .amenity-checkbox + span {
    color: rgb(209, 213, 219) !important; /* neutral-300 - proper light text */
  }
  
  /* Reduce spacing */
  #amenities-popup .space-y-3 {
    gap: 0.625rem !important;
  }
  
  #amenities-popup .space-y-3 > * + * {
    margin-top: 0.625rem !important;
  }
  
  /* Compact footer */
  #amenities-popup-container > div.flex.items-center.justify-between:last-child {
    padding: 0.875rem 1rem !important;
  }
  
  #amenities-apply {
    font-size: 0.875rem !important;
    padding: 0.5rem 1rem !important;
  }
}

/* Tablets (768px-1023px) - Balanced */
@media (min-width: 768px) and (max-width: 1023px) {
  #amenities-popup-container {
    max-height: 80vh !important;
  }
  
  /* Content area */
  #amenities-popup-container > div.overflow-y-auto {
    padding: 1.25rem !important;
    max-height: calc(80vh - 140px) !important;
  }
  
  /* Balanced checkboxes and text */
  #amenities-popup .amenity-checkbox {
    width: 1.125rem !important;
    height: 1.125rem !important;
    flex-shrink: 0 !important;
  }
  
  #amenities-popup .amenity-checkbox + span {
    font-size: 0.9375rem !important; /* 15px */
    line-height: 1.4 !important;
    font-weight: 450 !important;
    color: rgb(55, 65, 81) !important; /* neutral-700 - proper dark text */
  }

  .dark #amenities-popup .amenity-checkbox + span {
    color: rgb(209, 213, 219) !important; /* neutral-300 - proper light text */
  }
  
  /* Balanced spacing */
  #amenities-popup .space-y-3 {
    gap: 0.75rem !important;
  }
  
  #amenities-popup .space-y-3 > * + * {
    margin-top: 0.75rem !important;
  }
}
/* ========================================
 * SPOT DETAIL VIEW - RESPONSIVE MODAL/OVERLAY
 * ======================================== */

/* BASE: Default dialog behavior - ensure it can be displayed */
dialog#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 */
dialog#spot-detail-view:not(.hidden) {
  display: flex !important;
}

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

/* Desktop scaling for smaller desktop screens (1024px-1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .search-display-container {
    transform: scale(0.95) !important;
    transform-origin: left center !important;
    transition: transform 0.2s ease !important;
  }
}

/* Smaller desktop screens (1024px-1199px) - more scaling */
@media (min-width: 1024px) and (max-width: 1199px) {
  .search-display-container {
    transform: scale(0.9) !important;
    transform-origin: left center !important;
  }
}

/* Very compact desktop screens (1024px-1099px) - maximum scaling before tablet */
@media (min-width: 1024px) and (max-width: 1099px) {
  .search-display-container {
    transform: scale(0.85) !important;
    transform-origin: left center !important;
  }
}

/* MOBILE/TABLET: Full-screen positioning for viewports ≤1023px */
@media (max-width: 1023px) {
  dialog#spot-detail-view[open]:not(.hidden),
  dialog#spot-detail-view:not(.hidden) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    border-radius: 0 !important;
    border-top: 4px solid #3b82f6 !important; /* Blue border */
    background: white !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 (≥1024px) - Similar to listings overlay */
@media (min-width: 1024px) {
  dialog#spot-detail-view[open]:not(.hidden),
  dialog#spot-detail-view.visible:not(.hidden),
  dialog#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(8rem + 0.75rem) !important; /* Same as listings overlay - below top bar with gap */
    left: calc(400px + 1rem + 2rem) !important; /* To the right of listings overlay (400px) + gap (1rem) + margin (2rem) */
    right: auto !important;
    bottom: auto !important;
    width: 400px !important; /* Same width as listings overlay */
    height: calc(100vh - 8rem - 0.75rem - 20px) !important; /* Same height constraint as listings */
    max-width: calc(100vw - 400px - 3rem) !important;
    max-height: calc(100vh - 8rem - 0.75rem - 20px) !important;
    min-width: 280px !important;
    min-height: 200px !important;
    
    /* Desktop styling to match listings overlay */
    border-radius: 0.5rem !important;
    background: rgba(255, 255, 255, 0.98) !important; /* More opaque for better visibility */
    border: 2px solid #3b82f6 !important; /* Blue border for debugging visibility */
    border-top: 2px solid #3b82f6 !important; /* Override mobile blue border */
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1) !important; /* Stronger shadow for visibility */
    
    /* 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 dialog#spot-detail-view[open]:not(.hidden),
  .dark dialog#spot-detail-view.visible:not(.hidden),
  .dark dialog#spot-detail-view:not(.hidden) {
    background: #262626 !important; /* Fully opaque dark background - no transparency */
    border: 2px solid #3b82f6 !important; /* Blue border for debugging visibility */
    border-top: 2px solid #3b82f6 !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() */
}

/* 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%;
}

/* 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: #2563eb;
  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: #1d4ed8;
}
/* Spot detail back button */
#spot-detail-back:hover {
  transform: translateX(-2px);
}

/* Desktop overlay spot details: Add small left transform to back button */
#spot-detail-view #spot-detail-back-mobile,
#spot-detail-view button#spot-detail-back-mobile,
dialog#spot-detail-view #spot-detail-back-mobile,
dialog#spot-detail-view button#spot-detail-back-mobile {
  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 */
  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 button[aria-label*="Drag"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  /* iOS: Ensure content area scrolls properly */
  #listings-content-mobile {
    transform: translateZ(0);
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* Force scrollbar visibility on iOS */
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position;
  }
} /* 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 */
#listings-overlay .spot-card {
  max-width: 100% !important;
  overflow-x: hidden !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,
  #amenities-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;
  transform: scale(1.1) !important;
  transition: all 0.15s ease-in-out !important;
}

/* Enhanced flash animation for price pins */
.map-price-pin.marker-flash-highlight {
  filter: brightness(1.4) saturate(1.2) drop-shadow(0 0 12px rgba(255, 107, 53, 0.9)) !important;
  transform: scale(1.15) !important;
  z-index: var(--z-dropdown) !important;
}

/* Ensure flash effect works on Google Maps markers */
.gm-style .marker-flash-highlight {
  animation: markerFlash 0.3s ease-in-out;
}

@keyframes markerFlash {
  0% { 
    transform: scale(1); 
    filter: brightness(1); 
  }
  50% { 
    transform: scale(1.2); 
    filter: brightness(1.6) saturate(1.4) drop-shadow(0 0 15px rgba(255, 215, 0, 1)); 
  }
  100% { 
    transform: scale(1); 
    filter: brightness(1); 
  }
}
/* CRITICAL: Ensure proper contrast on dark overlays and backgrounds */
.dark *[style*="background: rgba(0"],
.dark *[style*="background-color: rgba(0"],
html.dark *[style*="background: rgba(0"],
html.dark *[style*="background-color: rgba(0"],
body.dark *[style*="background: rgba(0"],
body.dark *[style*="background-color: rgba(0"] {
  color: #f9fafb !important; /* Light text on dark backgrounds */
}

/* Ensure text is light on any very dark background */
*[style*="background: #0"],
*[style*="background-color: #0"],
*[style*="background: rgba(0, 0, 0"],
*[style*="background-color: rgba(0, 0, 0"] {
  color: #f9fafb !important; /* Light text on very dark backgrounds */
}

/* Override any gray-800 text that might appear on dark backgrounds in dark mode */
.dark .text-gray-800,
html.dark .text-gray-800,
body.dark .text-gray-800,
.dark [style*="color: #ffffff"],
html.dark [style*="color: #ffffff"],
body.dark [style*="color: #ffffff"] {
  color: #f9fafb !important; /* Light text in dark mode */
}

/* NOTE: Dark mode styles (including NUCLEAR OPTION) consolidated in dark-mode.css */

/* ========================================
 * SPOT DETAIL VIEW CONTAINER FIXES
 * ======================================== */

/* CRITICAL: Ensure parent containers don't constrain spot detail view OR amenities popup */
#listings-sheet,
#listings-content-mobile,
.bottom-sheet-container,
#map-container {
  /* Remove any containment or isolation that could prevent modal from escaping */
  contain: none !important; /* Allow spot detail view and popups to escape container bounds */
  isolation: auto !important; /* Remove stacking context isolation */
  overflow: visible !important; /* Allow overflow for modals */
}

/* TARGETED: Only remove constraints from specific containers that might interfere with dialogs */
#listings-sheet,
#listings-content-mobile,
.bottom-sheet-container {
  /* Remove constraints that could prevent modal from escaping container bounds */
  contain: none !important;
  isolation: auto !important;
  overflow: visible !important;
}

/* CRITICAL: Ensure bottom sheet doesn't trap amenities popup with transform stacking context */
#listings-sheet {
  /* Bottom sheet should NOT create a stacking context that traps child elements */
  /* Note: JavaScript may apply transform for dragging - this is OK as popup is NOT a child */
  isolation: auto !important; /* Don't isolate stacking context */
  contain: none !important; /* Don't contain z-index */
}

/* Allow normal gap properties for proper layout */

/* TARGETED: Ensure spot detail view breaks out of containers when visible */
html body.discover-page dialog#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;
}

/* DESKTOP: Auth modal must appear above spot details container */
@media (min-width: 1024px) {
  html body.discover-page #auth-modal:not(.hidden),
  html body.discover-page #auth-modal.show {
    z-index: calc(var(--z-high-modal) + 1) !important; /* Higher than spot details container (1000000) */
  }
}

/* MOBILE/TABLET: Full-screen positioning for nuclear override */
@media (max-width: 1023px) {
  html body.discover-page dialog#spot-detail-view:not(.hidden) {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    border-radius: 0 !important;
  }
}

/* DESKTOP: Side overlay positioning for nuclear override */
@media (min-width: 1024px) {
  html body.discover-page dialog#spot-detail-view[open]:not(.hidden),
  html body.discover-page dialog#spot-detail-view.visible:not(.hidden),
  html body.discover-page dialog#spot-detail-view:not(.hidden) {
    display: flex !important; /* CRITICAL: Ensure display is set */
    position: fixed !important;
    top: calc(8rem + 0.75rem) !important;
    left: calc(400px + 1rem + 2rem) !important;
    right: auto !important;
    bottom: auto !important;
    width: 400px !important;
    height: calc(100vh - 8rem - 0.75rem - 20px) !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}