/* ============================================================================
 * LUXURY SPOT DETAILS - DISCOVER PAGE MODAL
 * ============================================================================
 * 🎯 PURPOSE: Spot detail modal/overlay within discover.html
 * 📱 COVERAGE: Premium UI design system with micro-interactions
 * 🔧 FEATURES: Ultra-compact design, conversion-optimized, Tesla/Airbnb inspired
 * 📄 IMPORTED BY: discover.html (spot detail modal functionality)
 * 🚀 STATUS: ACTIVE - Critical for in-page spot detail viewing
 * 
 * ⚠️ RELATIONSHIP WITH spot-details.css:
 * - This file styles MODAL/OVERLAY spot details (JavaScript-rendered via SpotDetailRenderer.js)
 * - spot-details.css styles STANDALONE spot detail pages (server-rendered template)
 * - Both files use similar selectors but serve DIFFERENT contexts
 * - Duration chips: This file uses YELLOW-GOLD (#d8d41d), spot-details.css uses BLUE (#2563eb)
 * - Styles are scoped to modal context (rendered within #spot-detail-content or #spot-detail-view)
 * - Dark mode contrast fixes are global and shared between both contexts
 * ========================================================================= */

/* Spot card in details view - Ensure proper light mode */
/* NOTE: Scoped to detail view context to prevent conflicts with listing cards */
/* Listing cards use .spot-card from spot-card.css, this applies only to detail view cards */
.spot-details-container .spot-card,
#spot-detail-content .spot-card,
#spot-detail-view .spot-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
}

.dark .spot-details-container .spot-card,
.dark #spot-detail-content .spot-card,
.dark #spot-detail-view .spot-card {
  background: #1f2937 !important;
  border: 1px solid #374151 !important;
}

.spot-details-container .spot-card-body,
#spot-detail-content .spot-card-body,
#spot-detail-view .spot-card-body {
  background: transparent !important;
}

/* Photo placeholder */
.photo-gallery-compact {
  position: relative;
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 1rem;
  aspect-ratio: 16/9;
  background: var(--gray-100);
  width: 100%;
}

/* CRITICAL: Allow price overlay and navigation buttons to be visible - override overflow hidden */
.photo-gallery-compact.photo-carousel {
  overflow: visible !important; /* Allow price overlay and nav buttons to extend outside */
  min-height: 200px !important; /* Ensure minimum height */
  isolation: auto !important; /* CRITICAL: Don't create stacking context that traps buttons */
  contain: none !important; /* CRITICAL: Don't contain layout/style/paint - allow buttons to escape */
}

/* Mobile touch: Make photo container smaller */
@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
  #listings-sheet .photo-gallery-compact,
  #listings-sheet .photo-gallery-compact.photo-carousel {
    aspect-ratio: 21/9 !important; /* Wider, shorter aspect ratio for mobile */
    min-height: 150px !important; /* Reduced minimum height */
    max-height: 180px !important; /* Limit maximum height */
    margin-bottom: 1.5rem !important; /* CRITICAL: Adequate space below photo to prevent overlap with book button */
  }
  
  #listings-sheet .photo-gallery-compact.photo-carousel .photo-carousel-container {
    min-height: 150px !important; /* Match container min-height */
  }
}

/* CRITICAL: Ensure carousel container fills parent and clips images */
/* The outer .photo-gallery-compact uses overflow:visible for nav buttons/price overlay */
/* The inner .photo-carousel-container MUST clip images with overflow:hidden */
.photo-gallery-compact.photo-carousel .photo-carousel-container,
#listings-sheet .photo-carousel-container,
#spot-detail-view .photo-carousel-container,
dialog#spot-detail-view .photo-carousel-container,
.spot-details-container .photo-carousel-container {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: inherit !important;
  overflow: hidden !important; /* CRITICAL: Clip images that extend outside */
  max-width: 100% !important;
  border-radius: inherit !important; /* Inherit border radius from parent */
}

/* Ensure price overlay is always visible */
.spot-price-overlay {
  position: absolute !important;
  z-index: var(--z-high-modal) !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ============================================================================
 * PHOTO GALLERY OVERLAYS - Book Button & Amenity Badges
 * ============================================================================ */

/* Book Button Overlay - Bottom Center */
.photo-book-btn {
  position: absolute !important;
  bottom: 8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 15 !important;
  background: rgba(37, 99, 235, 0.95) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 10px 24px !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.photo-book-btn:hover {
  background: rgba(29, 78, 216, 0.98) !important;
  transform: translateX(-50%) scale(1.02) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important;
}

.photo-book-btn:active {
  transform: translateX(-50%) scale(0.98) !important;
}

/* Amenity Badges Container - Top Right */
.photo-amenity-badges {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 12 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  align-items: flex-end !important;
  pointer-events: auto !important;
}

/* Individual Amenity Badge */
.photo-amenity-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(0, 0, 0, 0.75) !important; /* Slightly darker for better contrast */
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #ffffff !important; /* CRITICAL: White text */
  font-size: 11px !important;
  font-weight: 500 !important; /* Medium weight for better readability */
  padding: 6px 10px !important;
  border-radius: 6px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  position: relative !important;
  white-space: nowrap !important;
}

.photo-amenity-badge:hover {
  background: rgba(0, 0, 0, 0.85) !important;
  transform: translateX(-2px) !important;
}

.photo-amenity-badge .badge-icon {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
  /* Keep original icon colors (yellow/colored) */
}

/* CRITICAL: Badge label text MUST be white - multiple selectors for specificity */
.photo-amenity-badge .badge-label,
.photo-amenity-badge span.badge-label,
button.photo-amenity-badge .badge-label,
.photo-amenity-badges .photo-amenity-badge .badge-label,
.photo-gallery-compact .photo-amenity-badge .badge-label,
.spot-details-container .photo-amenity-badge .badge-label,
#spot-detail-content .photo-amenity-badge .badge-label,
#listings-sheet .photo-amenity-badge .badge-label {
  line-height: 1 !important;
  color: #ffffff !important; /* CRITICAL: Ensure label text is white */
  -webkit-text-fill-color: #ffffff !important; /* WebKit override */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; /* Add shadow for better contrast */
  font-weight: 500 !important; /* Medium weight for readability */
}

/* Amenity Tooltip - Hidden by default */
.photo-amenity-badge .amenity-tooltip {
  position: absolute !important;
  right: calc(100% + 8px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(17, 24, 39, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: #f3f4f6 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  max-width: 220px !important;
  white-space: normal !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
  z-index: 100 !important;
}

/* Tooltip arrow */
.photo-amenity-badge .amenity-tooltip::after {
  content: '' !important;
  position: absolute !important;
  right: -6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border-width: 6px !important;
  border-style: solid !important;
  border-color: transparent transparent transparent rgba(17, 24, 39, 0.95) !important;
}

/* Show tooltip on hover (desktop) */
@media (hover: hover) and (pointer: fine) {
  .photo-amenity-badge:hover .amenity-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Show tooltip on focus/active (mobile and accessibility) */
.photo-amenity-badge:focus .amenity-tooltip,
.photo-amenity-badge.tooltip-active .amenity-tooltip {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Mobile: Tooltip on bottom for better visibility */
@media (max-width: 768px) {
  .photo-amenity-badge .amenity-tooltip {
    right: 0 !important;
    top: calc(100% + 8px) !important;
    left: auto !important;
    transform: none !important;
    max-width: 180px !important;
  }
  
  .photo-amenity-badge .amenity-tooltip::after {
    right: 12px !important;
    top: -6px !important;
    transform: none !important;
    border-color: transparent transparent rgba(17, 24, 39, 0.95) transparent !important;
  }
  
  .photo-book-btn {
    font-size: 13px !important;
    padding: 8px 20px !important;
  }
  
  .photo-amenity-badge {
    font-size: 10px !important;
    padding: 5px 8px !important;
  }
  
  .photo-amenity-badge .badge-icon {
    width: 12px !important;
    height: 12px !important;
  }
}

/* Small phones */
@media (max-width: 375px) {
  .photo-book-btn {
    font-size: 12px !important;
    padding: 7px 16px !important;
  }
  
  .photo-amenity-badges {
    max-width: 45% !important;
  }
  
  .photo-amenity-badge .badge-label {
    max-width: 60px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #ffffff !important; /* CRITICAL: Ensure white text on mobile */
    -webkit-text-fill-color: #ffffff !important;
  }
}

/* General photo gallery images (non-carousel) */
.photo-gallery-compact:not(.photo-carousel) img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  image-rendering: auto !important; /* Industry standard: browser chooses best algorithm for photos */
  -ms-interpolation-mode: bicubic !important; /* IE/Edge: high-quality interpolation */
}

/* CRITICAL: Ensure carousel images are properly hidden/shown AND constrained to container */
.photo-gallery-compact.photo-carousel .photo-carousel-image,
.photo-gallery-compact .photo-carousel-image,
#listings-sheet .photo-carousel-image,
#spot-detail-view .photo-carousel-image,
dialog#spot-detail-view .photo-carousel-image,
.spot-details-container .photo-carousel-image {
  opacity: 0 !important;
  visibility: hidden !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important; /* CRITICAL: Fill container width */
  height: 100% !important; /* CRITICAL: Fill container height */
  max-width: 100% !important; /* CRITICAL: Never exceed container */
  max-height: 100% !important; /* CRITICAL: Never exceed container */
  object-fit: cover !important; /* CRITICAL: Cover and crop, don't distort */
  object-position: center !important; /* Center the image */
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none !important;
  z-index: 1;
  image-rendering: auto !important;
  -ms-interpolation-mode: bicubic !important;
}

.photo-gallery-compact.photo-carousel .photo-carousel-image.active,
.photo-gallery-compact .photo-carousel-image.active,
#listings-sheet .photo-carousel-image.active,
#spot-detail-view .photo-carousel-image.active,
dialog#spot-detail-view .photo-carousel-image.active,
.spot-details-container .photo-carousel-image.active {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  pointer-events: auto !important;
  z-index: 2;
  width: 100% !important; /* CRITICAL: Fill container width */
  height: 100% !important; /* CRITICAL: Fill container height */
  max-width: 100% !important; /* CRITICAL: Never exceed container */
  max-height: 100% !important; /* CRITICAL: Never exceed container */
  object-fit: cover !important; /* CRITICAL: Cover and crop */
  object-position: center !important;
  image-rendering: auto !important;
  -ms-interpolation-mode: bicubic !important;
}

/* FALLBACK: Any img inside photo-gallery-compact should be constrained */
.photo-gallery-compact img,
#listings-sheet .photo-gallery-compact img,
#spot-detail-view .photo-gallery-compact img,
dialog#spot-detail-view .photo-gallery-compact img,
.spot-details-container .photo-gallery-compact img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--gray-100);
  color: var(--text-muted); /* Improved contrast */
  font-weight: 500; /* Better readability */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* MOBILE TOUCH: Compact photo placeholder in bottom sheet */
@media (max-width: 768px) {
  #listings-sheet .photo-placeholder,
  #listings-sheet .photo-gallery-compact .photo-placeholder,
  #listings-sheet .spot-details-container .photo-placeholder {
    max-height: 120px !important; /* Match compact photo gallery height */
    min-height: 80px !important;
  }
  
  /* Smaller icon in placeholder on mobile */
  #listings-sheet .photo-placeholder svg,
  #listings-sheet .photo-gallery-compact .photo-placeholder svg {
    width: 2rem !important; /* 32px instead of 64px */
    height: 2rem !important;
  }
}

/* SMALL PHONE: Even more compact placeholder */
@media (max-width: 375px) {
  #listings-sheet .photo-placeholder,
  #listings-sheet .photo-gallery-compact .photo-placeholder {
    max-height: 100px !important;
    min-height: 60px !important;
  }
  
  #listings-sheet .photo-placeholder svg {
    width: 1.5rem !important; /* 24px */
    height: 1.5rem !important;
  }
}

.dark .photo-gallery-compact {
  background: var(--gray-800);
}

.dark .photo-placeholder {
  background: var(--gray-800);
  color: var(--text-muted-dark); /* Improved dark mode contrast */
}

/* LUXURY HEADER - Ultra-compact title + location */
.luxury-header {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* DESKTOP-SPECIFIC ENHANCEMENTS */
.spot-details-container.desktop-layout {
  /* Desktop-specific styling for larger viewport */
  padding: 1.5rem !important;
  font-size: 0.95rem;
}

.spot-details-container.desktop-layout .luxury-header.desktop-header {
  margin-bottom: 1.5rem;
}

.spot-details-container.desktop-layout .luxury-header.desktop-header h1,
.spot-details-container.desktop-layout .luxury-header.desktop-header .spot-title {
  font-size: 1.5rem !important;
  font-weight: 600;
  line-height: 1.3;
}

.spot-details-container.desktop-layout .photo-gallery-compact.desktop-photos {
  aspect-ratio: 16/10; /* Slightly taller for desktop */
  margin-bottom: 1.5rem;
  border-radius: 1rem;
}

.spot-details-container.desktop-layout .info-section,
.spot-details-container.desktop-layout .pricing-section {
  margin-bottom: 1.25rem;
  padding: 1rem;
  background: rgba(248, 250, 252, 0.5);
  border-radius: 0.75rem;
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.dark .spot-details-container.desktop-layout .info-section,
.dark .spot-details-container.desktop-layout .pricing-section {
  background: rgba(15, 23, 42, 0.5);
  border-color: rgba(51, 65, 85, 0.8);
}

.spot-details-container.mobile-layout {
  /* Ensure mobile layout remains compact */
  padding: 1rem !important;
}

/* Location/distance info container with negative margin - Maximum specificity to override all Tailwind */
.spot-card .luxury-header div.flex.items-center.gap-2.mt-0\.5.w-full.max-w-full.min-w-0,
.spot-card-body .luxury-header div.flex.items-center.gap-2.mt-0\.5.w-full,
body .spot-card .luxury-header .flex.items-center.gap-2.mt-0\.5,
html body .luxury-header div.flex.items-center.gap-2.mt-0\.5,
div.luxury-header div.flex.items-center.gap-2.mt-0\.5.w-full.max-w-full.min-w-0,
.luxury-header > div.flex.items-center.gap-2.mt-0\.5,
[class*="luxury-header"] div.flex.items-center.gap-2 {
  margin-left: -0.5rem !important;
  margin-left: -8px !important; /* Fallback in pixels */
  margin-top: 0.125rem !important; /* Override Tailwind mt-0.5 */
}

/* Alternative approach - target by position with maximum specificity */
.luxury-header div.flex.items-center:nth-of-type(2),
.luxury-header div.flex.items-center.gap-2:nth-child(2) {
  margin-left: -0.5rem !important;
  margin-top: 0.125rem !important;
}

/* Nuclear option - override any Tailwind margin classes */
.luxury-header div[class*="gap-2"][class*="mt-0.5"] {
  margin-left: -1.55rem !important;
  margin-top: 0.125rem !important;
}

/* Direct targeting of the parking type span element */
.luxury-header span.text-xs.font-medium.text-neutral-700,
.luxury-header span[class*="text-xs"][class*="font-medium"][class*="text-neutral-700"],
.luxury-header span[class*="text-xs"][class*="font-medium"][class*="uppercase"],
span.text-xs.font-medium.text-neutral-700.uppercase.tracking-wide,
span[class*="text-xs"][class*="font-medium"][class*="text-neutral-700"][class*="uppercase"][class*="tracking-wide"] {
  margin-left: -1.0rem !important;
  display: inline-block !important;
}

/* Dark mode variant */
.dark .luxury-header span.text-xs.font-medium.text-neutral-300,
.dark .luxury-header span[class*="text-xs"][class*="font-medium"][class*="text-neutral-300"],
.dark span.text-xs.font-medium.text-neutral-300.uppercase.tracking-wide,
.dark span[class*="text-xs"][class*="font-medium"][class*="text-neutral-300"][class*="uppercase"][class*="tracking-wide"] {
  margin-left: -0.5rem !important;
  display: inline-block !important;
}

/* Specific rule for Backyard Access elements - using data attribute approach */
span[data-parking-type="Backyard Access"],
.luxury-header span[data-parking-type="Backyard Access"] {
  margin-left: -1.0rem !important;
  display: inline-block !important;
}

/* Alternative approach - target parent container with Backyard Access */
.luxury-header div[data-contains="Backyard Access"] span:first-child {
  margin-left: -1.0rem !important;
  display: inline-block !important;
}

/* Fallback: Use text content matching for Backyard Access (browser-specific) */
.luxury-header span.text-xs.font-medium.text-neutral-700[title*="Backyard"],
.luxury-header span.text-xs.font-medium[aria-label*="Backyard"] {
  margin-left: -1.0rem !important;
  display: inline-block !important;
}

/* CSS-only solution: Target specific class combination for Backyard Access */
.luxury-header div.flex.items-center.gap-2.mt-0\.5 span.text-xs.font-medium.text-neutral-700.uppercase.tracking-wide {
  margin-left: -1.0rem !important;
  display: inline-block !important;
}

/* Dark mode variant for Backyard Access */
.dark .luxury-header div.flex.items-center.gap-2.mt-0\.5 span.text-xs.font-medium.text-neutral-300.uppercase.tracking-wide {
  margin-left: -1.0rem !important;
  display: inline-block !important;
}

/* Alternative approach - target the first span in the flex container */
.luxury-header div.flex.items-center span:first-child {
  margin-left: -0.5rem !important;
  display: inline-block !important;
}

/* ==========================================
   TARGETED CONTRAST FIXES - Only Specific Issues
   ========================================== */

/* Only fix actual white-on-white text issues */
.spot-details-container .text-white {
  color: var(--text-primary) !important;
}

.dark .spot-details-container .text-white {
  color: var(--text-primary-dark) !important;
}

/* Only fix the availability schedule tooltip green text that's too light */
.availability-schedule-tooltip .text-green-400 {
  color: #16a34a !important; /* Much darker green for better contrast */
  font-weight: 600 !important;
}

/* ULTRA HIGH SPECIFICITY - Fix white text on white background */
html body .spot-details-container .feature-name,
html body .luxury-features .feature-name,
html body span.feature-name,
html body .feature-chip .feature-name {
  color: #1f2937 !important; /* Better contrast - gray-800 */
}

html body .spot-details-container .location-text,
html body .luxury-header .location-text,
html body span.location-text,
html body .location-badge .location-text {
  color: #1f2937 !important; /* Better contrast - gray-800 */
}

/* Dark mode override for location-text - must be more specific */
html.dark body .spot-details-container .location-badge .location-text,
html.dark body .luxury-header .location-badge .location-text,
html.dark body .location-badge .location-text,
.dark body .spot-details-container .location-badge .location-text,
.dark body .luxury-header .location-badge .location-text,
.dark body .location-badge .location-text {
  color: #e5e7eb !important; /* Light gray for dark mode visibility */
}

html body .spot-details-container .description-text,
html body .luxury-description .description-text,
html body p.description-text {
  color: #1f2937 !important; /* Darker color for text prominence */
  font-weight: 400 !important; /* Normal weight for readability */
}

html body .spot-details-container .chip-value,
html body .info-chip .chip-value,
html body .chip-label-content .chip-value,
html body div.chip-value {
  color: #111827 !important; /* Direct gray-900 color */
}

/* Nuclear option - override any white text */
html body .spot-details-container *[style*="color: white"],
html body .spot-details-container *[style*="color: #fff"],
html body .spot-details-container *[style*="color: #ffffff"] {
  color: #1f2937 !important; /* Better contrast - gray-800 */
}

/* Dark mode variants with ultra high specificity */
html.dark body .feature-name,
html.dark body .location-text,
html.dark body .description-text {
  color: #f9fafb !important; /* Lighter color for text in dark mode */
  font-weight: 400 !important; /* Normal weight for readability */
}

html.dark body .chip-value {
  color: #f9fafb !important; /* Direct gray-50 color for dark mode */
}

/* Additional ultra-specific targeting for any missed elements */
/* Exclude badge-label - photo amenity badges need white text on dark background */
html body .spot-details-container span:not(.badge-label),
html body .luxury-header span:not(.badge-label),
html body .luxury-features span:not(.badge-label),
html body .luxury-description span:not(.badge-label) {
  color: #1f2937 !important; /* Better contrast - gray-800 */
}

/* Dark mode override - light text for dark backgrounds */
/* Exclude policy-details-note spans and badge-label - they have their own styling */
html.dark body .spot-details-container span:not(.policy-details-note span):not(.policy-details-note):not(.badge-label),
html.dark body .luxury-header span:not(.badge-label),
html.dark body .luxury-features span:not(.badge-label),
html.dark body .luxury-description span:not(.badge-label) {
  color: #f3f4f6 !important; /* Light gray for dark mode - gray-100 */
}

/* Override any Tailwind text-white classes with maximum specificity */
html body .spot-details-container .text-white,
html body .spot-details-container [class*="text-white"] {
  color: #1f2937 !important; /* Better contrast - gray-800 */
}

/* Dark mode override - allow dark:text-white to work properly */
html.dark body .spot-details-container [class*="dark:text-white"],
html.dark body .spot-details-container .dark\:text-white {
  color: #ffffff !important; /* White text in dark mode */
}

/* Force visibility on specific text elements only - NOT icons or styled elements */
/* Exclude bottom sheet (#listings-sheet) - it has its own styling */
/* Exclude badge-label - photo amenity badges need white text */
html body .spot-details-container p:not(.description-text),
html body .spot-details-container span:not(.feature-name):not(.location-text):not(.chip-value):not(.spot-type-badge):not(.badge-label),
html body .spot-details-container div:not(.section-label):not(.feature-chip):not(.info-chip):not(.policy-item) {
  color: #1f2937 !important; /* Dark text for light mode - gray-800 */
}

/* Exclude bottom sheet from text color rules */
#listings-sheet .spot-details-container p:not(.description-text),
#listings-sheet .spot-details-container span:not(.feature-name):not(.location-text):not(.chip-value):not(.spot-type-badge):not(.badge-label),
#listings-sheet .spot-details-container div:not(.section-label):not(.feature-chip):not(.info-chip):not(.policy-item) {
  color: inherit !important; /* Let bottom sheet use its own styling */
}

/* Dark mode override - light text for dark backgrounds */
html.dark body .spot-details-container p:not(.description-text),
html.dark body .spot-details-container span:not(.feature-name):not(.location-text):not(.chip-value):not(.spot-type-badge):not(.badge-label),
html.dark body .spot-details-container div:not(.section-label):not(.feature-chip):not(.info-chip):not(.policy-item) {
  color: #f3f4f6 !important; /* Light gray for dark mode - gray-100 */
}

/* Exclude bottom sheet from dark mode text color rules */
#listings-sheet .spot-details-container p:not(.description-text),
#listings-sheet .spot-details-container span:not(.feature-name):not(.location-text):not(.chip-value):not(.spot-type-badge):not(.badge-label),
#listings-sheet .spot-details-container div:not(.section-label):not(.feature-chip):not(.info-chip):not(.policy-item) {
  color: inherit !important; /* Let bottom sheet use its own styling */
}

/* Specifically target problematic white text elements */
html body .spot-details-container .text-white:not(svg):not(.section-label):not(.feature-chip) {
  color: #4d5116 !important;
}

/* But preserve specific elements that should have different colors */
html body .spot-details-container .text-blue-600,
html body .spot-details-container .text-blue-700,
html body .spot-details-container .text-green-600,
html body .spot-details-container .text-red-600 {
  color: inherit !important;
}

/* Restore blue coloring for icons and specific blue elements */
html body .spot-details-container svg,
html body .spot-details-container .feature-icon,
html body .spot-details-container .section-label svg,
html body .spot-details-container .policy-icon,
html body .spot-details-container .icon-wrapper svg {
  color: #7d7b19 !important;
}

/* Restore blue colors for specific UI elements */
html body .spot-details-container .text-blue-500,
html body .spot-details-container [class*="text-blue"] {
  color: #1f2937 !important;
}

/* Dark mode variants for blue elements */
html.dark body .spot-details-container svg,
html.dark body .spot-details-container .feature-icon,
html.dark body .spot-details-container .section-label svg,
html.dark body .spot-details-container .policy-icon {
  color: #d8d41d !important;
}

html.dark body .spot-details-container .text-blue-500,
html.dark body .spot-details-container [class*="text-yellow-500"] {
  color: var(--yellow-500) !important;
}

/* Additional specific icon color restoration */
html body .spot-details-container .w-3\.5.h-3\.5,
html body .spot-details-container .w-4.h-4,
html body .spot-details-container path[stroke="currentColor"] {
  color: #212121 !important;
}

/* Ensure all SVG elements in specific containers get blue color */
html body .luxury-features svg,
html body .luxury-description svg,
html body .luxury-policies svg,
html body .info-chip svg {
  color: #d8d41d !important;
}

/* Dark mode for additional icons */
html.dark body .spot-details-container .w-3\.5.h-3\.5,
html.dark body .spot-details-container .w-4.h-4,
html.dark body .luxury-features svg,
html.dark body .luxury-description svg,
html.dark body .luxury-policies svg,
html.dark body .info-chip svg {
  color: #d8d41d !important;
}

/* Tooltip arrow styling (if present) */
/* luxury-spot-details.css - tooltip arrow styling */
.tooltip-arrow {
  position: absolute !important;
  top: -6px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 12px !important;
  height: 12px !important;
  background: white !important;
  border: 1px solid rgba(34, 197, 94, 0.2) !important;
  border-bottom: none !important;
  border-right: none !important;
  transform: translateX(-50%) rotate(45deg) !important;
  z-index: -1 !important;
}

.dark .tooltip-arrow {
  background: #1f2937 !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}

/* ==========================================
   DURATION CHIP UNIQUE STYLING - MODAL CONTEXT
   ========================================== */
/* NOTE: This uses YELLOW-GOLD color scheme (#d8d41d) for selected state */
/* spot-details.css uses BLUE (#2563eb) for standalone pages - intentional design difference */
/* These styles apply to modal/overlay context (rendered by SpotDetailRenderer.js) */

/* Unique background styling for duration chips */
.duration-chip {
  background: #f8fafc !important; /* Light gray-blue background */
  border-color: #cbd5e1 !important; /* Softer border */
  color: #475569 !important; /* Darker text for better contrast */
}

.duration-chip:hover {
  background: #e2e8f0 !important; /* Slightly darker on hover */
  border-color: #94a3b8 !important; /* Darker border on hover */
  color: #334155 !important; /* Even darker text on hover */
  transform: translateY(-1px) !important; /* Subtle lift effect */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important; /* Enhanced shadow */
}

.duration-chip:focus {
  background: #e2e8f0 !important;
  border-color: #d8d41d !important; /* Yellow-gold focus border */
  color: #334155 !important;
  box-shadow: 0 0 0 3px rgba(216, 212, 29, 0.2) !important; /* Yellow-gold focus ring */
}

.duration-chip.selected,
.duration-chip[data-selected="true"] {
  background: #d8d41d !important; /* Yellow-gold when selected */
  border-color: #c4b91a !important; /* Darker yellow-gold border */
  color: #1f2937 !important; /* Dark text for contrast */
}

.duration-chip.selected:hover,
.duration-chip[data-selected="true"]:hover {
  background: #c4b91a !important; /* Darker yellow-gold on hover */
  border-color: #a39017 !important;
  color: #111827 !important;
}

/* Dark mode variants for duration chips */
.dark .duration-chip {
  background: #1e293b !important; /* Dark slate background */
  border-color: #475569 !important; /* Darker border */
  color: #e2e8f0 !important; /* Light text */
}

/* CRITICAL: Override inline styles in dark mode - must come after base dark mode rule */
html.dark .duration-chip,
html.dark .duration-chip[style*="color: #111827"],
html.dark .duration-chip[style*="color:#111827"],
html.dark .duration-chip[style*="color: rgb(17, 24, 39)"],
html.dark .duration-chip[style*="color:rgb(17, 24, 39)"],
.dark .duration-chip,
.dark .duration-chip[style*="color: #111827"],
.dark .duration-chip[style*="color:#111827"],
.dark .duration-chip[style*="color: rgb(17, 24, 39)"],
.dark .duration-chip[style*="color:rgb(17, 24, 39)"],
html.dark body .spot-details-container .duration-chip,
html.dark body .spot-details-container .duration-chip[style*="color: #111827"],
html.dark body #listings-sheet .duration-chip,
html.dark body #listings-sheet .duration-chip[style*="color: #111827"],
.dark body .spot-details-container .duration-chip,
.dark body .spot-details-container .duration-chip[style*="color: #111827"],
.dark body #listings-sheet .duration-chip,
.dark body #listings-sheet .duration-chip[style*="color: #111827"] {
  color: #e2e8f0 !important; /* Light text for dark mode - override inline styles */
}

/* Override hover inline styles in dark mode (onmouseover sets #1d4ed8) */
html.dark .duration-chip:hover,
html.dark .duration-chip[style*="color: #1d4ed8"],
html.dark .duration-chip[style*="color:#1d4ed8"],
.dark .duration-chip:hover,
.dark .duration-chip[style*="color: #1d4ed8"],
.dark .duration-chip[style*="color:#1d4ed8"],
html.dark body .spot-details-container .duration-chip:hover,
html.dark body .spot-details-container .duration-chip[style*="color: #1d4ed8"],
html.dark body #listings-sheet .duration-chip:hover,
html.dark body #listings-sheet .duration-chip[style*="color: #1d4ed8"],
.dark body .spot-details-container .duration-chip:hover,
.dark body .spot-details-container .duration-chip[style*="color: #1d4ed8"],
.dark body #listings-sheet .duration-chip:hover,
.dark body #listings-sheet .duration-chip[style*="color: #1d4ed8"] {
  color: #f1f5f9 !important; /* Light text on hover in dark mode - override inline hover styles */
}

.dark .duration-chip:hover {
  background: #334155 !important; /* Lighter on hover */
  border-color: #64748b !important;
  color: #f1f5f9 !important;
}

.dark .duration-chip:focus {
  background: #334155 !important;
  border-color: #d8d41d !important; /* Yellow-gold focus in dark mode */
  color: #f1f5f9 !important;
  box-shadow: 0 0 0 3px rgba(216, 212, 29, 0.3) !important;
}

.dark .duration-chip.selected,
.dark .duration-chip[data-selected="true"] {
  background: #d8d41d !important; /* Same yellow-gold in dark mode */
  border-color: #c4b91a !important;
  color: #1f2937 !important; /* Dark text for contrast */
}

.dark .duration-chip.selected:hover,
.dark .duration-chip[data-selected="true"]:hover {
  background: #c4b91a !important;
  border-color: #a39017 !important;
  color: #111827 !important;
}

/* Duration chip icon styling */
.duration-chip svg {
  color: currentColor !important;
  transition: transform 0.2s ease !important;
}

/* Dark mode: Ensure SVG icons in duration chips are light colored */
.dark .duration-chip svg,
html.dark .duration-chip svg,
.dark body .spot-details-container .duration-chip svg,
html.dark body .spot-details-container .duration-chip svg,
.dark body #listings-sheet .duration-chip svg,
html.dark body #listings-sheet .duration-chip svg {
  color: #e2e8f0 !important; /* Light color for SVG icons in dark mode */
}

/* luxury-spot-details.css - duration chip icon hover scale */
.duration-chip:hover svg {
  transform: scale(1.1) !important;
}

/* ==========================================
   BLUE SCROLLBAR STYLING - Same as Auth Modal
   ========================================== */

/* Apple-style spot details scrollbar - thin and elegant */
#spot-detail-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(59, 130, 246, 0.3) transparent;
}

#spot-detail-content::-webkit-scrollbar {
  width: 3px !important; /* Apple-thin */
}

#spot-detail-content::-webkit-scrollbar-track {
  background: transparent !important; /* Invisible track */
}

#spot-detail-content::-webkit-scrollbar-thumb {
  background-color: rgba(59, 130, 246, 0.3) !important; /* Subtle blue */
  border-radius: 2px !important; /* Minimal radius */
  border: none !important;
  min-height: 20px !important;
}

#spot-detail-content::-webkit-scrollbar-thumb:hover {
  background-color: rgba(59, 130, 246, 0.5) !important; /* More visible on hover */
}

/* Remove scrollbar arrows */
#spot-detail-content::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Mobile: Even thinner scrollbar */
@media (max-width: 519px) {
  #spot-detail-content::-webkit-scrollbar {
    width: 2px !important; /* Ultra-thin on mobile */
  }
  
  #spot-detail-content::-webkit-scrollbar-thumb {
    background-color: rgba(59, 130, 246, 0.4) !important;
  }
}

/* Apple-style listings container scrollbar - ultra thin */
.mobile-listings-container,
[data-listings-container="true"] {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

.mobile-listings-container::-webkit-scrollbar,
[data-listings-container="true"]::-webkit-scrollbar {
  width: 2px !important; /* Apple ultra-thin */
}

.mobile-listings-container::-webkit-scrollbar-track,
[data-listings-container="true"]::-webkit-scrollbar-track {
  background: transparent !important; /* Invisible track */
}

.mobile-listings-container::-webkit-scrollbar-thumb,
[data-listings-container="true"]::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15) !important; /* Subtle visibility */
  border-radius: 1px !important; /* Minimal radius */
  border: none !important;
  min-height: 30px !important;
}

.mobile-listings-container::-webkit-scrollbar-thumb:hover,
[data-listings-container="true"]::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3) !important; /* More visible on hover */
}

/* Remove scrollbar arrows */
.mobile-listings-container::-webkit-scrollbar-button,
[data-listings-container="true"]::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Mobile listings scrollbar - even thinner */
@media (max-width: 519px) {
  .mobile-listings-container::-webkit-scrollbar,
  [data-listings-container="true"]::-webkit-scrollbar {
    width: 1px !important; /* Barely visible on mobile */
  }
  
  .mobile-listings-container::-webkit-scrollbar-thumb,
  [data-listings-container="true"]::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2) !important;
  }
}

.header-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.25rem;
  width: 100%;
  max-width: 100%; /* CRITICAL: Stay within parent container width */
  overflow: hidden; /* CRITICAL: Header clips content, location-badge handles scrolling */
  flex-wrap: nowrap;
  box-sizing: border-box;
}

.spot-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem; /* Increased padding for larger appearance */
  border-radius: 9999px;
  background: var(--blue-50);
  border: 1px solid var(--blue-200);
  font-size: 0.875rem; /* Increased from 0.75rem for better prominence */
  font-weight: 600;
  color: var(--blue-800); /* Darker blue for better contrast */
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.025em; /* Improved letter spacing */
  min-height: 2rem; /* Ensure consistent height */
}

.dark .spot-type-badge {
  background: rgba(59, 130, 246, 0.15);
  border-color: var(--blue-500);
  color: var(--blue-300); /* Lighter for better dark mode contrast */
}

.location-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  padding: 0.1875rem 0.5rem !important;
  border-radius: 9999px !important;
  background: var(--gray-50) !important;
  border: 1px solid var(--gray-200) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
}

/* CRITICAL: Desktop spot details - location-badge scrolls horizontally within header-top */
/* These rules MUST override any inline styles applied by JavaScript */
#spot-detail-content .location-badge,
#spot-detail-content .location-badge.clickable-address,
#spot-detail-content button.location-badge,
#spot-detail-view .location-badge,
#spot-detail-view .location-badge.clickable-address,
.spot-details-container .location-badge,
.spot-details-container .location-badge.clickable-address,
.luxury-header .location-badge,
.luxury-header .location-badge.clickable-address,
.header-top .location-badge,
.header-top .location-badge.clickable-address {
  flex: 0 1 auto !important; /* Don't grow, allow shrink, auto basis */
  min-width: 0 !important; /* Allow flex item to shrink below content size */
  max-width: calc(100% - 6rem) !important; /* Leave space for spot-type-badge - OVERRIDES INLINE 260px */
  width: auto !important; /* OVERRIDES INLINE 260px */
  overflow: visible !important; /* Reset shorthand first */
  overflow-x: auto !important; /* CRITICAL: Enable horizontal scrolling - OVERRIDES INLINE hidden */
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
  scrollbar-width: none !important; /* Hide scrollbar Firefox */
  -ms-overflow-style: none !important; /* Hide scrollbar IE/Edge */
  flex-wrap: nowrap !important; /* Keep on one line - OVERRIDES INLINE */
}

/* Hide scrollbar on WebKit browsers */
.location-badge::-webkit-scrollbar,
#spot-detail-content .location-badge::-webkit-scrollbar,
#spot-detail-view .location-badge::-webkit-scrollbar,
.spot-details-container .location-badge::-webkit-scrollbar,
.luxury-header .location-badge::-webkit-scrollbar,
.header-top .location-badge::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.location-icon {
  width: 0.6875rem !important;
  height: 0.6875rem !important;
  min-width: 0.6875rem !important;
  min-height: 0.6875rem !important;
  max-width: 0.6875rem !important;
  max-height: 0.6875rem !important;
  flex-shrink: 0 !important;
  color: var(--gray-500) !important;
  transition: color 0.2s ease !important;
}

.location-text {
  font-size: 0.75rem !important; /* Increased for better readability */
  font-weight: 500 !important;
  color: var(--text-secondary) !important; /* Better contrast */
  overflow: visible !important; /* Allow text to extend for scrolling */
  text-overflow: clip !important; /* Don't use ellipsis - allow scrolling */
  white-space: nowrap !important; /* Keep text on one line */
  min-width: fit-content !important; /* CRITICAL: Allow text to extend to full width */
  max-width: none !important; /* CRITICAL: No width constraint */
  width: fit-content !important; /* CRITICAL: Extend to fit content */
  flex: 0 0 auto !important; /* Don't shrink or grow, use natural width */
  flex-shrink: 0 !important; /* CRITICAL: Don't shrink */
  transition: color 0.2s ease !important;
  padding-top: 0.125rem !important;
  letter-spacing: 0.01em !important; /* Improved readability */
}

/* CRITICAL: Desktop spot details - location-text extends to full width for scrolling */
/* These rules MUST override any inline styles applied by JavaScript */
#spot-detail-content .location-text,
#spot-detail-content .location-badge .location-text,
#spot-detail-content span.location-text,
#spot-detail-view .location-text,
#spot-detail-view .location-badge .location-text,
.spot-details-container .location-text,
.spot-details-container .location-badge .location-text,
.luxury-header .location-text,
.luxury-header .location-badge .location-text,
.header-top .location-text,
.header-top .location-badge .location-text {
  white-space: nowrap !important; /* CRITICAL: Keep on one line */
  overflow: visible !important; /* Don't clip text - parent scrolls - OVERRIDES INLINE hidden */
  text-overflow: clip !important; /* No ellipsis - scroll instead - OVERRIDES INLINE ellipsis */
  flex-shrink: 0 !important; /* CRITICAL: Don't shrink */
  flex-grow: 0 !important;
  flex: 0 0 auto !important; /* OVERRIDES INLINE flex */
  min-width: max-content !important; /* Use natural text width - OVERRIDES INLINE 0 */
  width: auto !important; /* OVERRIDES INLINE 220px */
  max-width: none !important; /* No max width - OVERRIDES INLINE 220px */
  display: inline !important; /* OVERRIDES INLINE block */
}

.external-icon {
  width: 0.625rem !important;
  height: 0.625rem !important;
  min-width: 0.625rem !important;
  min-height: 0.625rem !important;
  max-width: 0.625rem !important;
  max-height: 0.625rem !important;
  flex-shrink: 0 !important;
  color: var(--gray-400) !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
}

.location-badge:hover {
  border-color: var(--blue-400);
  background: var(--blue-50);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.location-badge:hover .location-icon {
  color: var(--blue-600);
}

.location-badge:hover .location-text {
  color: var(--blue-700);
}

.location-badge:hover .external-icon {
  opacity: 1;
}

.dark .location-badge,
html.dark .location-badge,
body.dark .location-badge {
  background: rgb(31 41 55) !important; /* bg-gray-800 - dark background */
  border-color: rgb(55 65 81) !important; /* border-gray-700 */
}

/* Dark mode location badge text and icons */
.dark .location-badge .location-text,
html.dark .location-badge .location-text,
body.dark .location-badge .location-text {
  color: #e5e7eb !important; /* Light gray text for dark mode */
}

.dark .location-badge .location-icon,
html.dark .location-badge .location-icon,
body.dark .location-badge .location-icon {
  color: #9ca3af !important; /* Light gray icon for dark mode */
}

.dark .location-badge .external-icon,
html.dark .location-badge .external-icon,
body.dark .location-badge .external-icon {
  color: #9ca3af !important; /* Light gray external icon for dark mode */
}

/* CRITICAL FIX: Location badge white background in bottom sheet dark mode */
.dark #listings-sheet .location-badge,
.dark #listings-sheet button.location-badge,
.dark #listings-sheet .location-badge.clickable-address,
html.dark #listings-sheet .location-badge,
html.dark #listings-sheet button.location-badge,
html.dark #listings-sheet .location-badge.clickable-address,
body.dark #listings-sheet .location-badge,
body.dark #listings-sheet button.location-badge,
body.dark #listings-sheet .location-badge.clickable-address {
  background-color: rgb(31 41 55) !important; /* bg-neutral-800 */
  background: rgb(31 41 55) !important; /* Override CSS variable */
  border-color: rgb(55 65 81) !important; /* border-neutral-700 */
}

.dark #listings-sheet .location-badge:hover,
html.dark #listings-sheet .location-badge:hover,
body.dark #listings-sheet .location-badge:hover {
  background-color: rgba(59, 130, 246, 0.1) !important;
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: rgb(37 99 235) !important; /* border-blue-600 */
}

/* Fix location badge text and icons in bottom sheet dark mode */
.dark #listings-sheet .location-badge .location-text,
.dark #listings-sheet .location-badge .location-icon,
.dark #listings-sheet .location-badge .external-icon,
html.dark #listings-sheet .location-badge .location-text,
html.dark #listings-sheet .location-badge .location-icon,
html.dark #listings-sheet .location-badge .external-icon,
body.dark #listings-sheet .location-badge .location-text,
body.dark #listings-sheet .location-badge .location-icon,
body.dark #listings-sheet .location-badge .external-icon {
  color: rgb(209 213 219) !important; /* text-gray-300 */
}

.dark #listings-sheet .location-badge:hover .location-text,
.dark #listings-sheet .location-badge:hover .location-icon,
html.dark #listings-sheet .location-badge:hover .location-text,
html.dark #listings-sheet .location-badge:hover .location-icon,
body.dark #listings-sheet .location-badge:hover .location-text,
body.dark #listings-sheet .location-badge:hover .location-icon {
  color: rgb(147 197 253) !important; /* text-blue-300 */
}

.dark .location-icon,
html.dark .location-icon,
body.dark .location-icon {
  color: #9ca3af !important; /* Light gray icon for dark mode */
}

.dark .location-text,
html.dark .location-text,
body.dark .location-text {
  color: #e5e7eb !important; /* Light gray text for dark mode */
}

.dark .external-icon,
html.dark .external-icon,
body.dark .external-icon {
  color: #9ca3af !important; /* Light gray external icon for dark mode */
}

.dark .location-badge:hover,
html.dark .location-badge:hover,
body.dark .location-badge:hover {
  border-color: rgb(37 99 235) !important; /* border-blue-600 */
  background: rgba(59, 130, 246, 0.15) !important; /* Blue tint on hover */
}

.dark .location-badge:hover .location-icon,
html.dark .location-badge:hover .location-icon,
body.dark .location-badge:hover .location-icon {
  color: #60a5fa !important; /* Light blue icon on hover */
}

.dark .location-badge:hover .location-text,
html.dark .location-badge:hover .location-text,
body.dark .location-badge:hover .location-text {
  color: #93c5fd !important; /* Light blue text on hover */
}

/* ============================================
   BOTTOM SHEET: Horizontally scrollable address container
   CORE LOGIC - Applies to ALL bottom sheet sizes (tablet through small phone)
   ============================================ */

/* Header-top container - FIXED width based on parent, not content */
#listings-sheet .header-top,
#listings-sheet .spot-details-container .header-top {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  max-width: calc(100vw - 2rem) !important; /* CRITICAL: Constrain to viewport minus padding */
  overflow: hidden !important; /* Parent clips, child scrolls */
  flex-wrap: nowrap !important; /* Keep on one line */
  box-sizing: border-box !important;
}

/* Spot type badge - fixed width, don't shrink */
#listings-sheet .header-top .spot-type-badge {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  white-space: nowrap !important;
}

/* Base bottom sheet location badge - horizontally scrollable for long addresses */
#listings-sheet .location-badge,
#listings-sheet .location-badge.clickable-address,
#listings-sheet button.location-badge,
#listings-sheet .spot-details-container .location-badge,
#listings-sheet .header-top .location-badge {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  flex: 0 1 auto !important; /* CRITICAL: Don't grow, allow shrink, auto basis */
  min-width: 0 !important; /* CRITICAL: Allow flex item to shrink below content size */
  max-width: calc(100% - 6rem) !important; /* CRITICAL: Leave space for spot-type-badge */
  width: auto !important; /* Don't force full width */
  overflow-x: scroll !important; /* Enable horizontal scrolling */
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important; /* Smooth iOS scrolling */
  scroll-behavior: smooth !important;
  scrollbar-width: none !important; /* Hide scrollbar Firefox */
  -ms-overflow-style: none !important; /* Hide scrollbar IE/Edge */
  touch-action: pan-x !important; /* Enable horizontal panning */
  cursor: grab !important; /* Indicate draggable */
  padding: 0.375rem 0.625rem !important;
  gap: 0.375rem !important;
  border-radius: 9999px !important;
  box-sizing: border-box !important;
}

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

/* Hide scrollbar WebKit - ALL bottom sheet sizes */
#listings-sheet .location-badge::-webkit-scrollbar,
#listings-sheet .location-badge.clickable-address::-webkit-scrollbar,
#listings-sheet button.location-badge::-webkit-scrollbar {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
}

/* Inner content wrapper - holds the scrollable content */
#listings-sheet .location-badge > * {
  flex-shrink: 0 !important; /* Children don't shrink */
}

/* Location text - MUST NOT wrap, MUST NOT shrink - creates scrollable width */
#listings-sheet .location-badge .location-text,
#listings-sheet .spot-details-container .location-text,
#listings-sheet .header-top .location-text {
  white-space: nowrap !important; /* CRITICAL: Keep on one line */
  overflow: visible !important; /* Don't clip text */
  text-overflow: clip !important; /* No ellipsis - scroll instead */
  flex-shrink: 0 !important; /* CRITICAL: Don't shrink */
  flex-grow: 0 !important;
  min-width: max-content !important; /* CRITICAL: Use natural text width */
  width: auto !important;
  max-width: none !important; /* No max width - allow full text */
  font-size: 0.75rem !important; /* 12px - readable base size */
  display: inline-block !important;
}

/* Icons - fixed size, don't shrink - CORE LOGIC */
#listings-sheet .location-badge .location-icon,
#listings-sheet .location-badge .external-icon {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

/* Show external icon for affordance */
#listings-sheet .location-badge .external-icon {
  opacity: 0.6 !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS - Size-specific tweaks
   ============================================ */

/* Tablet (520px - 1023px) */
@media (min-width: 520px) and (max-width: 1023px) {
  #listings-sheet .location-badge .location-text {
    font-size: 0.6875rem !important; /* 11px */
  }
  
  /* TABLET: Compact section labels for bottom sheet */
  #listings-sheet .spot-details-container .section-label,
  #listings-sheet .luxury-features .section-label,
  #listings-sheet .luxury-description .section-label {
    padding: 0.1875rem 0.5rem !important; /* Compact padding */
    font-size: 0.5625rem !important; /* 9px - smaller for tablet */
    gap: 0.1875rem !important;
    margin-bottom: 0.25rem !important;
  }
  
  /* TABLET: Smaller icons for section labels */
  #listings-sheet .spot-details-container .section-label svg,
  #listings-sheet .luxury-features .section-label svg,
  #listings-sheet .luxury-description .section-label svg {
    width: 0.5rem !important; /* 8px */
    height: 0.5rem !important;
    min-width: 0.5rem !important;
    min-height: 0.5rem !important;
    max-width: 0.5rem !important;
    max-height: 0.5rem !important;
    flex-shrink: 0 !important;
  }
  
  /* TABLET: Smaller text for section labels */
  #listings-sheet .spot-details-container .section-label span,
  #listings-sheet .luxury-features .section-label span,
  #listings-sheet .luxury-description .section-label span {
    font-size: 0.5625rem !important; /* 9px */
    line-height: 1.2 !important;
  }
}

/* Mobile (340px - 519px) */
@media (min-width: 340px) and (max-width: 519px) {
  #listings-sheet .location-badge .location-text {
    font-size: 0.6875rem !important; /* 11px */
  }
  
  #listings-sheet .location-badge {
    padding: 0.3125rem 0.5rem !important;
    gap: 0.3125rem !important;
  }
}

/* Small phones (≤375px) - most compact */
@media (max-width: 375px) {
  #listings-sheet .location-badge,
  #listings-sheet .location-badge.clickable-address {
    padding: 0.25rem 0.4375rem !important;
    gap: 0.25rem !important;
  }
  
  #listings-sheet .location-badge .location-text {
    font-size: 0.625rem !important; /* 10px */
  }
  
  #listings-sheet .location-badge .location-icon {
    width: 0.5625rem !important;
    height: 0.5625rem !important;
    min-width: 0.5625rem !important;
    min-height: 0.5625rem !important;
  }
  
  #listings-sheet .location-badge .external-icon {
    width: 0.5rem !important;
    height: 0.5rem !important;
    min-width: 0.5rem !important;
    min-height: 0.5rem !important;
  }
}

/* LUXURY INFO GRID - Compact 2-column micro-interactions */
.luxury-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

@media (max-width: 640px) {
  .luxury-info-grid {
    grid-template-columns: 1fr;
  }
}

.info-chip {
  position: relative;
  background: var(--gray-100); /* Slightly darker for better contrast */
  border: 1px solid var(--gray-300); /* Stronger border */
  border-radius: 0.75rem;
  padding: 0.75rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: visible !important; /* CRITICAL: Allow tooltip to overflow without scrollbars */
}

.info-chip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue-500), var(--indigo-500));
  opacity: 0;
  transition: opacity 0.2s ease;
}

.info-chip:hover::before {
  opacity: 1;
}

.info-chip:hover {
  background: white;
  border-color: var(--blue-300);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.dark .info-chip {
  background: var(--gray-750); /* Lighter background for better contrast in dark mode */
  border-color: var(--gray-600); /* Stronger border in dark mode */
}

.dark .info-chip:hover {
  background: var(--gray-750);
  border-color: var(--blue-600);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, var(--blue-50), var(--indigo-50));
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.info-chip:hover .icon-wrapper {
  background: linear-gradient(135deg, var(--blue-100), var(--indigo-100));
  transform: scale(1.05);
}

.dark .icon-wrapper {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(99, 102, 241, 0.15));
}

.dark .info-chip:hover .icon-wrapper {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(99, 102, 241, 0.25));
}

.icon-wrapper svg {
  width: 0.875rem;
  height: 0.875rem;
  color: #d8d41d;
}

.dark .icon-wrapper svg {
  color: #d8d41d;
}

.chip-label {
  font-size: 0.6875rem; /* Increased for better readability */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.075em; /* Increased letter spacing for better readability */
  color: var(--text-muted); /* Better contrast */
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.chip-label .icon-wrapper {
  width: 1.5rem;
  height: 1.5rem;
}

.dark .chip-label {
  color: var(--text-muted-dark);
}

.chip-value {
  font-size: 0.875rem; /* Increased for better readability */
  font-weight: 600;
  color: var(--text-primary); /* Consistent primary text color */
  line-height: 1.4; /* Improved line height */
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  letter-spacing: 0.01em; /* Subtle letter spacing */
}

.dark .chip-value {
  color: var(--text-primary-dark);
}

/* CSS Variables for consistent colors - WCAG AA Compliant */
:root {
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-750: #2d3748;
  --gray-800: #1f2937;
  --gray-900: #111827;
  
  /* Professional Blue Palette - Enhanced Contrast */
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;
  --blue-950: #172554;
  
  /* Professional Indigo Palette */
  --indigo-50: #eef2ff;
  --indigo-100: #e0e7ff;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;
  --indigo-700: #4338ca;
  
  /* Professional Text Colors - WCAG AA Compliant */
  --text-primary: #111827;     /* 16.94:1 contrast on white */
  --text-secondary: #374151;   /* 8.59:1 contrast on white */
  --text-tertiary: #4b5563;    /* 6.23:1 contrast on white */
  --text-muted: #6b7280;       /* 4.69:1 contrast on white */
  
  /* Dark mode text colors */
  --text-primary-dark: #f9fafb;
  --text-secondary-dark: #e5e7eb;
  --text-tertiary-dark: #d1d5db;
  --text-muted-dark: #9ca3af;
}

/* Responsive adjustments for ultra-small devices - Maintaining readability */
@media (max-width: 380px) {
  .info-chip {
    padding: 0.625rem;
  }
  
  .icon-wrapper {
    width: 1.75rem;
    height: 1.75rem;
  }
  
  .chip-label {
    font-size: 0.625rem; /* Increased minimum size for readability */
  }
  
  .chip-value {
    font-size: 0.8125rem; /* Increased minimum size for readability */
  }
  
  /* Maintain readable section labels on small screens */
  .section-label {
    font-size: 0.6875rem; /* Don't go too small */
  }
  
  /* Ensure description text remains readable */
  .description-text {
    font-size: 0.8125rem; /* Slightly smaller for mobile, still readable */
  }
}

/* Premium animation for page load */
@keyframes luxury-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.luxury-info-grid .info-chip {
  animation: luxury-fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.luxury-info-grid .info-chip:nth-child(1) {
  animation-delay: 0.05s;
}

.luxury-info-grid .info-chip:nth-child(2) {
  animation-delay: 0.1s;
}

.luxury-info-grid .info-chip:nth-child(3) {
  animation-delay: 0.15s;
}

/* ==========================================
   2. LUXURY PRICING - Airbnb-style inline
   ========================================== */
.luxury-pricing {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.price-option {
  position: relative;
  flex: 1;
  min-width: 0;
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: 0.75rem;
  padding: 0.625rem 0.75rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.price-option.featured {
  border-color: var(--blue-500);
  background: linear-gradient(135deg, var(--blue-50), var(--indigo-50));
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12);
}

.price-option:hover {
  border-color: var(--blue-400);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.18);
}

.dark .price-option {
  background: var(--gray-800);
  border-color: var(--gray-700);
}

.dark .price-option.featured {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(99, 102, 241, 0.15));
  border-color: var(--blue-600);
}

.dark .price-option:hover {
  border-color: var(--blue-500);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}

.save-badge {
  position: absolute;
  top: -6px;
  right: 8px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  font-size: 0.5625rem;
  font-weight: 700;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
  z-index: var(--z-base);
}

.price-content {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.price-main {
  display: flex;
  align-items: baseline;
  gap: 0.125rem;
}

.price-original {
  font-size: 0.8125rem; /* Increased for better readability */
  color: var(--text-muted); /* Better contrast */
  text-decoration: line-through;
  font-weight: 500;
}

.dark .price-original {
  color: var(--text-muted-dark);
}

.price-amount {
  font-size: 1.5rem; /* Slightly larger for better prominence */
  font-weight: 700;
  color: var(--text-primary); /* Consistent primary text */
  line-height: 1.1; /* Slightly relaxed */
  letter-spacing: -0.015em; /* Refined letter spacing */
}

.price-option.featured .price-amount {
  color: var(--blue-700); /* Darker for better contrast */
}

.dark .price-amount {
  color: var(--text-primary-dark);
}

.dark .price-option.featured .price-amount {
  color: var(--blue-300); /* Better dark mode contrast */
}

.price-unit {
  font-size: 0.875rem; /* Increased for better readability */
  color: var(--text-muted); /* Better contrast */
  font-weight: 500;
}

.dark .price-unit {
  color: var(--text-muted-dark);
}

.price-label {
  font-size: 0.75rem; /* Increased for better readability */
  color: var(--text-tertiary); /* Better contrast */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.075em; /* Improved letter spacing */
}

.dark .price-label {
  color: var(--text-tertiary-dark);
}

@media (max-width: 640px) {
  .luxury-pricing {
    flex-direction: column;
  }
  
  .price-option {
    width: 100%;
  }
}

@media (min-width: 641px) and (max-width: 768px) {
  .price-option {
    min-width: calc(50% - 0.25rem);
  }
}

/* Desktop-specific styles for section labels */
@media (min-width: 768px) {
  .section-label {
    font-size: 0.59rem;
    padding: 0.1875rem 0.75rem;
    gap: 0.375rem;
  }
  
  .section-label svg {
    width: 0.75rem;
    height: 0.75rem;
  }
  
  /* Access Instructions section label - left margin, moderately shorter and wider */
  .luxury-description .section-label[style*="margin-top"] {
    margin-left: 1rem !important;
    padding: 0.1875rem 1.5rem !important; /* Moderate vertical padding */
    min-width: 200px !important;
    height: 28px !important; /* Moderate height - not too short */
    line-height: 1.1 !important; /* Slightly relaxed line height */
    font-size: 0.6875rem !important; /* Slightly larger font for readability */
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important; /* Comfortable gap between icon and text */
  }
  
  /* About this spot section label - SMALLER and more compact */
  .luxury-description .section-label,
  html body .luxury-description .section-label,
  html body .spot-details-container .luxury-description .section-label {
    margin-left: 3rem !important; /* Reduced margin */
    margin-top: -0.75rem !important;
    padding: 0.25rem 1rem !important; /* Much smaller padding */
    min-width: 120px !important; /* Smaller minimum width */
    width: auto !important;
    max-width: 200px !important; /* Smaller maximum width */
    height: 24px !important; /* Smaller height */
    line-height: 1 !important; /* Tighter line height */
    font-size: 0.5625rem !important; /* 9px - compact */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.25rem !important; /* Smaller gap */
    border-radius: 12px !important; /* Smaller border radius */
    color: inherit !important;
    z-index: 100 !important; /* High z-index to ensure section labels sit above container shadow */
    isolation: isolate !important; /* Create new stacking context */
  }
  
  /* Make SVG icon appropriately sized for Access Instructions */
  .luxury-description .section-label[style*="margin-top"] svg {
    width: 0.75rem !important; /* Slightly larger icon for better visibility */
    height: 0.75rem !important;
    flex-shrink: 0 !important;
  }
  
  /* Make SVG icon smaller to match compact section label */
  .luxury-description .section-label svg,
  html body .luxury-description .section-label svg,
  html body .spot-details-container .luxury-description .section-label svg {
    width: 0.625rem !important; /* Smaller icon for compact layout */
    height: 0.625rem !important;
    flex-shrink: 0 !important;
    color: var(--blue-700) !important; /* Ensure blue color */
  }
  
  /* Style the text span within section labels for compact layout */
  .luxury-description .section-label span,
  html body .luxury-description .section-label span,
  html body .spot-details-container .luxury-description .section-label span {
    white-space: nowrap !important; /* Prevent text wrapping */
    font-weight: 500 !important; /* Medium font weight for better visibility */
    letter-spacing: 0.01em !important; /* Minimal letter spacing for compact size */
    color: inherit !important; /* Use the section label's color */
    font-size: 0.5625rem !important; /* 9px - compact */
  }
  
  /* Add left margin to Features section label */
  .luxury-features .section-label {
    margin-left: 3rem;
  }
}

/* Bottom sheet: Smaller text for Self Access / Host Assisted Access labels */
/* Target section labels that come after the "About" section (have margin-top style) */
#listings-sheet .luxury-description .section-label[style*="margin-top"] {
  font-size: 0.5625rem !important; /* Smaller font size for bottom sheet */
}

#listings-sheet .luxury-description .section-label[style*="margin-top"] span {
  font-size: 0.5625rem !important; /* Smaller font size for bottom sheet */
}

/* ==========================================
   3. SECTION LABELS - Minimal category headers
   ========================================== */
.section-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.75rem; /* Normal readable size */
  font-weight: 600; /* Bold for visibility */
  text-transform: uppercase;
  letter-spacing: 0.05em; /* Normal letter spacing */
  color: #1f2937 !important; /* Dark text for light mode visibility - override span rules */
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(147, 197, 253, 0.08) 100%);
  margin-bottom: 0;
  padding: 0.5rem 1.25rem;
  border-radius: 120px;
  min-width: auto;
  max-width: none;
  width: auto;
  line-height: 1.1;
  flex-shrink: 0;
  border: 1px solid rgba(59, 130, 246, 0.15);
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1);
  text-shadow: none; /* No text shadow needed for dark text on light background */
  position: relative;
  z-index: 100 !important; /* High z-index to ensure section labels sit above container shadow */
  isolation: isolate; /* Create new stacking context to ensure proper layering */
  overflow: hidden;
}

/* Ensure section-label spans use correct color in light mode */
.section-label span,
html body .spot-details-container .section-label span,
html body .luxury-header .section-label span,
html body .luxury-features .section-label span,
html body .luxury-description .section-label span {
  color: #1f2937 !important; /* Dark text for light mode - override general span rules */
}

.section-label::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
}

.dark .section-label {
  color: #f8fafc !important; /* Light text for dark mode - override span rules */
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.12) 0%, rgba(147, 197, 253, 0.12) 100%);
  border-color: rgba(96, 165, 250, 0.2);
  box-shadow: 0 2px 4px rgba(96, 165, 250, 0.15);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Ensure section-label spans use correct color in dark mode */
.dark .section-label span,
html.dark body .spot-details-container .section-label span,
html.dark body .luxury-header .section-label span,
html.dark body .luxury-features .section-label span,
html.dark body .luxury-description .section-label span {
  color: #f8fafc !important; /* Light text for dark mode - override general span rules */
}

.section-label svg {
  width: 0.875rem;
  height: 0.875rem;
  color: #3b82f6;
  filter: drop-shadow(0 1px 1px rgba(59, 130, 246, 0.2));
}

.dark .section-label svg {
  color: #60a5fa;
  filter: drop-shadow(0 1px 1px rgba(96, 165, 250, 0.3));
}

/* Enhanced hover effect for section labels */
.section-label:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.15);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(147, 197, 253, 0.12) 100%);
}

.dark .section-label:hover {
  box-shadow: 0 4px 8px rgba(96, 165, 250, 0.2);
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.16) 0%, rgba(147, 197, 253, 0.16) 100%);
}

/* ==========================================
   4. LUXURY FEATURES - Compact chip grid
   ========================================== */
.luxury-features {
  position: relative;
}

/* Force horizontal layout with label on left, chips on right */
.luxury-features .flex.items-center {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
}

.luxury-features .section-label {
  flex-shrink: 0 !important;
  margin-bottom: 0 !important;
  z-index: 100 !important; /* High z-index to ensure section labels sit above container shadow */
  isolation: isolate !important; /* Create new stacking context */
}

/* Mobile spot detail title - allow 2 lines and responsive height */
#spot-detail-title-mobile {
  transform: translateX(2px) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important; /* Allow up to 2 lines */
  -webkit-box-orient: vertical !important;
  line-clamp: 2 !important; /* Fallback for modern browsers */
  white-space: normal !important; /* Allow wrapping */
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  min-width: 0 !important; /* CRITICAL: Allow flex item to shrink */
  max-width: 100% !important;
  line-height: 1.4 !important; /* Better line spacing for 2 lines */
}

/* Mobile header - allow flexible height for 2-line titles */
header.lg\\:hidden.flex.items-center.px-4.py-2,
#spot-detail-view header.lg\\:hidden,
dialog#spot-detail-view header.lg\\:hidden {
  align-items: flex-start !important; /* Align to top to accommodate 2 lines */
  padding-top: 0.75rem !important; /* Increase top padding */
  padding-bottom: 0.75rem !important; /* Increase bottom padding */
  min-height: 3.5rem !important; /* Minimum height for 2 lines */
  height: auto !important; /* Allow height to grow */
}

/* Ensure back button aligns to top when title wraps */
#spot-detail-view header.lg\\:hidden #spot-detail-back-mobile,
dialog#spot-detail-view header.lg\\:hidden #spot-detail-back-mobile,
#listings-sheet header.lg\\:hidden #spot-detail-back-mobile {
  align-self: flex-start !important;
  margin-top: 0.125rem !important; /* Slight top margin for visual alignment */
}

/* Bottom sheet header - allow flexible height for 2-line titles */
#listings-sheet header.lg\\:hidden,
#listings-sheet .spot-details-container header.lg\\:hidden {
  align-items: flex-start !important; /* Align to top to accommodate 2 lines */
  padding-top: 0.75rem !important; /* Increase top padding */
  padding-bottom: 0.75rem !important; /* Increase bottom padding */
  min-height: 3.5rem !important; /* Minimum height for 2 lines */
  height: auto !important; /* Allow height to grow */
}

/* Bottom sheet title - allow 2 lines */
#listings-sheet #spot-detail-title-mobile,
#listings-sheet .spot-details-container #spot-detail-title-mobile {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important; /* Allow up to 2 lines */
  -webkit-box-orient: vertical !important;
  line-clamp: 2 !important; /* Fallback for modern browsers */
  white-space: normal !important; /* Allow wrapping */
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  min-width: 0 !important; /* CRITICAL: Allow flex item to shrink */
  max-width: 100% !important;
  line-height: 1.4 !important; /* Better line spacing for 2 lines */
}

/* Full title displayed in content area - allows full title to be visible */
.spot-detail-full-title {
  font-size: 1.25rem !important; /* text-xl */
  font-weight: 700 !important; /* font-bold */
  line-height: 1.5 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
  margin-bottom: 0.5rem !important;
}

/* Desktop overlay: Full title styling */
#spot-detail-view .spot-detail-full-title,
#spot-detail-content .spot-detail-full-title,
dialog#spot-detail-view .spot-detail-full-title {
  max-width: 100% !important;
  word-break: break-word !important;
}

/* Bottom sheet: Full title styling - responsive */
#listings-sheet .spot-detail-full-title,
#listings-sheet .spot-details-container .spot-detail-full-title {
  max-width: 100% !important;
  word-break: break-word !important;
  padding-right: 0.5rem !important; /* Add padding to prevent edge clipping */
}

.feature-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 1 !important;
  margin-left: 2rem !important;
  padding-left: 2rem !important;
  transform: translateY(11px) !important;
}

/* MOBILE: Remove feature-chips transform that causes overlap */
@media (max-width: 768px) {
  .feature-chips,
  #listings-sheet .feature-chips,
  #listings-sheet .luxury-features .feature-chips {
    transform: none !important; /* CRITICAL: Remove translateY on mobile */
    margin-left: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
}

.feature-chip,
span.feature-chip,
.luxury-features .feature-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important; /* Reduced from 0.5rem */
  padding: 0.5rem 0.875rem !important; /* Reduced from 0.75rem 1.375rem */
  background: var(--gray-100) !important; /* Darker background for better contrast */
  border: 1px solid var(--gray-300) !important; /* Stronger border */
  border-radius: 0.5rem !important; /* Slightly less rounded */
  font-size: 0.6875rem !important; /* Reduced from 0.7rem */
  font-weight: 600 !important; /* Increased weight for better visibility */
  color: var(--text-primary) !important; /* Strongest text contrast */
  transition: all 0.15s ease !important;
  cursor: default !important;
  min-width: fit-content !important;
  white-space: nowrap !important;
  width: auto !important;
  max-width: none !important;
  letter-spacing: 0.01em !important; /* Improved readability */
}

.feature-chip:hover {
  background: white !important;
  border-color: var(--blue-400) !important; /* More visible border */
  color: var(--text-primary) !important; /* Consistent primary text */
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08) !important; /* Enhanced shadow */
  transform: translateY(-1px) !important;
}

.dark .feature-chip {
  background: var(--gray-750) !important; /* Lighter background for dark mode */
  border-color: var(--gray-600) !important; /* Stronger border in dark mode */
  color: var(--text-primary-dark) !important; /* Strongest text contrast in dark mode */
}

.dark .feature-chip:hover {
  background: var(--gray-750) !important;
  border-color: var(--blue-500) !important;
  color: var(--text-primary-dark) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25) !important; /* Enhanced shadow */
}

.feature-icon {
  width: 0.625rem !important; /* Reduced from 0.75rem */
  height: 0.625rem !important; /* Reduced from 0.75rem */
  min-width: 0.625rem !important;
  min-height: 0.625rem !important;
  max-width: 0.625rem !important;
  max-height: 0.625rem !important;
  flex-shrink: 0 !important;
  color: #d8d41d !important; /* Yellow-gold color for better contrast */
  transition: transform 0.15s ease !important;
}

.feature-chip:hover .feature-icon {
  transform: scale(1.1);
  color: #d8d41d;
}

.dark .feature-icon {
  color: #d8d41d;
}

.dark .feature-chip:hover .feature-icon {
  color: #d8d41d;
}

.feature-name {
  white-space: nowrap;
  line-height: 1;
}

/* MOBILE TOUCH: Compact but readable feature chips in bottom sheet */
@media (max-width: 520px) {
  #listings-sheet .feature-chip,
  #listings-sheet span.feature-chip,
  #listings-sheet .luxury-features .feature-chip,
  #listings-sheet .spot-details-container .feature-chip {
    padding: 0.3125rem 0.625rem !important; /* Slightly bigger padding */
    font-size: 0.625rem !important; /* 10px font - more readable */
    gap: 0.25rem !important; /* Comfortable gap */
    border-radius: 0.375rem !important;
  }
  
  /* Readable feature icons on mobile */
  #listings-sheet .feature-chip .feature-icon,
  #listings-sheet .feature-icon {
    width: 0.625rem !important; /* 10px icon - bigger */
    height: 0.625rem !important;
    min-width: 0.625rem !important;
    min-height: 0.625rem !important;
    max-width: 0.625rem !important;
    max-height: 0.625rem !important;
  }
  
  /* Readable feature name text */
  #listings-sheet .feature-chip .feature-name,
  #listings-sheet .feature-name {
    font-size: 0.625rem !important; /* 10px text - more readable */
    line-height: 1.1 !important;
  }
  
  /* Feature chips container - with right transform */
  #listings-sheet .feature-chips,
  #listings-sheet .luxury-features .feature-chips {
    gap: 0.375rem !important;
    margin-left: 0.5rem !important;
    padding-left: 0.5rem !important;
    transform: translateX(0.375rem) !important; /* Small right transform */
  }
}

/* ULTRA-SMALL PHONE: Compact but still readable feature chips */
@media (max-width: 375px) {
  #listings-sheet .feature-chip,
  #listings-sheet span.feature-chip,
  #listings-sheet .luxury-features .feature-chip {
    padding: 0.25rem 0.5rem !important; /* Compact but readable padding */
    font-size: 0.5625rem !important; /* 9px font */
    gap: 0.1875rem !important;
  }
  
  #listings-sheet .feature-chip .feature-icon,
  #listings-sheet .feature-icon {
    width: 0.5625rem !important; /* 9px icon */
    height: 0.5625rem !important;
    min-width: 0.5625rem !important;
    min-height: 0.5625rem !important;
    max-width: 0.5625rem !important;
    max-height: 0.5625rem !important;
  }
  
  #listings-sheet .feature-chip .feature-name,
  #listings-sheet .feature-name {
    font-size: 0.5625rem !important; /* 9px text */
  }
  
  #listings-sheet .feature-chips,
  #listings-sheet .luxury-features .feature-chips {
    gap: 0.25rem !important;
    margin-left: 0.25rem !important;
    padding-left: 0.25rem !important;
    transform: translateX(0.25rem) !important; /* Small right transform */
  }
}

@media (max-width: 380px) {
  .feature-chip {
    padding: 0.5rem 0.875rem !important; /* Compact sizing */
    font-size: 0.6875rem !important; /* Compact font size */
    gap: 0.375rem !important;
  }
  
  .feature-icon {
    width: 0.625rem !important; /* Compact icon size */
    height: 0.625rem !important;
  }
}

/* ==========================================
   4. LUXURY DESCRIPTION - Industry-standard sexy description styling
   ========================================== */
.luxury-description {
  position: relative;
  padding-top: 1rem; /* Add top padding for spacing */
}

.description-text {
  font-size: 0.875rem; /* Smaller, more readable size for descriptions */
  line-height: 1.6; /* Comfortable line height for reading */
  color: var(--text-primary); /* Stronger contrast for bold appearance */
  font-weight: 400; /* Normal weight for better readability */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* System font stack optimized for readability */
  margin-top: 0.25rem;
  margin-bottom: 1.5rem;
  padding: 1rem 0;
  letter-spacing: 0.01em; /* Subtle letter spacing for readability */
  text-rendering: optimizeLegibility; /* Better text rendering */
  -webkit-font-smoothing: antialiased; /* Smooth font rendering on webkit */
  -moz-osx-font-smoothing: grayscale; /* Smooth font rendering on firefox */
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.02) 0%, rgba(147, 197, 253, 0.02) 100%);
  border-left: 3px solid rgba(59, 130, 246, 0.2);
  padding-left: 1.25rem;
  border-radius: 0 8px 8px 0;
  position: relative;
}

.description-text::before {
  content: '';
  position: absolute;
  left: -3px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
  border-radius: 2px;
}

.dark .description-text {
  color: var(--text-primary-dark);
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.03) 0%, rgba(147, 197, 253, 0.03) 100%);
  border-left-color: rgba(96, 165, 250, 0.3);
}

.dark .description-text::before {
  background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
}

/* Enhanced styling for "About this spot" content */
.luxury-description .description-text:first-of-type {
  font-size: 0.875rem; /* Consistent size with access info */
  font-weight: 400; /* Normal weight for readability */
  color: var(--text-primary); /* Consistent color */
  text-shadow: none; /* Remove text shadow for cleaner look */
}

.dark .luxury-description .description-text:first-of-type {
  color: var(--text-primary-dark); /* Consistent dark mode color */
  text-shadow: none; /* Remove text shadow */
}

/* Enhanced styling for "Access Instructions" content */
.luxury-description .description-text:last-of-type {
  font-size: 0.875rem; /* Consistent size with description */
  font-weight: 400; /* Normal weight for readability - consistent with description */
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.02) 0%, rgba(52, 211, 153, 0.02) 100%);
  border-left-color: rgba(16, 185, 129, 0.25);
  color: var(--text-primary); /* Consistent color with description */
}

.luxury-description .description-text:last-of-type::before {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%);
}

.dark .luxury-description .description-text:last-of-type {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.03) 0%, rgba(16, 185, 129, 0.03) 100%);
  border-left-color: rgba(52, 211, 153, 0.3);
  color: var(--text-primary-dark); /* Consistent dark mode color */
}

.dark .luxury-description .description-text:last-of-type::before {
  background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
}

/* ==========================================
   5. LUXURY POLICIES - Ultra-compact policy items
   ========================================== */
.luxury-policies {
  position: relative;
}

.policy-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.policy-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  background: var(--gray-100); /* Darker background for better contrast */
  border: 1px solid var(--gray-300); /* Stronger border */
  border-radius: 0.625rem;
  transition: all 0.15s ease;
}

.policy-item:hover {
  background: white;
  border-color: var(--blue-200);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.dark .policy-item {
  background: var(--gray-750); /* Lighter background for better contrast in dark mode */
  border-color: var(--gray-600); /* Stronger border in dark mode */
}

.dark .policy-item:hover {
  background: var(--gray-750);
  border-color: var(--blue-600);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.policy-icon {
  width: 0.875rem !important;
  height: 0.875rem !important;
  min-width: 0.875rem;
  min-height: 0.875rem;
  max-width: 0.875rem;
  max-height: 0.875rem;
  flex-shrink: 0;
  color: var(--blue-600);
  margin-top: 0.125rem;
  pointer-events: none !important; /* CRITICAL: Don't block tooltip interactions */
  z-index: 0 !important; /* Low z-index to stay below tooltips */
  position: relative !important; /* Ensure z-index works */
}

.dark .policy-icon {
  color: var(--blue-400);
}

.policy-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.policy-label {
  font-size: 0.625rem; /* Smaller text size */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.075em; /* Improved letter spacing */
  color: var(--text-muted); /* Better contrast */
  position: relative !important; /* Ensure it doesn't create stacking context */
  z-index: 0 !important; /* Low z-index to stay below tooltips */
  isolation: auto !important; /* Don't create new stacking contexts */
  pointer-events: none !important; /* CRITICAL: Don't block tooltip interactions */
}

.dark .policy-label {
  color: var(--text-muted-dark);
}

.policy-value {
  font-size: 0.875rem; /* Increased for better readability */
  font-weight: 600;
  color: var(--text-primary); /* Consistent primary text */
  line-height: 1.4; /* Improved line height */
  letter-spacing: 0.01em; /* Subtle letter spacing */
}

.dark .policy-value {
  color: var(--text-primary-dark);
}

.policy-note {
  font-size: 0.75rem; /* Increased for better readability */
  color: var(--text-muted); /* Better contrast */
  line-height: 1.4; /* Improved line height */
}

.dark .policy-note {
  color: var(--text-muted-dark);
}

/* Expandable Policy Section */
.policy-expandable {
  border: 1px solid var(--gray-200);
  border-radius: 0.625rem;
  overflow: hidden;
  background: var(--gray-50);
  transition: all 0.2s ease;
}

.dark .policy-expandable {
  background: var(--gray-800);
  border-color: var(--gray-700);
}

.policy-expandable-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  gap: 0.5rem;
}

.policy-expandable-trigger:hover {
  background: rgba(59, 130, 246, 0.05);
}

.dark .policy-expandable-trigger:hover {
  background: rgba(59, 130, 246, 0.1);
}

.policy-chevron {
  display: none !important; /* Hide chevron */
  width: 0.875rem !important;
  height: 0.875rem !important;
  min-width: 0.875rem !important;
  min-height: 0.875rem !important;
  max-width: 0.875rem !important;
  max-height: 0.875rem !important;
  flex-shrink: 0 !important;
  color: var(--gray-500);
  transition: transform 0.2s ease;
}

.policy-expandable.expanded .policy-chevron {
  transform: rotate(180deg);
}

.policy-expandable-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.policy-expandable.expanded .policy-expandable-content {
  max-height: 500px;
}

.policy-details {
  padding: 0.75rem;
  border-top: 1px solid var(--gray-200);
}

.dark .policy-details {
  border-top-color: var(--gray-700);
}

.policy-details-text {
  font-size: 0.875rem; /* Increased for better readability */
  line-height: 1.6; /* Improved line height */
  color: var(--text-secondary); /* Better contrast */
  margin-bottom: 0.75rem;
  letter-spacing: 0.01em; /* Subtle letter spacing */
}

.dark .policy-details-text {
  color: var(--text-secondary-dark);
}

.policy-details-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.625rem;
  background: var(--blue-50);
  border-radius: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--gray-600) !important;
}

.policy-details-note span {
  color: var(--gray-700) !important;
}

.dark .policy-details-note {
  background: rgba(59, 130, 246, 0.15);
  color: var(--gray-400) !important;
}

/* CRITICAL: Allow white/light text in dark mode for policy details note */
/* Must be more specific than the general span rule above */
html.dark body .spot-details-container .policy-details-note span,
html.dark body .policy-details-note span,
.dark .policy-details-note span,
html.dark .policy-details-note span,
body.dark .policy-details-note span {
  color: #ffffff !important; /* White text for dark mode visibility */
}

/* Specifically target elements with text-gray-700 dark:text-gray-300 classes */
html.dark body .spot-details-container .policy-details-note span.text-gray-700.dark\:text-gray-300,
html.dark body .policy-details-note span.text-gray-700.dark\:text-gray-300,
.dark .policy-details-note span.text-gray-700.dark\:text-gray-300,
html.dark .policy-details-note span.text-gray-700.dark\:text-gray-300,
body.dark .policy-details-note span.text-gray-700.dark\:text-gray-300,
.dark .policy-details-note .text-gray-700.dark\:text-gray-300,
html.dark .policy-details-note .text-gray-700.dark\:text-gray-300,
body.dark .policy-details-note .text-gray-700.dark\:text-gray-300 {
  color: #ffffff !important; /* White text for dark mode */
}

.policy-note-icon {
  width: 0.875rem !important;
  height: 0.875rem !important;
  min-width: 0.875rem !important;
  min-height: 0.875rem !important;
  max-width: 0.875rem !important;
  max-height: 0.875rem !important;
  flex-shrink: 0 !important;
  color: var(--blue-600);
}

.dark .policy-note-icon {
  color: var(--blue-400);
}

.access-notes {
  margin-top: 0.75rem;
}

.notes-text {
  font-size: 0.875rem; /* Increased for better readability */
  line-height: 1.6; /* Improved line height */
  color: var(--text-secondary); /* Better contrast */
  padding: 1rem; /* Increased padding for better spacing */
  background: var(--gray-100); /* Darker background for better contrast */
  border: 1px solid var(--gray-300); /* Stronger border */
  border-radius: 0.75rem; /* Slightly more rounded */
  margin-top: 0.5rem;
  letter-spacing: 0.01em; /* Subtle letter spacing */
}

.dark .notes-text {
  color: var(--text-secondary-dark);
  background: var(--gray-750); /* Lighter background for better contrast in dark mode */
  border-color: var(--gray-600); /* Stronger border in dark mode */
}

/* ==========================================
   6. LUXURY REVIEWS - Collapsible section
   ========================================== */
.luxury-reviews {
  position: relative;
}

.reviews-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  background: var(--gray-100); /* Darker background for better contrast */
  border: 1px solid var(--gray-300); /* Stronger border */
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.reviews-toggle:hover {
  background: white;
  border-color: var(--blue-300);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.dark .reviews-toggle {
  background: var(--gray-750); /* Lighter background for better contrast in dark mode */
  border-color: var(--gray-600); /* Stronger border in dark mode */
}

.dark .reviews-toggle:hover {
  background: var(--gray-750);
  border-color: var(--blue-600);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.reviews-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.reviews-summary svg:first-child {
  color: var(--blue-600);
}

.dark .reviews-summary svg:first-child {
  color: var(--blue-400);
}

.reviews-label {
  font-size: 0.875rem; /* Increased for better readability */
  font-weight: 600;
  color: var(--text-secondary); /* Better contrast */
  letter-spacing: 0.01em; /* Subtle letter spacing */
}

.dark .reviews-label {
  color: var(--text-secondary-dark);
}

.reviews-rating {
  font-size: 0.9375rem; /* Increased for better prominence */
  font-weight: 700;
  color: var(--text-primary); /* Consistent primary text */
  letter-spacing: 0.01em; /* Subtle letter spacing */
}

.dark .reviews-rating {
  color: var(--text-primary-dark);
}

.reviews-stars {
  display: flex;
  gap: 0.125rem;
}

.reviews-stars .star {
  width: 0.75rem;
  height: 0.75rem;
}

.reviews-stars .star.filled {
  color: #fbbf24;
}

.reviews-stars .star:not(.filled) {
  color: var(--gray-300);
}

.dark .reviews-stars .star:not(.filled) {
  color: var(--gray-600);
}

.reviews-count {
  font-size: 0.8125rem; /* Increased for better readability */
  color: var(--text-muted); /* Better contrast */
}

.dark .reviews-count {
  color: var(--text-muted-dark);
}

.reviews-toggle .chevron {
  width: 0.875rem !important;
  height: 0.875rem !important;
  min-width: 0.875rem;
  min-height: 0.875rem;
  max-width: 0.875rem;
  max-height: 0.875rem;
  color: var(--gray-500);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.reviews-toggle.expanded .chevron {
  transform: rotate(180deg);
}

.dark .reviews-toggle .chevron {
  color: var(--gray-400);
}

/* Legacy expandable reviews - only apply to specific contexts, not all .reviews-content */
.reviews-toggle .reviews-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.reviews-toggle .reviews-content.expanded {
  max-height: 2000px;
  margin-top: 0.5rem;
}

/* Desktop spot details overlay: Add right transform to Reviews heading */
#spot-detail-view .reviews-section h3.text-lg.font-semibold.text-gray-900.dark\\:text-white,
#spot-detail-content .reviews-section h3.text-lg.font-semibold.text-gray-900.dark\\:text-white,
.spot-details-container .reviews-section h3.text-lg.font-semibold.text-gray-900.dark\\:text-white,
#spot-detail-view .reviews-section h3[class*="text-lg"][class*="font-semibold"],
#spot-detail-content .reviews-section h3[class*="text-lg"][class*="font-semibold"],
.spot-details-container .reviews-section h3[class*="text-lg"][class*="font-semibold"] {
  transform: translateX(0.25rem) !important; /* Right transform (4px) */
}

/* NEW: Reviews section content should be visible by default */
.reviews-section .reviews-content {
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
  margin-top: 0.75rem !important;
}

/* CRITICAL: Reviews more content - hidden by default, only show when hidden class is removed */
#spot-detail-view .reviews-section .reviews-more-content,
#spot-detail-content .reviews-section .reviews-more-content,
.spot-details-container .reviews-section .reviews-more-content {
  display: none !important; /* Hidden by default */
}

/* Show when hidden class is removed via JavaScript toggle */
/* CRITICAL: Inline style with !important takes precedence, so we check for that first */
#spot-detail-view .reviews-section .reviews-more-content[style*="display: block"],
#spot-detail-content .reviews-section .reviews-more-content[style*="display: block"],
.spot-details-container .reviews-section .reviews-more-content[style*="display: block"] {
  display: block !important;
}

#spot-detail-view .reviews-section .reviews-more-content:not(.hidden):not([style*="display: none"]),
#spot-detail-content .reviews-section .reviews-more-content:not(.hidden):not([style*="display: none"]),
.spot-details-container .reviews-section .reviews-more-content:not(.hidden):not([style*="display: none"]) {
  display: block !important;
}

/* CRITICAL: Ensure hidden class properly hides the content */
#spot-detail-view .reviews-section .reviews-more-content.hidden,
#spot-detail-content .reviews-section .reviews-more-content.hidden,
.spot-details-container .reviews-section .reviews-more-content.hidden {
  display: none !important;
}

.review-item {
  padding: 0.75rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 0.625rem;
  margin-bottom: 0.5rem;
}

.dark .review-item {
  background: var(--gray-800);
  border-color: var(--gray-700);
}

.review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.review-author {
  font-size: 0.875rem; /* Increased for better readability */
  font-weight: 600;
  color: var(--text-primary); /* Consistent primary text */
  letter-spacing: 0.01em; /* Subtle letter spacing */
}

.dark .review-author {
  color: var(--text-primary-dark);
}

.review-rating {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.review-rating .star {
  width: 0.625rem;
  height: 0.625rem;
  color: #fbbf24;
}

.review-rating-number {
  display: none !important; /* Hide the text rating like "3/5" */
}

.dark .review-rating-number {
  display: none !important; /* Hide in dark mode too */
}

/* Ensure review stars are properly visible and styled */
.review-rating .star {
  width: 1rem !important;
  height: 1rem !important;
  color: #fbbf24 !important; /* Gold color for filled stars */
  margin-right: 0.125rem !important;
}

/* Reduce top and bottom padding on "No reviews yet" container */
.reviews-section .bg-gray-50.rounded-lg.p-4.border:has(.text-center p.text-sm) {
  padding-top: 0.75rem !important; /* Reduced from 1rem (p-4) */
  padding-bottom: 0.75rem !important; /* Reduced from 1rem (p-4) */
}

/* Fallback selector for browsers that don't support :has() - targets container with text-center and SVG icon */
.reviews-section > div > .bg-gray-50.rounded-lg.p-4.border.border-gray-200:not(.compact-review-card):not(.cancellation-policy-container) {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.review-rating .star.filled {
  color: #fbbf24 !important; /* Gold for filled stars */
}

.review-rating .star:not(.filled) {
  color: #d1d5db !important; /* Light gray for empty stars */
}

/* Dark mode star colors */
.dark .review-rating .star.filled {
  color: #fbbf24 !important; /* Keep gold in dark mode */
}

.dark .review-rating .star:not(.filled) {
  color: #6b7280 !important; /* Darker gray for empty stars in dark mode */
}

.review-text {
  font-size: 0.875rem; /* Increased for better readability */
  line-height: 1.6; /* Improved line height */
  color: var(--text-secondary); /* Better contrast */
  letter-spacing: 0.01em; /* Subtle letter spacing */
}

.dark .review-text {
  color: var(--text-secondary-dark);
}

.review-more {
  text-align: center;
  padding: 0.5rem;
  font-size: 0.75rem;
  color: var(--gray-500);
  font-weight: 500;
}

.dark .review-more {
  color: var(--gray-400);
}

/* ============================================================================
   AVAILABILITY SCHEDULE TOOLTIP - Enhanced Visibility & Overflow Fix
   ============================================================================ */

/* Ensure parent containers allow tooltip overflow */
.luxury-description,
.luxury-info-grid,
.info-chip {
  overflow: visible !important;
  position: relative;
}

/* Ensure tooltip trigger wrapper allows overflow but doesn't create scrollbars */
.tooltip-trigger-wrapper {
  overflow: visible !important;
  position: relative;
  z-index: var(--z-high-modal) !important; /* High z-index for trigger wrapper */
  isolation: isolate !important; /* Create new stacking context */
  max-width: 100% !important; /* Prevent horizontal overflow */
}

/* CRITICAL: Ensure tooltip wrapper doesn't create blocking stacking context */
.tooltip-trigger-wrapper *:not(.availability-schedule-tooltip):not(.enhanced-tooltip) {
  pointer-events: auto !important; /* Allow normal interactions */
}

/* CRITICAL: Ensure info-chip doesn't create scrollbars when tooltip is shown */
.info-chip {
  overflow: visible !important;
  max-width: 100% !important;
}

.chip-label-content {
  overflow: visible !important;
  max-width: 100% !important;
}

/* Ensure enhanced tooltip button has high z-index */
.enhanced-tooltip-btn {
  position: relative !important;
  z-index: var(--z-high-modal) !important;
}

/* Enhanced tooltip positioning for better overflow */
.enhanced-tooltip {
  position: fixed !important; /* Use fixed positioning to escape all parent containers */
  z-index: 2147483647 !important; /* Maximum possible z-index value - higher than stars and policy labels */
  overflow: visible !important;
  /* Restore essential tooltip styling */
  min-width: 300px !important;
  max-width: 400px !important;
  background: white !important;
  border: 2px solid rgba(59, 130, 246, 0.2) !important;
  border-radius: 0.75rem !important;
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 10px 20px -5px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(59, 130, 246, 0.05) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-10px) scale(0.95) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  /* CRITICAL FIX: Initial positioning off-screen to prevent flash at origin */
  top: -9999px !important;
  left: -9999px !important;
  right: auto !important;
  bottom: auto !important;
  /* Ensure tooltip breaks out of any stacking context */
  isolation: isolate !important;
  contain: layout style !important;
}

/* Show state for enhanced tooltip */
.enhanced-tooltip.show {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

/* CRITICAL FIX: Enhanced tooltip positioning system */
.tooltip-trigger-wrapper {
  position: relative !important;
  display: inline-block !important;
  z-index: var(--z-high-modal) !important;
}

/* Enhanced tooltip button positioning - ULTRA HIGH SPECIFICITY */
button.enhanced-tooltip-btn,
.enhanced-tooltip-btn,
button[class*="enhanced-tooltip-btn"],
[class*="enhanced-tooltip-btn"] {
  position: relative !important;
  z-index: var(--z-high-modal) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  padding: 0.25rem 0.5rem !important;
  background: rgba(59, 130, 246, 0.1) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
  border-radius: 0.375rem !important;
  color: #1d4ed8 !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  width: 150px !important; /* Fixed width for consistent sizing */
  min-width: 150px !important;
  max-width: 150px !important;
  height: 28px !important;
  max-height: 28px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

/* MOBILE: Smaller enhanced-tooltip-btn (Self access/About buttons) on touch devices */
@media (max-width: 520px) {
  button.enhanced-tooltip-btn,
  .enhanced-tooltip-btn,
  button[class*="enhanced-tooltip-btn"],
  [class*="enhanced-tooltip-btn"],
  #listings-sheet .enhanced-tooltip-btn,
  #listings-sheet button.enhanced-tooltip-btn {
    width: 80px !important; /* REDUCED: More compact for mobile touch */
    min-width: 80px !important;
    max-width: 80px !important;
    height: 20px !important; /* REDUCED: Shorter height */
    max-height: 20px !important;
    padding: 0.125rem 0.25rem !important; /* REDUCED: Tighter padding */
    font-size: 0.5rem !important; /* REDUCED: Smaller font (8px) */
    gap: 0.125rem !important; /* REDUCED: Tighter gap */
  }
  
  /* Smaller icon inside enhanced-tooltip-btn on mobile */
  #listings-sheet .enhanced-tooltip-btn svg,
  #listings-sheet button.enhanced-tooltip-btn svg {
    width: 0.375rem !important; /* 6px icon */
    height: 0.375rem !important;
  }
  
  /* Smaller tooltip hint text */
  #listings-sheet .enhanced-tooltip-btn .tooltip-hint,
  #listings-sheet button.enhanced-tooltip-btn .tooltip-hint {
    font-size: 0.5rem !important; /* 8px text */
    transform: translateX(-40px) !important; /* Adjusted transform */
  }
}

/* ULTRA-SMALL PHONE: Even more compact Self Access/About buttons */
@media (max-width: 375px) {
  #listings-sheet .enhanced-tooltip-btn,
  #listings-sheet button.enhanced-tooltip-btn {
    width: 70px !important; /* Ultra-compact width */
    min-width: 70px !important;
    max-width: 70px !important;
    height: 18px !important; /* Ultra-compact height */
    max-height: 18px !important;
    padding: 0.1rem 0.2rem !important;
    font-size: 0.4375rem !important; /* 7px font */
  }
}

.enhanced-tooltip-btn:hover {
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  color: #1e40af !important;
}

.dark .enhanced-tooltip-btn {
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  color: #60a5fa !important;
}

.dark .enhanced-tooltip-btn:hover {
  background: rgba(59, 130, 246, 0.2) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
  color: #93c5fd !important;
}

/* Tooltip hint text styling */
.tooltip-hint {
  white-space: nowrap !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  transform: translateX(-35px) !important;
}

/* Calendar icon inside enhanced tooltip button */
.enhanced-tooltip-btn svg {
  transform: translateX(-35px) !important;
}

/* Availability schedule specific tooltip positioning and styling */
.availability-schedule-tooltip {
  position: fixed !important; /* CRITICAL: Fixed positioning escapes all stacking contexts */
  z-index: 2147483647 !important; /* MAXIMUM z-index value - higher than any policy element (999999) */
  min-width: 320px !important;
  max-width: 420px !important;
  width: auto !important;
  isolation: isolate !important; /* Create new stacking context */
  contain: none !important; /* Don't contain anything */
  transform: translateZ(999px) !important; /* Force hardware acceleration and new layer - high translateZ */
  background: white !important;
  border: 2px solid rgba(34, 197, 94, 0.2) !important;
  border-radius: 1rem !important;
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.3),
    0 15px 25px -5px rgba(34, 197, 94, 0.1),
    0 0 0 1px rgba(34, 197, 94, 0.05) !important;
  /* CRITICAL: Ensure proper dropdown positioning */
  transform-origin: top center !important;
  /* CRITICAL: Remove any inset property - use top/left/right/bottom instead */
  inset: unset !important;
  /* Initial hidden state - positioned off-screen to prevent flash at origin */
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-10px) scale(0.95) translateZ(999px) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  /* CRITICAL FIX: Initial positioning off-screen */
  top: -9999px !important;
  left: -9999px !important;
  right: auto !important;
  bottom: auto !important;
  will-change: transform, opacity, visibility !important;
}

/* Show state for availability schedule tooltip */
.availability-schedule-tooltip.show {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) translateZ(999px) !important; /* High translateZ to ensure it's above everything */
  inset: unset !important; /* CRITICAL: Remove any inset property - use top/left/right/bottom instead */
}

/* NUCLEAR OPTION: Force tooltip to appear above everything */
/* CRITICAL: Only apply pointer-events: auto when tooltip is shown */
body > .availability-schedule-tooltip.show,
.availability-schedule-tooltip.show {
  position: fixed !important; /* CRITICAL: Fixed positioning escapes all stacking contexts */
  z-index: 2147483647 !important; /* MAXIMUM z-index - higher than policy labels (which are -1) */
  isolation: isolate !important;
  contain: none !important;
  transform: translateZ(999px) !important;
  will-change: transform !important;
  pointer-events: auto !important;
}

/* Base state: Ensure hidden tooltips don't block interactions */
body > .availability-schedule-tooltip:not(.show),
.availability-schedule-tooltip:not(.show) {
  pointer-events: none !important; /* CRITICAL: Hidden tooltips must not block mouse events */
}

/* EXTREME: Force tooltip above cancellation policy specifically */
.availability-schedule-tooltip.show {
  position: fixed !important; /* CRITICAL: Fixed positioning escapes all stacking contexts */
  z-index: 2147483647 !important; /* MAXIMUM z-index - higher than policy labels (which are -1) */
  isolation: isolate !important;
  contain: none !important;
  transform: translateZ(999px) !important;
  will-change: transform !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  inset: unset !important; /* CRITICAL: Remove any inset property - use top/left/right/bottom instead */
}

/* Enhanced tooltip header styling */
.availability-schedule-tooltip .tooltip-header {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
  border-bottom: 2px solid rgba(34, 197, 94, 0.1) !important;
  padding: 1rem 1.25rem !important;
  border-radius: 1rem 1rem 0 0 !important;
}

.availability-schedule-tooltip .tooltip-title {
  color: #15803d !important;
  font-weight: 700 !important;
  font-size: 0.9375rem !important;
}

.availability-schedule-tooltip .tooltip-header svg {
  color: #22c55e !important;
}

/* Enhanced tooltip body styling */
.availability-schedule-tooltip .tooltip-body,
.enhanced-tooltip .tooltip-body {
  padding: 1.25rem !important;
  background: white !important;
  border-radius: 0 0 1rem 1rem !important;
  z-index: inherit !important; /* Inherit from parent tooltip */
  position: relative !important;
}

/* Improve green text visibility in availability schedule */
.availability-schedule-tooltip .text-green-400 {
  color: #16a34a !important; /* Much darker green for better contrast */
  font-weight: 600 !important;
}

.dark .availability-schedule-tooltip .text-green-300 {
  color: #22c55e !important; /* Brighter green for dark mode */
  font-weight: 600 !important;
}

/* Enhanced schedule row styling */
.availability-schedule-tooltip .flex.justify-between {
  padding: 0.75rem 0 !important;
  border-bottom: 1px solid rgba(34, 197, 94, 0.1) !important;
  transition: all 0.2s ease !important;
}

.availability-schedule-tooltip .flex.justify-between:hover {
  background: rgba(34, 197, 94, 0.05) !important;
  border-radius: 0.5rem !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

.availability-schedule-tooltip .flex.justify-between:last-child {
  border-bottom: none !important;
}

/* Day labels with better contrast */
.availability-schedule-tooltip .font-medium {
  letter-spacing: 0.01em !important;
  color: #1f2937 !important; /* Better contrast - gray-800 */
  font-weight: 600 !important;
  font-size: 0.875rem !important;
}

/* Time ranges with enhanced visibility */
.availability-schedule-tooltip .text-sm.font-semibold {
  letter-spacing: 0.02em !important;
  color: #16a34a !important;
  font-weight: 700 !important;
  font-size: 0.8125rem !important;
  text-shadow: none !important;
}

/* Dark mode enhancements */
.dark .availability-schedule-tooltip {
  background: #1f2937 !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}

.dark .availability-schedule-tooltip .tooltip-header {
  background: linear-gradient(135deg, #064e3b 0%, #065f46 100%) !important;
  border-bottom-color: rgba(34, 197, 94, 0.2) !important;
}

.dark .availability-schedule-tooltip .tooltip-title {
  color: #6ee7b7 !important;
}

.dark .availability-schedule-tooltip .tooltip-header svg {
  color: #34d399 !important;
}

.dark .availability-schedule-tooltip .tooltip-body {
  background: #1f2937 !important;
}

.dark .availability-schedule-tooltip .font-medium {
  color: #f3f4f6 !important;
}

.dark .availability-schedule-tooltip .flex.justify-between:hover {
  background: rgba(34, 197, 94, 0.1) !important;
}

/* Ensure elements that might cover the dropdown have lower z-index */
.luxury-pricing,
.luxury-pricing .price-option,
.spot-card,
.spot-card-body,
.luxury-info-grid,
.info-chip,
.luxury-features,
.luxury-description,
.luxury-policies,
.luxury-reviews {
  position: relative !important;
  z-index: var(--z-base) !important; /* Low z-index to stay below tooltip */
}

/* CRITICAL: Lower z-index for cancellation policy container to allow dropdown to appear on top */
.cancellation-policy-container,
.cancellation-policy-container *,
.policy-expandable,
.policy-expandable *,
.policy-expandable-content,
.policy-expandable-content *,
.policy-details,
.policy-details *,
.policy-label,
.policy-value {
  position: static !important; /* Remove positioning to prevent stacking context */
  z-index: -1 !important; /* NEGATIVE z-index - ensure it's below tooltip (999999) */
  isolation: auto !important; /* Don't create new stacking contexts */
  contain: none !important; /* Don't contain z-index */
  transform: none !important; /* Remove any transforms that create stacking contexts */
  will-change: auto !important; /* Remove will-change */
  opacity: 1 !important; /* Ensure opacity doesn't create stacking context */
  pointer-events: none !important; /* CRITICAL: Don't block tooltip interactions */
}

/* NUCLEAR OPTION: Force entire policy-expandable-trigger button to not block tooltips */
/* REMOVED: This rule conflicted with clickability - button needs positive z-index */

/* CRITICAL: Ensure button children (flex container, label, icon) don't block tooltips */
.policy-expandable-trigger > .flex,
.policy-expandable-trigger > div.flex,
.policy-expandable-trigger .flex.items-center,
.policy-expandable-trigger .policy-label,
.policy-expandable-trigger span.policy-label,
.policy-expandable-trigger .policy-icon,
.policy-expandable-trigger svg.policy-icon {
  pointer-events: none !important; /* Children don't block tooltips */
  z-index: 0 !important;
}

/* Chevron icon can remain interactive for visual feedback */
.policy-expandable-trigger .policy-chevron {
  pointer-events: none !important; /* Also don't block */
  z-index: 0 !important;
}

/* CAREFUL: Only flatten content containers, not layout containers */
.spot-details-container,
#listings-content-mobile {
  isolation: auto !important; /* Don't create new stacking contexts */
  contain: none !important; /* Don't contain z-index */
}

/* EXCEPTION: Bottom sheet must keep its positioning for proper functionality */
#listings-sheet {
  position: fixed !important; /* Bottom sheet needs fixed positioning */
  z-index: var(--z-sheet) !important; /* Restore proper z-index for bottom sheet */
  bottom: 0 !important; /* Anchor to bottom */
  left: 0 !important; /* Full width positioning */
  right: 0 !important; /* Full width positioning */
  height: 100vh !important; /* Full viewport height */
  max-height: 100vh !important; /* Constrain to viewport */
  /* Let JavaScript handle all transform positioning */
}

/* NUCLEAR: Specifically target the cancellation policy container */
/* CRITICAL: Only set pointer-events: none on elements that shouldn't be interactive */
.cancellation-policy-container.bg-gray-50,
.cancellation-policy-container.bg-gray-50 .policy-details,
.cancellation-policy-container.bg-gray-50 .policy-details *,
.cancellation-policy-container.bg-gray-50 .policy-label,
.cancellation-policy-container.bg-gray-50 .policy-value {
  position: static !important;
  z-index: -1 !important; /* NEGATIVE z-index - ensure below tooltip (999999) */
  isolation: auto !important;
  contain: none !important;
  transform: none !important;
  will-change: auto !important;
  opacity: 1 !important;
  pointer-events: none !important; /* Don't block tooltips */
}

/* CRITICAL: Policy trigger button MUST be clickable but below tooltips */
.cancellation-policy-container .policy-expandable-trigger {
  position: relative !important;
  z-index: 1 !important; /* Low positive z-index - clickable but below tooltips */
  isolation: auto !important;
  pointer-events: auto !important; /* CRITICAL: Button must be clickable */
  cursor: pointer !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Policy label and icon inside button - allow clicks to pass through to button */
/* CRITICAL: Policy label text must NOT create stacking context or block tooltips */
.policy-expandable-trigger .policy-label,
.policy-expandable-trigger span.policy-label,
.policy-expandable-trigger .policy-label[style*="pointer-events"],
.policy-expandable-trigger span.policy-label[style*="pointer-events"],
.policy-expandable-trigger span[class*="policy-label"],
.policy-expandable-trigger .policy-label[style],
.policy-expandable-trigger span.policy-label[style],
.policy-expandable-trigger .flex .policy-label,
.policy-expandable-trigger .flex span.policy-label,
.policy-expandable-trigger div.flex .policy-label,
.policy-expandable-trigger div.flex span.policy-label {
  position: static !important; /* No positioning - prevents stacking context */
  z-index: -9999 !important; /* Extremely negative z-index - well below tooltips */
  isolation: auto !important; /* Don't create stacking context */
  contain: none !important; /* Don't contain anything */
  transform: none !important; /* No transforms that create stacking contexts */
  will-change: auto !important; /* No will-change */
  opacity: 1 !important; /* Visible but don't create stacking context */
  pointer-events: none !important; /* CRITICAL: Don't intercept mouse events */
  pointer-events: none !important; /* Double declaration for maximum override */
  mix-blend-mode: normal !important; /* Don't create stacking context */
  filter: none !important; /* Don't create stacking context */
  backdrop-filter: none !important; /* Don't create stacking context */
}

/* Flex container inside button - allow clicks to pass through */
.policy-expandable-trigger .flex.items-center,
.policy-expandable-trigger > div.flex,
.policy-expandable-trigger div.flex.items-center.gap-2,
.policy-expandable-trigger div[class*="flex"][class*="items-center"],
.policy-expandable-trigger .flex.items-center[style*="pointer-events"],
.policy-expandable-trigger div.flex[style*="pointer-events"] {
  z-index: 0 !important;
  isolation: auto !important;
  pointer-events: none !important; /* Clicks pass through to button */
}

/* Policy icon inside button - allow clicks to pass through */
.policy-expandable-trigger .policy-icon,
.policy-expandable-trigger svg.policy-icon {
  pointer-events: none !important; /* Clicks pass through to button */
}

/* Policy chevron inside button - allow clicks to pass through */
.policy-expandable-trigger .policy-chevron,
.policy-expandable-trigger svg.policy-chevron {
  pointer-events: none !important; /* Clicks pass through to button */
}

/* Policy trigger itself must remain clickable but stay below tooltips - FINAL RULE */
.policy-expandable-trigger {
  position: relative !important; /* Keep relative for click handling */
  z-index: 1 !important; /* LOW z-index - clickable but below tooltips (2147483647) */
  isolation: auto !important; /* Don't create new stacking contexts */
  pointer-events: auto !important; /* CRITICAL: Keep trigger clickable */
  cursor: pointer !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: transparent !important;
  border: none !important;
  text-align: left !important;
}

/* CRITICAL: Override any inline styles that set high z-index */
.policy-expandable-trigger[style*="z-index"] {
  z-index: 1 !important; /* Force low z-index even if inline style sets higher */
}

/* Desktop overlay: Ensure cancellation policy button is clickable but below tooltips */
@media (min-width: 1024px) {
  dialog#spot-detail-view .policy-expandable-trigger {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 1 !important; /* Low z-index - below tooltips */
    position: relative !important;
  }
  
  /* Override inline styles */
  dialog#spot-detail-view .policy-expandable-trigger[style*="z-index"] {
    z-index: 1 !important; /* Force low z-index even if inline style sets higher */
  }
  
  dialog#spot-detail-view .policy-expandable-trigger .flex,
  dialog#spot-detail-view .policy-expandable-trigger .policy-icon,
  dialog#spot-detail-view .policy-expandable-trigger .policy-chevron {
    pointer-events: none !important; /* Clicks pass through to button */
  }
  
  /* CRITICAL: Desktop overlay policy label - must NOT block tooltips */
  dialog#spot-detail-view .policy-expandable-trigger .policy-label,
  dialog#spot-detail-view .policy-expandable-trigger span.policy-label,
  dialog#spot-detail-view .policy-expandable-trigger .policy-label[style],
  dialog#spot-detail-view .policy-expandable-trigger span.policy-label[style],
  dialog#spot-detail-view .policy-expandable-trigger span[class*="policy-label"],
  dialog#spot-detail-view .policy-expandable-trigger .flex .policy-label,
  dialog#spot-detail-view .policy-expandable-trigger .flex span.policy-label,
  dialog#spot-detail-view .policy-expandable-trigger div.flex .policy-label,
  dialog#spot-detail-view .policy-expandable-trigger div.flex span.policy-label {
    position: static !important; /* No positioning - prevents stacking context */
    z-index: -9999 !important; /* Extremely negative z-index - well below tooltips */
    isolation: auto !important; /* Don't create stacking context */
    contain: none !important; /* Don't contain anything */
    transform: none !important; /* No transforms that create stacking contexts */
    will-change: auto !important; /* No will-change */
    opacity: 1 !important; /* Visible but don't create stacking context */
    pointer-events: none !important; /* CRITICAL: Don't intercept mouse events */
    mix-blend-mode: normal !important; /* Don't create stacking context */
    filter: none !important; /* Don't create stacking context */
    backdrop-filter: none !important; /* Don't create stacking context */
  }
}

/* Cancellation Policy Tooltip - ensure it appears above everything */
[id^="cancellation-tooltip-"] {
  z-index: 2147483647 !important; /* Maximum z-index to appear above stars and policy labels */
  isolation: isolate !important; /* Create new stacking context */
  position: fixed !important;
}

/* EXTREME: Force cancellation policy expanded content to stay below tooltip */
.policy-expandable.expanded,
.policy-expandable.expanded .policy-expandable-content,
.policy-expandable.expanded .policy-details {
  position: static !important;
  z-index: auto !important;
  isolation: auto !important;
  contain: none !important;
  transform: none !important;
  will-change: auto !important;
  opacity: 1 !important;
}

/* CRITICAL: Ensure dialog itself doesn't scroll - only content area should scroll */
dialog#spot-detail-view {
  overflow: hidden !important; /* Dialog itself should not scroll */
  display: flex !important;
  flex-direction: column !important;
}

/* CRITICAL: Ensure spot detail view container doesn't interfere */
.spot-details-container {
  position: relative !important;
  z-index: var(--z-base) !important; /* Low z-index to stay below tooltip */
  overflow-y: hidden !important; /* Prevent vertical scrollbars - content flows naturally */
  overflow-x: visible !important; /* CRITICAL: Allow photo navigation buttons to extend horizontally */
  max-width: 100% !important; /* Prevent container from expanding beyond parent */
  height: auto !important; /* Let content determine height */
  isolation: auto !important; /* CRITICAL: Don't create stacking context that traps photo navigation buttons */
  contain: none !important; /* CRITICAL: Don't contain layout/style/paint - allow buttons to escape */
}

/* CRITICAL: Bottom sheet - ensure spot-details-container never scrolls */
#listings-sheet .spot-details-container {
  overflow: visible !important; /* CRITICAL: Never scroll - parent handles scrolling */
  overflow-y: visible !important;
  overflow-x: visible !important;
  max-height: none !important;
  height: auto !important;
}

/* CRITICAL: Only the content area should scroll */
#spot-detail-content {
  position: relative !important;
  z-index: inherit !important; /* Inherit from parent spot-detail-view */
  overflow-y: auto !important; /* ONLY this element should scroll */
  overflow-x: visible !important; /* CRITICAL: Allow photo gallery buttons to extend horizontally */
  flex: 1 !important; /* Take remaining space in flex container */
  min-height: 0 !important; /* Allow flex shrinking */
  max-height: none !important; /* Remove max-height constraint - let flex handle it */
}

/* CRITICAL: Ensure photo gallery buttons are not clipped */
#spot-detail-content .photo-gallery-compact.photo-carousel,
#spot-detail-view .photo-gallery-compact.photo-carousel,
.spot-details-container .photo-gallery-compact.photo-carousel,
#listings-sheet .photo-gallery-compact.photo-carousel {
  overflow: visible !important;
  position: relative !important; /* CRITICAL: Position context for absolutely positioned buttons */
  isolation: auto !important; /* CRITICAL: Don't create stacking context that traps buttons */
  contain: none !important; /* CRITICAL: Don't contain layout/style/paint - allow buttons to escape */
  z-index: auto !important; /* Don't interfere with button z-index */
}

/* Spot details book button - make it less wide */
/* CRITICAL: Exclude .photo-book-btn which needs position: absolute for photo overlay */
#spot-detail-book:not(.photo-book-btn),
button#spot-detail-book:not(.photo-book-btn),
.btn-primary#spot-detail-book:not(.photo-book-btn) {
  width: auto !important;
  max-width: 300px !important;
  display: flex !important;
  padding-left: 0.75rem !important; /* Reduce horizontal padding from px-4 (1rem) to 0.75rem */
  padding-right: 0.75rem !important;
  position: relative !important;
  z-index: var(--z-high-modal) !important; /* Ensure button is above photo indicators */
  pointer-events: auto !important;
}

/* Photo overlay book button - must stay absolutely positioned at bottom */
#spot-detail-book.photo-book-btn,
button#spot-detail-book.photo-book-btn {
  position: absolute !important;
  bottom: 8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 15 !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: auto !important; /* CRITICAL: Override w-full if present */
  max-width: none !important; /* Allow button to size naturally */
}

/* Ensure button container centers the button */
#spot-detail-book[class*="w-full"],
.w-full #spot-detail-book {
  width: auto !important;
  max-width: 204px !important;
}

/* Center the button container (gradient background div) - match button width */
.mb-6.bg-gradient-to-r.from-blue-50.to-blue-100,
.mb-6.bg-gradient-to-r.from-blue-50.to-blue-100.dark\:from-blue-900\/20.dark\:to-blue-800\/20 {
  width: auto !important;
  max-width: 300px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  transform: translateY(-0.25rem) !important; /* Small upward transform */
}

/* MOBILE: CRITICAL FIX - Prevent element overlap in bottom sheet spot details */
@media (max-width: 520px) {
  /* Bottom sheet spot details container - PROPER VERTICAL STACKING */
  #listings-sheet .spot-details-container {
    padding: 0.5rem !important;
    display: flex !important;
    flex-direction: column !important; /* CRITICAL: Vertical stacking */
    gap: 0.75rem !important; /* Consistent gap between sections */
  }

  /* CRITICAL: All sections should be block-level, no overlap */
  #listings-sheet .spot-details-container > * {
    position: relative !important; /* No absolute positioning */
    transform: none !important; /* CRITICAL: Remove all transforms that cause overlap */
    flex-shrink: 0 !important; /* Don't compress sections */
  }

  /* Photo gallery - proper sizing, no overlap */
  #listings-sheet .spot-details-container .photo-gallery-compact {
    margin-bottom: 0.5rem !important;
    border-radius: 0.5rem !important;
    max-height: 150px !important; /* Limit height */
    min-height: 100px !important;
    aspect-ratio: 16/7 !important; /* Wider, shorter aspect */
  }

  /* Luxury header - compact */
  #listings-sheet .spot-details-container .luxury-header {
    margin-bottom: 0.5rem !important;
  }

  /* CRITICAL: Features section - proper block layout, NO overlap */
  #listings-sheet .spot-details-container .luxury-features {
    display: block !important;
    position: relative !important;
    transform: none !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    padding: 0.375rem 0 !important;
  }

  /* Feature chips container - small right transform for alignment */
  #listings-sheet .spot-details-container .feature-chips,
  #listings-sheet .luxury-features .feature-chips {
    transform: translateX(2.375rem) !important; /* Small right transform */
    margin-left: 0 !important;
    padding-left: 0 !important;
    gap: 0.375rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
  }

  /* CRITICAL: About/Description section - proper stacking */
  #listings-sheet .spot-details-container .luxury-description {
    display: block !important;
    position: relative !important;
    transform: none !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    padding: 0.375rem 0 !important;
  }

  /* Section labels - readable sizing */
  #listings-sheet .spot-details-container .section-label {
    transform: none !important;
    margin-left: 0 !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.5625rem !important; /* 9px - compact */
    margin-bottom: 0.375rem !important;
    gap: 0.25rem !important; /* Comfortable gap */
  }
  
  /* Readable ICONS for Features, About, Self Access section labels */
  #listings-sheet .spot-details-container .section-label svg,
  #listings-sheet .luxury-features .section-label svg,
  #listings-sheet .luxury-description .section-label svg {
    width: 0.625rem !important; /* 10px - readable */
    height: 0.625rem !important;
    min-width: 0.625rem !important;
    min-height: 0.625rem !important;
    max-width: 0.625rem !important;
    max-height: 0.625rem !important;
    flex-shrink: 0 !important;
  }
  
  /* Section label text - compact */
  #listings-sheet .spot-details-container .section-label span,
  #listings-sheet .luxury-features .section-label span,
  #listings-sheet .luxury-description .section-label span {
    font-size: 0.5625rem !important; /* 9px - compact */
    line-height: 1.2 !important;
  }
  
  /* WIDER CONTAINERS for Features and About sections to fit content */
  #listings-sheet .spot-details-container .luxury-features,
  #listings-sheet .spot-details-container .luxury-description {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }
  
  /* Feature chips container - use full width */
  #listings-sheet .spot-details-container .feature-chips {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
  }
  
  /* Description text container - full width */
  #listings-sheet .spot-details-container .luxury-description .description-text,
  #listings-sheet .spot-details-container .luxury-description p {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Info sections - compact spacing */
  #listings-sheet .spot-details-container .luxury-info-grid,
  #listings-sheet .spot-details-container .info-section {
    margin-bottom: 0.5rem !important;
    gap: 0.5rem !important;
  }

  /* Reviews section - compact spacing */
  #listings-sheet .spot-details-container .reviews-section {
    margin-bottom: 0.5rem !important;
  }

  /* Book button container - NO overlap, proper stacking */
  #listings-sheet .spot-details-container .mb-6.bg-gradient-to-r.from-blue-50.to-blue-100,
  #listings-sheet .spot-details-container div.mb-6[class*="bg-gradient-to-r"][class*="from-blue-50"],
  #listings-sheet .spot-details-container div.mb-6:has(#spot-detail-book),
  #listings-sheet .mb-6.bg-gradient-to-r.from-blue-50.to-blue-100:has(#spot-detail-book) {
    position: relative !important;
    transform: none !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    z-index: 10 !important;
  }

  /* Pricing section - compact */
  #listings-sheet .spot-details-container .pricing-section {
    margin-bottom: 0.5rem !important;
    padding: 0.5rem !important;
  }

  /* Cancellation policy - compact */
  #listings-sheet .spot-details-container .cancellation-policy-container {
    margin-bottom: 0.5rem !important;
    padding: 0.5rem !important;
  }

  /* Duration section - compact */
  #listings-sheet .spot-details-container #smart-duration-section {
    margin-bottom: 0.5rem !important;
  }
}

/* ULTRA-SMALL PHONE: Even more compact, no overlap */
@media (max-width: 375px) {
  #listings-sheet .spot-details-container {
    padding: 0.375rem !important;
    gap: 0.5rem !important;
  }

  #listings-sheet .spot-details-container .photo-gallery-compact {
    max-height: 120px !important;
    min-height: 80px !important;
  }

  #listings-sheet .spot-details-container .luxury-features,
  #listings-sheet .spot-details-container .luxury-description {
    padding: 0.25rem 0 !important;
    margin-top: 0.375rem !important;
    margin-bottom: 0.375rem !important;
  }
  
  /* Compact but readable section labels on ultra-small phones */
  #listings-sheet .spot-details-container .section-label {
    padding: 0.1875rem 0.375rem !important;
    font-size: 0.5625rem !important; /* 9px - still readable */
    gap: 0.1875rem !important;
  }
  
  /* Compact ICONS for Features, About, Self Access on ultra-small phones */
  #listings-sheet .spot-details-container .section-label svg,
  #listings-sheet .luxury-features .section-label svg,
  #listings-sheet .luxury-description .section-label svg {
    width: 0.5625rem !important; /* 9px - readable */
    height: 0.5625rem !important;
    min-width: 0.5625rem !important;
    min-height: 0.5625rem !important;
    max-width: 0.5625rem !important;
    max-height: 0.5625rem !important;
  }
  
  /* Section label text - compact but readable */
  #listings-sheet .spot-details-container .section-label span {
    font-size: 0.5625rem !important; /* 9px */
  }
}

/* Desktop overlay: Center the book button container */
@media (min-width: 1024px) {
  dialog#spot-detail-view .mb-6.bg-gradient-to-r.from-blue-50.to-blue-100,
  dialog#spot-detail-view div.mb-6[class*="bg-gradient-to-r"][class*="from-blue-50"],
  dialog#spot-detail-view div.mb-6:has(#spot-detail-book) {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    width: auto !important;
    max-width: 196px !important;
    transform: translateY(-0.25rem) !important; /* Small upward transform */
  }

  /* Desktop overlay: Center the book button itself */
  dialog#spot-detail-view #spot-detail-book,
  dialog#spot-detail-view button#spot-detail-book {
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    width: auto !important;
    max-width: 300px !important;
  }
}

/* CRITICAL: Ensure booking confirmation modal is always visible and centered */
#custom-confirm-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: var(--z-maximum) !important; /* Maximum z-index */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(4px) !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* TOUCH MOBILE: Shift confirm modal content slightly left */
@media (hover: none) and (pointer: coarse) and (max-width: 1023px) {
  #custom-confirm-modal > div {
    transform: translateX(-8px) !important; /* Small left offset on touch mobile */
  }
}
/* CRITICAL: Ensure proper contrast on dark overlays and backgrounds */
.dark *[style*="background: rgba(0"],
.dark *[style*="background-color: rgba(0"],
html.dark *[style*="background: rgba(0"],
html.dark *[style*="background-color: rgba(0"],
body.dark *[style*="background: rgba(0"],
body.dark *[style*="background-color: rgba(0"] {
  color: #f9fafb !important; /* Light text on dark backgrounds */
}

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

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

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

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

/* ========================================
 * FIX: WHITE TEXT ON WHITE BACKGROUND ISSUE
 * ======================================== */
/* CRITICAL FIX: Override white text in spot details to ensure proper contrast */
#spot-detail-view p[style*="color: rgb(255, 255, 255)"],
#spot-detail-view *[style*="color: rgb(255, 255, 255)"],
#spot-detail-content p[style*="color: rgb(255, 255, 255)"],
#spot-detail-content *[style*="color: rgb(255, 255, 255)"] {
  color: #1f2937 !important; /* Dark gray for light backgrounds */
}

/* Dark mode: Ensure proper contrast in dark mode */
.dark #spot-detail-view p[style*="color: rgb(255, 255, 255)"],
.dark #spot-detail-view *[style*="color: rgb(255, 255, 255)"],
.dark #spot-detail-content p[style*="color: rgb(255, 255, 255)"],
.dark #spot-detail-content *[style*="color: rgb(255, 255, 255)"] {
  color: #f3f4f6 !important; /* Light gray for dark backgrounds */
}

/* SPECIFIC FIX: Target the microcopy text specifically */
#spot-detail-view .text-gray-800.dark\\:text-gray-200[style*="color: rgb(255, 255, 255)"],
#spot-detail-content .text-gray-800.dark\\:text-gray-200[style*="color: rgb(255, 255, 255)"] {
  color: #1f2937 !important; /* Force dark text on light background */
}

.dark #spot-detail-view .text-gray-800.dark\\:text-gray-200[style*="color: rgb(255, 255, 255)"],
.dark #spot-detail-content .text-gray-800.dark\\:text-gray-200[style*="color: rgb(255, 255, 255)"] {
  color: #e5e7eb !important; /* Force light text on dark background */
}

/* CRITICAL FIX: Override white backgrounds in dark mode for spot detail view */
.dark #spot-detail-view .bg-white,
.dark #spot-detail-content .bg-white,
.dark #spot-detail-view header.bg-white,
.dark #spot-detail-view .bg-gradient-to-r.from-blue-50.to-white,
html.dark #spot-detail-view .bg-white,
html.dark #spot-detail-content .bg-white,
html.dark #spot-detail-view header.bg-white,
body.dark #spot-detail-view .bg-white,
body.dark #spot-detail-content .bg-white,
body.dark #spot-detail-view header.bg-white {
  background-color: rgb(31 41 55) !important; /* bg-neutral-800 */
  background-image: none !important;
}

/* Fix gradient backgrounds in dark mode - target desktop header */
.dark #spot-detail-view div.hidden.lg\\:flex[class*="bg-gradient-to-r"],
.dark #spot-detail-view div[class*="from-blue-50"][class*="to-white"],
.dark #spot-detail-view div[class*="from-blue-50"][class*="to-blue-50"],
html.dark #spot-detail-view div.hidden.lg\\:flex[class*="bg-gradient-to-r"],
html.dark #spot-detail-view div[class*="from-blue-50"][class*="to-white"],
html.dark #spot-detail-view div[class*="from-blue-50"][class*="to-blue-50"],
body.dark #spot-detail-view div.hidden.lg\\:flex[class*="bg-gradient-to-r"],
body.dark #spot-detail-view div[class*="from-blue-50"][class*="to-white"],
body.dark #spot-detail-view div[class*="from-blue-50"][class*="to-blue-50"] {
  background-image: linear-gradient(to right, rgb(30 58 138 / 0.2), rgb(31 41 55)) !important;
}

/* Fix duration chip text colors in dark mode - override inline styles */
.dark #spot-detail-view .duration-chip[style*="color: #111827"],
.dark #spot-detail-content .duration-chip[style*="color: #111827"],
.dark #spot-detail-view .duration-chip[style*="color: rgb(17, 24, 39)"],
.dark #spot-detail-content .duration-chip[style*="color: rgb(17, 24, 39)"],
html.dark #spot-detail-view .duration-chip[style*="color: #111827"],
html.dark #spot-detail-content .duration-chip[style*="color: #111827"],
body.dark #spot-detail-view .duration-chip[style*="color: #111827"],
body.dark #spot-detail-content .duration-chip[style*="color: #111827"] {
  color: rgb(226 232 240) !important; /* text-slate-200 */
}

/* Fix any other white backgrounds */
.dark #spot-detail-view .bg-gray-50,
.dark #spot-detail-content .bg-gray-50,
.dark #spot-detail-view .bg-blue-50,
.dark #spot-detail-content .bg-blue-50 {
  background-color: rgb(31 41 55) !important; /* bg-neutral-800 */
}

/* Fix smart duration section background */
.dark #spot-detail-view #smart-duration-section.bg-gray-50,
.dark #spot-detail-content #smart-duration-section.bg-gray-50,
.dark #spot-detail-view #smart-duration-section.bg-blue-50,
.dark #spot-detail-content #smart-duration-section.bg-blue-50,
html.dark #spot-detail-view #smart-duration-section.bg-gray-50,
html.dark #spot-detail-content #smart-duration-section.bg-gray-50,
html.dark #spot-detail-view #smart-duration-section.bg-blue-50,
html.dark #spot-detail-content #smart-duration-section.bg-blue-50,
body.dark #spot-detail-view #smart-duration-section.bg-gray-50,
body.dark #spot-detail-content #smart-duration-section.bg-gray-50,
body.dark #spot-detail-view #smart-duration-section.bg-blue-50,
body.dark #spot-detail-content #smart-duration-section.bg-blue-50 {
  background-color: rgb(31 41 55) !important; /* bg-neutral-800 */
}

/* Fix cancellation policy container white background */
.dark #spot-detail-view .cancellation-policy-container.bg-gray-50,
.dark #spot-detail-content .cancellation-policy-container.bg-gray-50,
html.dark #spot-detail-view .cancellation-policy-container.bg-gray-50,
html.dark #spot-detail-content .cancellation-policy-container.bg-gray-50,
body.dark #spot-detail-view .cancellation-policy-container.bg-gray-50,
body.dark #spot-detail-content .cancellation-policy-container.bg-gray-50 {
  background-color: rgb(31 41 55) !important; /* bg-neutral-800 */
}

/* Fix reviews section white background */
.dark #spot-detail-view .reviews-section .bg-gray-50,
.dark #spot-detail-content .reviews-section .bg-gray-50,
html.dark #spot-detail-view .reviews-section .bg-gray-50,
html.dark #spot-detail-content .reviews-section .bg-gray-50,
body.dark #spot-detail-view .reviews-section .bg-gray-50,
body.dark #spot-detail-content .reviews-section .bg-gray-50 {
  background-color: rgb(31 41 55) !important; /* bg-neutral-800 */
}

/* Fix book button container gradient */
.dark #spot-detail-view .mb-6.bg-gradient-to-r.from-blue-50.to-blue-100,
.dark #spot-detail-content .mb-6.bg-gradient-to-r.from-blue-50.to-blue-100,
html.dark #spot-detail-view .mb-6.bg-gradient-to-r.from-blue-50.to-blue-100,
html.dark #spot-detail-content .mb-6.bg-gradient-to-r.from-blue-50.to-blue-100,
body.dark #spot-detail-view .mb-6.bg-gradient-to-r.from-blue-50.to-blue-100,
body.dark #spot-detail-content .mb-6.bg-gradient-to-r.from-blue-50.to-blue-100 {
  background-image: linear-gradient(to right, rgb(30 58 138 / 0.2), rgb(30 58 138 / 0.2)) !important;
}

/* Fix mobile header white background */
.dark #spot-detail-view header.lg\\:hidden.bg-white,
.dark #spot-detail-view header[class*="lg:hidden"].bg-white,
html.dark #spot-detail-view header.lg\\:hidden.bg-white,
html.dark #spot-detail-view header[class*="lg:hidden"].bg-white,
body.dark #spot-detail-view header.lg\\:hidden.bg-white,
body.dark #spot-detail-view header[class*="lg:hidden"].bg-white {
  background-color: rgb(31 41 55) !important; /* bg-neutral-800 */
}

/* Comprehensive fix: Override any white background in spot detail view */
.dark #spot-detail-view [class*="bg-white"],
.dark #spot-detail-content [class*="bg-white"],
html.dark #spot-detail-view [class*="bg-white"],
html.dark #spot-detail-content [class*="bg-white"],
body.dark #spot-detail-view [class*="bg-white"],
body.dark #spot-detail-content [class*="bg-white"] {
  background-color: rgb(31 41 55) !important; /* bg-neutral-800 */
}

/* Fix duration section text color in dark mode */
.dark #spot-detail-view #smart-duration-section p[style*="color: #374151"],
.dark #spot-detail-content #smart-duration-section p[style*="color: #374151"],
html.dark #spot-detail-view #smart-duration-section p[style*="color: #374151"],
html.dark #spot-detail-content #smart-duration-section p[style*="color: #374151"],
body.dark #spot-detail-view #smart-duration-section p[style*="color: #374151"],
body.dark #spot-detail-content #smart-duration-section p[style*="color: #374151"] {
  color: rgb(209 213 219) !important; /* text-gray-300 */
}

/* ENHANCED FIX: Target the specific "You can extend your booking anytime" text */
#spot-detail-view p.text-sm.text-gray-800.dark\\:text-gray-200.font-medium[style*="color: rgb(255, 255, 255)"],
#spot-detail-content p.text-sm.text-gray-800.dark\\:text-gray-200.font-medium[style*="color: rgb(255, 255, 255)"],
#spot-detail-view .text-sm.text-gray-800.dark\\:text-gray-200.font-medium[style*="color: rgb(255, 255, 255)"],
#spot-detail-content .text-sm.text-gray-800.dark\\:text-gray-200.font-medium[style*="color: rgb(255, 255, 255)"] {
  color: #1f2937 !important; /* Dark gray for light backgrounds */
}

/* Dark mode version for the enhanced fix */
.dark #spot-detail-view p.text-sm.text-gray-800.dark\\:text-gray-200.font-medium[style*="color: rgb(255, 255, 255)"],
.dark #spot-detail-content p.text-sm.text-gray-800.dark\\:text-gray-200.font-medium[style*="color: rgb(255, 255, 255)"],
.dark #spot-detail-view .text-sm.text-gray-800.dark\\:text-gray-200.font-medium[style*="color: rgb(255, 255, 255)"],
.dark #spot-detail-content .text-sm.text-gray-800.dark\\:text-gray-200.font-medium[style*="color: rgb(255, 255, 255)"] {
  color: #f3f4f6 !important; /* Light gray for dark backgrounds */
}

/* COMPREHENSIVE FIX: Target all possible variations of white text in spot details */
#spot-detail-view p[style*="color: rgb(255, 255, 255)"],
#spot-detail-view span[style*="color: rgb(255, 255, 255)"],
#spot-detail-view div[style*="color: rgb(255, 255, 255)"],
#spot-detail-content p[style*="color: rgb(255, 255, 255)"],
#spot-detail-content span[style*="color: rgb(255, 255, 255)"],
#spot-detail-content div[style*="color: rgb(255, 255, 255)"],
/* Target by common classes used in microcopy */
#spot-detail-view .text-sm[style*="color: rgb(255, 255, 255)"],
#spot-detail-view .font-medium[style*="color: rgb(255, 255, 255)"],
#spot-detail-content .text-sm[style*="color: rgb(255, 255, 255)"],
#spot-detail-content .font-medium[style*="color: rgb(255, 255, 255)"] {
  color: #1f2937 !important; /* Force dark text for readability */
}

/* Dark mode versions */
.dark #spot-detail-view p[style*="color: rgb(255, 255, 255)"],
.dark #spot-detail-view span[style*="color: rgb(255, 255, 255)"],
.dark #spot-detail-view div[style*="color: rgb(255, 255, 255)"],
.dark #spot-detail-content p[style*="color: rgb(255, 255, 255)"],
.dark #spot-detail-content span[style*="color: rgb(255, 255, 255)"],
.dark #spot-detail-content div[style*="color: rgb(255, 255, 255)"],
.dark #spot-detail-view .text-sm[style*="color: rgb(255, 255, 255)"],
.dark #spot-detail-view .font-medium[style*="color: rgb(255, 255, 255)"],
.dark #spot-detail-content .text-sm[style*="color: rgb(255, 255, 255)"],
.dark #spot-detail-content .font-medium[style*="color: rgb(255, 255, 255)"] {
  color: #f3f4f6 !important; /* Force light text for dark mode */
}

/* ============================================================================
   CRITICAL: Fix emerald text color in confirmation modal - MAXIMUM SPECIFICITY
   Override all white text rules to ensure emerald color is visible
   ============================================================================ */
/* Light mode - emerald-600 */
#custom-confirm-modal .text-emerald-600,
#custom-confirm-modal span.text-emerald-600,
#custom-confirm-modal .text-emerald-600.dark\:text-emerald-400,
#custom-confirm-modal span.text-emerald-600.dark\:text-emerald-400,
#custom-confirm-modal *[class*="text-emerald-600"],
#custom-confirm-modal span[class*="text-emerald-600"] {
  color: rgb(5, 150, 105) !important; /* emerald-600 - visible green */
}

/* Override white text rules specifically for emerald text in modal */
.dark #custom-confirm-modal .text-emerald-600,
.dark #custom-confirm-modal span.text-emerald-600,
.dark #custom-confirm-modal .text-emerald-600.dark\:text-emerald-400,
.dark #custom-confirm-modal span.text-emerald-600.dark\:text-emerald-400,
html.dark #custom-confirm-modal .text-emerald-600,
html.dark #custom-confirm-modal span.text-emerald-600,
body.dark #custom-confirm-modal .text-emerald-600,
body.dark #custom-confirm-modal span.text-emerald-600,
.dark #custom-confirm-modal *[class*="text-emerald"],
html.dark #custom-confirm-modal *[class*="text-emerald"],
body.dark #custom-confirm-modal *[class*="text-emerald"] {
  color: rgb(52, 211, 153) !important; /* emerald-400 - lighter green for dark mode */
}

/* Override any inline style white color on emerald text */
#custom-confirm-modal .text-emerald-600[style*="color"],
#custom-confirm-modal span.text-emerald-600[style*="color"],
.dark #custom-confirm-modal .text-emerald-600[style*="color"],
.dark #custom-confirm-modal span.text-emerald-600[style*="color"],
html.dark #custom-confirm-modal .text-emerald-600[style*="color"],
html.dark #custom-confirm-modal span.text-emerald-600[style*="color"] {
  color: rgb(5, 150, 105) !important; /* Force emerald-600 in light mode */
}

.dark #custom-confirm-modal .text-emerald-600[style*="color"],
.dark #custom-confirm-modal span.text-emerald-600[style*="color"],
html.dark #custom-confirm-modal .text-emerald-600[style*="color"],
html.dark #custom-confirm-modal span.text-emerald-600[style*="color"] {
  color: rgb(52, 211, 153) !important; /* Force emerald-400 in dark mode */
}

/* Star Rating Container - Support for partial fill stars */
.star-container {
  position: relative;
  display: inline-block;
  line-height: 0;
  width: 1em;
  height: 1em;
  overflow: visible !important; /* CRITICAL: Allow clip-path to work */
  z-index: 0 !important; /* Low z-index to stay below tooltips */
  pointer-events: none !important; /* CRITICAL: Don't block tooltip interactions */
}

.star-container svg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible !important; /* CRITICAL: Allow clip-path to work */
}

/* CRITICAL: Base stars (always gray) - Low z-index to stay below tooltips */
.star-container svg.star-base,
.star-container svg[data-star-type="base"] {
  color: #d1d5db !important; /* Force gray-300 */
  fill: #d1d5db !important; /* Also set fill directly */
  z-index: 0 !important;
  position: absolute !important; /* CRITICAL: Must be absolute to layer properly */
  top: 0 !important;
  left: 0 !important;
  pointer-events: none !important; /* CRITICAL: Don't block tooltip interactions */
}

/* CRITICAL: Overlay stars (yellow when present) - Low z-index to stay below tooltips */
.star-container svg.star-overlay,
.star-container svg[data-star-type="overlay"] {
  color: #facc15 !important; /* Force yellow-400 */
  fill: #facc15 !important; /* Also set fill directly */
  z-index: 1 !important;
  position: absolute !important; /* CRITICAL: Must be absolute to layer on top of base */
  top: 0 !important;
  left: 0 !important;
  overflow: visible !important; /* CRITICAL: Allow clip-path to work */
  pointer-events: none !important; /* Prevent blocking interactions */
}

/* Ensure filled overlay is above base star */
.star-container svg[style*="clip-path"] {
  z-index: 1 !important;
  overflow: visible !important; /* CRITICAL: Allow clip-path to work */
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  pointer-events: none !important; /* CRITICAL: Don't block tooltip interactions */
}

/* CRITICAL: Ensure overlay stars are always visible when present */
.star-container:has(svg.star-overlay) svg.star-overlay,
.star-container:has(svg[data-star-type="overlay"]) svg[data-star-type="overlay"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Dark mode support for star ratings */
html.dark .star-container {
  color: rgb(209, 213, 219);
}

html.dark .star-container svg:not([style*="clip-path"]) {
  color: #6b7280 !important; /* Darker gray for dark mode base stars */
}

html.dark .star-container svg[style*="clip-path"],
html.dark .star-container svg[style*="#facc15"],
html.dark .star-container svg[style*="rgb(250, 204, 21)"] {
  color: rgb(250, 204, 21) !important; /* Keep yellow in dark mode */
}

html.dark .star-container svg[style*="rgb(209, 213, 219)"] {
  color: rgb(75, 85, 99) !important;
}