/* ==========================================
 * BOTTOMSHEET.CSS - MOBILE BOTTOM SHEET SYSTEM
 * FILE: /css/renter/styles/discover/components/bottomsheet.css
 * VERSION: v=20251001
 * ==========================================
 * 🎯 PURPOSE: Mobile bottom sheet behavior and positioning
 * 📱 COVERAGE: Mobile-first bottom sheet with drag interactions
 * 🔧 FEATURES: Backdrop blur, drag handles, responsive heights
 * 📄 IMPORTED BY: discover.html (line 327)
 * 🚀 STATUS: ACTIVE - Mobile listings bottom sheet system
 * ========================================== */

/* ============================================================================
   DEFENSIVE CSS: Prevent cached state issues on page reload
   These rules ensure correct initial state regardless of cached HTML/CSS
   CRITICAL: These rules MUST load first to prevent wrong styles
   ============================================================================ */

/* CRITICAL: Force correct initial state - highest specificity */
html body.discover-page #listings-sheet,
body.discover-page #listings-sheet,
#listings-sheet {
  /* Reset any cached or inline styles that might be wrong */
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: var(--z-sheet, 1000) !important;
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.dark html body.discover-page #listings-sheet,
.dark body.discover-page #listings-sheet,
.dark #listings-sheet {
  background: #1a1a1a !important;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* CRITICAL: Hide bottom sheet on desktop - only show on mobile/tablet */
@media (min-width: 1024px) {
  html body.discover-page #listings-sheet,
  body.discover-page #listings-sheet,
  #listings-sheet,
  #listings-sheet.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Ensure bottom sheet is visible and properly initialized on load (mobile/tablet only) */
@media (max-width: 1023px) {
  #listings-sheet {
    /* Ensure visibility is correct - JavaScript will control transform */
    visibility: visible !important;
    opacity: 1 !important;
    display: flex !important;
    pointer-events: auto !important;
    will-change: transform !important; /* Optimize for transform animations */
  }

  /* Reset any cached hidden states */
  #listings-sheet.hidden {
    visibility: visible !important;
    opacity: 1 !important;
    display: flex !important;
    pointer-events: auto !important;
  }
}

/* Ensure JavaScript can control transform - don't force initial transform */
/* JavaScript will set the correct translateY position on initialization */

/* BOTTOMSHEET.CSS: Main bottom sheet container */
#listings-sheet {
  position: fixed; /* bottomsheet.css - fixed positioning */
  bottom: 0;
  left: 0;
  right: 0;
  
  /* ENHANCED: Modern visual polish */
  background: #ffffff !important; /* Fully opaque - no transparency */
  backdrop-filter: none; /* PERFORMANCE: Disabled - very expensive on mobile */
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  
  /* Layout and behavior */
  z-index: var(--z-sheet);
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: visible; /* Allow content to extend fully without clipping */
  max-width: 100vw;
  min-height: 120px;
  height: 100vh; /* Match viewport height - sheet can be dragged via translateY */
  max-height: 100vh;
  touch-action: pan-y;
  
  /* PERFORMANCE: Minimal transitions for smooth 60fps */
  transition: box-shadow 0.3s ease,
              background-color 0.2s ease;
  /* CRITICAL: NO transform transition in CSS - JavaScript controls all transform animations */
  /* PERFORMANCE: backdrop-filter transition removed - too expensive */
}

/* ENHANCED: Dark mode support */
.dark #listings-sheet {
  background: #1a1a1a !important; /* Fully opaque - no transparency */
  backdrop-filter: none; /* PERFORMANCE: Disabled for smooth animations */
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* Mobile visibility (≤640px) - FULL WIDTH */
@media (max-width: 640px) {
  #listings-sheet,
  #listings-sheet.hidden,
  body.discover-page #listings-sheet,
  html body.discover-page #listings-sheet {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    /* CRITICAL: Full width mobile positioning - no tablet constraints */
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* CRITICAL: Allow JavaScript to control transform for dragging - NO CSS override */
    /* JavaScript will set initial position via translateY() */
    /* Standard mobile styling */
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12) !important;
    min-height: 120px !important;
    height: 100vh !important;
    max-height: 100vh !important;
  }

  /* Dark mode support for mobile */
  .dark #listings-sheet,
  .dark body.discover-page #listings-sheet {
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3) !important;
  }

  /* Ensure desktop overlay is hidden on mobile */
  #listings-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}


/* Small tablet visibility (541px-567px) - TRANSITION RANGE */
@media (min-width: 541px) and (max-width: 567px) {
  #listings-sheet,
  #listings-sheet.hidden,
  body.discover-page #listings-sheet,
  html body.discover-page #listings-sheet {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    /* CRITICAL: Full width mobile positioning for small tablets */
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-height: 120px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: visible !important;
    z-index: var(--z-modal) !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15), 
                0 0 0 1px rgba(0, 0, 0, 0.05) !important;
  }
  
  /* CRITICAL: Ensure support chat appears above bottom sheet on small tablets */
  #supportChatWidget,
  #supportChatButton {
    z-index: var(--z-support-chat) !important; /* Higher than bottom sheet (9999) */
    position: fixed !important; /* Ensure it's positioned correctly */
    display: flex !important; /* Ensure visibility */
    visibility: visible !important; /* Force visible */
    opacity: 1 !important; /* Force opaque */
    pointer-events: auto !important; /* Enable interactions */
    /* NO TRANSFORM - let support_chat.html handle positioning */
  }
  
  /* CRITICAL: Ensure maps modal appears above bottom sheet */
  #maps-choice-modal {
    z-index: var(--z-maximum) !important; /* Maximum z-index - above everything */
    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;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
  }
  
  /* Ensure maps modal content is also visible */
  #maps-choice-modal > div {
    z-index: var(--z-maximum) !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  
  /* Ensure maps modal buttons are clickable */
  #maps-choice-modal button {
    z-index: var(--z-maximum) !important;
    position: relative !important;
    pointer-events: auto !important;
    cursor: pointer !important;
  }
  
  /* CRITICAL: Ensure support chat dialog is also visible on small tablets */
  body.discover-page #supportChatDialog {
    z-index: var(--z-support-chat) !important;
    position: fixed !important;
    /* Let support_chat.html handle sizing and positioning */
  }
}

/* Tablet visibility (568px-1023px) - CONSTRAINED WIDTH */
@media (min-width: 568px) and (max-width: 1023px) {
  #listings-sheet,
  #listings-sheet.hidden,
  body.discover-page #listings-sheet,
  html body.discover-page #listings-sheet {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 600px !important; /* Constrained width for tablets */
    max-width: 80vw !important; /* Responsive fallback */
    left: calc(50vw - min(300px, 40vw)) !important; /* Center without transform - responsive to viewport */
    right: auto !important; /* Override right: 0 */
    margin-left: 0 !important; /* Reset any margin */
    min-height: 120px !important;
    height: 100vh !important; /* Match viewport height */
    max-height: 100vh !important;
    overflow-y: visible !important; /* Critical: Allow content to extend */
    z-index: var(--z-modal) !important;
    border-radius: 20px 20px 0 0 !important; /* Rounded top corners */
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15), 
                0 0 0 1px rgba(0, 0, 0, 0.05) !important; /* Enhanced shadow for floating effect */
  }
  
  /* CRITICAL: Force hide desktop listings overlay on tablets */
  #listings-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  /* CRITICAL: Ensure support chat appears above bottom sheet on tablets */
  #supportChatWidget,
  #supportChatButton {
    z-index: var(--z-support-chat) !important; /* Higher than bottom sheet (9999) */
    position: fixed !important; /* Ensure it's positioned correctly */
    display: flex !important; /* Ensure visibility */
    visibility: visible !important; /* Force visible */
    opacity: 1 !important; /* Force opaque */
    pointer-events: auto !important; /* Enable interactions */
  }
  
  /* CRITICAL: Ensure support chat dialog is also visible on tablets */
  body.discover-page #supportChatDialog {
    z-index: var(--z-support-chat) !important;
    position: fixed !important;
    /* Let support_chat.html handle sizing and positioning */
  }
  
  /* Dark mode support for tablet constrained width */
  .dark #listings-sheet,
  .dark #listings-sheet.hidden,
  .dark body.discover-page #listings-sheet,
  html.dark body.discover-page #listings-sheet {
    background: #1a1a1a !important; /* Fully opaque - no transparency */
    backdrop-filter: none !important; /* PERFORMANCE: Disabled */
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5), 
                0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
}


/* CRITICAL: Ensure support chat is always visible on discover page */
body.discover-page #supportChatWidget,
body.discover-page #supportChatButton {
  z-index: var(--z-support-chat) !important;
  position: fixed !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ENHANCED: Mobile content spacing and layout (≤520px) */
@media (max-width: 520px) {
  /* bottomsheet.css - mobile padding override */
  #listings-sheet .p-3 {
    padding: 0.75rem !important; /* Tighter padding for mobile */
  }


  /* ENHANCED: Mobile card layout optimizations */
  #listings-sheet .spot-card {
    margin-top: -0.5rem !important;
    margin-bottom: -1rem !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: none !important; /* PERFORMANCE: Disabled */
    /* PROFESSIONAL: Baby blue tinge border - industry standard */
    border: 1.5px solid rgba(96, 165, 250, 0.35) !important;
    box-shadow: 0 1px 3px rgba(96, 165, 250, 0.08), 
                0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.2s ease,
                background-color 0.2s ease !important;
  }
  
  #listings-sheet .spot-card:active {
    transform: translateY(-1px) !important;
    /* PROFESSIONAL: Enhanced blue glow on active */
    border-color: rgba(96, 165, 250, 0.6) !important;
    box-shadow: 0 2px 8px rgba(96, 165, 250, 0.2), 
                0 1px 3px rgba(0, 0, 0, 0.08) !important;
  }

  /* ENHANCED: Dark mode mobile cards */
  .dark #listings-sheet .spot-card {
    background: rgba(31, 41, 55, 0.95) !important;
    /* PROFESSIONAL: Soft blue border for dark mode */
    border: 1.5px solid rgba(147, 197, 253, 0.25) !important;
    box-shadow: 0 1px 3px rgba(147, 197, 253, 0.06), 
                0 1px 2px rgba(0, 0, 0, 0.15) !important;
  }
  
  .dark #listings-sheet .spot-card:active {
    border-color: rgba(147, 197, 253, 0.5) !important;
    box-shadow: 0 2px 8px rgba(147, 197, 253, 0.15), 
                0 1px 3px rgba(0, 0, 0, 0.2) !important;
  }
  /* ENHANCED: Mobile touch targets */
  #listings-sheet .spot-card button,
  #listings-sheet .spot-card a {
    min-height: 44px !important; /* iOS recommended touch target */
    min-width: 44px !important;
    touch-action: manipulation !important;
  }

  /* Ensure all child elements are interactive and selectable */
  #listings-sheet * {
    pointer-events: auto !important;
    user-select: text !important; /* Allow text selection */
  }

  /* CRITICAL: Override universal rule for cancellation policy label - must have pointer-events: none to allow tooltips */
  #listings-sheet .spot-details-container .policy-expandable-trigger .policy-label,
  #listings-sheet .spot-details-container .policy-expandable-trigger span.policy-label,
  #listings-sheet .spot-details-container .policy-expandable-trigger .flex .policy-label,
  #listings-sheet .spot-details-container .policy-expandable-trigger .flex span.policy-label,
  #listings-sheet .spot-details-container .policy-expandable-trigger div.flex .policy-label,
  #listings-sheet .spot-details-container .policy-expandable-trigger div.flex span.policy-label {
    pointer-events: none !important; /* CRITICAL: Override universal rule to allow tooltips */
    user-select: none !important;
  }

  /* CRITICAL: Fix element selection issues - Override any blocking overlays */
  #listings-sheet .absolute.inset-0 {
    pointer-events: none !important; /* Ensure overlay elements don't block selection */
    user-select: none !important; /* Overlays shouldn't be selectable */
  }

  /* CRITICAL: Ensure content elements are selectable */
  #listings-sheet .spot-card,
  #listings-sheet .spot-card *,
  #listings-sheet .flex,
  #listings-sheet .text-sm,
  #listings-sheet .text-xs,
  #listings-sheet .font-medium,
  #listings-sheet .font-semibold,
  #listings-sheet .clickable-address,
  #listings-sheet .spot-card-title-wrapper,
  #listings-sheet p,
  #listings-sheet span,
  #listings-sheet div:not(.absolute.inset-0) {
    pointer-events: auto !important;
    user-select: text !important;
    cursor: text !important;
  }

  /* CRITICAL: Fix any isolation issues that prevent selection */
  #listings-sheet .spot-card {
    isolation: auto !important; /* Remove isolation that blocks selection */
    contain: none !important; /* Remove containment that blocks selection */
  }

}

/* ENHANCED: Tablet content spacing and layout (568px-1023px) */
@media (min-width: 568px) and (max-width: 1023px) {
  #listings-sheet .p-3 {
    padding: 1rem !important; /* Slightly more padding for tablets */
  }


  /* ENHANCED: Tablet card layout optimizations */
  #listings-sheet .spot-card {
    margin-top: -0.1rem !important; /* Negative top margin for tablet */
    margin-bottom: -0.5rem !important; /* Less negative margin for tablets */
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.97) !important; /* Slightly more opaque */
    backdrop-filter: none !important; /* PERFORMANCE: Disabled */
    /* PROFESSIONAL: Baby blue tinge border - industry standard */
    border: 1.5px solid rgba(96, 165, 250, 0.4) !important;
    box-shadow: 0 2px 4px rgba(96, 165, 250, 0.1), 
                0 1px 2px rgba(0, 0, 0, 0.05) !important;
    transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.2s ease,
                background-color 0.2s ease !important;
  }
  
  #listings-sheet .spot-card:active {
    transform: translateY(-1px) !important;
    /* PROFESSIONAL: Enhanced blue glow on active */
    border-color: rgba(96, 165, 250, 0.65) !important;
    box-shadow: 0 2px 10px rgba(96, 165, 250, 0.25), 
                0 1px 4px rgba(0, 0, 0, 0.08) !important;
  }

  /* ENHANCED: Dark mode tablet cards */
  .dark #listings-sheet .spot-card {
    background: rgba(31, 41, 55, 0.97) !important; /* More opaque for tablets */
    /* PROFESSIONAL: Soft blue border for dark mode */
    border: 1.5px solid rgba(147, 197, 253, 0.3) !important;
    box-shadow: 0 2px 4px rgba(147, 197, 253, 0.08), 
                0 1px 2px rgba(0, 0, 0, 0.2) !important;
  }
  
  .dark #listings-sheet .spot-card:active {
    border-color: rgba(147, 197, 253, 0.55) !important;
    box-shadow: 0 2px 10px rgba(147, 197, 253, 0.18), 
                0 1px 4px rgba(0, 0, 0, 0.25) !important;
  }
  /* ENHANCED: Tablet touch targets - slightly smaller than mobile */
  #listings-sheet .spot-card button,
  #listings-sheet .spot-card a {
    min-height: 40px !important; /* Slightly smaller than mobile */
    min-width: 40px !important;
    touch-action: manipulation !important;
  }
  
  /* NOTE: Filter and sort button sizing moved to shared mobile/tablet rule below */

  /* Ensure all child elements are interactive and selectable */
  #listings-sheet * {
    pointer-events: auto !important;
    user-select: text !important;
  }

  /* CRITICAL: Override universal rule for cancellation policy label - must have pointer-events: none to allow tooltips */
  #listings-sheet .spot-details-container .policy-expandable-trigger .policy-label,
  #listings-sheet .spot-details-container .policy-expandable-trigger span.policy-label,
  #listings-sheet .spot-details-container .policy-expandable-trigger .flex .policy-label,
  #listings-sheet .spot-details-container .policy-expandable-trigger .flex span.policy-label,
  #listings-sheet .spot-details-container .policy-expandable-trigger div.flex .policy-label,
  #listings-sheet .spot-details-container .policy-expandable-trigger div.flex span.policy-label {
    pointer-events: none !important; /* CRITICAL: Override universal rule to allow tooltips */
    user-select: none !important;
  }

  /* CRITICAL: Fix element selection issues - Override any blocking overlays */
  #listings-sheet .absolute.inset-0 {
    pointer-events: none !important;
    z-index: -1 !important;
    contain: none !important;
  }
}

/* MOBILE + TABLET: Compact filter and sort buttons (applies to all non-desktop) */
@media (max-width: 1023px) {
  /* Smaller filter and sort buttons - EXCLUDES ultra-small mobile (handled below) */
  #amenities-popup-trigger-mobile,
  #sort-toggle-mobile {
    font-size: 0.625rem !important; /* 10px - compact for mobile/tablet */
    padding: 0.25rem 0.5rem !important; /* Reduced padding */
    min-height: 24px !important; /* Smaller minimum height */
    min-width: auto !important; /* Override any JS-applied 44px */
    gap: 0.125rem !important; /* Tighter gap between icon and text */
  }
  
  /* Smaller button text */
  #amenities-popup-trigger-mobile span,
  #sort-toggle-mobile span,
  #sort-label-mobile {
    font-size: 0.625rem !important; /* 10px */
  }
  
  /* Smaller button icons */
  #amenities-popup-trigger-mobile svg,
  #sort-toggle-mobile svg {
    width: 0.625rem !important; /* 10px icons */
    height: 0.625rem !important;
  }
}

/* Desktop hiding (≥1024px) */
@media (min-width: 1024px) {
  #listings-sheet {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    /* CRITICAL: Remove any stacking context creation on desktop */
    isolation: auto !important;
    contain: none !important;
    transform: none !important;
    will-change: auto !important;
    z-index: -1 !important; /* Send far below when hidden */
  }
  
  /* CRITICAL: Explicitly hide mobile amenities button on desktop */
  #amenities-popup-trigger-mobile {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -9999 !important; /* Send far below */
  }

  /* DESKTOP ONLY: Hover effects for spot cards (if bottom sheet were to be shown on desktop) */
  #listings-sheet .spot-card:hover {
    background: rgba(255, 255, 255, 1) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), 
                0 3px 10px rgba(0, 0, 0, 0.08) !important;
  }

  .dark #listings-sheet .spot-card:hover {
    background: rgba(31, 41, 55, 1) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
  }
}

  /* CRITICAL: Ensure support chat is visible and properly positioned on desktop */
  body.discover-page #supportChatWidget,
  body.discover-page #supportChatButton {
    z-index: var(--z-support-chat) !important;
    position: fixed !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    /* CONSISTENT DESKTOP POSITIONING: Standard bottom-right placement */
    transform: none !important;
    bottom: 1.5rem !important; /* 24px from bottom - standard desktop positioning */
    right: 1.5rem !important; /* 24px from right */
    /* CONSISTENT SIZING: Standard desktop size */
    width: 2.5rem !important; /* 56px - larger for desktop */
    height: 2.5rem !important; /* 56px - larger for desktop */
  }

  /* Desktop support chat dialog positioning - respect size modes */
  body.discover-page #supportChatDialog {
    z-index: var(--z-support-chat) !important;
    position: fixed !important;
    bottom: 5rem !important; /* Above the chat button */
    right: 1.5rem !important;
  }
  
  /* Ensure large mode works properly on desktop discover page */
  body.discover-page #supportChatDialog[data-size-mode="large"] {
    z-index: var(--z-support-chat) !important;
    position: fixed !important;
    bottom: 5rem !important; /* Above the chat button */
    right: 1.5rem !important;
    /* Width and height controlled by support_chat.html large mode CSS */
  }

  /* Mobile large mode overrides for discover page */
  @media (max-width: 640px) {
    body.discover-page #supportChatDialog[data-size-mode="large"] {
      position: fixed !important;
      inset: 3rem 0.5rem 0.5rem 0.5rem !important;
      width: auto !important;
      height: auto !important;
      max-width: none !important;
      max-height: 90vh !important;
      margin: 0 !important;
    }
  }

  /* Ultra small mobile large mode overrides for discover page */
  @media (max-width: 520px) {
    body.discover-page #supportChatDialog[data-size-mode="large"] {
      position: fixed !important;
      inset: 2rem 0.25rem 0.25rem 0.25rem !important;
      width: auto !important;
      height: auto !important;
      max-width: none !important;
      max-height: 95vh !important;
      margin: 0 !important;
    }
  }

/* ULTRA SMALL VERTICAL SCREENS (≤400px height) - CRITICAL positioning fixes */
@media (max-width: 1023px) and (max-height: 400px) {
  #listings-sheet {
    /* CRITICAL: Ensure minimum height is very small for ultra-small screens */
    min-height: 80px !important;
    
    /* Smaller border radius for ultra-compact appearance */
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    
    /* PERFORMANCE: Backdrop blur disabled */
    backdrop-filter: none !important;
  }

  /* Ultra small screens: Minimal padding and spacing */
  #listings-sheet .p-3 {
    padding: 0.375rem !important; /* Very tight padding */
  }

  #listings-sheet .space-y-2 > * + * {
    margin-top: 0.25rem !important; /* Minimal spacing between cards */
  }

  /* Ultra small screens: Very compact spot cards */
  #listings-sheet .spot-card {
    margin-bottom: -1.75rem !important;
    border-radius: 6px !important; /* Very small radius */
    padding: 0.375rem !important; /* Minimal internal padding */
    font-size: 0.75rem !important; /* Smaller text */
    /* PROFESSIONAL: Baby blue tinge border - maintained for small screens */
    border: 1.5px solid rgba(96, 165, 250, 0.35) !important;
  }
  
  .dark #listings-sheet .spot-card {
    border: 1.5px solid rgba(147, 197, 253, 0.25) !important;
  }

  /* Ultra small screens: Minimal drag handle area */
  #listings-sheet button[aria-label*="Drag"] {
    padding: 0.375rem !important; /* Minimal drag handle padding */
    min-height: 40px !important; /* Very small minimum height */
    top: -1rem !important; /* Move drag handle up for better positioning */
  }

  #listings-sheet .w-12.h-1 {
    width: 28px !important; /* Smaller handle */
    height: 2px !important; /* Thinner handle */
    transform: translateY(-6px) !important; /* Move handle up on touch mobile */
  }

  /* Ultra small screens: Reduce button sizes */
  #listings-sheet .book-btn,
  #listings-sheet .notify-btn,
  #listings-sheet .contact-btn {
    padding: 0.375rem 0.75rem !important; /* Smaller buttons */
    font-size: 0.75rem !important; /* Smaller text */
    min-height: 32px !important; /* Smaller touch targets */
  }

  /* TOUCH MOBILE: OVERRIDE inline styles from ResponsiveManager */
  /* These !important rules override any JS-applied inline styles */
  
  /* TOUCH MOBILE: Smaller space type toggle (Parking/Storage) */
  #listings-sheet .space-type-toggle,
  #bottom-sheet-listings-header .space-type-toggle {
    padding: 1px !important;
    border-radius: 3px !important;
  }

  #listings-sheet .space-type-btn,
  #bottom-sheet-listings-header .space-type-btn,
  #space-type-parking-mobile,
  #space-type-storage-mobile,
  button#space-type-parking-mobile,
  button#space-type-storage-mobile {
    padding: 2px 6px !important; /* Very compact - override inline */
    font-size: 9px !important; /* Smaller text - override inline */
    min-height: 20px !important; /* Override inline min-height: 44px */
    min-width: auto !important; /* Override inline min-width: 44px */
    line-height: 1.2 !important;
    border-radius: 3px !important; /* Override inline border-radius */
  }

  /* TOUCH MOBILE: Smaller Filters and Sort (Default) buttons */
  #amenities-popup-trigger-mobile,
  #sort-toggle-mobile,
  button#amenities-popup-trigger-mobile,
  button#sort-toggle-mobile {
    font-size: 9px !important; /* Override inline font-size: 1rem */
    padding: 3px 6px !important; /* Override inline padding */
    min-height: 22px !important; /* Override inline min-height: 44px */
    min-width: auto !important; /* Override inline min-width: 44px */
    gap: 2px !important;
    border-radius: 4px !important; /* Override inline border-radius */
  }

  /* Smaller button text */
  #amenities-popup-trigger-mobile span,
  #sort-toggle-mobile span,
  #sort-label-mobile {
    font-size: 9px !important;
  }

  /* Smaller button icons */
  #amenities-popup-trigger-mobile svg,
  #sort-toggle-mobile svg {
    width: 10px !important;
    height: 10px !important;
  }

  /* Sort dropdown arrow even smaller */
  #sort-toggle-mobile .mx-dropdown-arrow {
    width: 8px !important;
    height: 8px !important;
  }

  /* TOUCH MOBILE: Move Filters/Sort container closer to right edge */
  #bottom-sheet-listings-header .flex.items-center.gap-1.ml-auto,
  #bottom-sheet-listings-header > .flex.items-center.gap-1:last-child {
    transform: translateX(6px) !important; /* Shift right */
    gap: 2px !important; /* Tighter gap between buttons */
  }
  
  /* TOUCH MOBILE: Override drag handle inline styles */
  #bottom-sheet-listings-header button[aria-label*="Drag"] {
    padding: 0.5rem !important; /* Override inline padding */
    min-height: auto !important; /* Override inline min-height: 44px */
    min-width: auto !important; /* Override inline min-width: 44px */
    font-size: inherit !important; /* Override inline font-size */
    border-radius: 0 !important; /* Override inline border-radius */
  }
}

/* VERY SMALL VERTICAL SCREENS (401px-500px height) - Optimize bottom sheet positioning */
@media (max-width: 1023px) and (min-height: 401px) and (max-height: 500px) {
  #listings-sheet {
    /* Ensure minimum height is appropriate for very small screens */
    min-height: 100px !important;
    
    /* Adjust border radius for better appearance on small screens */
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    
    /* PERFORMANCE: Backdrop blur disabled */
    backdrop-filter: none !important;
  }

  /* Very small screens: Reduce padding and spacing */
  #listings-sheet .p-3 {
    padding: 0.5rem !important; /* Even tighter padding */
  }

  #listings-sheet .space-y-2 > * + * {
    margin-top: 0.375rem !important; /* Tighter spacing between cards */
  }

  /* Very small screens: Compact spot cards */
  #listings-sheet .spot-card {
    margin-bottom: 0.375rem !important;
    border-radius: 8px !important; /* Smaller radius */
    padding: 0.5rem !important; /* Reduce internal padding */
    /* PROFESSIONAL: Baby blue tinge border - maintained for small screens */
    border: 1.5px solid rgba(96, 165, 250, 0.35) !important;
  }
  
  .dark #listings-sheet .spot-card {
    border: 1.5px solid rgba(147, 197, 253, 0.25) !important;
  }

  /* Very small screens: Smaller drag handle area */
  #listings-sheet button[aria-label*="Drag"] {
    padding: 0.5rem !important; /* Reduce drag handle padding */
    min-height: 50px !important; /* Smaller minimum height */
    top: -1rem !important; /* Move drag handle up for better positioning */
  }

  #listings-sheet .w-12.h-1 {
    width: 32px !important; /* Slightly smaller handle */
    height: 3px !important; /* Thinner handle */
    transform: translateY(-6px) !important; /* Move handle up on touch mobile */
  }
}

/* SMALL VERTICAL SCREENS (501px-600px height) - Moderate optimizations */
@media (max-width: 1023px) and (min-height: 501px) and (max-height: 600px) {
  #listings-sheet {
    /* Slightly reduced minimum height */
    min-height: 110px !important;
    
    /* Standard border radius */
    border-top-left-radius: 18px !important;
    border-top-right-radius: 18px !important;
  }

  /* Small screens: Moderate padding adjustments */
  #listings-sheet .p-3 {
    padding: 0.625rem !important; /* Slightly tighter padding */
  }

  #listings-sheet .space-y-2 > * + * {
    margin-top: 0.4375rem !important; /* Moderate spacing between cards */
  }

  /* Small screens: Moderate spot card adjustments */
  #listings-sheet .spot-card {
    margin-bottom: 0.4375rem !important;
    border-radius: 10px !important;
    /* PROFESSIONAL: Baby blue tinge border - maintained for small screens */
    border: 1.5px solid rgba(96, 165, 250, 0.35) !important;
  }
  
  .dark #listings-sheet .spot-card {
    border: 1.5px solid rgba(147, 197, 253, 0.25) !important;
  }
}

/* ========================================
 * CONSOLIDATED DRAG HANDLE STYLES
 * Industry Standard Touch Targets
 * Based on Apple HIG (44px min) & Material Design (48px recommended)
 * Optimized for: Google Maps, Uber, Apple Maps patterns
 * ======================================== */

/* BASE DRAG HANDLE CONTAINER - Industry standard touch target */
/* NOTE: translateY controlled by breakpoint-specific rules below */
#listings-sheet button[aria-label*="Drag"] {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important; /* Center only - Y transform per breakpoint */
  top: 0 !important;
  /* INDUSTRY STANDARD: Generous touch target - exceeds Apple's 44px minimum */
  width: 100% !important; /* Full width for easy grabbing - industry standard */
  max-width: 200px !important; /* Constrain visual width but allow touch expansion */
  min-height: 56px !important; /* Larger than Material Design's 48px minimum */
  padding: 1rem 2rem !important; /* Generous padding for finger targets */
  background: transparent !important;
  border: none !important;
  cursor: grab !important;
  pointer-events: auto !important;
  touch-action: pan-y !important;
  z-index: var(--z-elevated) !important;
  visibility: visible !important;
  opacity: 1 !important;
  /* PERFORMANCE: Use will-change for smoother interactions */
  will-change: transform;
  /* Prevent text selection during drag */
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* ========================================
 * RESPONSIVE DRAG HANDLE Y TRANSFORMS
 * Adjust translateY per breakpoint
 * ======================================== */

/* MOBILE: Move drag handle up (≤520px) */
@media (max-width: 520px) {
  #listings-sheet button[aria-label*="Drag"] {
    transform: translateX(-50%) translateY(-18px) !important; /* MOBILE: Move up */
  }
}

/* SMALL TABLET: 521px-612px */
@media (min-width: 521px) and (max-width: 612px) {
  #listings-sheet button[aria-label*="Drag"] {
    transform: translateX(-50%) translateY(-6px) !important; /* ADJUSTABLE */
  }
}

/* MEDIUM TABLET: 613px-768px */
@media (min-width: 613px) and (max-width: 768px) {
  #listings-sheet button[aria-label*="Drag"] {
    transform: translateX(-50%) translateY(-6px) !important; /* ADJUSTABLE */
  }
}

/* LARGE TABLET: 769px-1023px */
@media (min-width: 769px) and (max-width: 1023px) {
  #listings-sheet button[aria-label*="Drag"] {
    transform: translateX(-50%) translateY(-6px) !important; /* ADJUSTABLE */
  }
}

/* NOTE: Desktop (1024px+) doesn't use bottom sheet - no rule needed */

/* EXPANDED HIT AREA - Invisible but captures pointer events */
/* Industry pattern: Touch target extends beyond visible handle */
#listings-sheet button[aria-label*="Drag"]::before {
  content: '';
  position: absolute;
  /* Extend 24px above and 16px below for generous touch area */
  top: -24px;
  bottom: -16px;
  /* Full width touch area */
  left: -100%;
  right: -100%;
  /* Invisible but interactive */
  background: transparent;
  pointer-events: auto;
}

/* BASE HANDLE BAR - Visual indicator (smaller than touch target) */
#listings-sheet .w-12.h-1,
#listings-sheet button[aria-label*="Drag"] .w-12.h-1 {
  /* Industry standard: 40-48px wide, 4-5px tall */
  width: 42px !important;
  height: 5px !important;
  background: var(--neutral-400) !important;
  border-radius: 3px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: var(--z-elevated) !important;
  margin: 0 auto;
  transform: translateY(-6px) !important; /* Move handle up */
  /* Smooth color transition */
  transition: background-color 0.15s ease-out,
              transform 0.15s ease-out !important;
  pointer-events: none !important; /* Let button handle events */
}

/* Dark mode handle bar */
.dark #listings-sheet .w-12.h-1,
.dark #listings-sheet button[aria-label*="Drag"] .w-12.h-1 {
  background: var(--neutral-500) !important;
}

/* Bottom sheet top spacing for drag handle */
#listings-sheet {
  padding-top: 1.25rem !important;
  min-height: 140px !important;
  overflow: visible !important; /* Ensure drag handle isn't clipped */
}

/* ========================================
 * TOUCH DEVICE OPTIMIZATIONS
 * Actual touchscreen devices (phones/tablets)
 * ======================================== */
@media (hover: none) and (pointer: coarse) and (max-width: 1023px) {
  /* TOUCH DEVICES: Extra-large touch target */
  #listings-sheet button[aria-label*="Drag"] {
    min-height: 64px !important; /* Larger for fingers */
    padding: 1.25rem 2.5rem !important;
    top: -0.5rem !important;
  }

  /* TOUCH DEVICES: Expanded hit area */
  #listings-sheet button[aria-label*="Drag"]::before {
    top: -32px; /* Even larger extension for touch */
    bottom: -20px;
  }

  /* TOUCH DEVICES: Larger, more visible handle bar */
  #listings-sheet .w-12.h-1,
  #listings-sheet button[aria-label*="Drag"] .w-12.h-1 {
    width: 48px !important;
    height: 5px !important;
    background: var(--neutral-500) !important;
    border-radius: 3px !important;
    /* Subtle shadow for depth */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-6px) !important; /* Move handle up on touch mobile */
  }

  .dark #listings-sheet .w-12.h-1,
  .dark #listings-sheet button[aria-label*="Drag"] .w-12.h-1 {
    background: var(--neutral-400) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-6px) !important; /* Move handle up on touch mobile */
  }

  /* TOUCH DEVICES: More top spacing */
  #listings-sheet {
    padding-top: 1.5rem !important;
    min-height: 160px !important;
  }
}

/* ========================================
 * SMALL MOBILE DEVICES (<=520px width)
 * NOTE: transform rule also applies at this breakpoint - see drag handle positioning section above
 * ======================================== */
@media (max-width: 520px) {
  #listings-sheet button[aria-label*="Drag"] {
    min-height: 60px !important;
    max-width: 160px !important;
    top: 0 !important;
  }
}

/* Small phones with short screens */
@media (max-width: 520px) and (max-height: 500px) {
  #listings-sheet button[aria-label*="Drag"] {
    min-height: 52px !important;
    top: -0.25rem !important;
  }
}

/* ========================================
 * MOUSE/POINTER DEVICE OPTIMIZATIONS
 * Desktop browser in mobile view
 * ======================================== */
@media (hover: hover) and (pointer: fine) and (max-width: 1023px) {
  #listings-sheet button[aria-label*="Drag"] {
    min-height: 48px !important; /* Standard for mouse */
    max-width: 120px !important;
    padding: 0.75rem 1.5rem !important;
    cursor: grab !important;
    top: 11px !important;
  }

  /* MOUSE DEVICES: Slightly smaller handle bar */
  #listings-sheet .w-12.h-1,
  #listings-sheet button[aria-label*="Drag"] .w-12.h-1 {
    width: 40px !important;
    height: 4px !important;
    background: var(--neutral-300) !important;
    box-shadow: none !important;
    transform: translateY(-6px) !important; /* Maintain handle up position */
  }

  /* MOUSE DEVICES: Standard padding */
  #listings-sheet {
    padding-top: 1rem !important;
    min-height: 140px !important;
  }

  /* Hover feedback for mouse users */
  #listings-sheet button[aria-label*="Drag"]:hover .w-12.h-1 {
    background: var(--neutral-400) !important;
    transform: translateY(-6px) scaleX(1.1) !important;
  }

  #listings-sheet button[aria-label*="Drag"]:active .w-12.h-1 {
    transform: translateY(-6px) scaleX(0.95) !important;
  }
}

/* ========================================
 * ACCESSIBILITY: Focus states
 * ======================================== */
#listings-sheet button[aria-label*="Drag"]:focus-visible {
  outline: 2px solid #1d4ed8 !important;
  outline-offset: 2px !important;
}

#listings-sheet button[aria-label*="Drag"]:focus:not(:focus-visible) {
  outline: none !important;
}

/* Active/grabbing state */
#listings-sheet button[aria-label*="Drag"]:active {
  cursor: grabbing !important;
}

#listings-sheet button[aria-label*="Drag"]:active .w-12.h-1 {
  background: var(--neutral-500) !important;
}

/* ========================================
 * BOTTOM SHEET HEADER POSITIONING
 * ======================================== */

/* Add small top transform to bottom sheet listings header */
#bottom-sheet-listings-header {
  transform: translate(-0.5rem, -2px) !important; /* Move left and up */
  position: relative !important;
  z-index: var(--z-sheet) !important; /* Ensure header is above any overlays */
  padding-top: 1.75rem !important; /* Override Tailwind pt-3 (0.75rem) with 1.75rem */
}

/* CRITICAL: Ensure buttons in header are always clickable */
#bottom-sheet-listings-header button,
#amenities-popup-trigger-mobile,
#sort-toggle-mobile {
  position: relative !important;
  z-index: var(--z-button-elevated) !important; /* Higher than header */
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Remove any blocking pseudo-elements or overlays from header */
#bottom-sheet-listings-header::before,
#bottom-sheet-listings-header::after {
  display: none !important;
  pointer-events: none !important;
}

/* Ensure button children don't block clicks */
#amenities-popup-trigger-mobile *,
#sort-toggle-mobile * {
  pointer-events: none !important; /* Let clicks pass through to button */
}

/* ========================================
 * TEXT SELECTION PREVENTION
 * ======================================== */

/* Make specific bottom sheet header text unselectable */
#listings-sheet #listings-count-mobile,
#listings-sheet #amenities-popup-trigger-mobile,
#listings-sheet #sort-toggle-mobile,
#listings-sheet #sort-label-mobile {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Also make the entire header area unselectable for better drag UX */
#listings-sheet .relative.px-4.pt-3.pb-2.flex.items-end.justify-between.flex-shrink-0 {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
  padding-top: 0.9rem !important; /* Override Tailwind pt-3 (0.75rem) with 1.75rem */
}

/* ========================================
 * CONSOLIDATED INTERACTIVE ELEMENTS
 * ======================================== */

/* Ensure all interactive elements work properly */
#listings-sheet button:not([aria-label*="Drag"]),
#listings-sheet a,
#listings-sheet input,
#listings-sheet select,
#listings-sheet textarea,
#listings-sheet .book-btn,
#listings-sheet .view-spot-btn,
#listings-sheet .spot-card-button,
#listings-sheet [data-action],
#listings-sheet .clickable,
#listings-sheet .clickable-address,
#listings-sheet .location-badge,
#listings-sheet .enhanced-tooltip-btn,
#listings-sheet .duration-chip,
#listings-sheet .policy-expandable-trigger {
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* CRITICAL: Fix text cursor issue - ensure no text cursor on interactive elements */
#listings-sheet * {
  cursor: default !important;
}

#listings-sheet button,
#listings-sheet a,
#listings-sheet .clickable,
#listings-sheet .clickable-address,
#listings-sheet .location-badge,
#listings-sheet [data-action],
#listings-sheet .enhanced-tooltip-btn,
#listings-sheet .duration-chip,
#listings-sheet .policy-expandable-trigger {
  cursor: pointer !important;
}

/* CRITICAL: Fix sort dropdown in bottom sheet */
#listings-sheet #sort-dropdown-mobile {
  position: fixed !important; /* Use fixed positioning to escape bottom sheet */
  z-index: var(--z-high-modal) !important; /* Very high z-index */
  background: white !important; /* Ensure solid background */
  opacity: 1 !important; /* Force full opacity */
  visibility: visible !important; /* Force visibility */
  pointer-events: auto !important; /* Enable interactions */
  isolation: isolate !important; /* Create new stacking context */
  contain: none !important; /* Don't contain z-index */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important; /* Enhanced shadow for visibility */
}

.dark #listings-sheet #sort-dropdown-mobile {
  background: #374151 !important; /* Dark background for dark mode */
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* CRITICAL: Fix sort options inside dropdown */
#listings-sheet #sort-dropdown-mobile .sort-option {
  background: white !important; /* Solid background */
  color: #374151 !important; /* Dark text */
  opacity: 1 !important; /* Full opacity */
  visibility: visible !important; /* Force visibility */
  pointer-events: auto !important; /* Enable clicks */
  cursor: pointer !important; /* Pointer cursor */
  padding: 0.5rem 0.75rem !important; /* Adequate padding */
  border: none !important; /* Remove borders */
  width: 100% !important; /* Full width */
  text-align: left !important; /* Left align text */
}

#listings-sheet #sort-dropdown-mobile .sort-option:hover {
  background: #f3f4f6 !important; /* Light gray hover */
  color: #1f2937 !important; /* Darker text on hover */
}

.dark #listings-sheet #sort-dropdown-mobile .sort-option {
  background: #374151 !important; /* Dark background */
  color: #f3f4f6 !important; /* Light text */
}

.dark #listings-sheet #sort-dropdown-mobile .sort-option:hover {
  background: #4b5563 !important; /* Lighter dark gray on hover */
  color: #ffffff !important; /* White text on hover */
}

/* Button color schemes and styling */
#listings-sheet .book-btn,
#listings-sheet .notify-btn,
#listings-sheet .contact-btn {
  font-weight: 600 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  border-radius: 0.5rem !important;
  transition: all 0.2s ease !important;
}

#listings-sheet .book-btn {
  background: #2563eb !important;
  color: white !important;
  border: 1px solid #1d4ed8 !important;
}

/* Book button hover effect only on desktop (not tablet/mobile) */
@media (min-width: 1024px) {
  #listings-sheet .book-btn:hover {
    background: #1d4ed8 !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-1px) !important;
  }
}

#listings-sheet .notify-btn {
  background: #ea580c !important;
  color: white !important;
}

/* Notify button hover effect only on desktop (not tablet/mobile) */
@media (min-width: 1024px) {
  #listings-sheet .notify-btn:hover {
    background: #c2410c !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-1px) !important;
  }
}

#listings-sheet .contact-btn {
  background: #4b5563 !important;
  color: white !important;
}

/* Contact button hover effect only on desktop (not tablet/mobile) */
@media (min-width: 1024px) {
  #listings-sheet .contact-btn:hover {
    background: #374151 !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-1px) !important;
  }
}

/* TABLET AND MOBILE: Disable all hover effects on bottom sheet listings */
@media (max-width: 1023px) {
  #listings-sheet .spot-card:hover,
  #listings-sheet .listing-item:hover,
  #listings-sheet [data-listing-id]:hover {
    transform: none !important;
    box-shadow: none !important;
    background: inherit !important;
    border-color: inherit !important;
  }

  #listings-sheet .spot-card:hover .spot-card-image img {
    transform: none !important;
  }
}

/* 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"],
/* bottomsheet.css - dark mode text contrast fix */
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 */

/* Cover computed styles that might result in gray-800 */

/* ============================================================================
   TOUCHSCREEN DEVICE RESPONSIVE FIXES
   ============================================================================ */

/* Actual touchscreen devices - constrain content width to prevent overflow */
@media (hover: none) and (pointer: coarse) {
  /* Bottom sheet content container - prevent horizontal overflow */
  #listings-sheet,
  #listings-content-mobile {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Bottom sheet inner content - add padding and constrain width */
  #listings-content-mobile {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    box-sizing: border-box !important;
  }

  /* Spot cards in bottom sheet - ensure they fit */
  #listings-content-mobile .spot-card {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Spot details page in bottom sheet - constrain width */
  #spot-detail-content,
  .spot-details-container {
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* All content inside spot details - prevent overflow */
  #spot-detail-content *,
  .spot-details-container * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Images in spot details - constrain to container */
  #spot-detail-content img,
  .spot-details-container img {
    max-width: 100% !important;
    height: auto !important;
  }
}