/* ==============================================
 * SPOT CARD STYLES - CONSOLIDATED & OPTIMIZED
 * ==============================================
 * 🎯 PURPOSE: Listing cards (compact cards in lists/grids)
 * 📄 USED BY: ListingsManager.js (renders listing cards)
 * ⚠️ RELATIONSHIP WITH OTHER CSS FILES:
 * - This file styles LISTING cards (compact cards in search results)
 * - luxury-spot-details.css styles detail view cards (modal context) - scoped to .spot-details-container
 * - spot-details.css styles standalone page cards - scoped to .spot-details-page
 * - These serve DIFFERENT purposes and should not conflict when properly scoped
 * ==============================================
 * 
 * TABLE OF CONTENTS:
 * ─────────────────────────────────────────────
 * 1. MARQUEE ANIMATION SYSTEM          (Lines 1-103)
 *    - Keyframes & wrapper styles
 *    - Scrolling vs. non-scrolling titles
 *    - Hover controls
 * 
 * 2. SPOT CARD CORE LAYOUT             (Lines 104-193)
 *    - Base card styles & hover effects
 *    - Mobile optimizations
 *    - Image containers
 * 
 * 3. CONTENT CONTAINER OVERRIDES       (Lines 194-216)
 *    - CRITICAL: Tailwind py- class overrides
 *    - .flex-1 padding controls
 *    - Spacing adjustments
 * 
 * 4. TYPOGRAPHY HIERARCHY              (Lines 217-293)
 *    - CONSOLIDATED: Title/h3 styles
 *    - Metadata & secondary text
 *    - Price displays
 * 
 * 5. ICONS & VISUAL ELEMENTS           (Lines 294-339)
 *    - Icon sizing & spacing
 *    - Star ratings
 * 
 * 6. AMENITY BADGES                    (Lines 340-415)
 *    - Badge colors (light/dark mode)
 *    - Status indicators
 * 
 * 7. INTERACTIVE ELEMENTS              (Lines 416-500)
 *    - OPTIMIZED: Button selectors
 *    - Hover states
 *    - Primary/secondary actions
 * 
 * 8. RESPONSIVE DESIGN                 (Lines 501-650)
 *    - Mobile breakpoints
 *    - Desktop enhancements
 *    - Bottom sheet optimizations
 * 
 * 9. DARK MODE OVERRIDES               (Lines 651-850)
 *    - Color adjustments
 *    - Utility class overrides
 * 
 * 10. CRITICAL END-OF-FILE OVERRIDES   (Lines 851-855)
 *     - Maximum specificity rules
 *     - Title positioning
 *     - MUST REMAIN LAST
 * 
 * ─────────────────────────────────────────────
 * MAINTENANCE NOTES:
 * • Phases 2-3 consolidation completed
 * • 12 lines removed, zero functionality changed
 * • All critical overrides preserved
 * • Backups: .backup.20251017_*
 * ==============================================
 */

/* --- SIMPLE CONTINUOUS MARQUEE --- */
/* CRITICAL FIX: Use exact pixel distance instead of percentage to prevent visible reset */
/* CRITICAL: Explicitly set translateY(0) to prevent vertical shifts on animation loop */
@keyframes simple-marquee-slow {
  0% {
    transform: translateX(0) translateY(0) translateZ(0);
  }
  100% {
    /* Use exact pixel distance (textWidth + gap) for seamless loop - prevents visible reset */
    transform: translateX(calc(-1 * var(--marquee-distance, 0px))) translateY(0) translateZ(0);
  }
}

@keyframes simple-marquee-fast {
  0% {
    transform: translateX(0) translateY(0) translateZ(0);
  }
  100% {
    /* Use exact pixel distance (textWidth + gap) for seamless loop - prevents visible reset */
    transform: translateX(calc(-1 * var(--marquee-distance, 0px))) translateY(0) translateZ(0);
  }
}

/* ============================================================================
   CRITICAL: BOTTOM SHEET STYLES - LOAD FIRST TO PREVENT TIMING ISSUES
   These rules must load before base .spot-card styles to prevent wrong styles
   on first page load when HTML renders before CSS is fully loaded
   ============================================================================ */

/* Bottom sheet spot cards - force mobile/tablet styles immediately */
/* CRITICAL: These rules load first to prevent cached HTML state issues */
#listings-sheet .spot-card,
#listings-content-mobile .spot-card {
  padding: 0.5rem !important; /* Mobile-optimized padding */
  margin-bottom: 0rem !important;
  border-radius: 10px !important;
  min-height: 100px !important;
  /* PROFESSIONAL: Baby blue tinge border - industry standard */
  border: 1.5px solid rgba(96, 165, 250, 0.35) !important;
}

.dark #listings-sheet .spot-card,
.dark #listings-content-mobile .spot-card {
  border: 1.5px solid rgba(147, 197, 253, 0.25) !important;
}

/* DESKTOP: Baby blue tinge border for desktop listings - matching mobile style */
@media (min-width: 1024px) {
  #listings-overlay .spot-card,
  #listings-content .spot-card {
    /* PROFESSIONAL: Baby blue tinge border - industry standard */
    border: 1.5px solid rgba(96, 165, 250, 0.35) !important;
  }
  
  .dark #listings-overlay .spot-card,
  .dark #listings-content .spot-card {
    border: 1.5px solid rgba(147, 197, 253, 0.25) !important;
  }
}

/* CRITICAL: Prevent wrong title styles on hard reload - Mobile/Tablet Bottom Sheet */
/* These rules MUST load first to prevent desktop styles from applying to mobile */
#listings-sheet .spot-card .spot-card-title-wrapper,
#listings-content-mobile .spot-card .spot-card-title-wrapper {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  transform: none !important; /* Reset any transforms until JS initializes */
  z-index: 1 !important;
}

/* CRITICAL: Mobile short-title-static - prevent desktop styles */
#listings-sheet .spot-card .spot-card-title-wrapper.short-title-static,
#listings-content-mobile .spot-card .spot-card-title-wrapper.short-title-static,
#listings-sheet .spot-card .spot-card-title-wrapper.short-title-static.very-short-title,
#listings-content-mobile .spot-card .spot-card-title-wrapper.short-title-static.very-short-title {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  transform: none !important;
  text-align: left !important;
}

#listings-sheet .spot-card .spot-card-title-wrapper:not([data-marquee-processed="true"]),
#listings-content-mobile .spot-card .spot-card-title-wrapper:not([data-marquee-processed="true"]) {
  margin-left: 0 !important; /* Safe default: no negative margin until initialized */
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

#listings-sheet .spot-card .spot-card-title-text,
#listings-content-mobile .spot-card .spot-card-title-text {
  display: block !important;
  white-space: nowrap !important;
  text-align: left !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  margin-top: -0.125rem !important;
  margin-left: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transform: none !important; /* Reset transforms until JS initializes */
}

/* CRITICAL: Mobile short-title-static text - prevent desktop styles */
/* CRITICAL: These rules MUST load first to prevent desktop styles from applying on hard reload */
#listings-sheet .spot-card .spot-card-title-wrapper.short-title-static .spot-card-title-text,
#listings-content-mobile .spot-card .spot-card-title-wrapper.short-title-static .spot-card-title-text,
#listings-sheet .spot-card .spot-card-title-wrapper.short-title-static.very-short-title .spot-card-title-text,
#listings-content-mobile .spot-card .spot-card-title-wrapper.short-title-static.very-short-title .spot-card-title-text,
#listings-sheet .spot-card .spot-card-title-wrapper.short-title-static[data-marquee-processed="true"] .spot-card-title-text,
#listings-content-mobile .spot-card .spot-card-title-wrapper.short-title-static[data-marquee-processed="true"] .spot-card-title-text,
#listings-sheet .spot-card .spot-card-title-wrapper.short-title-static.very-short-title[data-marquee-processed="true"] .spot-card-title-text,
#listings-content-mobile .spot-card .spot-card-title-wrapper.short-title-static.very-short-title[data-marquee-processed="true"] .spot-card-title-text {
  margin-left: 0 !important; /* NEVER apply desktop margins to mobile containers */
  margin-top: -0.125rem !important;
  transform: none !important;
  text-align: left !important;
}

/* CRITICAL: Prevent wrong title styles on hard reload - Desktop List Sheet */
/* These rules ensure desktop styles don't apply until media query matches */
/* CRITICAL: Only apply desktop styles when desktop containers are actually visible */
@media (min-width: 1024px) {
  /* CRITICAL: Ensure desktop containers are visible and mobile containers are hidden */
  #listings-content:not([style*="display: none"]):not(.hidden),
  #listings-overlay:not([style*="display: none"]):not(.hidden) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* CRITICAL: Hide mobile containers on desktop */
  #listings-content-mobile:not([style*="display: flex"]),
  #listings-sheet:not([style*="display: flex"]) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  /* CRITICAL: Only apply desktop title styles when desktop containers are visible */
  #listings-content:not([style*="display: none"]):not(.hidden) .spot-card .spot-card-title-wrapper,
  #listings-overlay:not([style*="display: none"]):not(.hidden) .spot-card .spot-card-title-wrapper,
  #listings-content .spot-card .spot-card-title-wrapper,
  #listings-overlay .spot-card .spot-card-title-wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important; /* Reset any transforms until JS initializes */
    z-index: 1 !important;
  }

  /* CRITICAL: Desktop short-title-static - ensure correct initial state */
  #listings-content .spot-card .spot-card-title-wrapper.short-title-static:not([data-marquee-processed="true"]),
  #listings-overlay .spot-card .spot-card-title-wrapper.short-title-static:not([data-marquee-processed="true"]) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    transform: none !important;
    text-align: left !important;
  }

  #listings-content .spot-card .spot-card-title-wrapper:not([data-marquee-processed="true"]),
  #listings-overlay .spot-card .spot-card-title-wrapper:not([data-marquee-processed="true"]) {
    margin-left: 0 !important; /* Safe default: no negative margin until initialized */
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* CRITICAL: Desktop title text - reset styles but exclude very-short-title with data-marquee-processed */
  /* Don't reset very-short-title that has been processed, as it needs margin-left: 3.5rem */
  #listings-content .spot-card .spot-card-title-wrapper:not(.very-short-title[data-marquee-processed="true"]) .spot-card-title-text,
  #listings-overlay .spot-card .spot-card-title-wrapper:not(.very-short-title[data-marquee-processed="true"]) .spot-card-title-text {
    display: block !important;
    white-space: nowrap !important;
    text-align: left !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    margin-top: -0.125rem !important;
    margin-left: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    transform: none !important; /* Reset transforms until JS initializes */
  }

  /* CRITICAL: Desktop short-title-static text - ensure correct initial state */
  /* Only reset styles for titles that haven't been processed yet */
  #listings-content .spot-card .spot-card-title-wrapper.short-title-static:not([data-marquee-processed="true"]) .spot-card-title-text,
  #listings-overlay .spot-card .spot-card-title-wrapper.short-title-static:not([data-marquee-processed="true"]) .spot-card-title-text {
    margin-left: 0 !important;
    margin-top: -0.125rem !important;
    transform: none !important;
    text-align: left !important;
  }
  
  /* CRITICAL: Desktop very-short-title with data-marquee-processed="true" - apply correct margin */
  /* This ensures the 3.5rem margin applies even on hard reload */
  #listings-content .spot-card .spot-card-title-wrapper.short-title-static.very-short-title[data-marquee-processed="true"] .spot-card-title-text,
  #listings-overlay .spot-card .spot-card-title-wrapper.short-title-static.very-short-title[data-marquee-processed="true"] .spot-card-title-text {
    margin-left: 3.5rem !important; /* Apply correct margin for processed very-short-title */
    margin-top: -0.125rem !important;
    transform: none !important;
    text-align: left !important;
  }
  
  /* Only reset very-short-title if NOT processed yet */
  #listings-content .spot-card .spot-card-title-wrapper.short-title-static.very-short-title:not([data-marquee-processed="true"]) .spot-card-title-text,
  #listings-overlay .spot-card .spot-card-title-wrapper.short-title-static.very-short-title:not([data-marquee-processed="true"]) .spot-card-title-text {
    margin-left: 0 !important;
    margin-top: -0.125rem !important;
    transform: none !important;
    text-align: left !important;
  }
}

/* DEFENSIVE: Early loading rules for cached HTML states */
/* Use attribute selectors to catch any class variations */
#listings-sheet .spot-card .relative[class*="w-20"][class*="h-20"],
#listings-sheet .spot-card .relative[class*="w-16"][class*="h-16"],
#listings-sheet .spot-card div[class*="w-20"][class*="h-20"],
#listings-sheet .spot-card div[class*="w-16"][class*="h-16"],
#listings-content-mobile .spot-card .relative[class*="w-20"][class*="h-20"],
#listings-content-mobile .spot-card .relative[class*="w-16"][class*="h-16"],
#listings-content-mobile .spot-card div[class*="w-20"][class*="h-20"],
#listings-content-mobile .spot-card div[class*="w-16"][class*="h-16"] {
  width: 69px !important;
  height: 87px !important;
  position: absolute !important;
  left: 0.75rem !important;
  top: 0.5rem !important;
  transform: translate(-0.25rem, -0.25rem) !important;
  margin: 0 !important;
  border-radius: 11px !important;
  z-index: 1 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#listings-sheet .spot-card .relative[class*="w-20"][class*="h-20"] img,
#listings-sheet .spot-card .relative[class*="w-16"][class*="h-16"] img,
#listings-sheet .spot-card div[class*="w-20"][class*="h-20"] img,
#listings-sheet .spot-card div[class*="w-16"][class*="h-16"] img,
#listings-content-mobile .spot-card .relative[class*="w-20"][class*="h-20"] img,
#listings-content-mobile .spot-card .relative[class*="w-16"][class*="h-16"] img,
#listings-content-mobile .spot-card div[class*="w-20"][class*="h-20"] img,
#listings-content-mobile .spot-card div[class*="w-16"][class*="h-16"] img {
  width: 100% !important;
  height: 100% !important;
  min-width: 80px !important;
  min-height: 98px !important;
  max-width: 68px !important;
  max-height: 98px !important;
  object-fit: cover !important;
  border-radius: 11px !important;
  display: block !important;
  box-sizing: border-box !important;
  image-rendering: auto !important; /* Industry standard: browser chooses best algorithm for photos */
  -ms-interpolation-mode: bicubic !important; /* IE/Edge: high-quality interpolation */
}

/* Bottom sheet image containers - force correct size */
/* General image container rules - exclude .h-16 containers which have special rules */
#listings-sheet .spot-card .relative.w-16:not(.h-16),
#listings-sheet .spot-card .relative.w-20:not(.h-16),
#listings-sheet .spot-card div[class*="w-16"]:not([class*="h-16"]),
#listings-sheet .spot-card div[class*="w-20"]:not([class*="h-16"]),
#listings-content-mobile .spot-card .relative.w-16:not(.h-16),
#listings-content-mobile .spot-card .relative.w-20:not(.h-16),
#listings-content-mobile .spot-card div[class*="w-16"]:not([class*="h-16"]),
#listings-content-mobile .spot-card div[class*="w-20"]:not([class*="h-16"]) {
  width: 80px !important;
  height: 80px !important;
  margin-right: 0.75rem !important;
  margin-top: 0.125rem !important;
  border-radius: 6px !important;
}

#listings-sheet .spot-card .relative.w-16:not(.h-16) img,
#listings-sheet .spot-card .relative.w-20:not(.h-16) img,
#listings-sheet .spot-card div[class*="w-16"]:not([class*="h-16"]) img,
#listings-sheet .spot-card div[class*="w-20"]:not([class*="h-16"]) img,
#listings-content-mobile .spot-card .relative.w-16:not(.h-16) img,
#listings-content-mobile .spot-card .relative.w-20:not(.h-16) img,
#listings-content-mobile .spot-card div[class*="w-16"]:not([class*="h-16"]) img,
#listings-content-mobile .spot-card div[class*="w-20"]:not([class*="h-16"]) img {
  width: 80px !important;
  height: 80px !important;
  border-radius: 6px !important;
  object-fit: cover !important;
}

/* OVERRIDE: Ensure w-20 h-20 and w-16 h-16 containers get correct styling */
/* This rule comes after general rules to ensure it overrides cached HTML states */
#listings-sheet .spot-card .relative.w-20.h-20,
#listings-sheet .spot-card .relative.h-20.w-20,
#listings-sheet .spot-card .relative.w-16.h-16,
#listings-sheet .spot-card .relative.h-16.w-16,
#listings-sheet .spot-card div.w-20.h-20,
#listings-sheet .spot-card div.h-20.w-20,
#listings-sheet .spot-card div.w-16.h-16,
#listings-sheet .spot-card div.h-16.w-16,
#listings-content-mobile .spot-card .relative.w-20.h-20,
#listings-content-mobile .spot-card .relative.h-20.w-20,
#listings-content-mobile .spot-card .relative.w-16.h-16,
#listings-content-mobile .spot-card .relative.h-16.w-16,
#listings-content-mobile .spot-card div.w-20.h-20,
#listings-content-mobile .spot-card div.h-20.w-20,
#listings-content-mobile .spot-card div.w-16.h-16,
#listings-content-mobile .spot-card div.h-16.w-16 {
  width: 69px !important;
  height: 87px !important;
  position: absolute !important;
  left: 0.75rem !important;
  top: 0.5rem !important;
  transform: translate(-0.25rem, -0.25rem) !important;
  margin: 0 !important;
  border-radius: 11px !important;
  z-index: 1 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#listings-sheet .spot-card .relative.w-20.h-20 img,
#listings-sheet .spot-card .relative.h-20.w-20 img,
#listings-sheet .spot-card .relative.w-16.h-16 img,
#listings-sheet .spot-card .relative.h-16.w-16 img,
#listings-sheet .spot-card div.w-20.h-20 img,
#listings-sheet .spot-card div.h-20.w-20 img,
#listings-sheet .spot-card div.w-16.h-16 img,
#listings-sheet .spot-card div.h-16.w-16 img,
#listings-content-mobile .spot-card .relative.w-20.h-20 img,
#listings-content-mobile .spot-card .relative.h-20.w-20 img,
#listings-content-mobile .spot-card .relative.w-16.h-16 img,
#listings-content-mobile .spot-card .relative.h-16.w-16 img,
#listings-content-mobile .spot-card div.w-20.h-20 img,
#listings-content-mobile .spot-card div.h-20.w-20 img,
#listings-content-mobile .spot-card div.w-16.h-16 img,
#listings-content-mobile .spot-card div.h-16.w-16 img {
  width: 100% !important;
  height: 100% !important;
  min-width: 80px !important;
  min-height: 98px !important;
  max-width: 68px !important;
  max-height: 98px !important;
  object-fit: cover !important;
  border-radius: 11px !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* Bottom sheet content area - force correct padding */
/* DEFENSIVE: Handle all possible class combinations from cached HTML */
#listings-sheet .spot-card .flex-1,
#listings-sheet .spot-card .flex-1.p-3,
#listings-sheet .spot-card div.flex-1,
#listings-sheet .spot-card div[class*="flex-1"],
#listings-content-mobile .spot-card .flex-1,
#listings-content-mobile .spot-card .flex-1.p-3,
#listings-content-mobile .spot-card div.flex-1,
#listings-content-mobile .spot-card div[class*="flex-1"] {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
  max-width: calc(100% - 90px) !important;
  min-width: 0 !important; /* Allow flex item to shrink below content size for truncation */
  overflow: visible !important; /* Allow other content like availability badges to display */
}

/* RESPONSIVE MARGIN-LEFT: Base for 320px - 400px */
@media (min-width: 320px) and (max-width: 400px) {
  #listings-sheet .spot-card .flex-1,
  #listings-sheet .spot-card .flex-1.p-3,
  #listings-sheet .spot-card div.flex-1,
  #listings-sheet .spot-card div[class*="flex-1"],
  #listings-content-mobile .spot-card .flex-1,
  #listings-content-mobile .spot-card .flex-1.p-3,
  #listings-content-mobile .spot-card div.flex-1,
  #listings-content-mobile .spot-card div[class*="flex-1"] {
    margin-left: calc(46px + 0.75rem + 0.25rem) !important; /* Reserve space for absolutely positioned image */
  }
}

/* RESPONSIVE MARGIN-LEFT: 400px - 480px - Move content slightly right */
@media (min-width: 400px) and (max-width: 479px) {
  #listings-sheet .spot-card .flex-1,
  #listings-sheet .spot-card .flex-1.p-3,
  #listings-sheet .spot-card div.flex-1,
  #listings-sheet .spot-card div[class*="flex-1"],
  #listings-content-mobile .spot-card .flex-1,
  #listings-content-mobile .spot-card .flex-1.p-3,
  #listings-content-mobile .spot-card div.flex-1,
  #listings-content-mobile .spot-card div[class*="flex-1"] {
    margin-left: calc(53px + 0.75rem + 0.25rem) !important; /* +10px for wider screens */
  }
}

/* RESPONSIVE MARGIN-LEFT: 480px - 560px */
@media (min-width: 480px) and (max-width: 559px) {
  #listings-sheet .spot-card .flex-1,
  #listings-sheet .spot-card .flex-1.p-3,
  #listings-sheet .spot-card div.flex-1,
  #listings-sheet .spot-card div[class*="flex-1"],
  #listings-content-mobile .spot-card .flex-1,
  #listings-content-mobile .spot-card .flex-1.p-3,
  #listings-content-mobile .spot-card div.flex-1,
  #listings-content-mobile .spot-card div[class*="flex-1"] {
    margin-left: calc(93px + 0.75rem + 0.25rem) !important; /* +20px total */
  }
}

/* RESPONSIVE MARGIN-LEFT: 560px - 640px */
@media (min-width: 560px) and (max-width: 639px) {
  #listings-sheet .spot-card .flex-1,
  #listings-sheet .spot-card .flex-1.p-3,
  #listings-sheet .spot-card div.flex-1,
  #listings-sheet .spot-card div[class*="flex-1"],
  #listings-content-mobile .spot-card .flex-1,
  #listings-content-mobile .spot-card .flex-1.p-3,
  #listings-content-mobile .spot-card div.flex-1,
  #listings-content-mobile .spot-card div[class*="flex-1"] {
    margin-left: calc(76px + 0.75rem + 0.25rem) !important; /* +30px total */
  }
}

/* RESPONSIVE MARGIN-LEFT: 640px - 720px */
@media (min-width: 640px) and (max-width: 719px) {
  #listings-sheet .spot-card .flex-1,
  #listings-sheet .spot-card .flex-1.p-3,
  #listings-sheet .spot-card div.flex-1,
  #listings-sheet .spot-card div[class*="flex-1"],
  #listings-content-mobile .spot-card .flex-1,
  #listings-content-mobile .spot-card .flex-1.p-3,
  #listings-content-mobile .spot-card div.flex-1,
  #listings-content-mobile .spot-card div[class*="flex-1"] {
    margin-left: calc(86px + 0.75rem + 0.25rem) !important; /* +40px total */
  }
}

/* RESPONSIVE MARGIN-LEFT: 720px - 800px */
@media (min-width: 720px) and (max-width: 799px) {
  #listings-sheet .spot-card .flex-1,
  #listings-sheet .spot-card .flex-1.p-3,
  #listings-sheet .spot-card div.flex-1,
  #listings-sheet .spot-card div[class*="flex-1"],
  #listings-content-mobile .spot-card .flex-1,
  #listings-content-mobile .spot-card .flex-1.p-3,
  #listings-content-mobile .spot-card div.flex-1,
  #listings-content-mobile .spot-card div[class*="flex-1"] {
    margin-left: calc(96px + 0.75rem + 0.25rem) !important; /* +50px total */
  }
}

/* RESPONSIVE MARGIN-LEFT: 800px - 880px */
@media (min-width: 800px) and (max-width: 879px) {
  #listings-sheet .spot-card .flex-1,
  #listings-sheet .spot-card .flex-1.p-3,
  #listings-sheet .spot-card div.flex-1,
  #listings-sheet .spot-card div[class*="flex-1"],
  #listings-content-mobile .spot-card .flex-1,
  #listings-content-mobile .spot-card .flex-1.p-3,
  #listings-content-mobile .spot-card div.flex-1,
  #listings-content-mobile .spot-card div[class*="flex-1"] {
    margin-left: calc(106px + 0.75rem + 0.25rem) !important; /* +60px total */
  }
}

/* RESPONSIVE MARGIN-LEFT: 880px - 960px */
@media (min-width: 880px) and (max-width: 959px) {
  #listings-sheet .spot-card .flex-1,
  #listings-sheet .spot-card .flex-1.p-3,
  #listings-sheet .spot-card div.flex-1,
  #listings-sheet .spot-card div[class*="flex-1"],
  #listings-content-mobile .spot-card .flex-1,
  #listings-content-mobile .spot-card .flex-1.p-3,
  #listings-content-mobile .spot-card div.flex-1,
  #listings-content-mobile .spot-card div[class*="flex-1"] {
    margin-left: calc(116px + 0.75rem + 0.25rem) !important; /* +70px total */
  }
}

/* RESPONSIVE MARGIN-LEFT: 960px - 1023px (tablet range) */
@media (min-width: 960px) and (max-width: 1023px) {
  #listings-sheet .spot-card .flex-1,
  #listings-sheet .spot-card .flex-1.p-3,
  #listings-sheet .spot-card div.flex-1,
  #listings-sheet .spot-card div[class*="flex-1"],
  #listings-content-mobile .spot-card .flex-1,
  #listings-content-mobile .spot-card .flex-1.p-3,
  #listings-content-mobile .spot-card div.flex-1,
  #listings-content-mobile .spot-card div[class*="flex-1"] {
    margin-left: calc(126px + 0.75rem + 0.25rem) !important; /* +80px total */
  }
}

/* DEFENSIVE: Ensure spot-card has relative positioning for absolute image children */
#listings-sheet .spot-card,
#listings-content-mobile .spot-card {
  position: relative !important;
}

/* DEFENSIVE: Override line-clamp-2 on titles in bottom sheet - use truncation instead */
#listings-sheet .spot-card h3.line-clamp-2,
#listings-sheet .spot-card h3[class*="line-clamp"],
#listings-content-mobile .spot-card h3.line-clamp-2,
#listings-content-mobile .spot-card h3[class*="line-clamp"] {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}

.spot-card-title-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  min-width: 0;
  text-align: left !important;
  /* CRITICAL: Allow clicks to pass through to parent spot-card */
  pointer-events: none !important;
}

/* CRITICAL: Ensure all title child elements don't block spot-card clicks */
.spot-card-title-wrapper *,
.spot-card-title-content,
.spot-card-title-text,
.spot-card-title-duplicate,
.spot-card-title-duplicate2 {
  pointer-events: none !important;
}

/* Ensure proper clipping for scrolling titles - DESKTOP ONLY */
@media (min-width: 1024px) {
  .spot-card-title-wrapper.needs-scroll {
    overflow: hidden !important; /* Hide overflow to create viewport mask */
    position: relative !important;
    width: 100% !important; /* ORIGINAL: Keep exact original width */
    max-width: 100% !important; /* ORIGINAL: Keep exact original max-width */
    min-width: 0 !important; /* No minimum constraint */
    display: block !important; /* Force block display to respect width */
    flex-shrink: 0 !important; /* Prevent flex from shrinking the viewport */
    transform: translateX(20px) !important; /* Center the marquee by shifting right 20px */
  }
}

/* TABLET & MOBILE: Normal text display for needs-scroll elements */
@media (max-width: 1023px) {
  .spot-card-title-wrapper.needs-scroll {
    overflow: visible !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    flex-shrink: 0 !important;
    transform: none !important; /* No transform on tablet/mobile */
  }
}

/* Add subtle fade-in/fade-out effect on both ends of marquee - DESKTOP ONLY */
@media (min-width: 1024px) {
  .spot-card-title-wrapper.needs-scroll::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.6) 0%,
      rgba(255, 255, 255, 0) 12%,
      rgba(255, 255, 255, 0) 88%,
      rgba(255, 255, 255, 0.6) 100%
    );
    pointer-events: none;
    z-index: var(--z-map-container);
  }
}

/* Dark mode fade effect - matches neutral-800 (#262626) - DESKTOP ONLY */
@media (min-width: 1024px) {
  .dark .spot-card-title-wrapper.needs-scroll::before {
    background: linear-gradient(
      to right,
      rgba(38, 38, 38, 0.8) 0%,
      rgba(38, 38, 38, 0) 12%,
      rgba(38, 38, 38, 0) 88%,
      rgba(38, 38, 38, 0.8) 100%
    );
  }
}

/* Match card background colors for seamless fade - DESKTOP ONLY */
@media (min-width: 1024px) {
  .spot-card.bg-white .spot-card-title-wrapper.needs-scroll::before {
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.6) 0%,
      rgba(255, 255, 255, 0) 12%,
      rgba(255, 255, 255, 0) 88%,
      rgba(255, 255, 255, 0.6) 100%
    );
  }

  .spot-card.dark\\:bg-neutral-800 .spot-card-title-wrapper.needs-scroll::before,
  .dark .spot-card.bg-neutral-800 .spot-card-title-wrapper.needs-scroll::before {
    background: linear-gradient(
      to right,
      rgba(38, 38, 38, 0.8) 0%,
      rgba(38, 38, 38, 0) 12%,
      rgba(38, 38, 38, 0) 88%,
      rgba(38, 38, 38, 0.8) 100%
    );
  }

  /* Enhanced dark mode fade effects for different card backgrounds */
  .dark .spot-card[class*="bg-neutral-800"] .spot-card-title-wrapper.needs-scroll::before,
  .dark .spot-card[class*="bg-gray-800"] .spot-card-title-wrapper.needs-scroll::before {
    background: linear-gradient(
      to right,
      rgba(38, 38, 38, 0.8) 0%,
      rgba(38, 38, 38, 0) 12%,
      rgba(38, 38, 38, 0) 88%,
      rgba(38, 38, 38, 0.8) 100%
    );
  }

  /* Fallback for any dark mode cards without specific background classes */
  html.dark .spot-card-title-wrapper.needs-scroll::before,
  body.dark .spot-card-title-wrapper.needs-scroll::before {
    background: linear-gradient(
      to right,
      rgba(38, 38, 38, 0.8) 0%,
      rgba(38, 38, 38, 0) 12%,
      rgba(38, 38, 38, 0) 88%,
      rgba(38, 38, 38, 0.8) 100%
    ) !important;
  }
}

/* Override ALL parent container restrictions for marquee - maximum extension - DESKTOP ONLY */
@media (min-width: 1024px) {
  .spot-card .flex-1 .mb-1 .spot-card-title-wrapper.needs-scroll {
    width: calc(100% + 80px) !important; /* WIDENED: Extend viewport width to show more content */
    max-width: calc(100% + 80px) !important; /* WIDENED: Match width constraint */
    position: relative !important;
    overflow: hidden !important; /* Hide overflow to create viewport mask */
  }
}

/* Override parent container overflow restrictions - direct targeting */
/* Note: Parent container overrides applied directly to marquee element via other selectors */

/* Force parent containers to allow overflow for ALL marquee cards - DESKTOP ONLY */
@media (min-width: 1024px) {
  .spot-card {
    overflow: visible !important; /* Allow marquee to extend beyond card */
  }
}

/* VIEWPORT EXTENSION: Extend the parent flex container to give more space - DESKTOP ONLY */
@media (min-width: 1024px) {
  .spot-card .flex-1 {
    overflow: visible !important; /* Allow content to extend beyond flex container */
  }

  /* Override inline overflow-hidden class on spot cards */
  .spot-card.overflow-hidden {
    overflow: visible !important; /* Override inline class with higher specificity */
  }

  .spot-card .flex-1.pl-1.pr-1.py-2.min-w-0 {
    overflow: visible !important; /* Allow marquee to extend beyond flex container */
    padding-left: 0 !important; /* Remove left padding that pushes content right */
  }

  .spot-card .mb-1 {
    overflow: visible !important; /* Allow marquee to extend beyond mb-1 container */
  }
}

/* No fade mask - full viewport visible from 0% to 100% */
/* .spot-card-title-wrapper.needs-scroll::before - REMOVED to show full marquee */

/* Center price text vertically in photo overlay */
.spot-card .relative div[style*="position: absolute"][style*="bottom: 0"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.spot-card .relative div[style*="position: absolute"][style*="bottom: 0"] span,
.spot-card .relative div[style*="position: absolute"] span {
  margin: 0 !important;
  line-height: 1 !important;
  font-size: 10px !important; /* Smaller price text size */
  font-weight: 800 !important; /* Price text weight */
}

/* DESKTOP ONLY: Ensure overflow clipping works in all card layouts */
@media (min-width: 1024px) {
  .spot-card .spot-card-title-wrapper.needs-scroll,
  .spot-card-mobile .spot-card-title-wrapper.needs-scroll,
  .spot-card .mb-1 .spot-card-title-wrapper.needs-scroll,
  .spot-card-mobile .mb-1 .spot-card-title-wrapper.needs-scroll {
    overflow: hidden !important; /* Hide all overflow to create viewport mask */
    position: relative;
    width: calc(100% + 80px) !important; /* WIDENED: Extend viewport width to show more content */
    max-width: calc(100% + 80px) !important; /* WIDENED: Allow wider viewport */
    min-width: 0 !important; /* No minimum constraint */
    display: block !important; /* Force block display to respect width */
    flex-shrink: 0 !important; /* Prevent flex from shrinking the viewport */
  }
}

/* TABLET & MOBILE: Normal display for all card layouts */
@media (max-width: 1023px) {
  .spot-card .spot-card-title-wrapper.needs-scroll,
  .spot-card-mobile .spot-card-title-wrapper.needs-scroll,
  .spot-card .mb-1 .spot-card-title-wrapper.needs-scroll,
  .spot-card-mobile .mb-1 .spot-card-title-wrapper.needs-scroll {
    overflow: visible !important;
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    flex-shrink: 0 !important;
  }

  /* BOTTOM SHEET: Allow title content to extend wider for marquee */
  #listings-content-mobile .spot-card .spot-card-title-wrapper.needs-scroll,
  #listings-sheet .spot-card .spot-card-title-wrapper.needs-scroll {
    width: calc(100% + 120px) !important; /* Extended width for better marquee visibility */
    max-width: calc(100% + 120px) !important;
    overflow: hidden !important; /* Hide overflow to create viewport mask */
  }
}

.spot-card-title-content {
  display: inline-block;
  white-space: nowrap;
  min-width: 0;
}

/* Non-scrolling titles: Consolidated rules */
.spot-card-title-wrapper:not(.needs-scroll) {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  line-height: 1.2;
  overflow: visible;
  position: relative;
  z-index: var(--z-base);
}

.spot-card-title-wrapper:not(.needs-scroll) .spot-card-title-content {
  display: block;
  width: fit-content;
  max-width: none;
  text-align: left;
  margin: 0;
  padding: 0;
}

.spot-card-title-wrapper:not(.needs-scroll) .spot-card-title-text {
  display: block;
  white-space: nowrap;
  text-align: left;
  width: auto;
  max-width: none;
  margin: 0;
  margin-top: -0.125rem;
  padding: 0;
  overflow: visible;
  text-overflow: clip;
}

/* ENHANCED SPECIFICITY: Margin control for non-scrolling title text */
#listings-overlay .spot-card .spot-card-title-wrapper:not(.needs-scroll) .spot-card-title-text,
#listings-content .spot-card .spot-card-title-wrapper:not(.needs-scroll) .spot-card-title-text,
div.spot-card .spot-card-title-wrapper:not(.needs-scroll) .spot-card-title-text {
  margin-top: -0.125rem !important;
}

/* CONSISTENCY FIX: Override short-title-static positioning to match regular titles */
/* CRITICAL: Only apply negative margin after JavaScript initialization to prevent FOUC */
/* CRITICAL: These rules MUST be inside desktop media query to prevent mobile application */
@media (min-width: 1024px) {
  #listings-overlay .spot-card .spot-card-title-wrapper.short-title-static[data-marquee-processed="true"],
  #listings-content .spot-card .spot-card-title-wrapper.short-title-static[data-marquee-processed="true"],
  div.spot-card .spot-card-title-wrapper.short-title-static[data-marquee-processed="true"] {
    /* REMOVED: text-align not needed - default is left */
    margin-left: -30px !important; /* Reset the -20px margin */
    margin-right: 0 !important; /* Reset the -20px margin */
    width: 100% !important; /* Reset the calc(100% + 40px) width */
    max-width: 100% !important; /* Ensure wrapper doesn't exceed container */
    transform: none !important; /* Remove any transforms */
    overflow: visible !important; /* Match regular wrapper behavior */
    position: relative !important; /* Consistent positioning context */
  }

  /* Default safe state: Prevent negative margin from showing before initialization */
  #listings-overlay .spot-card .spot-card-title-wrapper.short-title-static:not([data-marquee-processed="true"]),
  #listings-content .spot-card .spot-card-title-wrapper.short-title-static:not([data-marquee-processed="true"]),
  div.spot-card .spot-card-title-wrapper.short-title-static:not([data-marquee-processed="true"]) {
    margin-left: 0 !important; /* Safe default: no negative margin until initialized */
    margin-right: 0 !important;
  }
}

/* CRITICAL: Prevent desktop short-title-static styles from applying to mobile */
/* Mobile bottom sheet should NEVER have negative margins or desktop transforms */
/* CRITICAL: Also prevent mobile styles from applying on desktop viewports */
@media (max-width: 1023px) {
  #listings-sheet .spot-card .spot-card-title-wrapper.short-title-static,
  #listings-content-mobile .spot-card .spot-card-title-wrapper.short-title-static,
  #listings-sheet .spot-card .spot-card-title-wrapper.short-title-static[data-marquee-processed="true"],
  #listings-content-mobile .spot-card .spot-card-title-wrapper.short-title-static[data-marquee-processed="true"],
  #listings-sheet .spot-card .spot-card-title-wrapper.short-title-static.very-short-title,
  #listings-content-mobile .spot-card .spot-card-title-wrapper.short-title-static.very-short-title,
  #listings-sheet .spot-card .spot-card-title-wrapper.short-title-static.very-short-title[data-marquee-processed="true"],
  #listings-content-mobile .spot-card .spot-card-title-wrapper.short-title-static.very-short-title[data-marquee-processed="true"] {
    margin-left: 0 !important; /* NEVER apply negative margins on mobile */
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important; /* Mobile uses hidden overflow */
    transform: none !important; /* No transforms on mobile */
    text-align: left !important;
  }
}

/* CRITICAL: Prevent mobile container styles from applying on desktop */
/* CRITICAL: Mobile containers should NEVER get desktop margins, even on desktop viewports */
/* This ensures that even if mobile containers are somehow visible on desktop, their styles don't apply */
@media (min-width: 1024px) {
  /* CRITICAL: Mobile containers should ALWAYS have margin-left: 0, even on desktop viewports */
  #listings-sheet .spot-card .spot-card-title-wrapper.short-title-static.very-short-title .spot-card-title-text,
  #listings-content-mobile .spot-card .spot-card-title-wrapper.short-title-static.very-short-title .spot-card-title-text,
  #listings-sheet .spot-card .spot-card-title-wrapper.short-title-static.very-short-title[data-marquee-processed="true"] .spot-card-title-text,
  #listings-content-mobile .spot-card .spot-card-title-wrapper.short-title-static.very-short-title[data-marquee-processed="true"] .spot-card-title-text {
    margin-left: 0 !important; /* NEVER apply desktop margins to mobile containers */
    margin-top: -0.125rem !important;
    transform: none !important;
  }
  
  /* Ensure mobile containers are hidden on desktop */
  #listings-sheet,
  #listings-content-mobile {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* CRITICAL: Mobile title text - ALWAYS reset to 0 margin, regardless of classes */
/* This rule MUST come after desktop rules to ensure it overrides them */
/* HIGH SPECIFICITY: Target mobile containers explicitly to prevent desktop styles */
#listings-sheet .spot-card .spot-card-title-wrapper.short-title-static .spot-card-title-text,
#listings-content-mobile .spot-card .spot-card-title-wrapper.short-title-static .spot-card-title-text,
#listings-sheet .spot-card .spot-card-title-wrapper.short-title-static.very-short-title .spot-card-title-text,
#listings-content-mobile .spot-card .spot-card-title-wrapper.short-title-static.very-short-title .spot-card-title-text,
#listings-sheet .spot-card .spot-card-title-wrapper.short-title-static[data-marquee-processed="true"] .spot-card-title-text,
#listings-content-mobile .spot-card .spot-card-title-wrapper.short-title-static[data-marquee-processed="true"] .spot-card-title-text,
#listings-sheet .spot-card .spot-card-title-wrapper.short-title-static.very-short-title[data-marquee-processed="true"] .spot-card-title-text,
#listings-content-mobile .spot-card .spot-card-title-wrapper.short-title-static.very-short-title[data-marquee-processed="true"] .spot-card-title-text {
  margin-left: 0 !important; /* NEVER apply desktop margins on mobile containers */
  margin-top: -0.125rem !important;
  transform: none !important;
  text-align: left !important;
}

/* CONSISTENCY FIX: Override positioning by exact class combinations */

/* For very short titles (≤20 chars like "Spot", "Garage") - standard margin */
/* CRITICAL: Only apply desktop styles when desktop containers are visible */
@media (min-width: 1024px) {
  /* CRITICAL: Ensure desktop containers are visible before applying styles */
  #listings-overlay:not([style*="display: none"]):not(.hidden) .spot-card .spot-card-title-wrapper.short-title-static.very-short-title .spot-card-title-text,
  #listings-content:not([style*="display: none"]):not(.hidden) .spot-card .spot-card-title-wrapper.short-title-static.very-short-title .spot-card-title-text,
  #listings-overlay .spot-card .spot-card-title-wrapper.short-title-static.very-short-title .spot-card-title-text,
  #listings-content .spot-card .spot-card-title-wrapper.short-title-static.very-short-title .spot-card-title-text,
  div.spot-card .spot-card-title-wrapper.short-title-static.very-short-title .spot-card-title-text {
    margin-top: -0.125rem !important;
    margin-left: 3.5rem !important; /* Standard margin for very short titles */
    transform: none !important; /* Override translateX(0) */
  }
  
  /* CRITICAL: Prevent mobile container styles from applying on desktop */
  #listings-content-mobile .spot-card .spot-card-title-wrapper.short-title-static.very-short-title .spot-card-title-text,
  #listings-sheet .spot-card .spot-card-title-wrapper.short-title-static.very-short-title .spot-card-title-text {
    margin-left: 0 !important; /* Reset mobile styles if they somehow apply */
  }
}

/* SPECIFIC: Remove left margin completely for 4-character titles like "Spot" - MAXIMUM SPECIFICITY */
/* CRITICAL: Only apply to desktop containers, never mobile */
#listings-overlay .spot-card .spot-card-title-wrapper.short-title-static.very-short-title .spot-card-title-text[data-char-count="4"],
#listings-content .spot-card .spot-card-title-wrapper.short-title-static.very-short-title .spot-card-title-text[data-char-count="4"] {
  margin-left: 0 !important; /* No left margin for exactly 4-character titles */
}

/* CRITICAL: Mobile containers should ALWAYS have margin-left: 0 for 4-character titles */
#listings-sheet .spot-card .spot-card-title-wrapper.short-title-static.very-short-title .spot-card-title-text[data-char-count="4"],
#listings-content-mobile .spot-card .spot-card-title-wrapper.short-title-static.very-short-title .spot-card-title-text[data-char-count="4"] {
  margin-left: 0 !important; /* ALWAYS 0 margin for mobile containers */
}

/* For medium-length titles (21-29 chars like "Safe Covered Parking Space") - only short-title-static class */
/* NOTE: margin-top: -0.125rem is ONLY for char-30 titles, not medium-length titles */
#listings-overlay .spot-card .spot-card-title-wrapper.short-title-static:not(.very-short-title):not(.char-30) .spot-card-title-text,
#listings-content .spot-card .spot-card-title-wrapper.short-title-static:not(.very-short-title):not(.char-30) .spot-card-title-text,
div.spot-card .spot-card-title-wrapper.short-title-static:not(.very-short-title):not(.char-30) .spot-card-title-text {
  margin-left: -1.75rem !important; /* Extra left margin for medium-length titles */
  transform: none !important;
}

/* CRITICAL: Specific fix for processed short-title-static titles that are too far left */
/* Target titles with data-marquee-processed="true" but not very-short-title */
#listings-content .spot-card .spot-card-title-wrapper.short-title-static[data-marquee-processed="true"]:not(.very-short-title) .spot-card-title-text,
#listings-overlay .spot-card .spot-card-title-wrapper.short-title-static[data-marquee-processed="true"]:not(.very-short-title) .spot-card-title-text {
  margin-left: -0.75rem !important; /* Less negative margin for processed titles - moves them right */
  transform: none !important;
}

/* SPECIFIC: Add left margin to "Backyard Access" spot type labels */
.spot-card .text-xs.font-medium.text-neutral-700.dark\\:text-neutral-300.uppercase.tracking-wide {
  margin-left: -0.5rem !important; /* Left margin for spot type labels */
}

/* SPECIFIC: Add left margin to the flex container with spot type and distance */
/* CRITICAL: Only apply on mobile - desktop has its own rules */
@media (max-width: 1023px) {
  .spot-card .flex.items-center.gap-2.mt-0\.5.w-full.max-w-full.min-w-0 {
    margin-left: 0rem !important; /* Left margin for spot info container */
  }
}

/* ==============================================
 * UNIVERSAL GRAVEL SURFACE CONTAINER RULES
 * These apply regardless of parent container
 * ============================================== */

/* DEFAULT: All gravel-surface-container elements get transform */
.gravel-surface-container {
  transform: translate(2.3rem, -2px) !important;
  position: relative !important;
}

/* OVERRIDE: Grass/Gravel surface containers get special styling - HIGH SPECIFICITY */
/* DESKTOP ONLY: Keep this rule for desktop list sheet */
/* CRITICAL: Only apply to desktop containers, never mobile */
@media (min-width: 1024px) {
  #listings-content .spot-card .gravel-surface-container.flex.items-center.gap-2.mt-0\.5.w-full.max-w-full.min-w-0,
  #listings-overlay .spot-card .gravel-surface-container.flex.items-center.gap-2.mt-0\.5.w-full.max-w-full.min-w-0,
  #listings-content .spot-card .flex.items-center.gap-2.mt-0\.5.w-full.max-w-full.min-w-0.gravel-surface-container,
  #listings-overlay .spot-card .flex.items-center.gap-2.mt-0\.5.w-full.max-w-full.min-w-0.gravel-surface-container,
  #listings-content-mobile .spot-card .gravel-surface-container,
  .spot-card .gravel-surface-container {
    transform: translate(2.3rem, -2px) !important; /* Move left 1rem, up 2px - overrides responsive transforms */
    position: relative !important;
  }
}

/* CRITICAL: Prevent gravel-surface transforms from applying to regular spot type/distance on desktop */
/* DEFENSIVE CSS: Ensure ALL regular spot type/distance elements get correct styles on desktop */
@media (min-width: 1024px) {
  #listings-content .spot-card .flex.items-center.gap-2.mt-0\.5:not(.gravel-surface-container):not([class*="gravel-surface"]):not(.backyard-access-container):not([class*="backyard-access"]),
  #listings-overlay .spot-card .flex.items-center.gap-2.mt-0\.5:not(.gravel-surface-container):not([class*="gravel-surface"]):not(.backyard-access-container):not([class*="backyard-access"]),
  #listings-content .spot-card .flex.items-center.gap-2.mt-0\.5.w-full:not(.gravel-surface-container):not([class*="gravel-surface"]):not(.backyard-access-container):not([class*="backyard-access"]),
  #listings-overlay .spot-card .flex.items-center.gap-2.mt-0\.5.w-full:not(.gravel-surface-container):not([class*="gravel-surface"]):not(.backyard-access-container):not([class*="backyard-access"]),
  #listings-content .spot-card .flex.items-center.gap-2.mt-0\.5.w-full.max-w-full:not(.gravel-surface-container):not([class*="gravel-surface"]):not(.backyard-access-container):not([class*="backyard-access"]),
  #listings-overlay .spot-card .flex.items-center.gap-2.mt-0\.5.w-full.max-w-full:not(.gravel-surface-container):not([class*="gravel-surface"]):not(.backyard-access-container):not([class*="backyard-access"]),
  #listings-content .spot-card .flex.items-center.gap-2:not(.gravel-surface-container):not([class*="gravel-surface"]):not(.backyard-access-container):not([class*="backyard-access"]),
  #listings-overlay .spot-card .flex.items-center.gap-2:not(.gravel-surface-container):not([class*="gravel-surface"]):not(.backyard-access-container):not([class*="backyard-access"]),
  #listings-content .spot-card div.flex.items-center.gap-2:not(.gravel-surface-container):not([class*="gravel-surface"]):not(.backyard-access-container):not([class*="backyard-access"]),
  #listings-overlay .spot-card div.flex.items-center.gap-2:not(.gravel-surface-container):not([class*="gravel-surface"]):not(.backyard-access-container):not([class*="backyard-access"]) {
    transform: none !important; /* Reset any transforms - positioning handled by margins */
    margin-left: -0.5rem !important; /* Consistent right positioning */
  }
}

/* TABLET BOTTOMSHEET: Grass/Gravel surface containers get special styling - HIGH SPECIFICITY */
@media (min-width: 568px) and (max-width: 1023px) {
  #listings-sheet .spot-card .gravel-surface-container.flex.items-center.gap-2.mt-0\.5.w-full.max-w-full.min-w-0,
  #listings-sheet .spot-card .flex.items-center.gap-2.mt-0\.5.w-full.max-w-full.min-w-0.gravel-surface-container,
  #listings-sheet .spot-card .gravel-surface-container.flex.items-center.gap-2,
  #listings-sheet .spot-card .gravel-surface-container {
    transform: translate(-0.6rem, -2px) !important; /* Move left 1rem, up 2px - overrides responsive transforms */
    position: relative !important;
  }
}

/* MOBILE BOTTOMSHEET: Grass/Gravel surface containers get special styling - HIGH SPECIFICITY */
@media (max-width: 567px) {
  #listings-sheet .spot-card .gravel-surface-container.flex.items-center.gap-2.mt-0\.5.w-full.max-w-full.min-w-0,
  #listings-sheet .spot-card .flex.items-center.gap-2.mt-0\.5.w-full.max-w-full.min-w-0.gravel-surface-container,
  #listings-sheet .spot-card .gravel-surface-container.flex.items-center.gap-2,
  #listings-sheet .spot-card .gravel-surface-container,
  #listings-content-mobile .spot-card .gravel-surface-container {
    transform: translate(2.8rem, -2px) !important; /* Move left 1rem, up 2px - overrides responsive transforms */
    position: relative !important;
  }
}

/* ==============================================
 * UNIVERSAL BACKYARD ACCESS CONTAINER RULES
 * These apply regardless of parent container
 * ============================================== */

/* DEFAULT: All backyard-access-container elements get transform */
.backyard-access-container {
  transform: translate(0.5rem, -2px) !important;
  position: relative !important;
}

/* OVERRIDE: Backyard Access containers get special styling for mobile touch - HIGH SPECIFICITY */
@media (hover: none) and (pointer: coarse) {
  .spot-card .backyard-access-container.flex.items-center.gap-2.mt-0\.5.w-full.max-w-full.min-w-0,
  .spot-card .flex.items-center.gap-2.mt-0\.5.w-full.max-w-full.min-w-0.backyard-access-container,
  #listings-content-mobile .spot-card .backyard-access-container.flex.items-center.gap-2,
  #listings-content-mobile .spot-card .backyard-access-container,
  #listings-sheet .spot-card .backyard-access-container.flex.items-center.gap-2,
  #listings-sheet .spot-card .backyard-access-container {
    transform: translate(0.2rem, -2px) !important; /* Move left 1.8rem, up 2px - overrides responsive transforms */
    position: relative !important;
  }
}

/* MOBILE BOTTOMSHEET: Backyard Access container transform left */
@media (max-width: 1023px) {
  #listings-sheet .spot-card .backyard-access-container.flex.items-center.gap-2,
  #listings-sheet .spot-card .backyard-access-container,
  #listings-content-mobile .spot-card .backyard-access-container.flex.items-center.gap-2,
  #listings-content-mobile .spot-card .backyard-access-container {
    transform: translate(2.5rem, -2px) !important; /* Move left for mobile bottomsheet */
    position: relative !important;
  }
}

/* DESKTOP LIST SHEET: Backyard Access container - very small left transform */
@media (min-width: 1024px) {
  #listings-content .spot-card .backyard-access-container.flex.items-center.gap-2.mt-0\.5.w-full.max-w-full.min-w-0,
  #listings-content .spot-card .flex.items-center.gap-2.mt-0\.5.w-full.max-w-full.min-w-0.backyard-access-container,
  #listings-content .spot-card .backyard-access-container.flex.items-center.gap-2,
  #listings-content .spot-card .backyard-access-container {
    transform: translateX(0rem) !important; /* Very small left transform for desktop */
    position: relative !important;
  }
}

/* MOBILE BOTTOMSHEET: Location badge transform left and bottom */
/* HIGH SPECIFICITY: Override any transform: none rules */
@media (max-width: 1023px) {
  #listings-sheet .spot-card button.location-badge.clickable-address,
  #listings-sheet .spot-card button.clickable-address.location-badge,
  #listings-sheet .spot-card .location-badge.clickable-address,
  #listings-content-mobile .spot-card button.location-badge.clickable-address,
  #listings-content-mobile .spot-card button.clickable-address.location-badge,
  #listings-content-mobile .spot-card .location-badge.clickable-address {
    transform: translate(-0.5rem, 0.25rem) !important; /* Move left and down */
    position: relative !important;
  }
}

/* OVERRIDE: Make all text smaller in Grass/Gravel surface containers - HIGH SPECIFICITY */
.spot-card .gravel-surface-container.flex.items-center.gap-2.mt-0\.5.w-full.max-w-full.min-w-0 *,
.spot-card .flex.items-center.gap-2.mt-0\.5.w-full.max-w-full.min-w-0.gravel-surface-container *,
#listings-content-mobile .spot-card .gravel-surface-container *,
#listings-content-mobile .spot-card .gravel-surface-container .text-xs,
#listings-content-mobile .spot-card .gravel-surface-container span {
  font-size: 0.625rem !important; /* 10px - even smaller text for Grass/Gravel surface containers */
  line-height: 1.1 !important; /* Tighter line height for compact display */
  font-weight: 500 !important; /* Medium weight to maintain readability at smaller size */
}

/* SPECIFIC: Add left margin to clickable address container */
/* CRITICAL: Only apply on mobile - desktop has its own rules */
@media (max-width: 1023px) {
  /* CRITICAL: Exclude marquee cards from this rule - they have their own positioning */
  .spot-card:not(:has(.spot-card-title-wrapper.needs-scroll)):not(:has(.spot-card-title-wrapper[data-marquee-processed="true"])) .clickable-address.flex.items-center.gap-1.-ml-1,
  .spot-card .clickable-address.flex.items-center.gap-1.-ml-1:not(:has(.spot-card-title-wrapper.needs-scroll)):not(:has(.spot-card-title-wrapper[data-marquee-processed="true"])) {
    margin-left: -1.75rem !important; /* Left margin for address container - only for non-marquee cards */
  }
  
  /* CRITICAL: Override for marquee cards - ensure they use the correct margin */
  .spot-card:has(.spot-card-title-wrapper.needs-scroll) .clickable-address,
  .spot-card:has(.spot-card-title-wrapper[data-marquee-processed="true"]) .clickable-address {
    margin-left: -1.5rem !important; /* Correct margin for marquee cards */
  }
}

/* NUCLEAR OPTION: Force ALL title containers to have consistent positioning */
.spot-card .mb-1,
.spot-card .mb-1\.5 {
  margin-top: 0 !important; /* Override any negative margins on title container */
  margin-bottom: 0.25rem !important; /* Consistent bottom spacing between title and address */
  padding-top: 0.125rem !important; /* Add top padding to create space above title */
  display: flex !important; /* CRITICAL: Ensure consistent flex layout */
  flex-direction: column !important; /* Stack title elements vertically */
}

/* NUCLEAR OPTION: Force ALL title wrappers to have consistent positioning */
.spot-card .spot-card-title-wrapper {
  margin-top: 0 !important; /* Reset any wrapper margins */
  margin-bottom: 0 !important; /* Reset bottom margins - spacing handled by parent */
  position: relative !important; /* Ensure consistent positioning context */
}

/* CRITICAL: Standardize vertical spacing between card details */
/* These rules ensure consistent spacing regardless of HTML classes, transforms, or image sizes */
/* DEFENSIVE CSS: Apply to ALL possible selectors to prevent inconsistent loading */
/* Address spacing - consistent margin-top regardless of HTML class */
.spot-card .clickable-address,
.spot-card .clickable-address.mt-0\.5,
.spot-card .clickable-address.mt-1,
.spot-card .clickable-address[class*="mt-"],
.spot-card div.clickable-address,
.spot-card [class*="clickable-address"],
#listings-sheet .spot-card .clickable-address,
#listings-sheet .spot-card div.clickable-address,
#listings-content-mobile .spot-card .clickable-address,
#listings-content-mobile .spot-card div.clickable-address,
#listings-overlay .spot-card .clickable-address,
#listings-overlay .spot-card div.clickable-address,
#listings-content .spot-card .clickable-address,
#listings-content .spot-card div.clickable-address {
  margin-top: 0.25rem !important; /* Consistent spacing after title */
  margin-bottom: 0 !important; /* No bottom margin */
}

/* Spot type/distance spacing - consistent margin-top */
/* CRITICAL: Override any mt-0.5 or mt-1 classes from HTML */
/* DEFENSIVE CSS: Apply to ALL possible selectors including all class combinations */
.spot-card .flex.items-center.gap-2.mt-0\.5,
.spot-card .flex.items-center.gap-2.mt-1,
.spot-card .flex.items-center.gap-2.mt-0\.5.w-full,
.spot-card .flex.items-center.gap-2.mt-1.w-full,
.spot-card .flex.items-center.gap-2[class*="mt-"],
.spot-card .flex.items-center.gap-2.mt-0\.5.w-full.max-w-full,
.spot-card .flex.items-center.gap-2.mt-0\.5.w-full.max-w-full.min-w-0,
.spot-card div.flex.items-center.gap-2,
.spot-card [class*="flex"][class*="items-center"][class*="gap-2"],
#listings-sheet .spot-card .flex.items-center.gap-2,
#listings-sheet .spot-card .flex.items-center.gap-2.mt-0\.5,
#listings-sheet .spot-card .flex.items-center.gap-2.mt-0\.5.w-full,
#listings-sheet .spot-card div.flex.items-center.gap-2,
#listings-content-mobile .spot-card .flex.items-center.gap-2,
#listings-content-mobile .spot-card .flex.items-center.gap-2.mt-0\.5,
#listings-content-mobile .spot-card .flex.items-center.gap-2.mt-0\.5.w-full,
#listings-content-mobile .spot-card div.flex.items-center.gap-2,
#listings-overlay .spot-card .flex.items-center.gap-2,
#listings-overlay .spot-card .flex.items-center.gap-2.mt-0\.5,
#listings-overlay .spot-card .flex.items-center.gap-2.mt-0\.5.w-full,
#listings-overlay .spot-card div.flex.items-center.gap-2,
#listings-content .spot-card .flex.items-center.gap-2,
#listings-content .spot-card .flex.items-center.gap-2.mt-0\.5,
#listings-content .spot-card .flex.items-center.gap-2.mt-0\.5.w-full,
#listings-content .spot-card div.flex.items-center.gap-2 {
  margin-top: 0.25rem !important; /* Consistent spacing after address */
  margin-bottom: 0 !important; /* No bottom margin */
}

/* Availability badge spacing - consistent margin-top */
/* CRITICAL: Override any mt-1 or mt-0.5 classes from HTML */
.spot-card .flex.items-start.justify-start.mt-1,
.spot-card .flex.items-start.justify-start.mt-0\.5,
.spot-card .flex.items-start.justify-start[class*="mt-"],
#listings-sheet .spot-card .flex.items-start.justify-start,
#listings-content-mobile .spot-card .flex.items-start.justify-start,
#listings-overlay .spot-card .flex.items-start.justify-start,
#listings-content .spot-card .flex.items-start.justify-start {
  margin-top: 0.375rem !important; /* Consistent spacing after spot type/distance */
  margin-bottom: 0 !important; /* No bottom margin */
}

/* Scrolling titles: Consolidated marquee system - ONLY when properly structured */
.spot-card-title-wrapper.needs-scroll .spot-card-title-content {
  display: inline-flex;
  will-change: transform;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  backface-visibility: hidden;
  perspective: 1000px;
  text-rendering: optimizeLegibility;
  transition: none;
  position: relative !important; /* Force relative positioning */
  top: 0 !important; /* CRITICAL: Prevent vertical shift on animation loop */
  left: 0 !important; /* CRITICAL: Ensure consistent horizontal starting point */
  margin-top: 0 !important; /* CRITICAL: Prevent vertical margin shifts */
  margin-bottom: 0 !important; /* CRITICAL: Prevent vertical margin shifts */
  padding-top: 0 !important; /* CRITICAL: Prevent vertical padding shifts */
  padding-bottom: 0 !important; /* CRITICAL: Prevent vertical padding shifts */
  vertical-align: top !important; /* CRITICAL: Ensure consistent vertical alignment */
  z-index: var(--z-base) !important; /* Keep below fade overlay */
  width: auto !important; /* Let content flow naturally within constrained wrapper */
  max-width: none !important; /* Remove any width constraints on content itself */
}

/* ESSENTIAL DEFENSIVE CSS: Ensure address and spot type/distance styles apply to marquee cards */
/* CRITICAL: Cards with needs-scroll or data-marquee-processed must still get correct address/spot type styles */
/* Use :has() selector for modern browsers, plus fallback selectors for broader support */
.spot-card:has(.spot-card-title-wrapper.needs-scroll) .clickable-address,
.spot-card:has(.spot-card-title-wrapper[data-marquee-processed="true"]) .clickable-address,
.spot-card .mb-1:has(.spot-card-title-wrapper.needs-scroll) ~ .clickable-address,
.spot-card .mb-1:has(.spot-card-title-wrapper[data-marquee-processed="true"]) ~ .clickable-address,
.spot-card .mb-1 .spot-card-title-wrapper.needs-scroll ~ .clickable-address,
.spot-card .mb-1 .spot-card-title-wrapper[data-marquee-processed="true"] ~ .clickable-address,
#listings-overlay .spot-card:has(.spot-card-title-wrapper.needs-scroll) .clickable-address,
#listings-content .spot-card:has(.spot-card-title-wrapper.needs-scroll) .clickable-address,
#listings-overlay .spot-card:has(.spot-card-title-wrapper[data-marquee-processed="true"]) .clickable-address,
#listings-content .spot-card:has(.spot-card-title-wrapper[data-marquee-processed="true"]) .clickable-address,
#listings-overlay .spot-card .mb-1 .spot-card-title-wrapper.needs-scroll ~ .clickable-address,
#listings-content .spot-card .mb-1 .spot-card-title-wrapper.needs-scroll ~ .clickable-address,
#listings-overlay .spot-card .mb-1 .spot-card-title-wrapper[data-marquee-processed="true"] ~ .clickable-address,
#listings-content .spot-card .mb-1 .spot-card-title-wrapper[data-marquee-processed="true"] ~ .clickable-address {
  margin-top: 0rem !important; /* Consistent spacing after title */
  margin-bottom: 0 !important; /* No bottom margin */
}

.spot-card:has(.spot-card-title-wrapper.needs-scroll) .flex.items-center.gap-2,
.spot-card:has(.spot-card-title-wrapper[data-marquee-processed="true"]) .flex.items-center.gap-2,
.spot-card .mb-1:has(.spot-card-title-wrapper.needs-scroll) ~ .flex.items-center.gap-2,
.spot-card .mb-1:has(.spot-card-title-wrapper[data-marquee-processed="true"]) ~ .flex.items-center.gap-2,
.spot-card .mb-1 .spot-card-title-wrapper.needs-scroll ~ .flex.items-center.gap-2,
.spot-card .mb-1 .spot-card-title-wrapper[data-marquee-processed="true"] ~ .flex.items-center.gap-2,
#listings-overlay .spot-card:has(.spot-card-title-wrapper.needs-scroll) .flex.items-center.gap-2,
#listings-content .spot-card:has(.spot-card-title-wrapper.needs-scroll) .flex.items-center.gap-2,
#listings-overlay .spot-card:has(.spot-card-title-wrapper[data-marquee-processed="true"]) .flex.items-center.gap-2,
#listings-content .spot-card:has(.spot-card-title-wrapper[data-marquee-processed="true"]) .flex.items-center.gap-2,
#listings-overlay .spot-card .mb-1 .spot-card-title-wrapper.needs-scroll ~ .flex.items-center.gap-2,
#listings-content .spot-card .mb-1 .spot-card-title-wrapper.needs-scroll ~ .flex.items-center.gap-2,
#listings-overlay .spot-card .mb-1 .spot-card-title-wrapper[data-marquee-processed="true"] ~ .flex.items-center.gap-2,
#listings-content .spot-card .mb-1 .spot-card-title-wrapper[data-marquee-processed="true"] ~ .flex.items-center.gap-2 {
  margin-top: 0.25rem !important; /* Consistent spacing after address */
  margin-bottom: 0 !important; /* No bottom margin */
}

/* DESKTOP: Ensure marquee cards get correct address and spot type positioning */
/* CRITICAL: Only match cards with .needs-scroll class - this is the definitive marquee indicator */
@media (min-width: 1024px) {
  #listings-overlay .spot-card:has(.spot-card-title-wrapper.needs-scroll) .clickable-address,
  #listings-content .spot-card:has(.spot-card-title-wrapper.needs-scroll) .clickable-address,
  #listings-overlay .spot-card .mb-1 .spot-card-title-wrapper.needs-scroll ~ .clickable-address,
  #listings-content .spot-card .mb-1 .spot-card-title-wrapper.needs-scroll ~ .clickable-address {
    margin-left: -1.5rem !important; /* Move address to the right */
    margin-right: 0 !important;
    transform: none !important; /* Reset any mobile transforms */
    left: 0 !important;
    right: auto !important;
    position: relative !important;
  }
  
  #listings-overlay .spot-card:has(.spot-card-title-wrapper.needs-scroll) .flex.items-center.gap-2:not(.gravel-surface-container):not([class*="gravel-surface"]):not(.backyard-access-container):not([class*="backyard-access"]),
  #listings-content .spot-card:has(.spot-card-title-wrapper.needs-scroll) .flex.items-center.gap-2:not(.gravel-surface-container):not([class*="gravel-surface"]):not(.backyard-access-container):not([class*="backyard-access"]),
  #listings-overlay .spot-card .mb-1 .spot-card-title-wrapper.needs-scroll ~ .flex.items-center.gap-2:not(.gravel-surface-container):not([class*="gravel-surface"]):not(.backyard-access-container):not([class*="backyard-access"]),
  #listings-content .spot-card .mb-1 .spot-card-title-wrapper.needs-scroll ~ .flex.items-center.gap-2:not(.gravel-surface-container):not([class*="gravel-surface"]):not(.backyard-access-container):not([class*="backyard-access"]) {
    margin-left: 0.5rem !important; /* Move spot type/distance to the right */
    margin-right: 0 !important;
    transform: none !important; /* Reset any mobile transforms or incorrect transforms */
    left: 0 !important;
    right: auto !important;
    position: relative !important;
  }
}

/* DEBUG: Add visual debugging aids (remove in production) */
.spot-card-title-wrapper.needs-scroll.debug-marquee {
  border: 2px solid red !important;
  background: rgba(255, 0, 0, 0.1) !important;
}

.spot-card-title-wrapper.needs-scroll.debug-marquee .spot-card-title-content {
  border: 1px solid blue !important;
  background: rgba(0, 0, 255, 0.1) !important;
}

.spot-card-title-wrapper.needs-scroll.debug-marquee .spot-card-title-text {
  background: rgba(0, 255, 0, 0.2) !important;
  border: 1px solid green !important;
}

.spot-card-title-wrapper.needs-scroll.debug-marquee .spot-card-title-duplicate,
.spot-card-title-wrapper.needs-scroll.debug-marquee .spot-card-title-duplicate2 {
  background: rgba(255, 255, 0, 0.2) !important;
  border: 1px solid orange !important;
}

/* SAFETY: Ensure animation only works with proper structure */
.spot-card-title-wrapper:not(.needs-scroll) .spot-card-title-content {
  animation: none !important;
}

/* SAFETY: Force stop animation on elements without needs-scroll class */
.spot-card-title-content {
  animation: none;
}

/* Override: Only enable animation when needs-scroll class is present - DESKTOP ONLY */
@media (min-width: 1024px) {
  .spot-card-title-wrapper.needs-scroll .spot-card-title-content {
    animation: simple-marquee-slow var(--marquee-duration, 35s) linear infinite;
  }
}

/* TABLET & MOBILE: Disable marquee animation completely */
@media (max-width: 1023px) {
  .spot-card-title-wrapper.needs-scroll .spot-card-title-content {
    animation: none !important;
  }
}

/* MOBILE SHEET: Truncate long titles with ellipsis instead of marquee */
/* HIGH SPECIFICITY: Override tablet/mobile overflow: visible rule */
/* Wrapper allows content to be wider - content width controlled by listings.css media queries */
#listings-sheet .spot-card .flex-1 .spot-card-title-wrapper.needs-scroll,
#listings-sheet .spot-card-title-wrapper.needs-scroll,
#listings-content-mobile .spot-card .flex-1 .spot-card-title-wrapper.needs-scroll,
#listings-content-mobile .spot-card-title-wrapper.needs-scroll {
  overflow: visible !important; /* Allow content to extend beyond wrapper */
  text-overflow: ellipsis !important;
  width: 100% !important;
  max-width: none !important; /* Remove max-width constraint to allow wider content */
  min-width: 0 !important;
  position: relative !important;
  transform: none !important; /* Override any transforms */
  box-sizing: border-box !important; /* Include padding in width calculation */
}

#listings-sheet .spot-card .flex-1 .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
#listings-sheet .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
#listings-content-mobile .spot-card .flex-1 .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
#listings-content-mobile .spot-card-title-wrapper.needs-scroll .spot-card-title-content {
  display: block !important;
  /* Width controlled by listings.css with CSS variable - do not override here */
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  animation: none !important;
  position: relative !important;
  box-sizing: border-box !important;
}

#listings-sheet .spot-card .flex-1 .spot-card-title-wrapper.needs-scroll .spot-card-title-text,
#listings-sheet .spot-card-title-wrapper.needs-scroll .spot-card-title-text,
#listings-content-mobile .spot-card .flex-1 .spot-card-title-wrapper.needs-scroll .spot-card-title-text,
#listings-content-mobile .spot-card-title-wrapper.needs-scroll .spot-card-title-text {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* Hide duplicate spans on mobile sheet - not needed for truncation */
#listings-sheet .spot-card-title-wrapper.needs-scroll .spot-card-title-duplicate,
#listings-sheet .spot-card-title-wrapper.needs-scroll .spot-card-title-duplicate2,
#listings-content-mobile .spot-card-title-wrapper.needs-scroll .spot-card-title-duplicate,
#listings-content-mobile .spot-card-title-wrapper.needs-scroll .spot-card-title-duplicate2 {
  display: none !important;
}

/* MOBILE SHEET: Truncate short-title-static titles with ellipsis if too long */
/* CRITICAL: Only apply negative margins after JavaScript initialization to prevent FOUC */
#listings-sheet .spot-card-title-wrapper.short-title-static[data-marquee-processed="true"],
#listings-content-mobile .spot-card-title-wrapper.short-title-static[data-marquee-processed="true"] {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: calc(100% + 60px) !important; /* Widen to show more text before truncating */
  max-width: calc(100% + 60px) !important; /* Allow wider display */
  margin-left: -30px !important; /* Negative margin to center the wider content */
  margin-right: -30px !important; /* Negative margin to center the wider content */
  text-align: left !important; /* Left align for truncation */
}

/* Default safe state for mobile: Prevent negative margins from showing before initialization */
#listings-sheet .spot-card-title-wrapper.short-title-static:not([data-marquee-processed="true"]),
#listings-content-mobile .spot-card-title-wrapper.short-title-static:not([data-marquee-processed="true"]) {
  margin-left: 0 !important; /* Safe default: no negative margin until initialized */
  margin-right: 0 !important;
  width: 100% !important; /* Safe default width */
  max-width: 100% !important;
}

#listings-sheet .spot-card-title-wrapper.short-title-static .spot-card-title-content,
#listings-content-mobile .spot-card-title-wrapper.short-title-static .spot-card-title-content {
  display: block !important;
  width: calc(100% + 60px) !important; /* Match wrapper width */
  max-width: calc(100% + 60px) !important; /* Match wrapper max-width */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  animation: none !important;
}

#listings-sheet .spot-card-title-wrapper.short-title-static .spot-card-title-text,
#listings-content-mobile .spot-card-title-wrapper.short-title-static .spot-card-title-text {
  display: block !important;
  width: calc(100% + 60px) !important; /* Match wrapper width */
  max-width: calc(100% + 60px) !important; /* Match wrapper max-width */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Hide duplicate spans on mobile sheet for short-title-static - not needed for truncation */
#listings-sheet .spot-card-title-wrapper.short-title-static .spot-card-title-duplicate,
#listings-sheet .spot-card-title-wrapper.short-title-static .spot-card-title-duplicate2,
#listings-content-mobile .spot-card-title-wrapper.short-title-static .spot-card-title-duplicate,
#listings-content-mobile .spot-card-title-wrapper.short-title-static .spot-card-title-duplicate2 {
  display: none !important;
}

/* CONSISTENCY FIX: Static display for shorter titles (≤30 chars) */
/* CRITICAL: Only apply negative margins after JavaScript initialization to prevent FOUC */
.spot-card-title-wrapper.short-title-static[data-marquee-processed="true"] {
  overflow: visible !important;
  width: calc(100% + 40px) !important; /* Smaller extension for less contrast */
  max-width: none !important;
  position: relative !important;
  margin-left: -20px !important; /* Subtle left extension */
  margin-right: -20px !important; /* Subtle right extension */
  text-align: center !important; /* Center all text within the extended container */
  z-index: var(--z-base) !important; /* Ensure title appears above other elements */
}

/* Default safe state: Prevent negative margins from showing before initialization */
.spot-card-title-wrapper.short-title-static:not([data-marquee-processed="true"]) {
  margin-left: 0 !important; /* Safe default: no negative margin until initialized */
  margin-right: 0 !important;
  width: 100% !important; /* Safe default width */
  max-width: 100% !important;
}

.spot-card-title-wrapper.short-title-static .spot-card-title-content {
  animation: none !important;
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: visible !important; /* Allow text to show in extended area */
  text-overflow: clip !important; /* No ellipsis since we have enough space */
}

.spot-card-title-wrapper.short-title-static .spot-card-title-text {
  display: inline !important;
  white-space: nowrap !important;
}

.spot-card-title-wrapper.short-title-static .spot-card-title-duplicate,
.spot-card-title-wrapper.short-title-static .spot-card-title-duplicate2 {
  display: none !important;
}

/* SPECIFIC FIX: 30-character titles like "Private Backyard Parking Space" - DISABLED FOR CONSISTENCY */
/* .spot-card-title-wrapper.short-title-static .spot-card-title-text[textContent*="Private Backyard Parking Space"],
.spot-card-title-wrapper.short-title-static:has(.spot-card-title-text:contains("Private Backyard Parking Space")) {
  transform: translateX(-25px) !important;
} */

/* SPECIFIC FIX: 30-character titles - DISABLED FOR CONSISTENCY */
/* .spot-card-title-wrapper.short-title-static.char-30,
#listings-overlay .spot-card .spot-card-title-wrapper.short-title-static.char-30,
#listings-content .spot-card .spot-card-title-wrapper.short-title-static.char-30 {
  transform: translateX(-40px) !important;
  position: relative !important;
} */

/* MOVED: 30-character titles rule moved to layout.css for early loading to prevent rerender flash */

/* SHORTER TITLES: Complete override using transform to force left positioning - DISABLED FOR CONSISTENCY */
.spot-card-title-wrapper.short-title-static.very-short-title {
  text-align: left !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important; /* CHANGED: Remove translateX(0) to allow normal positioning */
  margin-top: 0 !important; /* ADDED: Ensure no top margin gaps */
}

.spot-card-title-wrapper.short-title-static.very-short-title .spot-card-title-content {
  display: block !important;
  width: fit-content !important;
  transform: none !important; /* CHANGED: Allow normal positioning */
  margin-top: 0 !important; /* ADDED: Ensure no top margin gaps */
}

.spot-card-title-wrapper.short-title-static.very-short-title .spot-card-title-text {
  transform: none !important; /* CHANGED: Allow normal positioning */
  position: static !important; /* Remove any relative positioning */
  margin-top: -0.125rem !important; /* ADDED: Apply consistent top margin */
  margin-left: -0.5rem !important; /* ADDED: Apply consistent left margin */
}

/* DESKTOP ONLY: Ensure marquee works in all card layouts */
@media (min-width: 1024px) {
  .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
  .spot-card-mobile .spot-card-title-wrapper.needs-scroll .spot-card-title-content {
    animation: simple-marquee-slow var(--marquee-duration, 35s) linear infinite;
    display: inline-flex;
    will-change: transform;
  }
}

/* TABLET & MOBILE: Static display for all card layouts */
@media (max-width: 1023px) {
  .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
  .spot-card-mobile .spot-card-title-wrapper.needs-scroll .spot-card-title-content {
    animation: none !important;
    display: block;
    will-change: auto;
  }
}

/* Hover effects handled by JavaScript for smooth transitions */

/* DESKTOP ONLY: Marquee duplicate elements styling */
@media (min-width: 1024px) {
  /* CRITICAL: Include desktop containers for proper specificity */
  #listings-overlay .spot-card-title-wrapper.needs-scroll .spot-card-title-text,
  #listings-content .spot-card-title-wrapper.needs-scroll .spot-card-title-text,
  .spot-card-title-wrapper.needs-scroll .spot-card-title-text,
  #listings-overlay .spot-card-title-wrapper.needs-scroll .spot-card-title-duplicate,
  #listings-content .spot-card-title-wrapper.needs-scroll .spot-card-title-duplicate,
  .spot-card-title-wrapper.needs-scroll .spot-card-title-duplicate,
  #listings-overlay .spot-card-title-wrapper.needs-scroll .spot-card-title-duplicate2,
  #listings-content .spot-card-title-wrapper.needs-scroll .spot-card-title-duplicate2,
  .spot-card-title-wrapper.needs-scroll .spot-card-title-duplicate2 {
    flex-shrink: 0;
    white-space: nowrap;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
    transform: translateZ(0);
  }

  #listings-overlay .spot-card-title-wrapper.needs-scroll .spot-card-title-duplicate,
  #listings-content .spot-card-title-wrapper.needs-scroll .spot-card-title-duplicate,
  .spot-card-title-wrapper.needs-scroll .spot-card-title-duplicate {
    margin-left: var(--marquee-gap, 10rem); /* Dynamic gap based on text length */
    display: inline-block !important; /* Ensure duplicate is visible when needs-scroll is active */
  }

  #listings-overlay .spot-card-title-wrapper.needs-scroll .spot-card-title-duplicate2,
  #listings-content .spot-card-title-wrapper.needs-scroll .spot-card-title-duplicate2,
  .spot-card-title-wrapper.needs-scroll .spot-card-title-duplicate2 {
    margin-left: var(--marquee-gap, 10rem); /* Same gap as first duplicate */
    display: inline-block !important; /* Third duplicate for seamless loop */
  }
}

/* TABLET & MOBILE: Hide duplicates completely */
@media (max-width: 1023px) {
  .spot-card-title-wrapper.needs-scroll .spot-card-title-duplicate,
  .spot-card-title-wrapper.needs-scroll .spot-card-title-duplicate2 {
    display: none !important;
  }
}

/* Hide duplicates by default */
.spot-card-title-duplicate,
.spot-card-title-duplicate2 {
  display: none;
}

/* MOBILE & DESKTOP: Ensure duplicate visibility in all card layouts */
/* CRITICAL: Include desktop overlay and content containers for proper marquee functionality */
#listings-overlay .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-duplicate,
#listings-content .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-duplicate,
.spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-duplicate,
.spot-card-mobile .spot-card-title-wrapper.needs-scroll .spot-card-title-duplicate,
#listings-overlay .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-duplicate2,
#listings-content .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-duplicate2,
.spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-duplicate2,
.spot-card-mobile .spot-card-title-wrapper.needs-scroll .spot-card-title-duplicate2 {
  display: inline-block !important;
  margin-left: var(--marquee-gap, 10rem); /* Dynamic gap based on text length */
}

/* Hover speed controlled by JavaScript for smooth transitions */

/* --- INTERACTIVE MARQUEE STYLES --- */
/* Visual feedback for drag-and-throw functionality */
.spot-card-title-wrapper.needs-scroll.interactive-marquee-active {
  position: relative;
}

.spot-card-title-wrapper.needs-scroll.interactive-marquee-active::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: rgba(59, 130, 246, 0.1); /* Subtle blue highlight */
  border-radius: 4px;
  pointer-events: none;
  /* z-index: 0 removed - default value */
  opacity: 0;
  transition: opacity 0.2s ease;
}

.spot-card-title-wrapper.needs-scroll.interactive-marquee-active:hover::after {
  opacity: 1;
}

.spot-card-title-wrapper.needs-scroll.interactive-marquee-dragging::after {
  opacity: 1;
  background: rgba(59, 130, 246, 0.15); /* Slightly more visible when dragging */
}

/* Ensure content stays above the highlight */
.spot-card-title-wrapper.needs-scroll .spot-card-title-content {
  position: relative;
  z-index: var(--z-base);
}

/* Smooth cursor transitions */
.spot-card-title-wrapper.needs-scroll {
  cursor: grab;
  transition: cursor 0.1s ease;
}

.spot-card-title-wrapper.needs-scroll:active {
  cursor: grabbing;
}

/* Disable text selection during interaction */
.spot-card-title-wrapper.needs-scroll.interactive-marquee-active {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Dark mode support for interactive highlights - Class-based (not system preference) */
html.dark .spot-card-title-wrapper.needs-scroll.interactive-marquee-active::after,
body.dark .spot-card-title-wrapper.needs-scroll.interactive-marquee-active::after,
.dark .spot-card-title-wrapper.needs-scroll.interactive-marquee-active::after {
  background: rgba(96, 165, 250, 0.1) !important; /* Lighter blue for dark mode */
}

html.dark .spot-card-title-wrapper.needs-scroll.interactive-marquee-dragging::after,
body.dark .spot-card-title-wrapper.needs-scroll.interactive-marquee-dragging::after,
.dark .spot-card-title-wrapper.needs-scroll.interactive-marquee-dragging::after {
  background: rgba(96, 165, 250, 0.15) !important;
}

/* --- ENHANCED SPOT CARDS --- */
.spot-card {
  /* Base styles */
  max-width: 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  
  /* ENHANCED: Reduced padding for better density - asymmetric for compact top */
  padding: 0.125rem 0.75rem 0.75rem 0.75rem !important; /* Minimal top padding: top right bottom left */
  
  /* Airbnb-inspired visual polish */
  border-radius: 12px; /* Larger, more modern radius */
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  background: var(--bg-primary);
  
  /* Smooth transitions for premium feel */
  transition: transform var(--transition-cubic), 
              box-shadow var(--transition-cubic), 
              border-color var(--transition-cubic);
              
  /* Light containment - preserve functionality */
  overflow: visible !important;
  position: relative !important;
}

/* Desktop hover effect - Airbnb-style lift */
@media (min-width: 1024px) {
  .spot-card:hover {
    /* Disabled transform to prevent marquee jump */
    /* transform: translateY(-2px); */
    box-shadow: var(--shadow-card-hover);
    border-color: var(--border-medium);
  }
}

/* MOBILE-OPTIMIZED: Compact spot cards for mobile bottom sheet */
.spot-card-mobile {
  /* Mobile-specific optimizations */
  max-width: 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 72px;
  
  /* Airbnb-inspired mobile styling */
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  background: var(--bg-primary);
  
  /* Fast transitions for mobile responsiveness */
  transition: transform var(--transition-fast), 
              box-shadow var(--transition-fast),
              border-color var(--transition-fast);
}
/* Base image container - Mobile/default sizing */
.spot-card-image {
  position: relative;
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--neutral-100);
  margin-right: 0.75rem;
}

.spot-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

/* Bottom sheet: Make image container rectangular (taller than wide) - Absolute positioning to prevent layout shifts */
/* HIGH SPECIFICITY: Override earlier rules for .w-16.h-16 containers */
#listings-sheet .spot-card .relative.w-16.h-16,
#listings-sheet .spot-card div.relative.w-16.h-16,
#listings-content-mobile .spot-card .relative.w-16.h-16,
#listings-content-mobile .spot-card div.relative.w-16.h-16 {
  position: absolute !important; /* Remove from flex flow to prevent layout shifts */
  left: 1.3rem !important; /* Match original margin-left position */
  top: 1.5rem !important; /* Match original margin-top position */
  width: 94 !important; /* Narrower width */
  height: 87px !important; /* Taller height - vertical rectangle */
  min-width: 94 !important; /* Prevent shrinking */
  min-height: 87px !important; /* Prevent shrinking */
  max-width: 69px !important; /* Prevent growing */
  max-height: 87px !important; /* Prevent growing */
  border-radius: 8px !important; /* Slightly smaller radius */
  margin: 0 !important; /* Remove margins since we're using absolute positioning */
  padding: 0 !important; /* Remove any padding */
  z-index: 1 !important; /* Ensure image stays above background */
  overflow: hidden !important; /* Clip image to container */
  box-sizing: border-box !important; /* Include border in size calculation */
}

/* MOBILE ONLY (≤567px): Ensure image itself is properly sized */
/* Container controls size - image just fills it */
@media (max-width: 567px) {
  #listings-sheet .spot-card .relative.w-16.h-16 img,
  #listings-sheet .spot-card div.relative.w-16.h-16 img,
  #listings-content-mobile .spot-card .relative.w-16.h-16 img,
  #listings-content-mobile .spot-card div.relative.w-16.h-16 img {
    width: 100% !important; /* Fill container width */
    height: 100% !important; /* Fill container height */
    object-fit: cover !important;
    border-radius: 11px !important;
    display: block !important; /* Ensure proper rendering */
    box-sizing: border-box !important; /* Include border in size calculation */
    image-rendering: auto !important; /* Industry standard: browser chooses best algorithm for photos */
    -ms-interpolation-mode: bicubic !important; /* IE/Edge: high-quality interpolation */
  }
}

/* TABLET (568px - 1023px): Slightly bigger sizing but not much taller */
/* Container controls size - image just fills it */
@media (min-width: 568px) and (max-width: 1023px) {
  #listings-sheet .spot-card .relative.w-16.h-16 img,
  #listings-sheet .spot-card div.relative.w-16.h-16 img,
  #listings-content-mobile .spot-card .relative.w-16.h-16 img,
  #listings-content-mobile .spot-card div.relative.w-16.h-16 img {
    width: 100% !important; /* Fill container width */
    height: 100% !important; /* Fill container height */
    object-fit: cover !important;
    border-radius: 11px !important;
    display: block !important; /* Ensure proper rendering */
    box-sizing: border-box !important; /* Include border in size calculation */
    image-rendering: auto !important; /* Industry standard: browser chooses best algorithm for photos */
    -ms-interpolation-mode: bicubic !important; /* IE/Edge: high-quality interpolation */
  }
}

/* Ensure spot-card has relative positioning for absolute child */
#listings-sheet .spot-card,
#listings-content-mobile .spot-card {
  position: relative !important;
}

/* Desktop hover: Subtle zoom effect like Airbnb */
@media (min-width: 1024px) {
  .spot-card:hover .spot-card-image img {
    transform: scale(1.05);
  }
}
/* ENHANCED: Spot card content area with better spacing */
.spot-card-content {
  flex: 1 1 0%;
  min-width: 0;
  max-width: calc(100% - 70px); /* Increased available width for marquee */
  padding: 0.25rem 0.25rem 0.5rem 0.5rem !important; /* Reduced top and right padding: top right bottom left */
  display: flex !important;
  flex-direction: column !important;
  gap: 0.375rem !important; /* Consistent spacing between elements */
  position: relative !important;
}

/* Ensure all .flex-1 containers properly contain marquee */
.spot-card .flex-1 {
  position: relative !important;
  min-width: 0 !important;
}

/* Force containment on title containers */
.spot-card .mb-1 {
  position: relative !important;
}

/* Override Tailwind padding on flex-1 content container - MAXIMUM SPECIFICITY */
#listings-overlay .spot-card .flex-1,
#listings-content .spot-card .flex-1,
#listings-overlay .spot-card .flex-1[class*="py-"],
#listings-content .spot-card .flex-1[class*="py-"],
.spot-card .flex-1.py-2,
.spot-card .flex-1.py-1,
div.spot-card .flex-1,
div.spot-card > .flex > .flex-1,
.spot-card .flex .flex-1 {
  padding-top: 0rem !important; /* Zero top padding - handles all py- classes */
  padding-bottom: 0rem !important; /* Keep bottom padding at 8px */
}

/* Reduce bottom margin on title group for more compact layout */
#listings-overlay .spot-card .flex-1 .mb-1,
#listings-content .spot-card .flex-1 .mb-1,
.spot-card .flex-1 .mb-1,
#listings-overlay .spot-card .flex-1 .mb-1\.5,
#listings-content .spot-card .flex-1 .mb-1\.5,
.spot-card .flex-1 .mb-1\.5,
#listings-sheet .spot-card .mb-1,
#listings-content-mobile .spot-card .mb-1,
#listings-sheet .spot-card .mb-1\.5,
#listings-content-mobile .spot-card .mb-1\.5 {
  margin-bottom: 0.25rem !important; /* Consistent spacing after title container */
  margin-top: 0 !important; /* Zero top margin */
  padding-top: 0.125rem !important; /* Add top padding to create space above title */
}

/* ENHANCED: Metadata styling - Gray hierarchy */
.spot-card .metadata,
.spot-card .text-gray-500,
.spot-card .text-gray-600,
.spot-card .address-text,
.spot-card .distance-text,
.spot-card .amenity-text {
  color: #6b7280 !important; /* Consistent gray for metadata */
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

/* ENHANCED: Title and primary text hierarchy - CONSOLIDATED */
.spot-card .title-text,
.spot-card h3,
.spot-card .spot-title,
.spot-card-title {
  font-size: 15px;
  font-weight: 600; /* Semibold like Airbnb */
  line-height: 1.3 !important;
  letter-spacing: -0.01em;
  color: #222222 !important; /* Darker for better visibility */
  margin: 0;
  margin-bottom: 0.25rem !important; /* Tighter spacing */
}

/* Spot card text elements - Airbnb typography hierarchy */
.spot-card-title,
.spot-card-address,
.spot-card-text {
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ─────────────────────────────────────────────
 * NOTE: Title selector consolidation completed in Phase 3
 * Previously split across lines 291-296 and 307-315
 * Now unified at lines 291-303 for maintainability
 * ───────────────────────────────────────────── */

.spot-card p,
.spot-card-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: #757981 !important; /* Darker gray for better readability */
  margin: 0;
}

/* Secondary info styling - Improved contrast */
.spot-card .text-neutral-600,
.spot-card .text-neutral-500 {
  color: #9CA3AF !important; /* Darker for visibility */
}

.spot-card .text-neutral-400 {
  color: #D1D5DB !important; /* Less faint */
}

/* Dark mode override for better contrast */
.dark .spot-card .text-neutral-400 {
  color: #D1D5DB !important; /* Better contrast in dark mode - gray-300 */
}

/* ENHANCED: Price styling - Bold and prominent like Airbnb */
.spot-card .text-blue-700,
.spot-card .font-semibold,
.spot-card .price-display,
.spot-card [class*="price"] {
  font-size: 18px !important; /* Larger price text */
  font-weight: 700 !important; /* Bolder weight */
  color: #1f2937 !important; /* Dark gray for high contrast */
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important; /* Tighter letter spacing */
}

/* ENHANCED: Price container styling */
.spot-card .price-container,
.spot-card .flex.items-center.justify-between {
  margin-top: 0.5rem !important;
  margin-bottom: 0.25rem !important;
}

/* ENHANCED: Price per hour emphasis */
.spot-card .text-sm.text-gray-500,
.spot-card .price-unit {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
}

/* Dark mode text adjustments */
.dark .spot-card h3,
.dark .spot-card-title {
  color: #FFFFFF;
}

.dark .spot-card p,
.dark .spot-card-text {
  color: #B0B0B0;
}

/* ==============================================
 * ENHANCED AVAILABILITY BADGES - IMPROVED COLOR HIERARCHY
 * ============================================== */

/* ENHANCED: Base badge styling - More compact and refined */
.spot-card .rounded-full,
.spot-card [class*="px-2"][class*="py-1"],
.spot-card .availability-badge {
  font-size: 10px !important; /* Smaller, more compact */
  font-weight: 600 !important; /* Bolder for better readability */
  padding: 6px 10px 4px 4px !important; /* Increased top padding from 6px to 8px */
  border-radius: 6px !important; /* Consistent rounded corners */
  letter-spacing: 0.02em !important; /* Better letter spacing */
  text-transform: uppercase !important; /* Consistent uppercase */
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  transition: all var(--transition-normal) !important;
  margin-top: 0 !important; /* Spacing handled by parent container */
  margin-left: 0 !important; /* Horizontal positioning handled elsewhere */
  margin-bottom: 0 !important; /* No bottom margin */
}

/* ENHANCED: Available Status - Much lighter green for availability */
.spot-card .bg-green-50,
.spot-card .bg-emerald-50,
.spot-card .status-available {
  background: #6ee7b7 !important; /* Much lighter green background (green-300) */
  color: #ffffff !important; /* White text for contrast */
  border: 1px solid #34d399 !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(110, 231, 183, 0.2) !important;
}

.spot-card .text-green-700,
.spot-card .text-emerald-700 {
  color: #ffffff !important; /* White text on green background */
  font-weight: 600 !important;
}

/* ENHANCED: Limited/Busy Status - Lighter orange for caution */
.spot-card .bg-yellow-50,
.spot-card .bg-orange-50,
.spot-card .status-limited {
  background: #fbbf24 !important; /* Lighter orange/yellow background */
  color: #ffffff !important; /* White text for contrast */
  border: 1px solid #f59e0b !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(251, 191, 36, 0.2) !important;
}

/* ENHANCED: Outside Hours Status - Lighter purple for special conditions */
.spot-card .bg-purple-50,
.spot-card .status-outside-hours {
  background: #a78bfa !important; /* Lighter purple background */
  color: #ffffff !important; /* White text for contrast */
  border: 1px solid #8b5cf6 !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(167, 139, 250, 0.2) !important;
}

.spot-card .text-purple-700 {
  color: #ffffff !important; /* White text on purple background */
  font-weight: 600 !important;
}

/* ENHANCED: Unavailable/Gray Status - Lighter gray for unavailable */
.spot-card .bg-gray-50,
.spot-card .bg-neutral-50,
.spot-card .status-unavailable {
  background: #9ca3af !important; /* Lighter gray background */
  color: #ffffff !important; /* White text for contrast */
  border: 1px solid #6b7280 !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(156, 163, 175, 0.2) !important;
}

/* REMOVED: This was causing white text on white background issues
.spot-card .text-gray-700,
.spot-card .text-neutral-700 {
  color: #ffffff !important;
  font-weight: 600 !important;
}
*/

/* Dark mode badge adjustments */
.dark .spot-card .bg-green-50,
.dark .spot-card .bg-emerald-50 {
  background: rgba(0, 166, 153, 0.2) !important;
  color: #80D3CC !important;
}

.dark .spot-card .bg-purple-50 {
  background: rgba(107, 33, 168, 0.2) !important;
  color: #C4B5FD !important;
}

.dark .spot-card .bg-gray-50,
.dark .spot-card .bg-neutral-50 {
  background: rgba(113, 113, 113, 0.2) !important;
  color: #D1D5DB !important;
}
.spot-card-button:focus {
  box-shadow: 0 0 0 2px var(--primary-blue), 0 0 0 4px #ffffff;
}
.dark .spot-card-button:focus {
  box-shadow: 0 0 0 2px var(--primary-blue), 0 0 0 4px var(--neutral-800);
}
/* Avoid heavy focus rings on mouse click, keep for keyboard navigation */
.spot-card-button:focus:not(:focus-visible) {
  box-shadow: none;
  outline: none;
}
/* UNIFIED LISTINGS INTERACTIONS - ADAPTIVE FOR INPUT METHOD */
  /* NOTE: Mobile bottom sheet constraints moved to components/bottomsheet.css */
  #toggle-list-panel {
    transition: all var(--transition-fast);
  }
  #toggle-list-panel:hover {
    transform: scale(1.1);
  }
  /* Smooth transitions for all interactive elements */
  .spot-card * {
    transition: all var(--transition-fast);
  }
  /* Enhanced focus states */
  .book-btn:focus {
    box-shadow: 0 0 0 2px #1d4ed8, 0 0 0 4px #ffffff;
  }
  .dark .book-btn:focus {
    box-shadow: 0 0 0 2px #1d4ed8, 0 0 0 4px #1f2937;
  }
  /* Avoid heavy focus rings on mouse click for book buttons */
  .book-btn:focus:not(:focus-visible) {
    box-shadow: none;
    outline: none;
  }
  .map-control-dropdown {
    transition: all var(--transition-normal);
  }
  .map-control-dropdown:hover {
    background: #f3f4f6 !important;
    /* Removed transform to prevent button movement */
  }
  /* .map-control-dropdown:active - Removed empty ruleset (transform removed to prevent button movement on click) */
  .map-control-menu {
    transition: all var(--transition-normal);
  }
  .map-control-menu-item {
    transition: all var(--transition-normal);
  }
  .map-control-menu-item:hover {
    background: #f3f4f6 !important;
    transform: translateX(2px);
  }
  .map-control-menu-item:active {
    transform: translateX(1px);
  }
  .dark .map-control-dropdown {
    background: #1f2937 !important;
    color: #d1d5db;
  }
  .dark .map-control-dropdown:hover {
    background: #374151 !important;
  }
  .dark .map-control-menu {
    background: #1f2937;
    border-color: #374151;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }
  .dark .map-control-menu-item {
    background: #1f2937 !important;
    color: #d1d5db;
  }
  .dark .map-control-menu-item:hover {
    background: #374151 !important;
  }
  /* Focus states for accessibility */
  .map-control-dropdown:focus,
  .map-control-menu-item:focus {
    outline: 2px solid #1d4ed8;
    outline-offset: 2px;
  }
  /* Avoid heavy focus rings on mouse click for map controls */
  .map-control-dropdown:focus:not(:focus-visible),
  .map-control-menu-item:focus:not(:focus-visible) {
    outline: none;
  }
  /* Enhanced filter chip animations */
  .amenity-chip {
    transition: all var(--transition-cubic);
    will-change: transform, box-shadow;
  }
  .amenity-chip:hover {
    background-color: var(--neutral-200);
    transform: translateY(-2px) scale(1.05);
    box-shadow: var(--shadow-hover);
  }
  .dark .filter-chip:hover {
    background-color: var(--neutral-600);
  }
  .amenity-chip.active {
    background-color: #dbeafe;
    color: var(--primary-blue-darker);
    transform: var(--transform-scale);
    box-shadow: 0 0 0 2px var(--primary-blue-bg);
  }
  .dark .filter-chip.active {
    background-color: #1e3a8a;
    color: var(--primary-blue-lighter);
  }
  /* Auto-search toggle states */
  .auto-search-enabled {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    border: 1px solid rgba(34, 197, 94, 0.2);
  }
  .auto-search-disabled {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.1) 0%, rgba(107, 114, 128, 0.05) 100%);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    border: 1px solid rgba(107, 114, 128, 0.2);
  }
  /* Location loading state */
  #use-current-location.location-loading {
    opacity: 0.7;
    cursor: not-allowed;
    background: linear-gradient(90deg, #1d4ed8, #1d4ed8);
    animation: pulse 2s infinite;
  }
  /* Enhanced datetime input states */
  #start-time:focus {
    border-color: var(--primary-blue);
    box-shadow: var(--shadow-focus);
  }
  #start-time.border-red-500 {
    animation: shake 0.5s ease-in-out;
  }
  #start-time.border-green-500 {
    animation: success-pulse 0.6s ease-in-out;
  }
  /* Quick time presets */
  .quick-time-presets button {
    transition: all var(--transition-normal);
    border: 1px solid transparent;
  }
  .quick-time-presets button:hover {
    transform: var(--transform-hover);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-blue);
  }
  .quick-time-presets button:active {
    transform: translateY(0);
  }
  /* Message animations */
  .datetime-validation-message,
  .auto-search-message,
  .location-message,
  .map-search-indicator {
    animation: slideInDownY 0.3s ease-out;
  }

/* DESKTOP LISTINGS FIX: Ensure proper text display */
@media (min-width: 1024px) {
  /* DESKTOP: Base padding for all spot cards */
  #listings-overlay .spot-card,
  #listings-content .spot-card {
    padding-top: 0.25rem !important; /* Back to original tight padding */
    padding-bottom: 0.375rem !important; /* 6px - reduced bottom padding */
    margin-top: -0.009rem !important; /* Negative top margin for tighter spacing */
  }

  /* DESKTOP: Content container padding */
  #listings-overlay .spot-card-content,
  #listings-content .spot-card-content,
  #listings-overlay .spot-card .flex-1,
  #listings-content .spot-card .flex-1 {
    padding-top: 0rem !important; /* No top padding */
    padding-bottom: 0rem !important; /* No bottom padding - let content flow naturally */
  }

  /* DESKTOP: Title container spacing - DISABLED to prevent gap issues */
  /* #listings-overlay .spot-card .flex-1 .mb-1,
  #listings-content .spot-card .flex-1 .mb-1 {
    margin-top: -0.25rem !important;
    margin-bottom: 0.25rem !important;
  } */

  /* DESKTOP: Larger images for list view - Override all possible container selectors */
  #listings-overlay .spot-card-image,
  #listings-content .spot-card-image,
  #listings-overlay .spot-card .relative,
  #listings-content .spot-card .relative,
  #listings-overlay .spot-card div[class*="w-16"],
  #listings-content .spot-card div[class*="w-16"],
  #listings-overlay .spot-card div[class*="w-20"],
  #listings-content .spot-card div[class*="w-20"],
  #listings-overlay .spot-card div[class*="w-24"],
  #listings-content .spot-card div[class*="w-24"],
  #listings-overlay .spot-card div[class*="h-16"],
  #listings-content .spot-card div[class*="h-16"],
  #listings-overlay .spot-card div[class*="h-20"],
  #listings-content .spot-card div[class*="h-20"],
  #listings-overlay .spot-card div[class*="h-24"],
  #listings-content .spot-card div[class*="h-24"] {
    width: 85px !important;
    height: 80px !important;
    min-width: 85px !important;
    max-width: 85px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    margin-right: 0.5rem !important;
    flex-shrink: 0 !important;
    align-self: flex-end !important; /* Force photo to bottom of flex container */
    position: relative !important;
    border-radius: 10px !important; /* Rounded rectangle like bottom sheet */
    overflow: hidden !important; /* Ensure image respects border-radius */
  }

  /* DESKTOP: Target the exact generated structure - first child div in flex container */
  #listings-overlay .spot-card .flex > div:first-child,
  #listings-content .spot-card .flex > div:first-child {
    width: 85px !important;
    height: 80px !important;
    margin-right: 0.5rem !important;
    flex-shrink: 0 !important;
    align-self: flex-end !important; /* Force photo to bottom of flex container */
    position: relative !important;
  }

  /* DESKTOP: Override all possible image selectors with maximum specificity */
  #listings-overlay .spot-card-image img,
  #listings-content .spot-card-image img,
  #listings-overlay .spot-card img.w-full,
  #listings-content .spot-card img.w-full,
  #listings-overlay .spot-card img.h-full,
  #listings-content .spot-card img.h-full,
  #listings-overlay .spot-card img.lazy,
  #listings-content .spot-card img.lazy,
  #listings-overlay .spot-card img[class*="w-"],
  #listings-content .spot-card img[class*="h-"],
  #listings-overlay .spot-card .relative img,
  #listings-content .spot-card .relative img {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    border-radius: 10px !important; /* Rounded rectangle shape - matches container */
    object-fit: cover !important;
    object-position: center !important;
    image-rendering: auto !important; /* Industry standard: browser chooses best algorithm for photos */
    -ms-interpolation-mode: bicubic !important; /* IE/Edge: high-quality interpolation */
  }

  /* DESKTOP: Adjust content area for smaller image and add left margin */
  #listings-overlay .spot-card-content,
  #listings-content .spot-card-content,
  #listings-overlay .spot-card .flex-1,
  #listings-content .spot-card .flex-1 {
    max-width: calc(100% - 40px) !important; /* Adjusted for 85px image */
    margin-left: 0.75rem !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    position: relative !important;
    overflow: visible !important; /* Allow address and metadata to extend if needed */
  }
  
  /* DESKTOP: Move address container to the right */
  /* ESSENTIAL DEFENSIVE CSS: Base rule applies to ALL desktop cards on fresh reload */
  /* This ensures consistent styling before JavaScript processes marquee cards */
  #listings-overlay .spot-card .clickable-address,
  #listings-content .spot-card .clickable-address,
  #listings-overlay .spot-card .clickable-address.flex.items-center.gap-1,
  #listings-content .spot-card .clickable-address.flex.items-center.gap-1,
  #listings-overlay .spot-card div.clickable-address,
  #listings-content .spot-card div.clickable-address,
  #listings-overlay .spot-card .flex-1 .clickable-address,
  #listings-content .spot-card .flex-1 .clickable-address,
  #listings-overlay .spot-card .flex-1 div.clickable-address,
  #listings-content .spot-card .flex-1 div.clickable-address {
    margin-left: -1.5rem !important; /* Default left margin for all desktop address elements */
    transform: none !important; /* Reset any mobile transforms */
    max-width: var(--desktop-address-max-width, 260px) !important; /* Adjustable max-width with CSS variable */
    overflow: hidden !important;
    flex-wrap: nowrap !important; /* Prevent flex wrapping */
  }
  
  /* DESKTOP LIST SHEET: Address text ellipsis - truncate long addresses */
  /* HIGH SPECIFICITY: Ensure ellipsis applies to ALL address spans regardless of card state */
  #listings-overlay .spot-card .clickable-address > span,
  #listings-content .spot-card .clickable-address > span,
  #listings-overlay .spot-card .clickable-address span.text-blue-600,
  #listings-content .spot-card .clickable-address span.text-blue-600,
  #listings-overlay .spot-card .flex-1 .clickable-address > span,
  #listings-content .spot-card .flex-1 .clickable-address > span,
  #listings-overlay .spot-card .flex-1 .clickable-address span.text-blue-600,
  #listings-content .spot-card .flex-1 .clickable-address span.text-blue-600,
  #listings-overlay .spot-card .clickable-address span[class*="text-blue"],
  #listings-content .spot-card .clickable-address span[class*="text-blue"] {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important; /* Block display works better for ellipsis in flex containers */
    max-width: calc(var(--desktop-address-max-width, 260px) - 20px) !important; /* Account for icon width */
    min-width: 0 !important; /* Allow flex item to shrink below content size */
    flex: 1 1 0 !important; /* Allow shrinking */
  }
  
  /* DESKTOP: Move spot type and distance container to the right */
  /* ESSENTIAL DEFENSIVE CSS: Ensure spot type/distance positioning is consistent on hard reload */
  /* CRITICAL: Explicitly exclude special containers (gravel-surface, backyard-access) AND marquee cards */
  #listings-overlay .spot-card:not(:has(.spot-card-title-wrapper.needs-scroll)):not(:has(.spot-card-title-wrapper[data-marquee-processed="true"])) .flex.items-center.gap-2.mt-0\.5:not(.gravel-surface-container):not([class*="gravel-surface"]):not(.backyard-access-container):not([class*="backyard-access"]),
  #listings-content .spot-card:not(:has(.spot-card-title-wrapper.needs-scroll)):not(:has(.spot-card-title-wrapper[data-marquee-processed="true"])) .flex.items-center.gap-2.mt-0\.5:not(.gravel-surface-container):not([class*="gravel-surface"]):not(.backyard-access-container):not([class*="backyard-access"]),
  #listings-overlay .spot-card:not(:has(.spot-card-title-wrapper.needs-scroll)):not(:has(.spot-card-title-wrapper[data-marquee-processed="true"])) .flex.items-center.gap-2.mt-0\.5.w-full:not(.gravel-surface-container):not([class*="gravel-surface"]):not(.backyard-access-container):not([class*="backyard-access"]),
  #listings-content .spot-card:not(:has(.spot-card-title-wrapper.needs-scroll)):not(:has(.spot-card-title-wrapper[data-marquee-processed="true"])) .flex.items-center.gap-2.mt-0\.5.w-full:not(.gravel-surface-container):not([class*="gravel-surface"]):not(.backyard-access-container):not([class*="backyard-access"]),
  #listings-overlay .spot-card:not(:has(.spot-card-title-wrapper.needs-scroll)):not(:has(.spot-card-title-wrapper[data-marquee-processed="true"])) .flex.items-center.gap-2.mt-0\.5.w-full.max-w-full:not(.gravel-surface-container):not([class*="gravel-surface"]):not(.backyard-access-container):not([class*="backyard-access"]),
  #listings-content .spot-card:not(:has(.spot-card-title-wrapper.needs-scroll)):not(:has(.spot-card-title-wrapper[data-marquee-processed="true"])) .flex.items-center.gap-2.mt-0\.5.w-full.max-w-full:not(.gravel-surface-container):not([class*="gravel-surface"]):not(.backyard-access-container):not([class*="backyard-access"]),
  #listings-overlay .spot-card:not(:has(.spot-card-title-wrapper.needs-scroll)):not(:has(.spot-card-title-wrapper[data-marquee-processed="true"])) .flex.items-center.gap-2:not(.gravel-surface-container):not([class*="gravel-surface"]):not(.backyard-access-container):not([class*="backyard-access"]),
  #listings-content .spot-card:not(:has(.spot-card-title-wrapper.needs-scroll)):not(:has(.spot-card-title-wrapper[data-marquee-processed="true"])) .flex.items-center.gap-2:not(.gravel-surface-container):not([class*="gravel-surface"]):not(.backyard-access-container):not([class*="backyard-access"]),
  #listings-overlay .spot-card:not(:has(.spot-card-title-wrapper.needs-scroll)):not(:has(.spot-card-title-wrapper[data-marquee-processed="true"])) div.flex.items-center.gap-2:not(.gravel-surface-container):not([class*="gravel-surface"]):not(.backyard-access-container):not([class*="backyard-access"]),
  #listings-content .spot-card:not(:has(.spot-card-title-wrapper.needs-scroll)):not(:has(.spot-card-title-wrapper[data-marquee-processed="true"])) div.flex.items-center.gap-2:not(.gravel-surface-container):not([class*="gravel-surface"]):not(.backyard-access-container):not([class*="backyard-access"]) {
    margin-left: 0.5rem !important; /* Move spot type/distance to the right */
    transform: none !important; /* Reset any mobile transforms or incorrect transforms */
  }

  /* DESKTOP: Constrain wrapper width so text disappears before fade effect */
  #listings-overlay .spot-card .flex-1 .mb-1 .spot-card-title-wrapper.needs-scroll,
  #listings-content .spot-card .flex-1 .mb-1 .spot-card-title-wrapper.needs-scroll {
    width: calc(100% + 80px) !important; /* Extended width to show more marquee content */
    max-width: calc(100% + 80px) !important; /* Constrain to prevent unlimited expansion */
    position: relative !important;
    left: -40px !important; /* Center the extended wrapper by shifting left half the extension */
    margin-right: -40px !important; /* Compensate with negative margin to prevent layout shift */
    overflow: hidden !important; /* Hide overflow so text disappears before fade */
  }

  /* DESKTOP: Override parent container overflow restrictions - direct targeting */
  #listings-overlay .spot-card,
  #listings-content .spot-card {
    overflow: visible !important; /* Allow marquee to extend beyond card */
  }

  /* DESKTOP: Override inline overflow-hidden class on spot cards */
  #listings-overlay .spot-card.overflow-hidden,
  #listings-content .spot-card.overflow-hidden {
    overflow: visible !important; /* Override inline class with higher specificity */
  }

  #listings-overlay .spot-card .flex-1,
  #listings-content .spot-card .flex-1 {
    overflow: visible !important; /* Allow marquee to extend beyond flex container */
    padding-left: 0 !important; /* Remove left padding that pushes content right */
  }

  /* DESKTOP: Allow non-scrolling titles to extend wider and overlap button */
  #listings-overlay .spot-card .flex-1 .spot-card-title-wrapper:not(.needs-scroll),
  #listings-content .spot-card .flex-1 .spot-card-title-wrapper:not(.needs-scroll) {
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
    position: relative !important;
    z-index: var(--z-base) !important;
  }

  /* DESKTOP: Constrain scrolling titles within container bounds */
  #listings-overlay .spot-card .flex-1 .spot-card-title-wrapper.needs-scroll,
  #listings-content .spot-card .flex-1 .spot-card-title-wrapper.needs-scroll {
    width: calc(100% + 110px) !important; /* Extended width to show more marquee content */
    max-width: calc(100% + 110px) !important; /* Constrain to prevent unlimited expansion */
    min-width: 0 !important; /* No minimum constraint */
    overflow: hidden !important; /* Hide all overflow so text disappears before fade */
    position: relative !important;
    left: -80px !important; /* Center the extended wrapper by shifting left half the extension */
    margin-right: -50px !important; /* Compensate with negative margin to prevent layout shift */
    display: block !important; /* Force block display to respect width */
    flex-shrink: 0 !important; /* Prevent flex from shrinking the viewport */
  }

  /* DESKTOP: Special handling for .mb-1 nested structure - constrained width */
  #listings-overlay .spot-card .flex-1 .mb-1 .spot-card-title-wrapper.needs-scroll,
  #listings-content .spot-card .flex-1 .mb-1 .spot-card-title-wrapper.needs-scroll,
  #listings-overlay .spot-card .mb-1 .spot-card-title-wrapper.needs-scroll,
  #listings-content .spot-card .mb-1 .spot-card-title-wrapper.needs-scroll {
    width: calc(100% + 80px) !important; /* Extended width to show more marquee content */
    max-width: calc(100% + 80px) !important; /* Constrain to prevent unlimited expansion */
    min-width: 0 !important; /* No minimum constraint */
    overflow: hidden !important; /* Hide overflow so text disappears before fade */
    position: relative !important;
    left: -40px !important; /* Center the extended wrapper by shifting left half the extension */
    margin-right: -40px !important; /* Compensate with negative margin to prevent layout shift */
    display: block !important; /* Force block display to respect width */
    flex-shrink: 0 !important; /* Prevent flex from shrinking the viewport */
  }

  /* DESKTOP: Ensure title containers are properly contained */
  /* CRITICAL: Allow .mb-1 to accommodate extended marquee wrapper, but constrain it */
  #listings-overlay .spot-card .flex-1 .mb-1,
  #listings-content .spot-card .flex-1 .mb-1 {
    max-width: calc(100% + 80px) !important; /* Allow space for extended wrapper */
    overflow: hidden !important; /* Hide overflow to create viewport mask for fade effect */
    margin-left: -40px !important; /* Center the extended container */
    margin-right: -40px !important; /* Center the extended container */
  }
  
  /* CRITICAL: Reset .mb-1 for static titles - normal width and overflow */
  #listings-overlay .spot-card .flex-1 .mb-1:has(.spot-card-title-wrapper.short-title-static),
  #listings-content .spot-card .flex-1 .mb-1:has(.spot-card-title-wrapper.short-title-static) {
    max-width: 100% !important; /* Normal width for static titles */
    overflow: visible !important; /* Allow static titles to display normally */
    margin-left: 0 !important; /* Reset margins */
    margin-right: 0 !important; /* Reset margins */
  }
  
  #listings-overlay .spot-card .mb-1,
  #listings-content .spot-card .mb-1 {
    position: relative !important;
  }
  
  /* CRITICAL: Explicitly reset width/positioning for static titles to prevent inheritance from needs-scroll rules */
  #listings-overlay .spot-card .flex-1 .mb-1 .spot-card-title-wrapper.short-title-static,
  #listings-content .spot-card .flex-1 .mb-1 .spot-card-title-wrapper.short-title-static,
  #listings-overlay .spot-card .mb-1 .spot-card-title-wrapper.short-title-static,
  #listings-content .spot-card .mb-1 .spot-card-title-wrapper.short-title-static,
  #listings-overlay .spot-card .flex-1 .spot-card-title-wrapper.short-title-static,
  #listings-content .spot-card .flex-1 .spot-card-title-wrapper.short-title-static {
    width: 100% !important; /* Reset to normal width */
    max-width: 100% !important; /* Reset to normal max-width */
    left: 0 !important; /* Reset positioning */
    margin-right: 0 !important; /* Reset negative margin */
    overflow: visible !important; /* Allow normal display */
    position: relative !important;
  }

  /* DESKTOP: Ensure spot card uses proper flex layout */
  #listings-overlay .spot-card .flex,
  #listings-content .spot-card .flex {
    gap: 0.5rem !important;
    align-items: flex-end !important; /* Align to bottom - photo near bottom of card */
    position: relative !important; /* Create positioning context */
  }

  /* DESKTOP: Make button container flex-shrink to prevent overlap */
  #listings-overlay .spot-card button,
  #listings-content .spot-card button {
    flex-shrink: 0 !important;
  }

  #listings-overlay .book-btn,
  #listings-content .book-btn {
    font-size: 12px !important;
    padding: 0.25rem 0.75rem !important; /* Shorter vertical padding */
    margin-top: 0 !important; /* FIXED: Removed fixed margin-top - alignment now handled by container justify-end */
    margin-bottom: 1.8rem !important; /* FIXED: Bottom margin to align with availability badge */
    margin-left: 0.5rem !important;
    border-radius: 5px !important;
    flex-shrink: 0 !important;
    align-self: center !important; /* FIXED: Center horizontally in the container */
    position: relative !important;
    z-index: var(--z-elevated) !important; /* Button sits above title text */
  }

  /* DESKTOP: Right side action container - ensure proper positioning for owned spots */
  #listings-overlay .spot-card .flex > div:last-child.flex-col,
  #listings-content .spot-card .flex > div:last-child.flex-col {
    flex-shrink: 0 !important;
    min-width: fit-content !important;
    align-self: stretch !important; /* FIXED: Stretch to full card height for consistent alignment */
    position: relative !important;
    z-index: var(--z-elevated) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important; /* FIXED: Align button to bottom to match availability badge */
    gap: 0.25rem !important;
  }
  
  /* DESKTOP: Bottom transform for owned spot container (only when both badge and button are present) */
  /* Target containers with items-center justify-center (unique to owned spot containers) */
  #listings-overlay .spot-card .flex > div:last-child.flex-col.items-center.justify-center,
  #listings-content .spot-card .flex > div:last-child.flex-col.items-center.justify-center,
  #listings-overlay .spot-card .flex > div:last-child.flex.flex-col.items-center.justify-center,
  #listings-content .spot-card .flex > div:last-child.flex.flex-col.items-center.justify-center {
    transform: translateY(0.25rem) !important; /* Move down slightly for better alignment */
  }
  
  /* Alternative: Use :has() selector if browser supports it */
  #listings-overlay .spot-card .flex > div:last-child.flex-col:has(.view-spot-btn):has(span[class*="bg-amber-100"]),
  #listings-content .spot-card .flex > div:last-child.flex-col:has(.view-spot-btn):has(span[class*="bg-amber-100"]),
  #listings-overlay .spot-card .flex > div:last-child.flex-col:has(.view-spot-btn):has(span[class*="bg-amber-900"]),
  #listings-content .spot-card .flex > div:last-child.flex-col:has(.view-spot-btn):has(span[class*="bg-amber-900"]),
  #listings-overlay .spot-card .flex > div:last-child.flex.flex-col:has(.view-spot-btn):has(span[class*="bg-amber-100"]),
  #listings-content .spot-card .flex > div:last-child.flex.flex-col:has(.view-spot-btn):has(span[class*="bg-amber-100"]),
  #listings-overlay .spot-card .flex > div:last-child.flex.flex-col:has(.view-spot-btn):has(span[class*="bg-amber-900"]),
  #listings-content .spot-card .flex > div:last-child.flex.flex-col:has(.view-spot-btn):has(span[class*="bg-amber-900"]) {
    transform: translateY(2.5rem) !important; /* Move down slightly for better alignment */
  }
  
  /* CRITICAL: Ensure book button containers do NOT get this transform */
  /* Book buttons use flex-start alignment, not items-center justify-center */
  #listings-overlay .spot-card .flex > div:last-child.flex-col:has(.book-btn):not(:has(.view-spot-btn)),
  #listings-content .spot-card .flex > div:last-child.flex-col:has(.book-btn):not(:has(.view-spot-btn)),
  #listings-overlay .spot-card .flex > div:last-child.flex.flex-col:has(.book-btn):not(:has(.view-spot-btn)),
  #listings-content .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 */
  }

  /* DESKTOP: View spot button and owned spot badge positioning */
  #listings-overlay .view-spot-btn,
  #listings-content .view-spot-btn {
    font-size: 12px !important;
    padding: 0.5rem 1rem !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    position: relative !important;
    z-index: var(--z-elevated) !important;
    white-space: nowrap !important;
    margin: 0 !important;
    width: auto !important;
  }

  /* DESKTOP: Owned spot badge - ensure proper display and positioning */
  #listings-overlay .spot-card .flex > div:last-child.flex-col > span[class*="bg-amber-100"],
  #listings-content .spot-card .flex > div:last-child.flex-col > span[class*="bg-amber-100"],
  #listings-overlay .spot-card .flex > div:last-child.flex-col > span[class*="bg-amber-900"],
  #listings-content .spot-card .flex > div:last-child.flex-col > span[class*="bg-amber-900"] {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    width: auto !important;
  }

  /* DESKTOP: Ensure book button has blue background (not white) */
  #listings-overlay .book-btn,
  #listings-content .book-btn,
  #listings-overlay .spot-card .book-btn,
  #listings-content .spot-card .book-btn {
    background: #2563eb !important; /* Blue-600 */
    color: #ffffff !important;
    border-color: #1d4ed8 !important; /* Blue-700 */
  }

  #listings-overlay .book-btn:hover,
  #listings-content .book-btn:hover,
  #listings-overlay .spot-card .book-btn:hover,
  #listings-content .spot-card .book-btn:hover {
    background: #1d4ed8 !important; /* Blue-700 on hover */
  }

  /* DESKTOP: Fix pricing text display in listings overlay */
  #listings-overlay .spot-card .text-blue-700,
  #listings-overlay .spot-card .text-blue-400,
  #listings-overlay .spot-card .font-semibold {
    display: inline !important;
    white-space: nowrap !important;
    flex-direction: row !important;
  }

  /* DESKTOP: Ensure all pricing text elements display properly */
  #listings-overlay .spot-card .text-sm,
  #listings-overlay .spot-card .text-xs {
    display: inline !important;
    white-space: nowrap !important;
  }

  /* DESKTOP: Fix availability badges layout - ensure they can fit full text */
  #listings-overlay .spot-card .rounded-full,
  #listings-overlay .spot-card .px-2.py-1,
  #listings-content .spot-card .rounded-full,
  #listings-content .spot-card .px-2.py-1,
  #listings-overlay .spot-card .rounded-full[class*="bg-purple-700"],
  #listings-content .spot-card .rounded-full[class*="bg-purple-700"],
  #listings-overlay .spot-card .rounded-full[class*="bg-green-700"],
  #listings-content .spot-card .rounded-full[class*="bg-green-700"],
  #listings-overlay .spot-card .rounded-full[class*="bg-red-700"],
  #listings-content .spot-card .rounded-full[class*="bg-red-700"] {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-width: fit-content !important;
    max-width: none !important;
    width: auto !important;
    padding-left: 0.75rem !important; /* Increased horizontal padding */
    padding-right: 0.75rem !important;
  }
  
  /* DESKTOP: Ensure availability badge container allows full width */
  #listings-overlay .spot-card .flex.items-start.justify-start,
  #listings-content .spot-card .flex.items-start.justify-start {
    min-width: 0 !important; /* Allow flex container to shrink */
    overflow: visible !important; /* Allow badge to extend if needed */
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* DESKTOP TOP SHEET: Specific top margin for availability badge container */
  #listings-overlay .spot-card .flex.items-start.justify-start {
    margin-top: 0.8rem !important;
  }
  
  /* DESKTOP TOP SHEET: Left margin when showing after-hours (purple) badges */
  #listings-overlay .spot-card .flex.items-start.justify-start:has(span[class*="bg-purple-700"]),
  #listings-overlay .spot-card .flex.items-start.justify-start:has(span.bg-purple-700) {
    margin-left: 0.1rem !important; /* Adjust left margin for after-hours badges */
  }
  
  /* DESKTOP: Allow availability badges to use full available width */
  #listings-overlay .spot-card .flex.items-start.justify-start > span,
  #listings-content .spot-card .flex.items-start.justify-start > span,
  #listings-overlay .spot-card .flex.items-start.justify-start > span.rounded-full,
  #listings-content .spot-card .flex.items-start.justify-start > span.rounded-full {
    max-width: 100% !important; /* Can use full container width */
    width: auto !important;
    min-width: fit-content !important;
    flex-shrink: 0 !important;
  }
  
  /* DESKTOP: Ensure flex-1 container doesn't constrain availability badges */
  #listings-overlay .spot-card .flex-1,
  #listings-content .spot-card .flex-1 {
    overflow: visible !important; /* Allow badges to extend beyond if needed */
  }

  /* DESKTOP: Ensure flex containers maintain horizontal layout */
  #listings-overlay .spot-card .flex {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  /* DESKTOP: Fix pricing container layout */
  #listings-overlay .spot-card .justify-between {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
}

/* MOBILE-SPECIFIC OPTIMIZATIONS */
@media (max-width: 1023px) {
  /* MOBILE: Optimized spacing for mobile cards */
  .spot-card-mobile {
    margin-bottom: 0.5rem !important; /* Tighter spacing between cards */
  }

  .spot-card-mobile .flex {
    align-items: center !important; /* Ensure vertical centering */
  }

  /* MOBILE: Improved touch targets */
  .spot-card-mobile button {
    min-height: 32px !important;
    min-width: 60px !important;
    font-size: 0.75rem !important;
    padding: 0.375rem 0.75rem !important;
  }

  /* MOBILE: Better text wrapping for titles */
  .spot-card-mobile .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    max-height: calc(2 * 1.3em);
  }

  /* MOBILE: Ensure status badges don't break layout */
  .spot-card-mobile .whitespace-nowrap {
    flex-shrink: 0;
    max-width: none; /* FIXED: Remove max-width to allow full availability messages like "Available tomorrow at 7:00 AM" */
    overflow: visible; /* Allow text to display naturally */
  }
}

/* ==============================================
 * CRITICAL FIX: Force white text on book buttons
 * Must be at end of file for maximum specificity
 * ============================================== */
.book-btn,
button.book-btn,
[class*="book-btn"],
.spot-card .book-btn,
.spot-card button.book-btn {
  color: #ffffff !important;
}

/* DESKTOP ONLY: Book button hover color */
@media (min-width: 1024px) {
  .book-btn:hover,
  button.book-btn:hover,
  [class*="book-btn"]:hover {
    color: #ffffff !important;
  }
}

/* ============================================================================
   TABLET MEDIA QUERIES - Comprehensive spot card styling for tablets (768px-1023px)
   ============================================================================ */

@media (min-width: 768px) and (max-width: 1023px) {
  
  /* ===========================================
   * SPOT CARD CONTAINER - Overall card styling
   * USING MOBILE STYLES FOR CONSISTENCY - MAXIMUM SPECIFICITY
   * =========================================== */
  #listings-content-mobile .spot-card,
  #listings-sheet .spot-card,
  .spot-card {
    padding: 0.5rem !important; /* Mobile-optimized padding */
    margin-bottom: 0rem !important; /* Spacing between cards */
    border-radius: 10px !important; /* Rounded corners */
    min-height: 100px !important; /* Minimum card height */
  }

  /* ===========================================
   * IMAGE SECTION - Photo container and sizing
   * USING MOBILE STYLES FOR CONSISTENCY
   * =========================================== */
  .spot-card .relative.w-16,
  .spot-card .relative.w-20,
  .spot-card div[class*="w-16"],
  .spot-card div[class*="w-20"] {
    width: 80px !important; /* Image container width */
    height: 80px !important; /* Image container height */
    margin-right: 0.75rem !important; /* Space between image and content */
    margin-top: 0.125rem !important; /* Top alignment adjustment */
    border-radius: 6px !important; /* Image container border radius */
  }

  .spot-card .relative.w-16 img,
  .spot-card .relative.w-20 img,
  .spot-card div[class*="w-16"] img,
  .spot-card div[class*="w-20"] img {
    width: 80px !important; /* Image width */
    height: 80px !important; /* Image height */
    border-radius: 6px !important; /* Image border radius */
    object-fit: cover !important; /* Image scaling */
  }

  /* Price overlay on image */
  .spot-card .relative div[style*="position: absolute"][style*="bottom: 0"] {
    padding: 6px 8px !important; /* Price overlay padding */
    border-radius: 0 0 6px 6px !important; /* Price overlay border radius */
  }

  .spot-card .relative div[style*="position: absolute"] span {
    font-size: 11px !important; /* Smaller price text size */
    font-weight: 800 !important; /* Price text weight */
    line-height: 1.1 !important; /* Price text line height */
  }


  /* ===========================================
   * POSITION ADJUSTMENTS - Content alignment transforms
   * STANDARDIZED FOR ALL TABLET SIZES (599px-1023px)
   * =========================================== */
  /* Title wrapper position adjustment */
  #listings-content-mobile .spot-card .spot-card-title-wrapper {
    transform: translate(30px, -7px) !important; /* Consistent tablet positioning */
    position: relative !important;
  }

  /* Title text position adjustment */
  #listings-content-mobile .spot-card .spot-card-title-text {
    display: inline-block !important;
    transform: translateX(-18px) !important; /* Additional subtle right shift */
  }

  /* Address element position adjustment */
  /* CRITICAL: Vertical spacing handled by margins, transforms only for horizontal positioning */
  #listings-content-mobile .spot-card .clickable-address {
    transform: translateX(68px) !important; /* Horizontal positioning only - vertical spacing via margins */
    position: relative !important;
  }

  /* Metadata row (spot type, distance) position adjustment */
  /* CRITICAL: Vertical spacing handled by margins, transforms only for horizontal positioning */
  #listings-content-mobile .spot-card .flex.items-center.gap-2 {
    transform: translateX(68px) !important; /* Horizontal positioning only - vertical spacing via margins */
    position: relative !important;
  }

  /* Availability badge position adjustment */
  /* CRITICAL: Vertical spacing handled by margins, transforms only for horizontal positioning */
  #listings-content-mobile .spot-card .flex.items-start.justify-start {
    transform: translateX(68px) !important; /* Horizontal positioning only - vertical spacing via margins */
    position: relative !important;
  }

  /* Book button position adjustment */
  #listings-content-mobile .spot-card .book-btn,
  #listings-content-mobile .spot-card button.book-btn[data-book-spot-id],
  #listings-content-mobile .spot-card .flex.flex-col button[data-book-spot-id] {
    transform: translate(-2px, -7px) !important; /* Consistent vertical alignment */
    position: relative !important;
  }
  
  /* Exclude clickable-address buttons from book button transforms */
  #listings-content-mobile .spot-card button.clickable-address,
  #listings-content-mobile .spot-card button.location-badge-compact {
    transform: none !important; /* Override any book button transforms */
  }

  /* ===========================================
   * HOVER OVERLAY - Disabled for tablets
   * =========================================== */
  .spot-card .absolute.inset-0 {
    display: none !important; /* Hide hover overlays on tablets */
  }

  /* ===========================================
   * DARK MODE ADJUSTMENTS - Dark theme variants
   * =========================================== */
  .dark .spot-card {
    background: rgba(31, 41, 55, 0.95) !important; /* Dark mode card background */
    border: 1px solid rgba(255, 255, 255, 0.12) !important; /* Dark mode border */
  }

  .dark .spot-card .spot-card-title-wrapper {
    color: #f9fafb !important; /* Dark mode title color */
  }

  .dark .spot-card .clickable-address {
    color: #60a5fa !important; /* Dark mode address color */
  }

  .dark .spot-card .text-neutral-700 {
    color: #d1d5db !important; /* Dark mode metadata color */
  }

  .dark .spot-card .text-neutral-600 {
    color: #9ca3af !important; /* Dark mode secondary text color */
  }
}

/* ============================================================================
   MOBILE MEDIA QUERIES - Comprehensive spot card styling for mobile (≤640px)
   ============================================================================ */

@media (max-width: 640px) {
  
  /* ===========================================
   * SPOT CARD CONTAINER - Overall card styling
   * =========================================== */
  .spot-card {
    padding: 0.5rem !important; /* Mobile-optimized padding */
    margin-bottom: 0.5rem !important; /* Spacing between cards */
    border-radius: 10px !important; /* Rounded corners */
    min-height: 100px !important; /* Minimum card height */
  }

  /* ===========================================
   * IMAGE SECTION - Photo container and sizing
   * =========================================== */
  .spot-card .relative.w-16,
  .spot-card .relative.w-20,
  .spot-card div[class*="w-16"],
  .spot-card div[class*="w-20"] {
    width: 80px !important; /* Image container width */
    height: 80px !important; /* Image container height */
    margin-right: 0.75rem !important; /* Space between image and content */
    margin-top: 0.125rem !important; /* Top alignment adjustment */
    border-radius: 6px !important; /* Image container border radius */
  }

  .spot-card .relative.w-16 img,
  .spot-card .relative.w-20 img,
  .spot-card div[class*="w-16"] img,
  .spot-card div[class*="w-20"] img {
    width: 80px !important; /* Image width */
    height: 80px !important; /* Image height */
    border-radius: 6px !important; /* Image border radius */
    object-fit: cover !important; /* Image scaling */
  }

  /* Price overlay on image */
  .spot-card .relative div[style*="position: absolute"][style*="bottom: 0"] {
    padding: 6px 8px !important; /* Price overlay padding */
    border-radius: 0 0 6px 6px !important; /* Price overlay border radius */
  }

  .spot-card .relative div[style*="position: absolute"] span {
    font-size: 11px !important; /* Smaller price text size */
    font-weight: 800 !important; /* Price text weight */
    line-height: 1.1 !important; /* Price text line height */
  }


  /* ===========================================
   * POSITION ADJUSTMENTS - Content alignment transforms
   * =========================================== */
  /* Title wrapper position adjustment */
  #listings-content-mobile .spot-card .spot-card-title-wrapper {
    transform: translate(12px, -4px) !important; /* Move right 38px, up 4px */
    position: relative !important;
  }

  /* Title text position adjustment */
  #listings-content-mobile .spot-card .spot-card-title-text {
    display: inline-block !important;
    transform: translateX(2px) !important; /* Additional subtle right shift */
  }

  /* Address element position adjustment */
  /* CRITICAL: Vertical spacing handled by margins, transforms only for horizontal positioning */
  #listings-content-mobile .spot-card .clickable-address {
    transform: translateX(38px) !important; /* Horizontal positioning only - vertical spacing via margins */
    position: relative !important;
  }

  /* Metadata row (spot type, distance) position adjustment */
  /* CRITICAL: Vertical spacing handled by margins, transforms only for horizontal positioning */
  #listings-content-mobile .spot-card .flex.items-center.gap-2 {
    transform: translateX(38px) !important; /* Horizontal positioning only - vertical spacing via margins */
    position: relative !important;
  }

  /* Availability badge position adjustment */
  /* CRITICAL: Vertical spacing handled by margins, transforms only for horizontal positioning */
  #listings-content-mobile .spot-card .flex.items-start.justify-start {
    transform: translateX(38px) !important; /* Horizontal positioning only - vertical spacing via margins */
    position: relative !important;
  }

  /* Book button position adjustment */
  #listings-content-mobile .spot-card .book-btn,
  #listings-content-mobile .spot-card button.book-btn[data-book-spot-id],
  #listings-content-mobile .spot-card .flex.flex-col button[data-book-spot-id] {
    transform: translate(-4px, -4px) !important; /* Move left 6px, up 4px */
    position: relative !important;
  }
  
  /* Exclude clickable-address buttons from book button transforms */
  #listings-content-mobile .spot-card button.clickable-address,
  #listings-content-mobile .spot-card button.location-badge-compact {
    transform: none !important; /* Override any book button transforms */
  }

  /* ===========================================
   * HOVER OVERLAY - Disabled for mobile
   * =========================================== */
  .spot-card .absolute.inset-0 {
    display: none !important; /* Hide hover overlays on mobile */
  }

  /* ===========================================
   * DARK MODE ADJUSTMENTS - Dark theme variants
   * =========================================== */
  .dark .spot-card {
    background: rgba(31, 41, 55, 0.9) !important; /* Dark mode card background */
    border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Dark mode border */
  }

  .dark .spot-card .spot-card-title-wrapper {
    color: #f9fafb !important; /* Dark mode title color */
  }

  .dark .spot-card .clickable-address {
    color: #60a5fa !important; /* Dark mode address color */
  }

  .dark .spot-card .text-neutral-700 {
    color: #d1d5db !important; /* Dark mode metadata color */
  }

  .dark .spot-card .text-neutral-600 {
    color: #9ca3af !important; /* Dark mode secondary text color */
  }
}

/* ============================================================================
   MOBILE MEDIA QUERIES - Ultra-compact styling for mobile devices (≤520px)
   ============================================================================ */

@media (max-width: 520px) {
  
  /* ===========================================
   * SPOT CARD CONTAINER - Ultra-compact card styling
   * =========================================== */
  .spot-card {
    padding: 0.375rem !important; /* Ultra-compact padding */
    margin-bottom: 0.375rem !important; /* Minimal spacing between cards */
    border-radius: 8px !important; /* Smaller rounded corners */
    min-height: 90px !important; /* Smaller minimum card height */
  }

  /* ===========================================
   * IMAGE SECTION - Smaller photo container
   * =========================================== */
  .spot-card .relative.w-16,
  .spot-card .relative.w-20,
  .spot-card div[class*="w-16"],
  .spot-card div[class*="w-20"] {
    width: 64px !important; /* Smaller image container width */
    height: 64px !important; /* Smaller image container height */
    margin-right: 0.5rem !important; /* Reduced space between image and content */
    margin-top: 0 !important; /* No top margin adjustment */
    border-radius: 4px !important; /* Smaller image container border radius */
  }

  .spot-card .relative.w-16 img,
  .spot-card .relative.w-20 img,
  .spot-card div[class*="w-16"] img,
  .spot-card div[class*="w-20"] img {
    width: 64px !important; /* Smaller image width */
    height: 64px !important; /* Smaller image height */
    border-radius: 4px !important; /* Smaller image border radius */
    object-fit: cover !important; /* Image scaling */
  }

  /* Price overlay on image */
  .spot-card .relative div[style*="position: absolute"][style*="bottom: 0"] {
    padding: 4px 6px !important; /* Smaller price overlay padding */
    border-radius: 0 0 4px 4px !important; /* Smaller price overlay border radius */
  }

  .spot-card .relative div[style*="position: absolute"] span {
    font-size: 11px !important; /* Smaller price text size */
    font-weight: 800 !important; /* Price text weight */
    line-height: 1 !important; /* Tighter price text line height */
  }


  /* ===========================================
   * POSITION ADJUSTMENTS - Content alignment transforms
   * =========================================== */
  /* Title wrapper position adjustment */
  #listings-content-mobile .spot-card .spot-card-title-wrapper {
    transform: translate(7px, -3px) !important; /* Move right 30px, up 3px */
    position: relative !important;
  }

  /* Title text position adjustment */
  #listings-content-mobile .spot-card .spot-card-title-text {
    display: inline-block !important;
    transform: translateX(1px) !important; /* Additional subtle right shift */
  }

  /* Address element position adjustment */
  /* CRITICAL: Vertical spacing handled by margins, transforms only for horizontal positioning */
  #listings-content-mobile .spot-card .clickable-address {
    transform: translateX(52px) !important; /* Horizontal positioning only - vertical spacing via margins */
    position: relative !important;
  }

  /* Metadata row (spot type, distance) position adjustment */
  /* CRITICAL: Vertical spacing handled by margins, transforms only for horizontal positioning */
  #listings-content-mobile .spot-card .flex.items-center.gap-2 {
    transform: translateX(30px) !important; /* Horizontal positioning only - vertical spacing via margins */
    position: relative !important;
  }

  /* Availability badge position adjustment */
  /* CRITICAL: Vertical spacing handled by margins, transforms only for horizontal positioning */
  #listings-content-mobile .spot-card .flex.items-start.justify-start {
    transform: translateX(30px) !important; /* Horizontal positioning only - vertical spacing via margins */
    position: relative !important;
  }

  /* Book button position adjustment */
  #listings-content-mobile .spot-card .book-btn,
  #listings-content-mobile .spot-card button.book-btn[data-book-spot-id],
  #listings-content-mobile .spot-card .flex.flex-col button[data-book-spot-id] {
    transform: translate(-4px, -3px) !important; /* Move left 5px, up 3px */
    position: relative !important;
  }
  
  /* Exclude clickable-address buttons from book button transforms */
  #listings-content-mobile .spot-card button.clickable-address,
  #listings-content-mobile .spot-card button.location-badge-compact {
    transform: none !important; /* Override any book button transforms */
  }

  /* ===========================================
   * HOVER OVERLAY - Disabled for mobile
   * =========================================== */
  .spot-card .absolute.inset-0 {
    display: none !important; /* Hide hover overlays on mobile */
  }

  /* ===========================================
   * LIGHT MODE OVERRIDES - Ensure proper reset when switching from dark mode
   * =========================================== */
  /* Explicit light mode rules to override dark mode styles */
  #listings-sheet .spot-card:not(.dark):not([class*="dark"]),
  #listings-content-mobile .spot-card:not(.dark):not([class*="dark"]) {
    background: rgba(255, 255, 255, 0.9) !important; /* Light mode card background */
    border: 1px solid rgba(0, 0, 0, 0.05) !important; /* Light mode border */
  }

  /* Ensure light mode when html/body doesn't have dark class */
  html:not(.dark) #listings-sheet .spot-card,
  html:not(.dark) #listings-content-mobile .spot-card,
  body:not(.dark) #listings-sheet .spot-card,
  body:not(.dark) #listings-content-mobile .spot-card {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
  }

  html:not(.dark) #listings-sheet .spot-card .spot-card-title-wrapper,
  html:not(.dark) #listings-content-mobile .spot-card .spot-card-title-wrapper,
  body:not(.dark) #listings-sheet .spot-card .spot-card-title-wrapper,
  body:not(.dark) #listings-content-mobile .spot-card .spot-card-title-wrapper {
    color: #111827 !important; /* Light mode title color */
  }

  html:not(.dark) #listings-sheet .spot-card .clickable-address,
  html:not(.dark) #listings-content-mobile .spot-card .clickable-address,
  body:not(.dark) #listings-sheet .spot-card .clickable-address,
  body:not(.dark) #listings-content-mobile .spot-card .clickable-address {
    color: #2563eb !important; /* Light mode address color */
  }

  html:not(.dark) #listings-sheet .spot-card .text-neutral-700,
  html:not(.dark) #listings-content-mobile .spot-card .text-neutral-700,
  body:not(.dark) #listings-sheet .spot-card .text-neutral-700,
  body:not(.dark) #listings-content-mobile .spot-card .text-neutral-700 {
    color: #374151 !important; /* Light mode metadata color */
  }

  html:not(.dark) #listings-sheet .spot-card .text-neutral-600,
  html:not(.dark) #listings-content-mobile .spot-card .text-neutral-600,
  body:not(.dark) #listings-sheet .spot-card .text-neutral-600,
  body:not(.dark) #listings-content-mobile .spot-card .text-neutral-600 {
    color: #4b5563 !important; /* Light mode secondary text color */
  }

  /* ===========================================
   * DARK MODE ADJUSTMENTS - Dark theme variants
   * =========================================== */
  .dark #listings-sheet .spot-card,
  .dark #listings-content-mobile .spot-card,
  html.dark #listings-sheet .spot-card,
  html.dark #listings-content-mobile .spot-card,
  body.dark #listings-sheet .spot-card,
  body.dark #listings-content-mobile .spot-card {
    background: rgba(31, 41, 55, 0.85) !important; /* Slightly more transparent dark mode card background */
    border: 1px solid rgba(255, 255, 255, 0.08) !important; /* Subtler dark mode border */
  }

  .dark #listings-sheet .spot-card .spot-card-title-wrapper,
  .dark #listings-content-mobile .spot-card .spot-card-title-wrapper,
  html.dark #listings-sheet .spot-card .spot-card-title-wrapper,
  html.dark #listings-content-mobile .spot-card .spot-card-title-wrapper,
  body.dark #listings-sheet .spot-card .spot-card-title-wrapper,
  body.dark #listings-content-mobile .spot-card .spot-card-title-wrapper {
    color: #f9fafb !important; /* Dark mode title color */
  }

  .dark #listings-sheet .spot-card .clickable-address,
  .dark #listings-content-mobile .spot-card .clickable-address,
  html.dark #listings-sheet .spot-card .clickable-address,
  html.dark #listings-content-mobile .spot-card .clickable-address,
  body.dark #listings-sheet .spot-card .clickable-address,
  body.dark #listings-content-mobile .spot-card .clickable-address {
    color: #60a5fa !important; /* Dark mode address color */
  }

  .dark #listings-sheet .spot-card .text-neutral-700,
  .dark #listings-content-mobile .spot-card .text-neutral-700,
  html.dark #listings-sheet .spot-card .text-neutral-700,
  html.dark #listings-content-mobile .spot-card .text-neutral-700,
  body.dark #listings-sheet .spot-card .text-neutral-700,
  body.dark #listings-content-mobile .spot-card .text-neutral-700 {
    color: #d1d5db !important; /* Dark mode metadata color */
  }

  .dark #listings-sheet .spot-card .text-neutral-600,
  .dark #listings-content-mobile .spot-card .text-neutral-600,
  html.dark #listings-sheet .spot-card .text-neutral-600,
  html.dark #listings-content-mobile .spot-card .text-neutral-600,
  body.dark #listings-sheet .spot-card .text-neutral-600,
  body.dark #listings-content-mobile .spot-card .text-neutral-600 {
    color: #9ca3af !important; /* Dark mode secondary text color */
  }
}

/* ============================================================================
   AVAILABILITY BADGE COLORS - Custom definitions for WCAG AA compliance
   ============================================================================ */

/* Green badges for "available" status - #047857 has 4.6:1 contrast with white */
.bg-green-700 {
  background-color: #047857 !important;
}

.dark .bg-green-700 {
  background-color: #047857 !important;
}

/* ============================================================================
   COMPACT LOCATION BADGE - Professional clickable address styling
   ============================================================================ */

.location-badge-compact {
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  padding: 1px 2px !important;
  margin: 0 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  border-radius: 4px !important;
  max-width: fit-content !important;
  width: auto !important;
}

.location-badge-compact:focus {
  outline: 1px solid rgba(156, 163, 175, 0.3) !important; /* Subtle focus outline */
  outline-offset: 1px !important;
}

.location-icon-compact {
  flex-shrink: 0 !important;
  transition: color 0.2s ease !important;
}

.location-text-compact {
  flex: 1 !important;
  min-width: 0 !important;
  transition: color 0.2s ease !important;
}

.external-icon-compact {
  flex-shrink: 0 !important;
  transition: opacity 0.2s ease !important;
}

/* DESKTOP ONLY: Location badge hover effects */
@media (min-width: 1024px) {
  .location-badge-compact:hover {
    background: rgba(156, 163, 175, 0.08) !important; /* Very subtle grey background */
    transform: none !important; /* Remove the lift effect */
  }

  .location-badge-compact:hover .location-icon-compact {
    color: #6b7280 !important; /* Subtle grey hover */
  }

  .location-badge-compact:hover .external-icon-compact {
    opacity: 0.7 !important; /* More subtle appearance */
  }

  /* Dark mode support */
  .dark .location-badge-compact:hover {
    background: rgba(75, 85, 99, 0.1) !important; /* Subtle dark mode background */
  }

  .dark .location-badge-compact:hover .location-icon-compact {
    color: #9ca3af !important; /* grey-400 for dark mode */
  }
}

.dark .location-badge-compact:focus {
  outline-color: rgba(156, 163, 175, 0.4) !important;
}

/* Purple badges for "outside_hours" status */
.bg-purple-700 {
  background-color: #7e22ce !important;
}

.dark .bg-purple-700 {
  background-color: #7e22ce !important;
}

/* Red badges for "booked" status */
.bg-red-700 {
  background-color: #b91c1c !important;
}

.dark .bg-red-700 {
  background-color: #b91c1c !important;
}

/* Orange badges for "unavailable" status */
.bg-orange-700 {
  background-color: #c2410c !important;
}

.dark .bg-orange-700 {
  background-color: #c2410c !important;
}

/* ============================================================================
   BLUE TEXT COLORS - Custom definitions for WCAG AA compliance
   ============================================================================ */

/* Blue text for better contrast on light backgrounds - #1d4ed8 has 5.14:1 contrast with white */
.text-blue-700 {
  color: #1d4ed8 !important; /* Using blue-700 color for better contrast (was #1d4ed8) */
}

/* Light blue for dark mode */
.dark .text-blue-700 {
  color: #60a5fa !important;
}

.text-white {
  color: #FFFFFF !important;
}

.text-blue-900 {
  color: #1e3a8a !important;
}

/* Dark mode - much lighter blues for proper contrast on dark backgrounds */
.dark .text-blue-900 {
  color: #dbeafe !important; /* Lightest blue for darkest text in dark mode */
}

.dark .text-blue-400 {
  color: #FFFFFF !important;
}

/* Additional specificity for discover page */
html.dark .text-blue-900 {
  color: #FFFFFF !important;
}

html.dark .text-blue-400 {
  color: #FFFFFF !important;
}

/* MAXIMUM SPECIFICITY - Force all blue text in dark mode to be light */
html.dark *[class*="text-blue"],
.dark *[class*="text-blue"],
html.dark [class*="text-blue"],
.dark [class*="text-blue"] {
  color: #FFFFFF !important;
}

/* Override for specific shades in dark mode */
html.dark .text-blue-700,
html.dark *[class*="text-blue-6"],
.dark .text-blue-700,
.dark *[class*="text-blue-6"] {
  color: #60a5fa !important;
}

html.dark .text-white,
html.dark *[class*="text-blue-8"],
.dark .text-white,
.dark *[class*="text-blue-8"] {
  color: #FFFFFF !important;
}

/* ============================================================================
   AMENITY CHIP BACKGROUND/TEXT COLORS - Custom definitions
   ============================================================================ */

/* Background colors for amenity chips */
.bg-blue-600 {
  background-color: #2563eb !important;
}

.dark .bg-blue-600,
html.dark .bg-blue-600 {
  background-color: #2563eb !important;
}

.bg-gray-100 {
  background-color: #f3f4f6 !important;
}

.dark .bg-gray-700,
html.dark .bg-gray-700 {
  background-color: #374151 !important;
}

/* Text colors */
.text-white {
  color: #ffffff !important;
}

.text-gray-700 {
  color: #1f2937 !important; /* Better contrast - gray-800 */
}

.dark .text-gray-200,
html.dark .text-gray-200 {
  color: #e5e7eb !important;
}

/* Border colors */
.border-blue-600 {
  border-color: #2563eb !important;
}

.border-gray-200 {
  border-color: #e5e7eb !important;
}

.dark .border-gray-600,
html.dark .border-gray-600 {
  border-color: #4b5563 !important;
}

/* ==============================================
 * 🚨 CRITICAL END-OF-FILE OVERRIDES 🚨
 * ============================================== 
 * 
 * ⚠️  WARNING: DO NOT MOVE THESE RULES
 * 
 * These rules MUST remain at the end of the file to maintain
 * maximum CSS specificity and override any earlier declarations.
 * 
 * CONSOLIDATION HISTORY:
 * • Phase 2: Merged duplicate padding-top rules → Lines 256-268
 * • Phase 3: Button selector optimization → Lines 497-514
 * 
 * RULES IN THIS SECTION:
 * 1. Title vertical positioning (negative margin)
 * 2. Marquee card address/spot type positioning overrides
 * ============================================== */

/* 🚨 CRITICAL: MARQUEE CARD ADDRESS/SPOT TYPE POSITIONING OVERRIDES 🚨 */
/* Maximum specificity rules to ensure marquee cards get correct positioning */
/* CRITICAL: Only match cards with .needs-scroll class - this is the definitive marquee indicator */
/* data-marquee-processed="true" alone is NOT sufficient - it's set on non-marquee cards too */
@media (min-width: 1024px) {
  /* Address positioning for marquee cards - ULTRA HIGH SPECIFICITY - OVERRIDE EVERYTHING */
  /* ONLY match cards with .needs-scroll class */
  #listings-content .spot-card .flex-1 .mb-1:has(.spot-card-title-wrapper.needs-scroll) ~ .clickable-address,
  #listings-overlay .spot-card .flex-1 .mb-1:has(.spot-card-title-wrapper.needs-scroll) ~ .clickable-address,
  #listings-content .spot-card .flex-1 .mb-1 .spot-card-title-wrapper.needs-scroll ~ .clickable-address,
  #listings-overlay .spot-card .flex-1 .mb-1 .spot-card-title-wrapper.needs-scroll ~ .clickable-address,
  #listings-content .spot-card:has(.spot-card-title-wrapper.needs-scroll) .clickable-address,
  #listings-overlay .spot-card:has(.spot-card-title-wrapper.needs-scroll) .clickable-address {
    margin-left: 0.9rem !important;
    margin-right: 0 !important;
    transform: none !important;
    left: 0 !important;
    right: auto !important;
    position: relative !important;
    /* ELLIPSIS: Add max-width and overflow for marquee cards */
    max-width: var(--desktop-address-max-width, 260px) !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
  }
  
  /* MARQUEE CARDS: Address text ellipsis - ULTRA HIGH SPECIFICITY */
  #listings-content .spot-card:has(.spot-card-title-wrapper.needs-scroll) .clickable-address > span,
  #listings-overlay .spot-card:has(.spot-card-title-wrapper.needs-scroll) .clickable-address > span,
  #listings-content .spot-card:has(.spot-card-title-wrapper.needs-scroll) .clickable-address span.text-blue-600,
  #listings-overlay .spot-card:has(.spot-card-title-wrapper.needs-scroll) .clickable-address span.text-blue-600,
  #listings-content .spot-card:has(.spot-card-title-wrapper.needs-scroll) .clickable-address span[class*="text-blue"],
  #listings-overlay .spot-card:has(.spot-card-title-wrapper.needs-scroll) .clickable-address span[class*="text-blue"] {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    max-width: calc(var(--desktop-address-max-width, 260px) - 20px) !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
  }
  
  /* Spot type/distance positioning for marquee cards - ULTRA HIGH SPECIFICITY - OVERRIDE EVERYTHING */
  /* ONLY match cards with .needs-scroll class */
  #listings-content .spot-card .flex-1 .mb-1:has(.spot-card-title-wrapper.needs-scroll) ~ .flex.items-center.gap-2:not(.gravel-surface-container):not([class*="gravel-surface"]):not(.backyard-access-container):not([class*="backyard-access"]),
  #listings-overlay .spot-card .flex-1 .mb-1:has(.spot-card-title-wrapper.needs-scroll) ~ .flex.items-center.gap-2:not(.gravel-surface-container):not([class*="gravel-surface"]):not(.backyard-access-container):not([class*="backyard-access"]),
  #listings-content .spot-card .flex-1 .mb-1 .spot-card-title-wrapper.needs-scroll ~ .flex.items-center.gap-2:not(.gravel-surface-container):not([class*="gravel-surface"]):not(.backyard-access-container):not([class*="backyard-access"]),
  #listings-overlay .spot-card .flex-1 .mb-1 .spot-card-title-wrapper.needs-scroll ~ .flex.items-center.gap-2:not(.gravel-surface-container):not([class*="gravel-surface"]):not(.backyard-access-container):not([class*="backyard-access"]),
  #listings-content .spot-card:has(.spot-card-title-wrapper.needs-scroll) .flex.items-center.gap-2:not(.gravel-surface-container):not([class*="gravel-surface"]):not(.backyard-access-container):not([class*="backyard-access"]),
  #listings-overlay .spot-card:has(.spot-card-title-wrapper.needs-scroll) .flex.items-center.gap-2:not(.gravel-surface-container):not([class*="gravel-surface"]):not(.backyard-access-container):not([class*="backyard-access"]) {
    margin-left: 2.5rem !important;
    margin-right: 0 !important;
    transform: none !important;
    left: 0 !important;
    right: auto !important;
    position: relative !important;
  }
}

/* CRITICAL: Move stationary title up - MAXIMUM SPECIFICITY - REDUCED for consistency */
#listings-overlay .spot-card .flex-1 .spot-card-title-wrapper:not(.needs-scroll),
#listings-content .spot-card .flex-1 .spot-card-title-wrapper:not(.needs-scroll),
div.spot-card .flex-1 .spot-card-title-wrapper:not(.needs-scroll) {
  margin-top: -0.125rem !important; /* Reduced from -0.625rem to match text margin for consistency */
}

/* CRITICAL: Ensure proper contrast on dark overlays and backgrounds */
.dark *[style*="background: rgba(0"],
.dark *[style*="background-color: rgba(0"],
html.dark *[style*="background: rgba(0"],
html.dark *[style*="background-color: rgba(0"],
body.dark *[style*="background: rgba(0"],
body.dark *[style*="background-color: rgba(0"] {
  color: #f9fafb !important; /* Light text on dark backgrounds */
}

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

/* CRITICAL: Override white text in light mode for listings sheet spot cards */
html:not(.dark) #listings-sheet [style*="color: rgb(255, 255, 255)"],
html:not(.dark) #listings-sheet [style*="color: #ffffff"],
html:not(.dark) #listings-content-mobile [style*="color: rgb(255, 255, 255)"],
html:not(.dark) #listings-content-mobile [style*="color: #ffffff"],
body:not(.dark) #listings-sheet [style*="color: rgb(255, 255, 255)"],
body:not(.dark) #listings-sheet [style*="color: #ffffff"],
body:not(.dark) #listings-content-mobile [style*="color: rgb(255, 255, 255)"],
body:not(.dark) #listings-content-mobile [style*="color: #ffffff"] {
  color: #111827 !important; /* Dark text for light mode */
}

/* 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"],
.dark [style*="color: rgb(255, 255, 255)"],
html.dark [style*="color: rgb(255, 255, 255)"],
body.dark [style*="color: rgb(255, 255, 255)"] {
  color: #f9fafb !important; /* Light text in dark mode */
}

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

/* ============================================================================
   MOBILE TOUCH - Distance Text Transform
   ============================================================================ */
@media (hover: none) and (pointer: coarse) {
  /* Transform distance text to the right on mobile touch */
  .spot-card span.text-xs.font-medium.text-neutral-600.dark\\:text-neutral-300,
  .spot-card span[class*="text-xs"][class*="font-medium"][class*="text-neutral-600"],
  #listings-sheet .spot-card span.text-xs.font-medium.text-neutral-600.dark\\:text-neutral-300,
  #listings-content-mobile .spot-card span.text-xs.font-medium.text-neutral-600.dark\\:text-neutral-300 {
    transform: translateX(0.5rem) !important; /* Move 8px to the right */
  }

  /* Transform title wrapper upward on mobile touch */
  .spot-card .spot-card-title-wrapper,
  #listings-sheet .spot-card .spot-card-title-wrapper,
  #listings-content-mobile .spot-card .spot-card-title-wrapper {
    transform: translateY(-0.25rem) !important; /* Move up 4px */
  }
}

/* MOBILE UNDER 354px: Small left transform on distance text */
@media (max-width: 354px) {
  .spot-card span.text-xs.font-medium.text-neutral-600.dark\\:text-neutral-300,
  .spot-card span[class*="text-xs"][class*="font-medium"][class*="text-neutral-600"],
  #listings-sheet .spot-card span.text-xs.font-medium.text-neutral-600.dark\\:text-neutral-300,
  #listings-content-mobile .spot-card span.text-xs.font-medium.text-neutral-600.dark\\:text-neutral-300 {
    transform: translateX(-0.25rem) !important; /* Move 4px to the left */
  }
}

/* ==============================================
 * FINAL FALLBACK: Desktop Address Ellipsis
 * Maximum specificity - applies to ALL desktop spot cards
 * Placed at end of file for cascade priority
 * ============================================== */
@media (min-width: 1024px) {
  /* UNIVERSAL: Address container ellipsis for ALL desktop spot cards */
  .spot-card .clickable-address,
  .spot-card div.clickable-address,
  .spot-card .clickable-address.flex.items-center.gap-1,
  div.spot-card .clickable-address,
  div.spot-card div.clickable-address,
  [data-spot-id] .clickable-address,
  [class*="spot-card"] .clickable-address,
  [class*="spot-card"] [class*="clickable-address"] {
    max-width: var(--desktop-address-max-width, 260px) !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
  }
  
  /* UNIVERSAL: Address text ellipsis for ALL desktop spot cards */
  /* ULTRA HIGH SPECIFICITY with attribute selectors */
  .spot-card .clickable-address > span,
  .spot-card .clickable-address span.text-blue-600,
  .spot-card .clickable-address span[class*="text-blue"],
  div.spot-card .clickable-address > span,
  div.spot-card .clickable-address span.text-blue-600,
  div.spot-card .clickable-address span[class*="text-blue"],
  [data-spot-id] .clickable-address > span,
  [data-spot-id] .clickable-address span[class*="text-blue"],
  [class*="spot-card"] .clickable-address > span,
  [class*="spot-card"] .clickable-address span[class*="text-blue"],
  [class*="spot-card"] [class*="clickable-address"] > span,
  [class*="spot-card"] [class*="clickable-address"] span[class*="text-blue"] {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    max-width: calc(var(--desktop-address-max-width, 260px) - 20px) !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
  }
  
  /* NUCLEAR OPTION: Target by data attribute for absolute certainty */
  [data-address] > span,
  div[data-address] > span,
  .clickable-address[data-address] > span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    max-width: calc(var(--desktop-address-max-width, 260px) - 20px) !important;
    min-width: 0 !important;
  }
  
  /* Ensure parent container has overflow hidden */
  [data-address],
  div[data-address],
  .clickable-address[data-address] {
    max-width: var(--desktop-address-max-width, 260px) !important;
    overflow: hidden !important;
  }
  
  /* ==============================================
   * FINAL FALLBACK: Gravel/Grass Surface Container
   * Applies to ALL gravel-surface-container elements
   * ============================================== */
  .spot-card .gravel-surface-container,
  .spot-card .gravel-surface-container.flex.items-center.gap-2,
  .spot-card div.gravel-surface-container,
  div.spot-card .gravel-surface-container,
  div.spot-card .gravel-surface-container.flex.items-center.gap-2 {
    transform: translate(2.3rem, -2px) !important;
    position: relative !important;
  }
  
  /* ==============================================
   * FINAL FALLBACK: Backyard Access Container
   * Applies to ALL backyard-access-container elements
   * ============================================== */
  .spot-card .backyard-access-container,
  .spot-card .backyard-access-container.flex.items-center.gap-2,
  .spot-card div.backyard-access-container,
  div.spot-card .backyard-access-container,
  div.spot-card .backyard-access-container.flex.items-center.gap-2 {
    transform: translate(0.5rem, -2px) !important;
    position: relative !important;
  }
}

/* ==============================================
 * ABSOLUTE FINAL: Address Ellipsis for Marquee Cards
 * MAXIMUM SPECIFICITY - Must be at very end of file
 * Targets cards with .needs-scroll (marquee active)
 * ============================================== */
@media (min-width: 1024px) {
  /* Triple-stacked specificity for marquee cards */
  html body .spot-card .clickable-address,
  html body .spot-card:has(.needs-scroll) .clickable-address,
  html body #listings-overlay .spot-card .clickable-address,
  html body #listings-content .spot-card .clickable-address,
  html body #listings-overlay .spot-card:has(.needs-scroll) .clickable-address,
  html body #listings-content .spot-card:has(.needs-scroll) .clickable-address,
  html body div.spot-card .clickable-address,
  html body div.spot-card:has(.needs-scroll) .clickable-address,
  html body #listings-overlay .spot-card:has(.spot-card-title-wrapper.needs-scroll) .clickable-address,
  html body #listings-content .spot-card:has(.spot-card-title-wrapper.needs-scroll) .clickable-address,
  html body .spot-card:has(.spot-card-title-wrapper.needs-scroll) .clickable-address {
    max-width: 260px !important;
    width: 260px !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
  }
  
  /* CRITICAL: Force address span to respect max-width in marquee cards */
  /* The span must have explicit width constraint to trigger ellipsis */
  html body .spot-card .clickable-address > span,
  html body .spot-card .clickable-address span.text-blue-600,
  html body .spot-card:has(.needs-scroll) .clickable-address > span,
  html body .spot-card:has(.needs-scroll) .clickable-address span.text-blue-600,
  html body #listings-overlay .spot-card .clickable-address > span,
  html body #listings-content .spot-card .clickable-address > span,
  html body #listings-overlay .spot-card:has(.needs-scroll) .clickable-address > span,
  html body #listings-content .spot-card:has(.needs-scroll) .clickable-address > span,
  html body div.spot-card .clickable-address > span,
  html body div.spot-card:has(.needs-scroll) .clickable-address > span,
  html body #listings-overlay .spot-card:has(.spot-card-title-wrapper.needs-scroll) .clickable-address > span,
  html body #listings-content .spot-card:has(.spot-card-title-wrapper.needs-scroll) .clickable-address > span,
  html body .spot-card:has(.spot-card-title-wrapper.needs-scroll) .clickable-address > span,
  html body .spot-card .clickable-address span[class*="text-blue"],
  html body .spot-card:has(.spot-card-title-wrapper.needs-scroll) .clickable-address span[class*="text-blue"] {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    width: 220px !important;
    max-width: 220px !important;
    min-width: 0 !important;
    flex: 0 1 220px !important;
  }
}