/* ==========================================
 * BOTTOMSHEET.CSS - MOBILE AND TABLET BOTTOM SHEET SYSTEM
 * FILE: /css/discover/components/bottomsheet.css
 * VERSION: v=20251001
 * ==========================================
 * PURPOSE: Mobile and tablet bottom sheet behavior and positioning
 * COVERAGE: Mobile (<=567px) and tablet (568px-1100px) bottom sheet with drag interactions
 * FEATURES: Backdrop blur, drag handles, responsive heights
 * IMPORTED BY: discover.html
 * STATUS: Active - mobile listings bottom sheet
 *
 * USES: @layer components for most styles
 * NOTE: Defensive CSS outside layer for maximum specificity
 *
 * REFACTORING AVAILABLE:
 * - Common touch target patterns → use .rs-bottom-sheet-button from responsive-system.css
 * - Pointer events management → use .rs-interactive-content / .rs-overlay-passthrough
 * - Bottom sheet spacing → use .rs-bottom-sheet-compact / .rs-bottom-sheet-card
 * - These utilities are available for gradual migration to reduce duplication
 * ========================================== */

/* Live contract for the discover listings sheet:
   - Desktop starts at 1101px; the sheet is hidden there and the desktop overlay owns listings.
   - Phones are <=567px; tablets are 568-1100px, with a legacy 520px card-density boundary.
   - BottomSheet.js owns transform/transition and explicit scroll-container heights at runtime.
   - This file owns sheet shell geometry and drag-handle positioning; listings.css owns scroll/content modes. */

/*   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*/

/* Bottom gap: at least legacy 0.5rem; grows with safe-area (home indicator). Used by sheet height math + BottomSheet.js visual viewport. */
body.discover-page {
  --discover-sheet-bottom-gap: max(0.5rem, env(safe-area-inset-bottom, 0px));
}

/* Extra scroll room so Message host / last controls clear home indicator + tab bar. */
body.discover-page.bottom-sheet-spot-details-mode {
  --spot-details-scroll-bottom-room: max(4.5rem, calc(var(--discover-sheet-bottom-gap) + 3.75rem));
}

/* Phone + tablet site tab bar: clear the fixed nav band + the Message host button. */
@media (max-width: 1023px) {
  body.discover-page.bottom-sheet-spot-details-mode:has(#mobile-bottom-nav) {
    --spot-details-scroll-bottom-room: max(
      5.25rem,
      calc(
        var(--discover-bottom-nav-clearance, var(--swiftspot-mobile-bottom-nav-offset-fallback, 4.5rem))
        + 1.25rem
      )
    );
  }
}

/* CRITICAL: Force correct initial state - highest specificity.
   Owns sheet chrome (position/size/safe-area). BottomSheet.js owns transform + height snaps. */
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;
  /* Flush to viewport bottom so there is no uncovered strip where the map receives clicks. */
  bottom: 0 !important;
  /* Safe area / home indicator lives inside the sheet box (pairs with BottomSheet._getResolvedSheetBottomGap). */
  padding-bottom: var(--discover-sheet-bottom-gap) !important;
  box-sizing: border-box !important;
  left: 0 !important;
  right: 0 !important;
  z-index: var(--z-sheet, 100) !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--surface-raised, #fff) !important;
  border-top-left-radius: var(--radius-sheet, 1.25rem) !important;
  border-top-right-radius: var(--radius-sheet, 1.25rem) !important;
  box-shadow: 0 -8px 32px rgba(28, 25, 23, 0.12), 0 -1px 0 rgba(28, 25, 23, 0.06) !important;
  border-top: 1px solid var(--discover-premium-line) !important;
  overflow-x: clip !important; /* Use clip to prevent horizontal scrolling without affecting drag handle */
  overflow-y: visible !important; /* CRITICAL: Allow drag handle to extend above top edge */
  max-width: 100% !important;
  /* Full viewport height; padding-bottom reserves safe area without leaving a hit-test gap below the sheet. */
  height: 100vh !important;
  height: 100svh !important; /* Stable — 100dvh jumps when iOS URL bar toggles on map pan release */
  max-height: 100vh !important;
  max-height: 100svh !important;
  visibility: visible !important;
  opacity: 1 !important;
  /* INDUSTRY STANDARD: Whole sheet is draggable - capture pointer events so user can drag from anywhere */
  pointer-events: auto !important;
  cursor: grab !important;
}

/* Pass through touches on the translated-offscreen sheet box so the map stays tappable
   (Safari/DuckDuckGo URL bar dismiss, map pan). Children keep interaction. */
@media (max-width: 1100px) {
  html body.discover-page #listings-sheet {
    pointer-events: none !important;
  }

  html body.discover-page #listings-sheet > * {
    pointer-events: auto !important;
  }
}

/* Boot position before BottomSheet.js: under top bar; bottom gap mirrors JS min Y. */
@media (max-width: 1100px) {
  html body.discover-page #listings-sheet:not(.sheet-position-ready) {
    /* Match BottomSheet listings min translate: topbar + 8px + sheet bottom gap. */
    transform: translate3d(
      0,
      max(
        calc(
          var(--discover-current-topbar-height, var(--discover-topbar-height, 4.75rem))
          + 8px
          + var(--discover-sheet-bottom-gap, 0.5rem)
        ),
        calc(100svh * (1 - 0.92))
      ),
      0
    ) !important;
    transition: none !important;
  }
}

#listings-sheet.sheet-position-ready {
  transition: box-shadow var(--transition-slow, 0.3s ease),
    background-color var(--transition-base, 0.2s ease);
}

/* Boot reveal is the page shell fade. Do not opacity-gate the sheet after unlock —
   that left a map-only gap that read as the sheet shooting away then returning. */
#listings-sheet.dragging {
  cursor: grabbing !important;
  touch-action: none !important;
}

@media (max-width: 640px) {
  body.discover-page[data-discover-sheet-state="collapsed"] #listings-sheet {
    border-top-left-radius: 1rem !important;
    border-top-right-radius: 1rem !important;
    box-shadow: 0 -3px 14px rgba(28, 25, 23, 0.12), 0 -1px 0 rgba(28, 25, 23, 0.04) !important;
  }

  body.discover-page[data-discover-sheet-state="preview"] #listings-sheet {
    border-top-left-radius: 1.1rem !important;
    border-top-right-radius: 1.1rem !important;
    box-shadow: 0 -8px 24px rgba(28, 25, 23, 0.16), 0 -1px 0 rgba(28, 25, 23, 0.06) !important;
  }

  body.discover-page[data-discover-sheet-state="expanded"] #listings-sheet {
    border-top-left-radius: 1.2rem !important;
    border-top-right-radius: 1.2rem !important;
    box-shadow: 0 -12px 34px rgba(28, 25, 23, 0.18), 0 -1px 0 rgba(28, 25, 23, 0.08) !important;
  }

  .dark body.discover-page[data-discover-sheet-state="collapsed"] #listings-sheet,
  .dark body.discover-page[data-discover-sheet-state="preview"] #listings-sheet,
  .dark body.discover-page[data-discover-sheet-state="expanded"] #listings-sheet {
    box-shadow: 0 -8px 26px rgba(0, 0, 0, 0.45), 0 -1px 0 rgba(255, 255, 255, 0.08) !important;
  }
}

html body.discover-page.bottom-sheet-dragging #listings-sheet,
body.discover-page.bottom-sheet-dragging #listings-sheet {
  will-change: transform !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transition: none !important;
  contain: layout style paint !important;
  isolation: isolate !important;
  box-shadow: 0 -4px 14px rgba(28, 25, 23, 0.12) !important;
}

html body.discover-page.bottom-sheet-dragging #listings-scroll-shell,
body.discover-page.bottom-sheet-dragging #listings-scroll-shell,
html body.discover-page.bottom-sheet-dragging #listings-content-sheet,
body.discover-page.bottom-sheet-dragging #listings-content-sheet,
html body.discover-page.bottom-sheet-dragging #bottom-sheet-listings-header,
body.discover-page.bottom-sheet-dragging #bottom-sheet-listings-header {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

html body.discover-page.bottom-sheet-dragging #listings-sheet .spot-card,
body.discover-page.bottom-sheet-dragging #listings-sheet .spot-card {
  transition: none !important;
  animation-play-state: paused !important;
  pointer-events: none !important;
  contain: paint layout style !important;
}

html body.discover-page.bottom-sheet-dragging #listings-sheet .spot-card *,
body.discover-page.bottom-sheet-dragging #listings-sheet .spot-card * {
  animation-play-state: paused !important;
}

/* Interactive elements inside bottom sheet retain pointer-events for clicks/taps */
#listings-sheet button,
#listings-sheet a,
#listings-sheet input,
#listings-sheet select,
#listings-sheet textarea,
#listings-sheet [role="button"],
#listings-sheet [tabindex],
#listings-sheet .spot-card,
#listings-sheet .clickable,
#listings-sheet .clickable-address,
#listings-sheet #listings-scroll-shell,
#listings-sheet #listings-content-sheet,
#listings-sheet .discover-lower-marketplace,
#listings-sheet .discover-lower-marketplace--sheet,
#listings-sheet #bottom-sheet-listings-header,
#listings-sheet [class*="scroll"],
#listings-sheet [style*="overflow"] {
  pointer-events: auto !important;
}

.dark html body.discover-page #listings-sheet,
.dark body.discover-page #listings-sheet,
.dark #listings-sheet {
  background: var(--color-dark-surface, #171717) !important;
  box-shadow: var(--shadow-sheet-dark, 0 -8px 32px rgb(0 0 0 / 50%)) !important;
  border-top: 1px solid rgb(255 255 255 / 10%) !important;
}

/* CRITICAL: Hide bottom sheet on desktop - only show on mobile and tablet/tablet */

/* Ensure bottom sheet is visible and properly initialized on load (mobile/tablet only) */

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

@layer components {

/* BOTTOMSHEET.CSS: Main bottom sheet container */
#listings-sheet {
  --sheet-card-border: var(--discover-premium-line);
  --sheet-card-border-tablet: var(--discover-premium-line);
  --sheet-card-border-active: var(--discover-premium-line-strong);
  --sheet-card-border-tablet-active: var(--discover-premium-line-strong);
  --sheet-card-border-dark: var(--discover-premium-line);
  --sheet-card-border-dark-tablet: var(--discover-premium-line);
  --sheet-card-border-dark-active: var(--discover-premium-line-strong);
  --sheet-card-border-dark-tablet-active: var(--discover-premium-line-strong);

  backdrop-filter: none; /* PERFORMANCE: Disabled - very expensive on mobile and tablet */
  touch-action: pan-y;

  /* CRITICAL: Allow filter container to visually escape from list sheet */
  clip: auto !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  contain: none !important; /* Don't contain layout/paint to allow filter popup to escape */
  isolation: auto !important; /* Don't create stacking context that traps filter popup */

  /* PERFORMANCE: Minimal transitions for smooth 60fps */
  transition: box-shadow var(--transition-slow, 0.3s ease),
        background-color var(--transition-base, 0.2s ease);
  /* CRITICAL: NO transform transition in CSS - JavaScript controls all transform animations */
  /* PERFORMANCE: backdrop-filter transition removed - too expensive */
}

/* Vertical spacing between spot cards in the sheet (base: comfortable gap) */
#listings-sheet #listings-content-sheet.space-y-2 > * + * {
  margin-top: 0.75rem !important;
}
/* Mobile visibility (≤640px) - FULL WIDTH */

/* 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;
    /* Sheet shell captures hits edge-to-edge (safe area is padding, not a viewport gap). */
    pointer-events: auto !important;
    /* CRITICAL: Full width mobile positioning for small tablets */
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    bottom: 0 !important;
    padding-bottom: var(--discover-sheet-bottom-gap) !important;
    box-sizing: border-box !important;
    min-height: 120px !important;
    height: 100vh !important;
    height: 100svh !important;
    max-height: 100vh !important;
    max-height: 100svh !important;
    overflow-y: visible !important;
    /* Stay below discover datetime picker / backdrop (--z-discover-datetime-*); do not use --z-modal here */
    z-index: var(--z-sheet, 100) !important;
    border-radius: var(--radius-sheet, 1.25rem) var(--radius-sheet, 1.25rem) 0 0 !important;
    box-shadow: var(--shadow-sheet, 0 -8px 32px rgb(0 0 0 / 12%)),
        0 0 0 1px rgb(0 0 0 / 5%) !important;
  }

  /* CRITICAL: Ensure support chat appears above bottom sheet on small tablets */
  #supportChatWidget {
    z-index: var(--z-support-chat) !important; /* Higher than bottom sheet (9999) */
    position: fixed !important; /* FAB anchor; button stays in flex flow inside widget */
    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 */
  }

  #supportChatButton {
    visibility: visible !important; /* Force visible */
    pointer-events: auto !important; /* Enable interactions */
  }

  /* 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 (641px-1100px) — full-bleed list overlay (same Map/List model as phone). */
@media (min-width: 641px) and (max-width: 1100px) {
  #listings-sheet,
  #listings-sheet.hidden,
  body.discover-page #listings-sheet,
  html body.discover-page #listings-sheet {
    --discover-tablet-sheet-width: 100%;
    --discover-tablet-sheet-max-width: 100%;
    --discover-tablet-sheet-left: 0;

    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    /* Shell passes through when overlay is hidden; children re-enable when list is up. */
    pointer-events: none !important;
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    bottom: 0 !important;
    padding-bottom: var(--discover-sheet-bottom-gap) !important;
    box-sizing: border-box !important;
    min-height: 120px !important;
    height: 100vh !important;
    height: 100svh !important;
    max-height: 100vh !important;
    max-height: 100svh !important;
    overflow-y: visible !important;
    z-index: var(--z-sheet, 100) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: box-shadow 300ms ease !important;
  }

  /* Spot details: elevated z; still full-bleed under top bar. */
  body.bottom-sheet-spot-details-mode #listings-sheet,
  body.discover-page.bottom-sheet-spot-details-mode #listings-sheet {
    z-index: var(--z-sheet-elevated, 110) !important;
    transition: box-shadow 300ms ease !important;
  }

  /* FALLBACK: Also check for spot-details-scroll-active class directly */
  #listings-sheet #listings-content-sheet.spot-details-scroll-active {
    width: 100% !important; /* Ensure content fills expanded container */
    max-width: none !important;
  }

  /* 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 {
    z-index: var(--z-support-chat) !important; /* Higher than bottom sheet (9999) */
    position: fixed !important; /* FAB anchor; button stays in flex flow inside widget */
    display: flex !important; /* Ensure visibility */
    visibility: visible !important; /* Force visible */
    opacity: 1 !important; /* Force opaque */
    pointer-events: auto !important; /* Enable interactions */
  }

  #supportChatButton {
    visibility: visible !important; /* Force visible */
    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: solid full-bleed overlay (no floating card shadow). */
  .dark #listings-sheet,
  .dark #listings-sheet.hidden,
  .dark body.discover-page #listings-sheet,
  html.dark body.discover-page #listings-sheet {
    background: var(--color-dark-surface, #171717) !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border-top: 1px solid rgb(255 255 255 / 10%) !important;
  }
}

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

body.discover-page #supportChatButton {
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Discover large mode ≤1100px: consolidated in bottomsheet.css @media (max-width: 1100px) block below */

/* ENHANCED: Mobile content spacing and layout (≤520px) */

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

  /* Drag handle position is controlled by single top value in base rule - no per-breakpoint override */

  /* ENHANCED: Tablet card layout optimizations — legacy cards only */
  #listings-sheet .spot-card:not(.discover-listing-card) {
    margin-top: 0 !important;
    margin-bottom: 0.375rem !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.97) !important; /* Slightly more opaque */
    backdrop-filter: none !important; /* PERFORMANCE: Disabled */
    border: 1.5px solid var(--sheet-card-border-tablet) !important;
    box-shadow: 0 2px 4px rgba(28, 25, 23, 0.08),
        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:not(.discover-listing-card):active {
    transform: translateY(-1px) !important;
    border-color: var(--sheet-card-border-tablet-active) !important;
    box-shadow: 0 2px 10px rgba(28, 25, 23, 0.16),
        0 1px 4px rgba(0, 0, 0, 0.08) !important;
  }

  /* ENHANCED: Dark mode tablet cards */
  .dark #listings-sheet .spot-card:not(.discover-listing-card) {
    background: rgba(31, 41, 55, 0.97) !important; /* More opaque for tablets */
    border: 1.5px solid var(--sheet-card-border-dark-tablet) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22),
        0 1px 2px rgba(0, 0, 0, 0.2) !important;
  }

  .dark #listings-sheet .spot-card:not(.discover-listing-card):active {
    border-color: var(--sheet-card-border-dark-tablet-active) !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 — legacy only */
  #listings-sheet .spot-card:not(.discover-listing-card) button,
  #listings-sheet .spot-card:not(.discover-listing-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 */
  /* CRITICAL: Spot cards need pointer cursor, not text cursor */
  #listings-sheet .spot-card {
    pointer-events: auto !important;
    user-select: none !important; /* Cards are clickable, not selectable */
    cursor: pointer !important; /* Pointer cursor for clickable cards */
  }

  /* Other elements can be selectable */
  #listings-sheet *:not(.spot-card):not(.spot-card *) {
    pointer-events: auto !important;
    user-select: text !important;
  }

  /* CRITICAL: Spot card children inherit pointer cursor */
  #listings-sheet .spot-card *:not(button):not(a):not([role="button"]):not(input):not(select):not(.clickable-address) {
    cursor: pointer !important;
    user-select: none !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) */

/* Desktop support chat (≥1101px): geometry from support-chat-widget.css vars; visibility only here. */
@media (min-width: 1101px) {
  body.discover-page #supportChatWidget {
    z-index: var(--z-support-chat) !important;
    position: fixed !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  body.discover-page #supportChatButton {
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.discover-page #supportChatDialog:not([data-size-mode="large"]):not(.support-chat-keyboard-fit) {
    z-index: var(--z-support-chat) !important;
    position: fixed !important;
  }

  body.discover-page #supportChatDialog[data-size-mode="large"]:not(.support-chat-keyboard-fit) {
    z-index: var(--z-support-chat) !important;
    position: fixed !important;
    width: 480px !important;
    height: min(620px, calc(100dvh - 9rem)) !important;
    max-width: min(480px, calc(100vw - 2rem)) !important;
    max-height: min(85vh, calc(100dvh - 9rem)) !important;
    min-height: 420px !important;
  }
}

  /* Mobile large mode overrides for discover page */


  /* Ultra small mobile large mode overrides for discover page */


/* ULTRA SMALL VERTICAL SCREENS (≤400px height) - CRITICAL positioning fixes */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 768px) {
  #listings-sheet {
    max-height: 120vh;
    min-height: 120px;
  }
}

@media (max-width: 1100px) 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.5rem !important; /* Minimal but readable spacing between cards */
  }

  /* Ultra small screens: Very compact spot cards — legacy only */
  #listings-sheet .spot-card:not(.discover-listing-card) {
    margin-bottom: 0.25rem !important;
    border-radius: 6px !important; /* Very small radius */
    padding: 0.375rem !important; /* Minimal internal padding */
    font-size: 0.75rem !important; /* Smaller text */
    border: 1.5px solid var(--sheet-card-border) !important;
  }

  .dark #listings-sheet .spot-card:not(.discover-listing-card) {
    border: 1.5px solid var(--sheet-card-border-dark) !important;
  }

  /* Ultra small screens: Reduce button sizes — legacy only */
  #listings-sheet .spot-card:not(.discover-listing-card) .book-btn,
  #listings-sheet .spot-card:not(.discover-listing-card) .notify-btn,
  #listings-sheet .spot-card:not(.discover-listing-card) .contact-btn {
    padding: 0.375rem 0.75rem !important; /* Smaller buttons */
    font-size: 0.75rem !important; /* Smaller text */
    min-height: 32px !important; /* Smaller touch targets */
  }

  /* Ultra-short viewports: keep filters/sort readable and tappable (avoid 9px / 22px targets). */
  #amenities-popup-trigger-sheet,
  #sort-toggle-sheet,
  button#amenities-popup-trigger-sheet,
  button#sort-toggle-sheet {
    font-size: var(--type-badge-size, 0.75rem) !important;
    padding: 0.25rem 0.375rem !important;
    min-height: 32px !important;
    min-width: auto !important;
    max-width: fit-content !important;
    width: auto !important;
    gap: 0.125rem !important;
    border-radius: 4px !important;
  }

  #sort-toggle-sheet,
  button#sort-toggle-sheet {
    transform: translateX(2px) !important;
  }

  #amenities-popup-trigger-sheet,
  button#amenities-popup-trigger-sheet {
    transform: translateX(-2px) !important;
  }

  #amenities-popup-trigger-sheet span,
  #sort-toggle-sheet span,
  #sort-label-sheet {
    font-size: var(--type-badge-size, 0.75rem) !important;
  }

  /* Larger button icons for better touch targets */
  #amenities-popup-trigger-sheet svg {
    width: 14px !important; /* Increased from 10px for better visibility */
    height: 14px !important; /* Increased from 10px for better visibility */
  }

  #sort-toggle-sheet svg {
    width: 10px !important;
    height: 10px !important;
  }

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

  #bottom-sheet-listings-header .listings-header-actions--sheet {
    transform: none !important;
    gap: 0.25rem !important;
  }

}

/* VERY SMALL VERTICAL SCREENS (401px-500px height) - Optimize bottom sheet positioning */
@media (max-width: 1100px) 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.625rem !important; /* Comfortable spacing between cards */
  }

  /* Very small screens: Compact spot cards — legacy only */
  #listings-sheet .spot-card:not(.discover-listing-card) {
    margin-bottom: 0.375rem !important;
    border-radius: 8px !important; /* Smaller radius */
    padding: 0.5rem !important; /* Reduce internal padding */
    border: 1.5px solid var(--sheet-card-border) !important;
  }

  .dark #listings-sheet .spot-card:not(.discover-listing-card) {
    border: 1.5px solid var(--sheet-card-border-dark) !important;
  }

}

/* SMALL VERTICAL SCREENS (501px-600px height) - Moderate optimizations */
@media (max-width: 1100px) 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.75rem !important; /* Comfortable spacing between cards */
  }

  /* Small screens: Moderate spot card adjustments — legacy only */
  #listings-sheet .spot-card:not(.discover-listing-card) {
    margin-bottom: 0.4375rem !important;
    border-radius: 10px !important;
    border: 1.5px solid var(--sheet-card-border) !important;
  }

  .dark #listings-sheet .spot-card:not(.discover-listing-card) {
    border: 1.5px solid var(--sheet-card-border-dark) !important;
  }
}

body.discover-page.bottom-sheet-spot-details-mode #listings-sheet #spot-detail-view,
body.bottom-sheet-spot-details-mode #listings-sheet #spot-detail-view {
  margin-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
}

@media (max-width: 567px) {
  /* Peek/spot-details sheet lip only — list mode is a flush panel (see list-mode rules below). */
  html body.discover-page:not([data-discover-map-mode="list"]) #listings-sheet,
  body.discover-page:not([data-discover-map-mode="list"]) #listings-sheet {
    border-top-left-radius: var(--discover-mobile-sheet-radius, 1rem) !important;
    border-top-right-radius: var(--discover-mobile-sheet-radius, 1rem) !important;
    box-shadow: 0 -5px 18px rgba(28, 25, 23, 0.12) !important;
    padding-top: 0.875rem !important;
    min-height: 128px !important;
  }

  .dark body.discover-page:not([data-discover-map-mode="list"]) #listings-sheet,
  html.dark body.discover-page:not([data-discover-map-mode="list"]) #listings-sheet {
    box-shadow: 0 -5px 18px rgba(0, 0, 0, 0.42) !important;
  }

}

/* ========================================
 * TOUCH DEVICE OPTIMIZATIONS
 * Actual touchscreen devices (phones/tablets)
 * ======================================== */
@media (hover: none) and (pointer: coarse) and (max-width: 1100px) {
  /* Space-type toggle styling: listings.css #bottom-sheet-listings-header (single source) */

  /* Browse overlay hides the drag handle — do not reserve drag-handle padding.
   * List mode is a flush panel; keep lip padding for map peek / non-list only. */
  body.discover-page:not(.bottom-sheet-spot-details-mode):not([data-discover-map-mode="list"]) #listings-sheet {
    padding-top: 0.875rem !important;
    min-height: 128px !important;
  }

  body.discover-page.bottom-sheet-spot-details-mode #listings-sheet {
    padding-top: 0.7rem !important;
    min-height: 120px !important;
  }

  #amenities-popup-trigger-sheet,
  button#amenities-popup-trigger-sheet {
    transform: translateX(-4px) !important;
  }
}

/* ACCESSIBILITY: Focus states */
#listings-sheet .bottom-sheet-drag-button:focus-visible {
  outline: 2px solid var(--discover-premium-muted) !important;
  outline-offset: 2px !important;
}

#listings-sheet .bottom-sheet-drag-button:focus:not(:focus-visible) {
  outline: none !important;
}

/* Active/grabbing state */
#listings-sheet .bottom-sheet-drag-button:active {
  cursor: grabbing !important;
}

#listings-sheet .bottom-sheet-drag-button:active .bottom-sheet-drag-bar {
  background: rgba(120, 113, 108, 0.55) !important;
  opacity: 1 !important;
}

/* BOTTOM SHEET HEADER POSITIONING */

/* Bottom sheet listings header: no horizontal nudge (avoid clash with grid layout below max-width 1100px). */
#bottom-sheet-listings-header {
  transform: none !important;
  position: relative !important;
  z-index: var(--z-sheet) !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  contain: none !important;
  isolation: auto !important;
}

/* CRITICAL: Ensure filter/sort controls are clickable — exclude segmented space-type + long-term toggles */
#bottom-sheet-listings-header .listings-header-control:not(.sheet-spot-details-back-btn),
#bottom-sheet-listings-header #amenities-popup-trigger-sheet,
#bottom-sheet-listings-header #discover-refine-trigger-sheet,
#bottom-sheet-listings-header #sort-toggle-sheet,
#bottom-sheet-listings-header .bottom-sheet-drag-button {
  position: relative !important;
  z-index: var(--z-button-elevated) !important; /* Higher than header */
  pointer-events: auto !important;
  cursor: pointer !important;
  /* Keep controls compact horizontally with a comfortable touch target. */
  width: auto !important;
  max-width: fit-content !important;
  min-width: auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: 44px !important;
  /* CRITICAL: Ensure button is visible in normal listings mode */
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* CRITICAL: Ensure sort toggle is visible when NOT in spot-details mode */
#listings-sheet #sort-toggle-sheet:not([style*="display: none"]),
body:not(.bottom-sheet-spot-details-mode) #listings-sheet #sort-toggle-sheet,
body:not(.bottom-sheet-spot-details-mode) #sort-toggle-sheet {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* CRITICAL: Ensure filters/sort container is visible when NOT in spot-details mode */
body:not(.bottom-sheet-spot-details-mode) #bottom-sheet-listings-header .listings-header-actions--sheet {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !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-sheet *,
#sort-toggle-sheet * {
  pointer-events: none !important; /* Let clicks pass through to button */
}

/* Ensure the relative wrapper div around sort button doesn't expand clickable area */
#bottom-sheet-listings-header > .listings-header-actions--sheet > .listings-header-sort-wrap {
  position: relative !important;
  width: auto !important;
  max-width: fit-content !important;
  min-width: auto !important;
  height: auto !important;
  max-height: fit-content !important;
  min-height: auto !important;
  /* Ensure it only contains the button and dropdown, doesn't expand */
  display: inline-block !important;
  overflow: visible !important;
  /* CRITICAL: Ensure container is visible when NOT in spot-details mode */
  visibility: visible !important;
  opacity: 1 !important;
}

/* CRITICAL: Ensure relative container is visible in normal mode */
body:not(.bottom-sheet-spot-details-mode) #bottom-sheet-listings-header > .listings-header-actions--sheet > .listings-header-sort-wrap {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* TEXT SELECTION PREVENTION */

/* Make specific bottom sheet header text unselectable */
#listings-sheet #listings-count-sheet,
#listings-sheet #amenities-popup-trigger-sheet,
#listings-sheet #sort-toggle-sheet,
#listings-sheet #sort-label-sheet {
  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 #bottom-sheet-listings-header {
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* CONSOLIDATED INTERACTIVE ELEMENTS */

/* Ensure all interactive elements work properly */
#listings-sheet button:not(.bottom-sheet-drag-button),
#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 .custom-duration-btn,
#listings-sheet .spot-detail-duration__chip--custom,
#listings-sheet #custom-duration-btn,
#listings-sheet #apply-custom-duration,
#listings-sheet #cancel-custom-duration,
#listings-sheet .policy-expandable-trigger {
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* CRITICAL: Fix text cursor issue - target only non-interactive text elements */
/* Instead, explicitly set cursor for interactive elements */

/* CRITICAL: Spot cards must have pointer cursor for clickable feel */
#listings-sheet .spot-card,
#listings-sheet .spot-card:hover,
#listings-content-sheet .spot-card,
#listings-content-sheet .spot-card:hover {
  cursor: pointer !important;
}

/* CRITICAL: All interactive elements must have pointer cursor */
#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 .custom-duration-btn,
#listings-sheet .spot-detail-duration__chip--custom,
#listings-sheet #custom-duration-btn,
#listings-sheet #apply-custom-duration,
#listings-sheet #cancel-custom-duration,
#listings-sheet .policy-expandable-trigger,
#listings-sheet .spot-card,
#listings-sheet .photo-nav-btn,
#listings-sheet .photo-nav-prev,
#listings-sheet .photo-nav-next,
#listings-sheet .photo-indicator,
#listings-sheet .contact-host-btn,
#listings-sheet .photo-book-btn,
#listings-sheet .reviews-toggle {
  cursor: pointer !important;
}

/* CRITICAL: Fix sort dropdown in bottom sheet */
/* SIMPLIFIED: Only apply styles when dropdown is visible (not hidden) */
/* CRITICAL: Only show dropdown when explicitly NOT hidden and NOT set to display:none */
#listings-sheet #sort-dropdown-sheet:not(.hidden):not([style*="display: none"]),
body > #sort-dropdown-sheet:not(.hidden):not([style*="display: none"]) {
  position: fixed !important; /* Use fixed positioning to escape bottom sheet */
  z-index: var(--z-maximum) !important; /* Maximum z-index to ensure visibility above everything */
  background: #E5E7EB !important; /* Darker background - neutral-200 */
  opacity: 1 !important; /* Force full opacity */
  visibility: visible !important; /* Force visibility */
  pointer-events: auto !important; /* Enable interactions */
  display: block !important; /* Ensure it's displayed when visible */
  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.2) !important; /* Stronger shadow for better contrast */
  /* Width and left/right come from JS (content-sized); cap width only */
  max-width: calc(100vw - 16px) !important;
}

/* When hidden, ensure it's actually hidden */
/* Use maximum specificity to override any conflicting rules */
html body #listings-sheet #sort-dropdown-sheet.hidden,
body > #sort-dropdown-sheet.hidden,
#sort-dropdown-sheet.hidden,
#listings-sheet #sort-dropdown-sheet.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important; /* Reset positioning when hidden */
  z-index: -1 !important; /* Ensure it's behind everything when hidden */
}

.dark #listings-sheet #sort-dropdown-sheet {
  background: #1F2937 !important; /* Much darker background - neutral-800 */
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important; /* Stronger shadow */
}

/* CRITICAL: Fix sort options inside dropdown */
#listings-sheet #sort-dropdown-sheet .sort-option,
body > #sort-dropdown-sheet .sort-option,
#sort-dropdown-sheet .sort-option {
  background: #E5E7EB !important; /* Darker background - neutral-200 */
  color: #111827 !important; /* Dark text - neutral-900 */
  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-sheet .sort-option:hover {
  background: #D1D5DB !important; /* Slightly darker on hover - neutral-300 */
  color: #111827 !important; /* Keep dark text on hover */
}

.dark #listings-sheet #sort-dropdown-sheet .sort-option {
  background: #1F2937 !important; /* Much darker background - neutral-800 */
  color: #F9FAFB !important; /* Brighter text - neutral-50 */
}

.dark #listings-sheet #sort-dropdown-sheet .sort-option:hover {
  background: #374151 !important; /* Lighter on hover - neutral-700 */
  color: #fff !important; /* White text on hover */
}

@media (max-width: 567px) {
  #listings-sheet #sort-dropdown-sheet:not(.hidden):not([style*="display: none"]),
  body > #sort-dropdown-sheet:not(.hidden):not([style*="display: none"]) {
    max-width: calc(100vw - (var(--discover-mobile-edge, 0.625rem) + var(--discover-mobile-edge-right, 0.625rem))) !important;
    max-height: min(15rem, 42dvh) !important;
    border-radius: var(--discover-mobile-panel-radius, 0.875rem) !important;
    overflow-y: auto !important;
  }

  #listings-sheet #sort-dropdown-sheet .sort-option,
  body > #sort-dropdown-sheet .sort-option,
  #sort-dropdown-sheet .sort-option {
    min-height: 2.25rem !important;
    padding: 0.45rem 0.625rem !important;
    font-size: var(--discover-mobile-font-sm, 0.75rem) !important;
    line-height: 1.15 !important;
  }
}

/* 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: var(--border-radius-base, 0.5rem) !important;
  transition: opacity var(--transition-base, 0.2s ease), transform var(--transition-base, 0.2s ease), background-color var(--transition-base, 0.2s ease) !important;
}

#listings-sheet .book-btn {
  background: var(--color-brand-accent) !important;
  color: var(--color-brand-accent-text) !important;
  border: 1px solid var(--color-brand-accent) !important;
}

/* Book button hover effect only on desktop (not tablet/mobile) */

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

/* Notify button hover effect only on desktop (not tablet/mobile) */

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

/* Contact button hover effect only on desktop (not tablet/mobile) */

/* TABLET AND MOBILE: Disable all hover effects on bottom sheet listings */

/* NOTE: Dark mode high-specificity overrides consolidated in dark-mode.css */

/*   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 {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important; /* Use clip to prevent horizontal scrolling without affecting drag handle */
    overflow-y: visible !important; /* CRITICAL: Allow drag handle to extend above top edge */
    box-sizing: border-box !important;
    /* CRITICAL: Allow filter container to visually escape - override overflow-x for filter popup */
    clip: auto !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }

  /* Bottom sheet inner content - constrain width and add side padding */
  #listings-content-sheet {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    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-sheet .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: 100% !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 (amenity chips wrap instead of scroll) */
  #spot-detail-content *:not(.spot-detail-amenity),
  .spot-details-container *:not(.spot-detail-amenity) {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #listings-content-sheet .spot-details-container .spot-detail-amenities {
    overflow-x: visible !important;
    overflow-y: visible !important;
  }

  /* Images in spot details - constrain to container (exclude gallery hero images) */
  #spot-detail-content img:not(.photo-carousel-image):not(.photo-static-image),
  .spot-details-container img:not(.photo-carousel-image):not(.photo-static-image) {
    max-width: 100% !important;
    height: auto !important;
  }
}

/*   LIST SHEET: Owned Spot Badge and View Spot Button Positioning*/

/* Apply small bottom transform to owned spot container in list sheet */
#listings-sheet .spot-card .flex > div:last-child.flex-col.items-center.justify-center,
#listings-sheet .spot-card .flex > div:last-child.flex.flex-col.items-center.justify-center {
  transform: translateY(0.25rem) !important; /* Small bottom transform for better alignment */
}

/* Alternative: Use :has() selector for more specific targeting */
#listings-sheet .spot-card .flex > div:last-child.flex-col:has(.view-spot-btn):has(span[class*="bg-amber-100"]),
#listings-sheet .spot-card .flex > div:last-child.flex-col:has(.view-spot-btn):has(span[class*="bg-amber-900"]),
#listings-sheet .spot-card .flex > div:last-child.flex.flex-col:has(.view-spot-btn):has(span[class*="bg-amber-100"]),
#listings-sheet .spot-card .flex > div:last-child.flex.flex-col:has(.view-spot-btn):has(span[class*="bg-amber-900"]) {
  transform: translateY(0.95rem) !important; /* Small bottom transform for better alignment */
}

/* iPhone: Move My Spot and View Spot buttons down slightly in list */
@media (max-width: 640px) {
  #listings-sheet .spot-card .flex > div:last-child.flex-col:has(.view-spot-btn):has(span[class*="bg-amber-100"]),
  #listings-sheet .spot-card .flex > div:last-child.flex-col:has(.view-spot-btn):has(span[class*="bg-amber-900"]),
  #listings-sheet .spot-card .flex > div:last-child.flex.flex-col:has(.view-spot-btn):has(span[class*="bg-amber-100"]),
  #listings-sheet .spot-card .flex > div:last-child.flex.flex-col:has(.view-spot-btn):has(span[class*="bg-amber-900"]),
  #listings-content-sheet .spot-card .flex > div:last-child.flex-col:has(.view-spot-btn):has(span[class*="bg-amber-100"]),
  #listings-content-sheet .spot-card .flex > div:last-child.flex-col:has(.view-spot-btn):has(span[class*="bg-amber-900"]),
  #listings-content-sheet .spot-card .flex > div:last-child.flex.flex-col:has(.view-spot-btn):has(span[class*="bg-amber-100"]),
  #listings-content-sheet .spot-card .flex > div:last-child.flex.flex-col:has(.view-spot-btn):has(span[class*="bg-amber-900"]) {
    transform: translateY(1.25rem) !important;
  }
}

/* Ensure book button containers do NOT get this transform */
#listings-sheet .spot-card .flex > div:last-child.flex-col:has(.book-btn):not(:has(.view-spot-btn)),
#listings-sheet .spot-card .flex > div:last-child.flex.flex-col:has(.book-btn):not(:has(.view-spot-btn)) {
  transform: none !important; /* No transform for regular book buttons */
}

/* iPhone: Smaller My Spot badge and View Spot button in bottom sheet listings */
@media (max-width: 640px) {
  #listings-sheet .spot-card .flex > div:last-child.flex-col:has(.view-spot-btn) > span,
  #listings-sheet .spot-card .flex > div:last-child.flex.flex-col:has(.view-spot-btn) > span,
  #listings-content-sheet .spot-card .flex > div:last-child.flex-col:has(.view-spot-btn) > span,
  #listings-content-sheet .spot-card .flex > div:last-child.flex.flex-col:has(.view-spot-btn) > span {
    padding: 0.25rem 0.375rem !important;
    font-size: 0.625rem !important;
    line-height: 1.2 !important;
    gap: 0.25rem !important;
  }
  #listings-sheet .spot-card .flex > div:last-child.flex-col:has(.view-spot-btn) > span svg,
  #listings-sheet .spot-card .flex > div:last-child.flex.flex-col:has(.view-spot-btn) > span svg,
  #listings-content-sheet .spot-card .flex > div:last-child.flex-col:has(.view-spot-btn) > span svg,
  #listings-content-sheet .spot-card .flex > div:last-child.flex.flex-col:has(.view-spot-btn) > span svg {
    width: 0.625rem !important;
    height: 0.625rem !important;
  }
  #listings-sheet .spot-card .view-spot-btn,
  #listings-content-sheet .spot-card .view-spot-btn {
    padding: 0.375rem 0.5rem !important;
    font-size: 0.625rem !important;
    line-height: 1.2 !important;
    min-height: 28px !important;
  }
}

} /* End @layer components */

@media (min-width: 1101px) {
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;
    /* Reset positioning styles on desktop to prevent stuck position when switching to mobile */
    transform: none !important;
    top: auto !important;
    bottom: 0 !important;
    position: fixed !important;
    /* CRITICAL: Remove any stacking context creation on desktop */
    isolation: auto !important;
    contain: 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-sheet {
    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;
  }

#listings-sheet .book-btn:hover {
    background: var(--color-brand-accent-hover) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-1px) !important;
  }

#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:hover {
    background: #374151 !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-1px) !important;
  }
}

@media (max-width: 1100px) {
  #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 */
    /* Ensure correct positioning when switching from desktop to mobile */
    position: fixed !important;
    bottom: 0 !important;
    padding-bottom: var(--discover-sheet-bottom-gap) !important;
    box-sizing: border-box !important;
    /* Horizontal: full bleed ≤1100 (phone ≤640 + tablet 641–1100); desktop hides this sheet at 1101+ */
    top: auto !important; /* CRITICAL: Override any 'top: 0' that might have been set on desktop */
  }

  /* JS hidden on sheet (desktop handoff): inert, not visible — snap uses translateY, not .hidden */
  #listings-sheet.hidden {
    visibility: hidden !important;
    opacity: 0 !important;
    display: flex !important;
    pointer-events: none !important;
    position: fixed !important;
    bottom: 0 !important;
    padding-bottom: var(--discover-sheet-bottom-gap) !important;
    box-sizing: border-box !important;
    top: auto !important;
  }

  /* Header controls: listings.css owns readable sizing inside #bottom-sheet-listings-header. */

  #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;
  }
}

/* Phone only (≤640): full-bleed sheet — matches topbar.css phone shell; tablet full-bleed chrome starts at 641px */
@media (max-width: 640px) {
  #listings-sheet,
  body.discover-page #listings-sheet,
  html body.discover-page #listings-sheet {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
    /* CRITICAL: Full width mobile positioning - no tablet constraints */
    width: 100% !important;
    max-width: 100% !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: var(--radius-sheet, 1.25rem) var(--radius-sheet, 1.25rem) 0 0 !important;
    box-shadow: var(--shadow-sheet, 0 -8px 32px rgb(0 0 0 / 12%)) !important;
    bottom: 0 !important;
    padding-bottom: var(--discover-sheet-bottom-gap) !important;
    box-sizing: border-box !important;
    min-height: 120px !important;
    height: 100vh !important;
    height: 100svh !important;
    max-height: 100vh !important;
    max-height: 100svh !important;
  }

  /* Dark mode support for mobile and tablet */
  .dark #listings-sheet,
  .dark body.discover-page #listings-sheet {
    box-shadow: var(--shadow-sheet-dark, 0 -8px 32px rgb(0 0 0 / 50%)) !important;
  }

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

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

  /* Legacy spot-card shell (skeletons / non-discover-listing-card). discover-listing-card owns chrome. */
  #listings-sheet .spot-card:not(.discover-listing-card),
  #listings-content-sheet .spot-card:not(.discover-listing-card) {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: none !important; /* PERFORMANCE: Disabled */
    border: 1.5px solid var(--sheet-card-border) !important;
    box-shadow: 0 1px 3px rgba(28, 25, 23, 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:not(.discover-listing-card):active {
    transform: translateY(-1px) !important;
    border-color: var(--sheet-card-border-active) !important;
    box-shadow: 0 2px 8px rgba(28, 25, 23, 0.14),
        0 1px 3px rgba(0, 0, 0, 0.08) !important;
  }

  /* ENHANCED: Dark mode mobile cards */
  .dark #listings-sheet .spot-card:not(.discover-listing-card) {
    background: rgba(31, 41, 55, 0.95) !important;
    border: 1.5px solid var(--sheet-card-border-dark) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22),
        0 1px 2px rgba(0, 0, 0, 0.15) !important;
  }

  .dark #listings-sheet .spot-card:not(.discover-listing-card):active {
    border-color: var(--sheet-card-border-dark-active) !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 interactive elements are clickable and text is selectable */
  /* CRITICAL: Only enable pointer events on interactive elements, not all children */
  /* This allows clicks to pass through empty areas to the map */
  #listings-sheet button,
  #listings-sheet a,
  #listings-sheet input,
  #listings-sheet select,
  #listings-sheet textarea,
  #listings-sheet [role="button"],
  #listings-sheet [tabindex],
  #listings-sheet .spot-card,
  #listings-sheet .clickable,
  #listings-sheet .clickable-address,
  #listings-sheet #listings-content-sheet,
  #listings-sheet #bottom-sheet-listings-header {
    pointer-events: auto !important;
    user-select: text !important; /* Allow text selection */
  }

  /* Allow text selection on all text content */
  #listings-sheet p,
  #listings-sheet span,
  #listings-sheet div,
  #listings-sheet h1,
  #listings-sheet h2,
  #listings-sheet h3,
  #listings-sheet h4,
  #listings-sheet h5,
  #listings-sheet h6 {
    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 */
  /* CRITICAL: Spot cards must have pointer cursor, not text cursor */
  #listings-sheet .spot-card {
    pointer-events: auto !important;
    user-select: none !important; /* Cards are clickable, not selectable */
    cursor: pointer !important; /* Pointer cursor for clickable cards */
  }

  /* Other content elements can be selectable */
  #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):not(.spot-card) {
    pointer-events: auto !important;
    user-select: text !important;
    cursor: text !important;
  }

  /* Header controls (Refine / Map / back): keep pointer, not I-beam over labels. */
  #listings-sheet #bottom-sheet-listings-header .listings-header-actions,
  #listings-sheet #bottom-sheet-listings-header .listings-header-actions *,
  #listings-sheet #bottom-sheet-listings-header .listings-header-control,
  #listings-sheet #bottom-sheet-listings-header .listings-header-control *,
  #listings-sheet #bottom-sheet-listings-header #discover-refine-trigger-sheet,
  #listings-sheet #bottom-sheet-listings-header #discover-refine-trigger-sheet *,
  #listings-sheet #bottom-sheet-listings-header #discover-map-mode-header-btn,
  #listings-sheet #bottom-sheet-listings-header #discover-map-mode-header-btn *,
  #listings-sheet #bottom-sheet-listings-header .sheet-spot-details-back-btn,
  #listings-sheet #bottom-sheet-listings-header .sheet-spot-details-back-btn * {
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  /* CRITICAL: Spot card children should not override parent's pointer cursor */
  #listings-sheet .spot-card *:not(button):not(a):not([role="button"]):not(input):not(select):not(.clickable-address) {
    cursor: pointer !important; /* Inherit pointer cursor from parent card */
    user-select: none !important; /* Prevent text selection on card content */
  }

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

/* Bottom sheet header + drag handle geometry (single source of truth).
 * Breakpoints: phone shell ≤640px; tablet full-bleed overlay 641–1100px (both width 100%).
 * listings.css must not set header padding-top/inline on the sheet header — layout only. */
@media (max-width: 1100px) {
  body.discover-page #listings-sheet {
    --bottom-sheet-drag-handle-top: 0.25rem;
    --bottom-sheet-drag-bar-offset-y: 0;
    --bottom-sheet-header-padding-top: 1.2rem;
    --bottom-sheet-header-padding-inline: 1rem;
    --bottom-sheet-header-padding-bottom: 0.65rem;
    --bottom-sheet-header-row-gap: 0.45rem;
    --bottom-sheet-drag-button-min-height: 36px;
    --bottom-sheet-drag-button-padding: 0.28rem 0.75rem 0.16rem;
    --bottom-sheet-drag-bar-width: 2.65rem;
    --bottom-sheet-drag-bar-height: 0.22rem;
  }

  html body.discover-page #listings-sheet #bottom-sheet-listings-header:has(.sheet-listings-header-layout) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    row-gap: var(--bottom-sheet-header-row-gap) !important;
    column-gap: 0 !important;
    padding-top: var(--bottom-sheet-header-padding-top) !important;
    padding-left: var(--bottom-sheet-header-padding-inline) !important;
    padding-right: var(--bottom-sheet-header-padding-inline) !important;
    padding-bottom: var(--bottom-sheet-header-padding-bottom) !important;
    transform: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    touch-action: manipulation;
  }

  body.bottom-sheet-dragging,
  body.bottom-sheet-dragging #listings-sheet,
  body.bottom-sheet-dragging #listings-sheet * {
    user-select: none !important;
    -webkit-user-select: none !important;
  }
}

@media (max-width: 1100px) {
  body.discover-page:not(.bottom-sheet-spot-details-mode) #listings-sheet {
    --bottom-sheet-header-padding-top: 0.4rem;
    --bottom-sheet-header-padding-inline: var(--discover-mobile-panel-padding, 0.75rem);
    --bottom-sheet-header-padding-bottom: 0.35rem;
  }
}

@media (max-width: 640px) {
  body.discover-page #listings-sheet {
    --bottom-sheet-drag-handle-top: 0.2rem;
    --bottom-sheet-drag-bar-offset-y: 0;
    /* No drag bar in browse overlay — tighten header for marketplace toolbar. */
    --bottom-sheet-header-padding-top: 0.35rem;
    --bottom-sheet-header-padding-inline: var(--discover-mobile-panel-padding, 0.75rem);
    --bottom-sheet-header-padding-bottom: 0.35rem;
    --bottom-sheet-header-row-gap: 0;
    --bottom-sheet-drag-button-min-height: 32px;
    --bottom-sheet-drag-button-padding: 0.2rem 0.65rem 0.14rem;
    --bottom-sheet-drag-bar-width: 2.5rem;
    --bottom-sheet-drag-bar-height: 0.2rem;
  }
}

@media (min-width: 641px) and (max-width: 1100px) {
  body.discover-page #listings-sheet {
    --bottom-sheet-drag-handle-top: 0.55rem;
    --bottom-sheet-drag-bar-offset-y: 0;
    --bottom-sheet-header-padding-top: 0.4rem;
    --bottom-sheet-header-padding-inline: var(--discover-mobile-panel-padding, 0.75rem);
    --bottom-sheet-header-row-gap: 0;
  }
}

/* =============================================================================
 * Canonical Discover sheet shell polish and drag performance.
 * BottomSheet.js still owns runtime transform/height values.
 * ============================================================================= */
body.discover-page:not([data-discover-map-mode="list"]) #listings-sheet {
  background: var(--discover-chrome-surface) !important;
  border: 1px solid var(--discover-chrome-border) !important;
  border-bottom: 0 !important;
  border-radius: var(--discover-chrome-radius-lg) var(--discover-chrome-radius-lg) 0 0 !important;
  box-shadow: var(--discover-chrome-shadow-panel) !important;
}

body.discover-page[data-discover-map-mode="list"]:not(.bottom-sheet-spot-details-mode) #listings-sheet {
  background: var(--discover-chrome-surface) !important;
}

body.discover-page #listings-sheet #bottom-sheet-listings-header > .bottom-sheet-drag-handle {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  position: absolute !important;
  top: var(--bottom-sheet-drag-handle-top, 0.25rem) !important;
  left: 50% !important;
  width: min(6.5rem, 36vw) !important;
  max-width: min(6.5rem, 36vw) !important;
  transform: translateX(-50%) !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 10 !important;
}

/* Full Map/List overlay: no drag continuum — hide grabber in browse; spot details may keep chrome. */
@media (max-width: 1100px) {
  body.discover-page:not(.bottom-sheet-spot-details-mode) #listings-sheet #bottom-sheet-listings-header > .bottom-sheet-drag-handle {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  body.discover-page:not(.bottom-sheet-spot-details-mode) #listings-sheet #bottom-sheet-listings-header[data-drag-area="true"] {
    cursor: default !important;
  }

  /* Map mode: list fully off — no peek band / no hit targets on the sheet shell. */
  body.discover-page[data-discover-map-mode="map"] #listings-sheet,
  body.discover-page #listings-sheet.sheet-overlay-hidden {
    pointer-events: none !important;
    box-shadow: none !important;
  }

  body.discover-page[data-discover-map-mode="map"] #listings-sheet > *,
  body.discover-page #listings-sheet.sheet-overlay-hidden > * {
    pointer-events: none !important;
  }

  /* List FAB must stay above the sheet while map mode animates out (any residual peek). */
  body.discover-page[data-discover-map-mode="map"] .discover-map-mode-fab:not([hidden]) {
    z-index: calc(var(--z-sheet-elevated, 110) + 50) !important;
    pointer-events: auto !important;
  }

  /* List mode: solid app panel filling under the top bar. */
  html body.discover-page[data-discover-map-mode="list"]:not(.bottom-sheet-spot-details-mode) #listings-sheet,
  body.discover-page[data-discover-map-mode="list"]:not(.bottom-sheet-spot-details-mode) #listings-sheet {
    border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    box-shadow: none !important;
    border-top: none !important;
    padding-top: 0 !important;
    min-height: 0 !important;
  }

  body.discover-page[data-discover-map-mode="list"]:not(.bottom-sheet-spot-details-mode) #listings-sheet > * {
    pointer-events: auto !important;
  }
}

body.discover-page #listings-sheet #bottom-sheet-listings-header > .bottom-sheet-drag-handle .bottom-sheet-drag-button {
  min-height: var(--bottom-sheet-drag-button-min-height, 44px) !important;
  padding: var(--bottom-sheet-drag-button-padding, 0.55rem 0.75rem 0.2rem) !important;
}

body.discover-page #listings-sheet #bottom-sheet-listings-header > .bottom-sheet-drag-handle .bottom-sheet-drag-bar {
  width: var(--bottom-sheet-drag-bar-width, clamp(28px, 8vw, 36px)) !important;
  height: var(--bottom-sheet-drag-bar-height, clamp(4px, 0.35vh, 6px)) !important;
}

body.discover-page .bottom-sheet-drag-button {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 44px !important;
  padding: 0.55rem 0.75rem 0.2rem !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: none !important;
  cursor: grab !important;
  touch-action: none !important;
  pointer-events: auto !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

body.discover-page .bottom-sheet-drag-button::before {
  content: '';
  position: absolute;
  top: -14px;
  bottom: -4px;
  left: 0;
  right: 0;
  background: transparent;
  pointer-events: auto;
}

body.discover-page .bottom-sheet-drag-bar {
  display: block !important;
  width: var(--bottom-sheet-drag-bar-width, clamp(28px, 8vw, 36px)) !important;
  height: var(--bottom-sheet-drag-bar-height, clamp(4px, 0.35vh, 6px)) !important;
  border-radius: 999px !important;
  /* Match When-sheet grabber: quiet chrome, no heavy drop shadow. */
  background: rgba(120, 113, 108, 0.38) !important;
  box-shadow: none !important;
  transform: translateY(var(--bottom-sheet-drag-bar-offset-y, 0)) !important;
  pointer-events: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.discover-page:not(.bottom-sheet-spot-details-mode) #listings-scroll-shell.listings-scroll-active {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  /* Visible-slice height is set inline by JS; do not flex-grow to the full sheet box. */
  flex: 0 0 auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  scroll-padding-bottom: max(1.25rem, var(--discover-sheet-bottom-gap, 0.5rem)) !important;
  pointer-events: auto !important;
  touch-action: pan-y !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(120, 113, 108, 0.4) transparent !important;
}

@media (max-width: 1100px) {
  /* Keep sheet safe-area padding (same as spot details). JS height math subtracts it. */
  body.discover-page:not(.bottom-sheet-spot-details-mode) #listings-sheet {
    padding-bottom: var(--discover-sheet-bottom-gap) !important;
  }
}

body.discover-page:not(.bottom-sheet-spot-details-mode) #listings-scroll-shell.listings-scroll-active::-webkit-scrollbar {
  width: 4px !important;
  display: block !important;
}

body.discover-page:not(.bottom-sheet-spot-details-mode) #listings-scroll-shell.listings-scroll-active::-webkit-scrollbar-thumb {
  background: rgba(120, 113, 108, 0.42) !important;
  border-radius: 2px !important;
  min-height: 40px !important;
}

body.discover-page:not(.bottom-sheet-spot-details-mode) #listings-scroll-shell.listings-scroll-active::-webkit-scrollbar-track {
  background: transparent !important;
  margin-top: 2px !important;
  margin-bottom: max(2px, env(safe-area-inset-bottom, 0px)) !important;
}

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

body.discover-page:not(.bottom-sheet-spot-details-mode) .discover-top-bar {
  /* Above sheet (100), boot shell (+15), and sheet-elevated (+10); matches discover-page-shell.css */
  z-index: calc(var(--z-sheet, 100) + 25) !important;
}

.dark body.discover-page .bottom-sheet-drag-bar,
body.dark.discover-page .bottom-sheet-drag-bar {
  background: rgba(168, 162, 158, 0.35) !important;
}

@media (max-width: 640px) {
  body.discover-page #listings-sheet {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 1.15rem 1.15rem 0 0 !important;
  }
}

@media (min-width: 641px) and (max-width: 1100px) {
  body.discover-page #listings-sheet,
  body.discover-page #listings-sheet.hidden {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    border-radius: 0 !important;
  }
}

@media (max-width: 1100px) {
  /* will-change is applied only during drag/wheel via JS (_setDragPerformanceMode) and .bottom-sheet-dragging */
  html body.discover-page #listings-sheet {
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }

  body.bottom-sheet-dragging #listings-sheet {
    box-shadow: 0 -4px 14px rgba(28, 25, 23, 0.12) !important;
    transition: none !important;
    will-change: transform !important;
    contain: layout style paint !important;
    isolation: isolate !important;
  }

  body.bottom-sheet-dragging #listings-sheet .spot-card,
  body.bottom-sheet-dragging #bottom-sheet-listings-header,
  body.bottom-sheet-dragging #listings-sheet .listings-header-control,
  body.bottom-sheet-dragging #listings-sheet .space-type-toggle,
  body.bottom-sheet-dragging #listings-sheet .space-type-btn {
    box-shadow: none !important;
    animation: none !important;
    animation-play-state: paused !important;
    transition: none !important;
    pointer-events: none !important;
    contain: paint layout style !important;
  }

  body.discover-page.bottom-sheet-dragging #listings-sheet #bottom-sheet-listings-header .sheet-listings-header-layout,
  body.discover-page.bottom-sheet-dragging #listings-sheet #bottom-sheet-listings-header .listings-header-actions--sheet,
  body.discover-page.bottom-sheet-dragging #listings-sheet #bottom-sheet-listings-header .listings-header-sort-wrap,
  body.discover-page.bottom-sheet-dragging #listings-sheet #bottom-sheet-listings-header .listings-header-control,
  body.discover-page.bottom-sheet-dragging #listings-sheet #bottom-sheet-listings-header .space-type-toggle,
  body.discover-page.bottom-sheet-dragging #listings-sheet #bottom-sheet-listings-header .space-type-btn,
  body.discover-page.bottom-sheet-dragging #listings-sheet #bottom-sheet-listings-header button:not(.bottom-sheet-drag-button),
  body.discover-page.bottom-sheet-dragging #listings-sheet #bottom-sheet-listings-header #sort-toggle-sheet,
  body.discover-page.bottom-sheet-dragging #listings-sheet #bottom-sheet-listings-header #space-type-parking-sheet,
  body.discover-page.bottom-sheet-dragging #listings-sheet #bottom-sheet-listings-header #space-type-storage-sheet,
  body.discover-page.bottom-sheet-dragging #listings-sheet #bottom-sheet-listings-header #parking-longterm-row-sheet,
  body.discover-page.bottom-sheet-dragging #listings-sheet #bottom-sheet-listings-header #parking-longterm-toggle-sheet {
    animation: none !important;
    transition: none !important;
  }

  body.bottom-sheet-dragging #listings-sheet .bottom-sheet-drag-handle,
  body.bottom-sheet-dragging #listings-sheet .bottom-sheet-drag-button,
  body.bottom-sheet-dragging #listings-sheet .bottom-sheet-drag-bar,
  body.bottom-sheet-dragging #listings-sheet .bottom-sheet-drag-button *,
  body.bottom-sheet-dragging #listings-sheet .bottom-sheet-drag-button::before,
  body.bottom-sheet-dragging #listings-sheet .bottom-sheet-drag-button::after {
    animation: none !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    filter: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  body.bottom-sheet-dragging #listings-sheet .bottom-sheet-drag-button {
    transform: none !important;
  }

  body.bottom-sheet-dragging #listings-sheet .bottom-sheet-drag-bar {
    transform: translateY(var(--bottom-sheet-drag-bar-offset-y, 0)) translateZ(0) !important;
  }
}

/* Bottom sheet drag UX: sheet text is not a selectable surface. */
body.discover-page #listings-sheet,
body.discover-page #listings-sheet *:not(input):not(textarea):not(select):not(option) {
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none !important;
}

body.discover-page #listings-sheet input,
body.discover-page #listings-sheet textarea,
body.discover-page #listings-sheet select,
body.discover-page #listings-sheet option {
  user-select: text !important;
  -webkit-user-select: text !important;
}

/* Discover support chat: same breakpoint as list sheet (≤1100px). One inset set; no Tailwind fight.
 * Map-mode List FAB is bottom-center; support FAB is bottom-right with enough side clearance. */
@media (max-width: 1100px) {
  body.discover-page {
    --discover-support-chat-fab-bottom: max(
      0.75rem,
      calc(var(--discover-bottom-nav-clearance, 0px) + env(safe-area-inset-bottom, 0px) + 0.5rem)
    );
    --support-chat-fab-right: max(0.65rem, env(safe-area-inset-right, 0px));
    --support-chat-fab-bottom: var(--discover-support-chat-fab-bottom);
    --support-chat-fab-size: 2.25rem;
    --support-chat-fab-icon-size: 1rem;
    --discover-support-chat-dialog-bottom: max(
      3.75rem,
      calc(var(--discover-bottom-nav-clearance, 0px) + env(safe-area-inset-bottom, 0px) + 3.25rem)
    );
    --discover-support-chat-large-top: var(--support-chat-sheet-large-top, max(calc(var(--discover-current-topbar-height, 4.5rem) + 0.5rem), calc(env(safe-area-inset-top, 0px) + 3.25rem)));
    --discover-support-chat-large-right: var(--support-chat-sheet-large-right, max(0.5rem, env(safe-area-inset-right, 0px)));
    --discover-support-chat-large-bottom: var(--support-chat-sheet-large-bottom, max(0.5rem, calc(var(--discover-bottom-nav-clearance, 0px) + env(safe-area-inset-bottom, 0px))));
    --discover-support-chat-large-left: var(--support-chat-sheet-large-left, max(0.5rem, env(safe-area-inset-left, 0px)));
    --discover-support-chat-large-z: var(--support-chat-sheet-large-z, calc(var(--z-discover-control) + 25));
  }

  /* Open support chat sits above discover menu/datetime controls (100000), not only when maximized */
  body.discover-page.support-chat-open #supportChatWidget,
  body.discover-page.support-chat-open #supportChatDialog {
    z-index: var(--discover-support-chat-large-z) !important;
  }

  body.discover-page #supportChatWidget {
    position: fixed !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Discover FAB: brand accent instead of utility blue (scan-path cohesion). */
  body.discover-page,
  body.discover-page #supportChatWidget,
  .dark body.discover-page #supportChatWidget,
  body.dark.discover-page #supportChatWidget {
    --support-chat-fab-bg: var(--color-brand-accent, #0f5a56);
    --support-chat-fab-bg-hover: var(--color-brand-accent-hover, #0c4a47);
    --support-chat-fab-icon: var(--color-brand-accent-text, #ffffff);
  }

  .dark body.discover-page,
  body.dark.discover-page,
  .dark body.discover-page #supportChatWidget,
  body.dark.discover-page #supportChatWidget {
    --support-chat-fab-bg: var(--color-brand-accent-on-dark, #5eead4);
    --support-chat-fab-bg-hover: var(--color-brand-accent-on-dark-hover, #99f6e4);
    --support-chat-fab-icon: #0f172a;
  }

  body.discover-page #supportChatWidget #supportChatButton,
  body.discover-page #supportChatButton.support-chat-fab {
    background: var(--support-chat-fab-bg) !important;
    background-color: var(--support-chat-fab-bg) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 2px 8px rgba(15, 90, 86, 0.28), 0 1px 2px rgba(15, 23, 42, 0.12) !important;
    color: var(--support-chat-fab-icon) !important;
  }

  body.discover-page #supportChatWidget #supportChatButton:hover,
  body.discover-page #supportChatWidget #supportChatButton:focus-visible {
    background: var(--support-chat-fab-bg-hover) !important;
    background-color: var(--support-chat-fab-bg-hover) !important;
  }

  body.discover-page #supportChatButton {
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Spot details: keep Message host clear of the support FAB. */
  body.discover-page.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-contact-host,
  body.discover-page.bottom-sheet-spot-details-mode #listings-sheet .spot-detail-contact-host {
    padding-right: calc(var(--support-chat-fab-size, 2.25rem) + 0.85rem) !important;
    box-sizing: border-box !important;
  }

  body.discover-page.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-contact-host .contact-host-btn,
  body.discover-page.bottom-sheet-spot-details-mode #listings-sheet .spot-detail-contact-host .contact-host-btn {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.discover-page:not(.support-chat-open) #supportChatWidget {
    z-index: var(--z-support-chat) !important;
  }

  body.discover-page.support-chat-open #supportChatDialog:not([data-size-mode="large"]):not(.support-chat-keyboard-fit) {
    display: flex !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  /* Positioning locked on Discover; opacity/translate still animate via --open / --closed.
     Do not force opacity:1 here — that killed the closed entrance state. */
  body.discover-page.support-chat-open #supportChatDialog.support-chat-dialog--closed {
    transform: none !important;
  }

  body.discover-page #supportChatWidget {
    transform: none !important;
  }

  /* FAB look comes from support-chat-widget.css (calm solid blue); size/position only here. */

  body.discover-page #supportChatDialog:not([data-booking-page="true"]):not([data-size-mode="large"]):not(.support-chat-keyboard-fit) {
    right: var(--support-chat-fab-right) !important;
    bottom: var(--discover-support-chat-dialog-bottom) !important;
    width: min(20rem, calc(100vw - 1.5rem)) !important;
    max-height: var(--support-chat-normal-max-height-mobile) !important;
    min-height: 0 !important;
  }

  body.discover-page #supportChatDialog[data-size-mode="large"]:not([data-booking-page="true"]):not(.support-chat-keyboard-fit) {
    position: fixed !important;
    top: var(--discover-support-chat-large-top) !important;
    right: var(--discover-support-chat-large-right) !important;
    bottom: var(--discover-support-chat-large-bottom) !important;
    left: var(--discover-support-chat-large-left) !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
    z-index: var(--discover-support-chat-large-z) !important;
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    margin-top: 0 !important;
  }

  body.discover-page #supportChatDialog[data-size-mode="large"]:not(.support-chat-keyboard-fit) > div:first-child {
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 2 !important;
    pointer-events: auto !important;
  }

  body.discover-page #supportChatDialog[data-size-mode="large"] #supportChatClose,
  body.discover-page.support-chat-open #supportChatClose {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 5 !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
  }

  /* Flush close to the trailing edge of the sheet header */
  body.discover-page.support-chat-open #supportChatDialog .support-chat-header__controls {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    justify-content: flex-end !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 5 !important;
  }

  /* Mobile Discover: no expand/collapse control — close only */
  body.discover-page #supportChatDialog[data-size-mode="large"] #supportChatMinimize,
  body.discover-page.support-chat-open #supportChatMinimize {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.discover-page.support-chat-open #supportChatDialog > div:first-child {
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 4 !important;
    pointer-events: auto !important;
  }

  body.discover-page.support-chat-open #supportChatDialog > div:first-child > div:last-child {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 5 !important;
  }

  /* Floating FAB keyboard-open: JS owns full visualViewport rect; do not re-narrow on Discover */
  body.discover-page #supportChatDialog.support-chat-keyboard-fit,
  body.discover-page #supportChatWidget:not(.support-chat-inline-mode) #supportChatDialog.support-chat-keyboard-fit {
    inset: unset !important;
    top: unset !important;
    left: unset !important;
    right: auto !important;
    bottom: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
  }

  body.discover-page.support-chat-keyboard-open #supportChatWidget:not(.support-chat-inline-mode) #supportChatButton {
    visibility: hidden;
    pointer-events: none;
  }
}

@media (max-width: 380px) {
  body.discover-page {
    --discover-support-chat-fab-bottom: max(
      0.5rem,
      calc(var(--discover-bottom-nav-clearance, 0px) + env(safe-area-inset-bottom, 0px) + 0.35rem)
    );
    --support-chat-fab-right: max(0.5rem, env(safe-area-inset-right, 0px));
    --support-chat-fab-bottom: var(--discover-support-chat-fab-bottom);
    --support-chat-fab-size: 2.125rem;
  }
}

/*
 * Phone/tablet auth shell: list sheet clears the site bottom tab bar.
 * bottomsheet base rules set bottom:0 / 100svh — this block must load after them.
 * Clearance tokens come from mobile_navigation.css (≤1023 + #mobile-bottom-nav).
 */
@media (max-width: 1023px) {
  html body.discover-page.swiftspot-bottom-nav-visible #listings-sheet,
  html body.discover-page:has(#mobile-bottom-nav) #listings-sheet,
  body.discover-page.swiftspot-bottom-nav-visible #listings-sheet,
  body.discover-page:has(#mobile-bottom-nav) #listings-sheet {
    bottom: var(--discover-bottom-nav-clearance, var(--swiftspot-mobile-bottom-nav-offset-fallback, 4.5rem)) !important;
    height: calc(100vh - var(--discover-bottom-nav-clearance, var(--swiftspot-mobile-bottom-nav-offset-fallback, 4.5rem))) !important;
    height: calc(100svh - var(--discover-bottom-nav-clearance, var(--swiftspot-mobile-bottom-nav-offset-fallback, 4.5rem))) !important;
    max-height: calc(100vh - var(--discover-bottom-nav-clearance, var(--swiftspot-mobile-bottom-nav-offset-fallback, 4.5rem))) !important;
    max-height: calc(100svh - var(--discover-bottom-nav-clearance, var(--swiftspot-mobile-bottom-nav-offset-fallback, 4.5rem))) !important;
    padding-bottom: var(--discover-sheet-bottom-gap, 0.5rem) !important;
  }
}