/* ============================================================================
 * 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 use the shared Discover premium accent system
 * - 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
 * ========================================================================= */

/* LUXURY CARD COMPONENT - Server-rendered spot detail sections */

.spot-detail-content-wrapper {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}

.luxury-header {
  margin-bottom: 1rem;
}

.spot-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.stall-number-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 1rem;
  background: var(--discover-premium-wash);
  border: 1px solid var(--discover-premium-line);
  border-radius: 6px;
  color: var(--discover-premium-ink);
  font-size: 0.7rem;
  font-weight: 500;
}

body.discover-page .show-more-reviews-btn {
  background: var(--discover-premium-wash);
  border: 1px solid var(--discover-premium-line);
  color: var(--discover-premium-ink);
}

body.discover-page .show-more-reviews-btn:hover {
  background: var(--discover-premium-hover);
  border-color: var(--discover-premium-line-strong);
}

body.discover-page .contact-host-btn {
  background: var(--discover-premium-ink) !important;
  border: 1px solid var(--discover-premium-ink) !important;
  color: var(--discover-premium-surface-solid) !important;
}

body.discover-page .contact-host-btn:hover {
  background: var(--discover-premium-ink-soft) !important;
  border-color: var(--discover-premium-ink-soft) !important;
}

body.discover-page #spot-detail-book.btn-brand:not(.photo-book-btn),
body.discover-page #bottom-sheet-book-button.btn-brand:not(.photo-book-btn),
body.discover-page a.discover-lower-host-cta__primary.btn-brand:not(.photo-book-btn) {
  background: var(--color-brand-accent) !important;
  border: 1px solid var(--color-brand-accent) !important;
  color: var(--color-brand-accent-text) !important;
  -webkit-text-fill-color: var(--color-brand-accent-text) !important;
}

body.discover-page #spot-detail-book.btn-brand:not(.photo-book-btn):hover,
body.discover-page #bottom-sheet-book-button.btn-brand:not(.photo-book-btn):hover,
body.discover-page a.discover-lower-host-cta__primary.btn-brand:not(.photo-book-btn):hover {
  background: var(--color-brand-accent-hover) !important;
  border-color: var(--color-brand-accent-hover) !important;
  color: var(--color-brand-accent-text) !important;
  -webkit-text-fill-color: var(--color-brand-accent-text) !important;
}

body.discover-page .amenity-button {
  background: var(--discover-premium-wash);
  border: 1px solid var(--discover-premium-line);
  color: var(--discover-premium-ink-soft);
}

body.discover-page .spot-detail-book-shell {
  background: var(--discover-premium-wash);
  border: 1px solid var(--discover-premium-line);
}

.dark body.discover-page .contact-host-btn,
body.dark.discover-page .contact-host-btn {
  background: #f5f5f4 !important;
  border-color: #f5f5f4 !important;
  color: #1c1917 !important;
}

.dark body.discover-page #spot-detail-book.btn-brand:not(.photo-book-btn),
body.dark.discover-page #spot-detail-book.btn-brand:not(.photo-book-btn),
.dark body.discover-page #bottom-sheet-book-button.btn-brand:not(.photo-book-btn),
body.dark.discover-page #bottom-sheet-book-button.btn-brand:not(.photo-book-btn),
.dark body.discover-page a.discover-lower-host-cta__primary.btn-brand:not(.photo-book-btn),
body.dark.discover-page a.discover-lower-host-cta__primary.btn-brand:not(.photo-book-btn) {
  background: var(--color-brand-accent) !important;
  border-color: var(--color-brand-accent) !important;
  color: var(--color-brand-accent-text) !important;
  -webkit-text-fill-color: var(--color-brand-accent-text) !important;
}

.dark body.discover-page #spot-detail-book.btn-brand:not(.photo-book-btn):hover,
body.dark.discover-page #spot-detail-book.btn-brand:not(.photo-book-btn):hover,
.dark body.discover-page #bottom-sheet-book-button.btn-brand:not(.photo-book-btn):hover,
body.dark.discover-page #bottom-sheet-book-button.btn-brand:not(.photo-book-btn):hover,
.dark body.discover-page a.discover-lower-host-cta__primary.btn-brand:not(.photo-book-btn):hover,
body.dark.discover-page a.discover-lower-host-cta__primary.btn-brand:not(.photo-book-btn):hover {
  background: var(--color-brand-accent-hover) !important;
  border-color: var(--color-brand-accent-hover) !important;
  color: var(--color-brand-accent-text) !important;
  -webkit-text-fill-color: var(--color-brand-accent-text) !important;
}

/* Beat spot-card.css "override white inline in #listings-sheet" (loads before this file): that rule
 * uses an ID and can stomp brand CTA label color if anything sets inline white on the anchor. */
html:not(.dark) body.discover-page #listings-sheet .discover-lower-marketplace a.discover-lower-host-cta__primary.btn-brand:not(.photo-book-btn),
html:not(.dark) body.discover-page #listings-overlay .discover-lower-marketplace a.discover-lower-host-cta__primary.btn-brand:not(.photo-book-btn) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html:not(.dark) body.discover-page #listings-sheet .discover-lower-marketplace a.discover-lower-host-cta__primary.btn-brand:not(.photo-book-btn):hover,
html:not(.dark) body.discover-page #listings-overlay .discover-lower-marketplace a.discover-lower-host-cta__primary.btn-brand:not(.photo-book-btn):hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.spot-groups-picker-anchor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.info-chip .chip-content {
  min-width: 0;
}

.luxury-card {
  background: var(--discover-surface-card, var(--color-slate-50));
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  overflow: hidden;
}

.dark .luxury-card {
  background: #1f2937;
  border-color: #374151;
}

.luxury-card-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

.dark .luxury-card-header {
  border-bottom-color: #374151;
  background: #111827;
}

.luxury-card-content {
  padding: 1rem;
}

/* Header with icon styling */

/* Section icon - CRITICAL: Fixed sizing for SVG icons */

/* Ensure info icons in Discover spot details are properly sized. */

/* Section title */
.section-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
  line-height: 1.4;
}

.dark .section-title {
  color: #f3f4f6;
}

/* Description and access notes text */

/* Info grid for essential info chips */
.luxury-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
}

/* Info chip styling */
.info-chip {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.625rem;
  background: #f3f4f6;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
}

.dark .info-chip {
  background: #111827;
  border-color: #374151;
}

/* Chip icon - CRITICAL: Fixed sizing for SVG icons */
.chip-icon {
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  min-height: 1.25rem;
  flex-shrink: 0;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chip-icon svg {
  width: 100%;
  height: 100%;
}

.dark .chip-icon {
  color: var(--text-caption, #64748b);
}

.chip-content {
  flex: 1;
  min-width: 0;
}

.chip-label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin-bottom: 0.125rem;
}

.dark .chip-label {
  color: var(--text-caption, #64748b);
}

.chip-value {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.3;
}

.dark .chip-value {
  color: #f3f4f6;
}

button.chip-value {
  font: inherit;
  text-align: inherit;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* Full-width space options (Discover) */
.spot-groups-section .luxury-card-content {
  padding-top: 0.25rem;
}

.spot-groups-section-subtitle {
  margin: 0;
  line-height: 1.35;
}

.spot-groups-picker-full {
  width: 100%;
}

.spot-groups-picker-toolbar {
  margin-bottom: 0.5rem;
}

/* Compare + toolbar: sit above floor-plan / sheet overlays; explicit hit target (avoid Tailwind-only button styling). */
.spot-groups-picker-toolbar--interactive {
  position: relative;
  z-index: 48;
  isolation: isolate;
  pointer-events: auto !important;
}

#spot-detail-content .spot-groups-picker-toolbar--interactive,
#spot-detail-view .spot-groups-picker-toolbar--interactive,
#listings-content-sheet .spot-groups-picker-toolbar--interactive,
.spot-details-page .spot-groups-picker-toolbar--interactive {
  z-index: 48;
}

button.spot-groups-compare-btn {
  pointer-events: auto !important;
  position: relative;
  z-index: 49;
}

button.spot-groups-compare-btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.spot-groups-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

.spot-groups-picker-full .spot-groups-grid:not(.spot-groups-grid--compact) {
  gap: 0.4rem;
}

@media (min-width: 480px) {
  .spot-groups-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  }
}

.spot-groups-grid--compact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Spot groups accordion (compact info-chip fallback) */
.spot-groups-accordion-wrapper { margin-top: 0.25rem; }
.spot-groups-accordion-content { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.spot-groups-accordion-content.hidden { display: none !important; }
.spot-group-mini-card { border: 1px solid #e5e7eb; border-radius: 0.375rem; overflow: hidden; background: var(--discover-surface-card, var(--color-slate-50)); transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.22s ease; }
.dark .spot-group-mini-card { border-color: #374151; background: #1f2937; }

.spot-groups-picker-full .spot-group-mini-card {
  border-radius: 0.75rem;
  background: #fff;
}

.dark .spot-groups-picker-full .spot-group-mini-card {
  background: #111827;
}

.spot-group-mini-card--discover {
  border-radius: 0.625rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.22s ease, background-color 0.2s ease;
}

.spot-group-mini-card--row-clickable {
  cursor: pointer;
}

.spot-group-mini-card--row-clickable :is(button, a) {
  cursor: pointer;
}

.spot-group-mini-card--unavailable {
  opacity: 0.58;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.35);
  background: #f3f4f6;
}

.dark .spot-group-mini-card--unavailable {
  background: #1f2937;
}

.spot-group-mini-cta--unavailable {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #6b7280;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  padding: 0.35rem 0.65rem;
  background: #e5e7eb;
  flex-shrink: 0;
}

.dark .spot-group-mini-cta--unavailable {
  color: var(--text-caption, #64748b);
  border-color: #4b5563;
  background: #374151;
}

.spot-group-mini-card--schedulable {
  cursor: pointer;
}

.spot-group-mini-cta--schedule {
  font-size: 0.6875rem;
  font-weight: 600;
}

.dark .spot-group-mini-card--discover {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Shared + full-width grid layout */
.spot-group-mini-card-inner {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: start;
  gap: 0.5rem 0.75rem;
  padding: 0.5rem;
  min-width: 0;
}

/* Discover detail: thumb + main on first row; chips + action in footer (full picker) */
.spot-group-mini-card-inner--discover {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.45rem 0.65rem;
  padding: 0.4rem 0.55rem;
  min-width: 0;
}

.spot-groups-picker-full .spot-group-mini-card-inner--discover {
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: 0.5rem 0.65rem;
  padding: 0.5rem 0.6rem;
}

.spot-groups-picker-full .spot-group-mini-discover-main {
  grid-column: 2;
  min-width: 0;
}

.spot-groups-picker-full .spot-group-mini-thumb--discover {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
}

.spot-groups-picker-full .spot-group-mini-discover-side {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
  width: 100%;
  padding-top: 0.5rem;
  margin-top: 0.125rem;
  border-top: 1px solid #e5e7eb;
}

.spot-groups-picker-full .spot-group-mini-discover-side .spot-group-tier-chips,
.spot-groups-picker-full .spot-group-mini-discover-side .spot-group-tier-chips--discover {
  margin-bottom: 0;
  max-height: none;
  overflow: visible;
  justify-content: flex-start;
  flex: 1 1 auto;
  min-width: 0;
}

.dark .spot-groups-picker-full .spot-group-mini-discover-side {
  border-top-color: #374151;
}

.spot-group-mini-thumb--discover {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  max-width: 48px;
  max-height: 48px;
  flex-shrink: 0;
  border-radius: 0.375rem;
  overflow: hidden;
}

.spot-groups-picker-full .spot-group-mini-thumb--discover {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  max-height: 40px;
}

.spot-group-mini-thumb--discover .spot-group-mini-placeholder {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  flex-shrink: 0;
}

.spot-group-mini-thumb--discover .spot-group-mini-placeholder svg,
.spot-groups-picker-full .spot-group-mini-thumb--discover .spot-group-mini-placeholder svg,
.spot-details-container .spot-group-mini-thumb--discover .spot-group-mini-placeholder svg,
#listings-sheet .spot-details-container .spot-group-mini-thumb--discover .spot-group-mini-placeholder svg {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  flex-shrink: 0;
}

.spot-groups-picker-full .spot-group-mini-thumb--discover .spot-group-mini-placeholder svg {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
}

.spot-group-mini-discover-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.spot-group-mini-discover-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.4rem;
  margin-bottom: 0;
}

.spot-group-mini-discover-main .spot-group-mini-meta-one-line {
  margin: 0;
}

.spot-group-mini-discover-main .spot-group-mini-item-rules {
  margin: 0.15rem 0 0;
  line-height: 1.4;
}

.spot-group-mini-discover-main .spot-group-mini-item-rules + .spot-group-mini-item-rules {
  margin-top: 0.125rem;
}

.spot-group-mini-meta-one-line {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.28;
  color: #6b7280;
}

.dark .spot-group-mini-meta-one-line {
  color: var(--text-caption, #64748b);
}

.spot-group-mini-meta-dot {
  margin: 0 0.12rem;
  color: var(--text-caption, #64748b);
  user-select: none;
}

.spot-group-mini-next-inline {
  color: #6b7280;
}

.dark .spot-group-mini-next-inline {
  color: var(--text-caption, #64748b);
}

.spot-group-mini-discover-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0.22rem;
  flex-shrink: 0;
  align-self: start;
}

.spot-group-mini-price--discover {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--discover-premium-ink, #171412);
  white-space: nowrap;
  line-height: 1.2;
}

.dark .spot-group-mini-price--discover {
  color: var(--discover-premium-ink, #fafaf9);
}

.spot-group-mini-price-unit {
  font-weight: 600;
  font-size: 0.6875rem;
  opacity: 0.88;
}

.spot-group-tier-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  justify-content: flex-end;
  max-height: 1.35rem;
  overflow: hidden;
}

.spot-group-tier-chips--discover {
  margin-bottom: 0.25rem;
}

.spot-group-tier-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.05rem 0.3rem;
  border-radius: 0.25rem;
  font-size: 0.5625rem;
  font-weight: 500;
  line-height: 1.15;
  color: #64748b;
  background-color: #f8fafc;
  border: 1px solid #e8edf2;
  white-space: nowrap;
}

.dark .spot-group-tier-chip {
  color: #cbd5e1;
  background-color: rgba(51, 65, 85, 0.55);
  border-color: rgba(71, 85, 105, 0.65);
}

.spot-group-mini-actions--discover {
  width: auto;
}

.spot-groups-picker-full .spot-group-mini-actions--discover {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.spot-group-mini-cta--discover {
  min-height: 1.875rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 0.375rem;
}

@media (max-width: 639px) {
  .spot-group-mini-card-inner--discover {
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
  }

  .spot-group-mini-discover-main {
    grid-column: 2;
    min-width: 0;
  }

  .spot-group-mini-thumb--discover {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
  }

  .spot-group-mini-thumb--discover .spot-group-mini-placeholder svg {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
  }

  .spot-group-mini-discover-side {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
    padding-top: 0.35rem;
    margin-top: 0.15rem;
    border-top: 1px solid #e5e7eb;
  }

  .spot-group-mini-discover-side .spot-group-tier-chips {
    max-height: none;
    overflow: visible;
    flex-wrap: wrap;
    justify-content: flex-start;
    flex: 1 1 auto;
    min-width: 0;
  }

  .spot-group-mini-discover-title-row .spot-group-mini-badge {
    font-size: 0.5625rem;
    padding: 0.1rem 0.3rem;
  }

  .dark .spot-group-mini-discover-side {
    border-top-color: #374151;
  }

  .spot-group-mini-discover-side .spot-group-mini-actions,
  .spot-group-mini-discover-side .spot-group-mini-actions--discover {
    flex: 0 0 auto;
    flex-shrink: 0;
    margin-left: auto;
  }

  .spot-group-mini-cta--unavailable,
  .spot-group-mini-cta--discover.spot-group-mini-cta--unavailable {
    min-width: 6.625rem;
  }
}

.spot-group-mini-thumb {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 0.25rem;
  overflow: hidden;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spot-groups-picker-full .spot-group-mini-thumb:not(.spot-group-mini-thumb--discover) {
  width: 64px;
  height: 64px;
  border-radius: 0.5rem;
}

.dark .spot-group-mini-thumb { background: #374151; }

.spot-group-mini-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spot-group-mini-placeholder { display: flex; align-items: center; justify-content: center; color: var(--text-caption, #64748b); }
.spot-group-mini-placeholder svg { width: 24px; height: 24px; }

.spot-group-mini-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.spot-groups-picker-full .spot-group-mini-main {
  gap: 0.4rem;
}

.spot-group-mini-row1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.spot-group-mini-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  font-size: 0.75rem;
}

.spot-groups-picker-full .spot-group-mini-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem;
  line-height: 1.35;
}

.spot-group-mini-next {
  font-size: 0.6875rem;
  color: #6b7280;
}

.spot-groups-picker-full .spot-group-mini-next {
  font-size: 0.75rem;
  line-height: 1.35;
}

.dark .spot-group-mini-next {
  color: var(--text-caption, #64748b);
}

.spot-group-mini-item-rules {
  font-size: 0.6875rem;
  line-height: 1.35;
  color: #6b7280;
  margin: 0.25rem 0 0;
}

.spot-groups-picker-full .spot-group-mini-item-rules {
  font-size: 0.75rem;
}

.dark .spot-group-mini-item-rules {
  color: var(--text-caption, #64748b);
}

.spot-group-mini-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  min-width: 0;
}

.spot-groups-picker-full .spot-group-mini-aside {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
  padding-top: 0.65rem;
  border-top: 1px solid #e5e7eb;
}

.dark .spot-groups-picker-full .spot-group-mini-aside {
  border-top-color: #374151;
}

.spot-group-mini-actions {
  display: flex;
  justify-content: flex-end;
}

.spot-groups-picker-full .spot-group-mini-actions {
  flex: 0 0 auto;
}

/* Multi-space row: default = outline (room for a clear “selected” state vs solid blue) */
.spot-group-mini-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0.4rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 0.375rem;
  border: 1px solid var(--discover-premium-line);
  background: var(--discover-premium-surface-solid);
  color: var(--discover-premium-ink);
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  /* background-color (not `background`); avoid animating box-shadow (cheapening paint over map / panels) */
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.spot-groups-picker-full .spot-group-mini-cta:not(.spot-group-mini-cta--discover) {
  min-width: 8.75rem;
  min-height: 2.25rem;
  padding: 0.45rem 0.85rem;
  white-space: nowrap;
}

.spot-groups-picker-full .spot-group-mini-cta--discover {
  min-width: 5.25rem;
  padding-left: 0.65rem;
  padding-right: 0.65rem;
}

/* Discover row CTA: "Unavailable" is wider than Book/Schedule — do not inherit the short label min-width. */
.spot-groups-picker-full .spot-group-mini-cta--discover.spot-group-mini-cta--unavailable,
.spot-group-mini-cta--discover.spot-group-mini-cta--unavailable {
  min-width: 6.625rem;
  padding-left: 0.7rem;
  padding-right: 0.7rem;
}

.spot-group-mini-cta:hover {
  background: var(--discover-premium-hover);
  border-color: var(--discover-premium-line-strong);
  color: var(--discover-premium-ink);
}

.spot-group-mini-cta:focus {
  outline: none;
}

.spot-group-mini-cta:focus-visible {
  outline: 2px solid var(--discover-premium-muted);
  outline-offset: 2px;
}

.dark .spot-group-mini-cta {
  background: var(--discover-premium-surface-solid);
  color: var(--discover-premium-ink);
  border-color: var(--discover-premium-line);
}

.dark .spot-group-mini-cta:hover {
  background: var(--discover-premium-hover);
  border-color: var(--discover-premium-line-strong);
  color: var(--discover-premium-ink);
}

/* Selected: ink fill (distinct from default outline); brand reserved for Book flash / primary CTA */
.spot-group-mini-cta--selected,
.spot-group-mini-cta.spot-group-mini-cta--selected {
  background: var(--discover-premium-ink, #171412);
  border-color: var(--discover-premium-ink, #171412);
  color: #fff;
}

.spot-group-mini-cta--selected:hover,
.spot-group-mini-cta.spot-group-mini-cta--selected:hover {
  background: var(--discover-premium-ink-soft, #44403c);
  border-color: var(--discover-premium-ink-soft, #44403c);
  color: #fff;
}

.dark .spot-group-mini-cta--selected,
.dark .spot-group-mini-cta.spot-group-mini-cta--selected {
  background: #f5f5f4;
  border-color: #e7e5e4;
  color: #1c1917;
}

/* Re-tap selected space: momentary “Book” chip — same brand CTA as #spot-detail-book */
.spot-group-mini-cta.spot-group-mini-cta--selected.spot-group-mini-cta--book-flash,
.spot-group-mini-cta--selected.spot-group-mini-cta--book-flash {
  background: var(--color-brand-accent) !important;
  border-color: var(--color-brand-accent) !important;
  color: var(--color-brand-accent-text) !important;
  box-shadow: var(--color-brand-accent-shadow) !important;
  justify-content: center !important;
}

.spot-group-mini-cta--selected.spot-group-mini-cta--book-flash:hover,
.spot-group-mini-cta.spot-group-mini-cta--selected.spot-group-mini-cta--book-flash:hover {
  background: var(--color-brand-accent-hover) !important;
  border-color: var(--color-brand-accent-hover) !important;
  color: var(--color-brand-accent-text) !important;
}

.dark .spot-group-mini-cta--selected.spot-group-mini-cta--book-flash,
.dark .spot-group-mini-cta.spot-group-mini-cta--selected.spot-group-mini-cta--book-flash {
  background: var(--color-brand-accent) !important;
  border-color: var(--color-brand-accent) !important;
  color: var(--color-brand-accent-text) !important;
  box-shadow: var(--color-brand-accent-shadow) !important;
}

.dark .spot-group-mini-cta--selected.spot-group-mini-cta--book-flash:hover,
.dark .spot-group-mini-cta.spot-group-mini-cta--selected.spot-group-mini-cta--book-flash:hover {
  background: var(--color-brand-accent-hover) !important;
  border-color: var(--color-brand-accent-hover) !important;
  color: var(--color-brand-accent-text) !important;
}

.spot-group-mini-cta--selected.spot-group-mini-cta--book-flash .spot-group-mini-cta__check,
.spot-group-mini-cta.spot-group-mini-cta--selected.spot-group-mini-cta--book-flash .spot-group-mini-cta__check {
  display: none !important;
}

.spot-group-mini-cta--selected.spot-group-mini-cta--book-flash .spot-group-mini-cta__label,
.spot-group-mini-cta.spot-group-mini-cta--selected.spot-group-mini-cta--book-flash .spot-group-mini-cta__label {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.spot-groups-picker-full .spot-group-mini-cta--selected.spot-group-mini-cta--book-flash,
.spot-groups-picker-full .spot-group-mini-cta.spot-group-mini-cta--selected.spot-group-mini-cta--book-flash {
  min-width: 8.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .spot-group-mini-cta.spot-group-mini-cta--selected.spot-group-mini-cta--book-flash,
  .spot-group-mini-cta--selected.spot-group-mini-cta--book-flash {
    transition: none;
  }
  .spot-group-mini-card,
  .spot-group-mini-card--discover,
  .spot-group-mini-cta__check {
    transition: none;
  }
}

.spot-group-mini-cta__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 0.95rem;
  height: 0.95rem;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

.spot-group-mini-cta--selected .spot-group-mini-cta__check,
.spot-group-mini-cta.spot-group-mini-cta--selected .spot-group-mini-cta__check {
  opacity: 1;
  transform: scale(1);
}

.spot-group-mini-card--selected {
  border-color: var(--discover-premium-line-strong, rgba(87, 83, 78, 0.34));
  background: var(--discover-premium-wash, #f5f3ef);
  box-shadow: 0 0 0 1px var(--discover-premium-line-strong, rgba(87, 83, 78, 0.34)), 0 4px 14px rgba(28, 25, 23, 0.08);
}

.dark .spot-group-mini-card--selected {
  border-color: rgba(231, 229, 228, 0.35);
  background: rgba(68, 64, 60, 0.45);
  box-shadow: 0 0 0 1px rgba(231, 229, 228, 0.28), 0 4px 16px rgba(0, 0, 0, 0.35);
}

.spot-groups-picker-full .spot-group-mini-card--discover.spot-group-mini-card--selected {
  border-color: var(--discover-premium-ink, #171412);
  background: linear-gradient(180deg, #fafaf9 0%, #f5f3ef 100%);
  box-shadow:
    0 0 0 2px rgba(28, 25, 23, 0.12),
    0 8px 22px rgba(28, 25, 23, 0.08);
}

.dark .spot-groups-picker-full .spot-group-mini-card--discover.spot-group-mini-card--selected {
  border-color: #e7e5e4;
  background: linear-gradient(180deg, rgba(68, 64, 60, 0.55) 0%, rgba(28, 25, 23, 0.92) 100%);
  box-shadow:
    0 0 0 2px rgba(231, 229, 228, 0.28),
    0 8px 24px rgba(0, 0, 0, 0.45);
}

a.spot-group-mini-cta--link {
  font-weight: 600;
}

/* Brief cue on main Reserve / Book CTA after a space is chosen (multi-group) */
@keyframes spot-detail-book-group-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(15, 90, 86, 0.45);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(15, 90, 86, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(15, 90, 86, 0);
  }
}

#spot-detail-book.spot-detail-book--group-just-selected,
#bottom-sheet-book-button.spot-detail-book--group-just-selected {
  animation: spot-detail-book-group-pulse 1.35s ease-out 1;
}

.spot-group-mini-label { font-weight: 600; font-size: 0.8125rem; color: #111827; }
.dark .spot-group-mini-label { color: #f3f4f6; }
.spot-group-mini-badge { padding: 0.125rem 0.375rem; border-radius: 9999px; background: var(--discover-premium-wash); color: var(--discover-premium-ink); font-weight: 500; font-size: 0.6875rem; white-space: nowrap; }
.dark .spot-group-mini-badge { background: var(--discover-premium-hover); color: var(--discover-premium-ink); }
.spot-group-mini-dims { color: #6b7280; }
.dark .spot-group-mini-dims { color: #9ca3af; }
.spot-group-mini-count { color: #6b7280; }
.dark .spot-group-mini-count { color: #9ca3af; }
.spot-group-mini-price { font-weight: 600; color: var(--discover-premium-ink, #171412); font-size: 0.8125rem; white-space: nowrap; }
.dark .spot-group-mini-price { color: var(--discover-premium-ink, #fafaf9); }

.spot-groups-picker-full .spot-group-mini-card--discover .spot-group-mini-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.spot-groups-picker-full .spot-group-mini-label {
  font-size: 0.875rem;
}

.spot-groups-picker-full .spot-group-mini-price {
  font-size: 0.95rem;
}

.spot-group-mini-card--compact .spot-group-mini-card-inner {
  grid-template-columns: 40px 1fr auto;
}

.spot-group-mini-card--compact .spot-group-mini-thumb {
  width: 40px;
  height: 40px;
}

.spot-group-mini-card--compact .spot-group-mini-placeholder svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 479px) {
  .spot-groups-picker-full .spot-group-mini-card-inner:not(.spot-group-mini-card-inner--discover) {
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
  }

  .spot-groups-picker-full .spot-group-mini-aside {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
}

/* Schedule value - two-line layout */

/* Policy expandable styling - click anywhere on the block to expand/collapse */
.policy-expandable {
  background: var(--discover-surface-card, var(--color-slate-50));
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  overflow: hidden;
  pointer-events: auto !important; /* CRITICAL: Ensure container allows interactions */
  position: relative;
  cursor: pointer;
}

.dark .policy-expandable {
  background: #1f2937;
  border-color: #374151;
}

.policy-expandable-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center; /* Center the content */
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: center; /* Center text alignment */
  pointer-events: auto !important; /* CRITICAL: Ensure button is clickable */
  position: relative !important;
  z-index: 1 !important; /* Above content but below tooltips */
}

.policy-expandable-trigger:hover {
  background: #f3f4f6;
}

.dark .policy-expandable-trigger:hover {
  background: #111827;
}

/* Policy icon - Fixed sizing */
.policy-icon {
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  min-height: 1.25rem;
  flex-shrink: 0;
  color: var(--discover-premium-muted, #78716c);
}

.dark .policy-icon {
  color: var(--discover-premium-muted, #a8a29e);
}

/* Policy chevron - Fixed sizing */
.policy-chevron {
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  min-height: 1.25rem;
  flex-shrink: 0;
  color: #6b7280;
  transition: transform 0.2s ease;
  margin-left: 0.5rem; /* Space from text when centered */
}

.dark .policy-chevron {
  color: var(--text-caption, #64748b);
}

.policy-expandable-trigger[aria-expanded="true"] .policy-chevron,
.policy-expandable.expanded .policy-chevron {
  transform: rotate(180deg);
}

.policy-content {
  max-height: 0;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.policy-expandable-trigger[aria-expanded="true"] + .policy-content,
.policy-expandable.expanded .policy-content {
  max-height: 600px;
  padding: 0 1rem 1rem 1rem !important;
}

.policy-text {
  font-size: 0.8125rem;
  color: #4b5563;
  line-height: 1.6;
  transition: opacity 0.3s ease;
}

.policy-text p {
  margin: 0;
}

/* Expanded state: ensure text is visible with proper pointer-events */
.policy-expandable.expanded .policy-text,
.policy-expandable-trigger[aria-expanded="true"] + .policy-content .policy-text {
  opacity: 1 !important;
  pointer-events: auto !important;
  color: #4b5563 !important;
}

/* Dark mode expanded text */
.dark .policy-expandable.expanded .policy-text,
.dark .policy-expandable-trigger[aria-expanded="true"] + .policy-content .policy-text {
  color: #d1d5db !important;
}

/* Collapsed state: ensure text is hidden */
.policy-expandable:not(.expanded) .policy-text,
.policy-expandable-trigger:not([aria-expanded="true"]) + .policy-content .policy-text {
  opacity: 0;
  pointer-events: none;
}

.dark .policy-text {
  color: var(--text-caption, #64748b);
}

/* CRITICAL: Bottomsheet policy text visibility and spacing */
#listings-sheet .policy-text,
#listings-sheet .spot-details-container .policy-text {
  color: #4b5563 !important;
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
}

#listings-sheet .policy-expandable.expanded .policy-text,
#listings-sheet .policy-expandable-trigger[aria-expanded="true"] + .policy-content .policy-text {
  opacity: 1 !important;
  pointer-events: auto !important;
  color: #4b5563 !important;
}

.dark #listings-sheet .policy-text,
.dark #listings-sheet .spot-details-container .policy-text {
  color: #d1d5db !important;
}

.dark #listings-sheet .policy-expandable.expanded .policy-text,
.dark #listings-sheet .policy-expandable-trigger[aria-expanded="true"] + .policy-content .policy-text {
  color: #d1d5db !important;
}

/* Bottomsheet: Less margin above policy so less container shows before sheet is opened */
#listings-sheet .spot-details-container .policy-expandable {
  margin-top: 0.75rem !important;
}

/* Bottom sheet: compact closed row; global .policy-expandable-trigger adds
   margin-bottom:0.75rem which read as a large "empty" band when collapsed. */
#listings-sheet .spot-details-container .policy-expandable .policy-expandable-trigger {
  margin-bottom: 0 !important;
  padding: 0.5rem 0.75rem !important;
}

/* Bottomsheet: Collapsed policy content must take no space */
#listings-sheet .spot-details-container .policy-expandable-trigger:not([aria-expanded="true"]) + .policy-content,
#listings-sheet .spot-details-container .policy-expandable-trigger[aria-expanded="false"] + .policy-content,
#listings-sheet .spot-details-container .policy-expandable:not(.expanded) > .policy-content,
#listings-sheet .spot-details-container .policy-expandable-trigger:not([aria-expanded="true"]) + .policy-expandable-content,
#listings-sheet .spot-details-container .policy-expandable-trigger[aria-expanded="false"] + .policy-expandable-content,
#listings-sheet .spot-details-container .policy-expandable:not(.expanded) > .policy-expandable-content {
  max-height: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  border: none !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Bottomsheet: Give policy content more room when expanded */
#listings-sheet .policy-expandable.expanded .policy-content,
#listings-sheet .policy-expandable-trigger[aria-expanded="true"] + .policy-content,
#listings-sheet .policy-expandable.expanded .policy-expandable-content,
#listings-sheet .policy-expandable-trigger[aria-expanded="true"] + .policy-expandable-content {
  height: auto !important;
  max-height: 600px !important;
  padding: 1rem !important;
  opacity: 1 !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

/* Bottomsheet: Ensure policy text paragraphs have proper spacing */
#listings-sheet .policy-text p {
  margin-bottom: 0.5rem;
}

#listings-sheet .policy-text p:last-child {
  margin-bottom: 0;
}

/* 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: var(--discover-surface-card, var(--color-slate-50)) !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 !important; /* CRITICAL: Position context for absolutely positioned buttons */
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 1rem; /* CONSISTENCY: Standard margin for both desktop and bottom sheet */
  aspect-ratio: 16/9;
  background: var(--gray-100);
  width: 100%;
  max-width: 100% !important; /* CRITICAL: Prevent overflow */
  box-sizing: border-box !important; /* CRITICAL: Include padding/border in width */
}

/* Bottom sheet: Keep photos compact across all input types */
/* CONSISTENCY: Photo gallery aspect ratios differ for responsive design (wider on mobile and tablet), but margins should be consistent */

/* Base .photo-gallery-compact.photo-carousel rules: spot-details.css */

/* Mobile touch: Photo area fills properly (listing cards only; spot details gallery uses its own rules) */
@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
  #listings-sheet .photo-gallery-compact:not(.spot-detail-photo-frame),
  #listings-sheet .photo-gallery-compact.photo-carousel:not(.spot-detail-photo-frame) {
    aspect-ratio: 16/9 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    margin-bottom: 1rem !important;
  }

  #listings-sheet .photo-gallery-compact.photo-carousel:not(.spot-detail-photo-frame) .photo-carousel-container {
    min-height: 0 !important;
    height: 100% !important;
  }
}

/* Carousel container: fill parent exactly and clip images */
.photo-gallery-compact.photo-carousel .photo-carousel-container,
#listings-sheet .photo-carousel-container,
#spot-detail-view .photo-carousel-container,
#spot-detail-view .photo-carousel-container,
.spot-details-container .photo-carousel-container {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  border-radius: inherit !important;
  background: transparent !important;
  touch-action: pan-y pinch-zoom !important;
  contain: layout style paint !important;
  isolation: isolate !important;
}

/* Bottomsheet: container fills photo frame; do not use min-height:100% (expands past aspect-ratio band) */
#listings-sheet .spot-details-container .photo-carousel-container {
  max-height: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
  position: relative !important;
  display: block !important;
}

/* Fallback: spot details in #listings-content-sheet without .spot-details-container wrapper */
#listings-content-sheet .photo-gallery-compact.photo-carousel.spot-detail-photo-frame,
#listings-content-sheet .spot-detail-photo-frame.photo-frame--carousel {
  aspect-ratio: 16 / 9 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-height: min(36vh, 220px) !important;
  min-height: 0 !important;
  height: auto !important;
}
#listings-content-sheet .spot-detail-photo-frame .photo-carousel-container {
  min-height: 0 !important;
  height: 100% !important;
}

/* Desktop spot details: ensure gallery and container have height so images are visible in overlay/dialog */
#spot-detail-view .photo-gallery-compact.photo-carousel,
#spot-detail-content .photo-gallery-compact.photo-carousel,
#spot-detail-view .photo-gallery-compact.photo-carousel {
  min-height: 0 !important;
  height: auto !important;
  flex-shrink: 0 !important; /* Prevent flex from collapsing the gallery when inside dialog */
}
#spot-detail-view .photo-carousel-container,
#spot-detail-content .photo-carousel-container,
#spot-detail-view .photo-carousel-container {
  min-height: 100% !important;
}

/* DESKTOP ONLY: Same visibility/layout as bottom sheet - avoid containment so container has real height */
#spot-detail-view .photo-gallery-compact.photo-carousel:not(.spot-detail-photo-frame),
#spot-detail-content .photo-gallery-compact.photo-carousel:not(.spot-detail-photo-frame) {
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  contain: none !important;
  isolation: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
#spot-detail-view .spot-detail-photo-frame.photo-frame--carousel,
#spot-detail-content .spot-detail-photo-frame.photo-frame--carousel {
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  contain: none !important;
  isolation: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Bottom sheet spot details: taller hero band; cover fill avoids wide letterboxing */
#listings-sheet .spot-details-container .spot-detail-photo-frame.photo-frame--carousel,
#listings-content-sheet .spot-details-container .spot-detail-photo-frame.photo-frame--carousel,
body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-photo-frame.photo-frame--carousel {
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-height: min(36vh, 220px) !important;
  contain: none !important;
  isolation: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border-radius: 0.75rem !important;
}
#spot-detail-view .photo-carousel-container,
#spot-detail-content .photo-carousel-container {
  min-height: 0 !important;
  height: 100% !important;
  contain: none !important;
  isolation: auto !important;
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
}
#spot-detail-view .spot-detail-photo-frame .photo-carousel-container,
#spot-detail-content .spot-detail-photo-frame .photo-carousel-container,
#listings-sheet .spot-details-container .spot-detail-photo-frame .photo-carousel-container,
#listings-content-sheet .spot-details-container .spot-detail-photo-frame .photo-carousel-container {
  min-height: 0 !important;
  height: 100% !important;
  contain: none !important;
  isolation: auto !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
  background: transparent !important;
}
/* Overlay + bottom sheet: image-wrap fills frame; only the active wrap is visible */
#spot-detail-view .photo-carousel-container .photo-carousel-image-wrap,
#spot-detail-content .photo-carousel-container .photo-carousel-image-wrap,
#listings-sheet .spot-details-container .spot-detail-photo-frame .photo-carousel-container .photo-carousel-image-wrap,
#listings-content-sheet .spot-details-container .spot-detail-photo-frame .photo-carousel-container .photo-carousel-image-wrap {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}
#spot-detail-view .spot-detail-photo-frame .photo-carousel-container .photo-carousel-image-wrap:not(:has(.photo-carousel-image.active)),
#spot-detail-content .spot-detail-photo-frame .photo-carousel-container .photo-carousel-image-wrap:not(:has(.photo-carousel-image.active)),
#listings-sheet .spot-details-container .spot-detail-photo-frame .photo-carousel-container .photo-carousel-image-wrap:not(:has(.photo-carousel-image.active)),
#listings-content-sheet .spot-details-container .spot-detail-photo-frame .photo-carousel-container .photo-carousel-image-wrap:not(:has(.photo-carousel-image.active)) {
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
#spot-detail-view .spot-detail-photo-frame .photo-carousel-container .photo-carousel-image-wrap:has(.photo-carousel-image.active),
#spot-detail-content .spot-detail-photo-frame .photo-carousel-container .photo-carousel-image-wrap:has(.photo-carousel-image.active),
#listings-sheet .spot-details-container .spot-detail-photo-frame .photo-carousel-container .photo-carousel-image-wrap:has(.photo-carousel-image.active),
#listings-content-sheet .spot-details-container .spot-detail-photo-frame .photo-carousel-container .photo-carousel-image-wrap:has(.photo-carousel-image.active) {
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2 !important;
}
#spot-detail-view .photo-carousel-container .photo-carousel-image-wrap .photo-carousel-image,
#spot-detail-content .photo-carousel-container .photo-carousel-image-wrap .photo-carousel-image,
#listings-sheet .spot-details-container .spot-detail-photo-frame .photo-carousel-container .photo-carousel-image-wrap .photo-carousel-image,
#listings-content-sheet .spot-details-container .spot-detail-photo-frame .photo-carousel-container .photo-carousel-image-wrap .photo-carousel-image {
  pointer-events: auto !important;
}
/* Ensure active image is visible - highest specificity, must win over default hidden state */
#spot-detail-view .photo-carousel-container .photo-carousel-image-wrap .photo-carousel-image.active,
#spot-detail-view .photo-carousel-container .photo-carousel-image.active,
#spot-detail-view .photo-carousel-image.active,
#spot-detail-content .photo-carousel-container .photo-carousel-image-wrap .photo-carousel-image.active,
#spot-detail-content .photo-carousel-container .photo-carousel-image.active,
#spot-detail-content .photo-carousel-image.active {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  z-index: 2 !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
}

#listings-sheet .spot-details-container .spot-detail-photo-frame .photo-carousel-container .photo-carousel-image-wrap .photo-carousel-image.active,
#listings-content-sheet .spot-details-container .spot-detail-photo-frame .photo-carousel-container .photo-carousel-image-wrap .photo-carousel-image.active,
#listings-sheet .spot-details-container .spot-detail-photo-frame.photo-frame--carousel[data-total-photos="1"] .photo-carousel-image,
#listings-content-sheet .spot-details-container .spot-detail-photo-frame.photo-frame--carousel[data-total-photos="1"] .photo-carousel-image {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  z-index: 2 !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
}

/* Desktop: ensure spot-detail-content and its wrapper allow gallery to take space */
#spot-detail-content .spot-detail-content-wrapper,
#spot-detail-view .spot-detail-content-wrapper {
  min-width: 0 !important;
  display: block !important;
}
#spot-detail-content .spot-detail-content-wrapper .photo-gallery-compact.photo-carousel,
#spot-detail-view .spot-detail-content-wrapper .photo-gallery-compact.photo-carousel {
  min-height: 0 !important;
}

/* Ensure price overlay is always visible */
.spot-price-overlay {
  position: absolute !important;
  bottom: 8px !important;
  left: 8px !important;
  background: #000000bf !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  z-index: var(--z-high-modal) !important;
  pointer-events: none !important; /* Overlay is informational, not interactive */
  visibility: visible !important;
  opacity: 1 !important;
}

.spot-price-overlay__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.spot-price-overlay__row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.spot-price-overlay__price-group {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.spot-price-overlay__strike {
  color: var(--text-caption, #64748b);
  font-size: 10px;
  text-decoration: line-through;
}

.spot-price-overlay__amount {
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.spot-price-overlay__row--primary .spot-price-overlay__amount {
  font-weight: 700;
  font-size: 16px;
}

.spot-price-overlay__unit {
  color: #f3f4f6;
  font-size: 11px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.spot-price-overlay__row--primary .spot-price-overlay__unit {
  font-size: 12px;
}

/* Photo gallery overlays — responsive (640 / 400; aligns with sheet + discover-touch) */
@media (max-width: 640px) {
  .spot-price-overlay {
    padding: 6px 10px !important;
    max-width: min(50%, calc(100% - 8.5rem)) !important;
  }

  .spot-price-overlay__amount {
    font-size: 13px;
  }

  .spot-price-overlay__row--primary .spot-price-overlay__amount {
    font-size: 14px;
  }

  .spot-price-overlay__unit {
    font-size: 10px;
  }

  .spot-price-overlay__row--primary .spot-price-overlay__unit {
    font-size: 11px;
  }

  .spot-price-overlay__strike {
    font-size: 9px;
  }
}

/* Desktop spot details - adjust price overlay position */

/* 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: var(--color-brand-accent) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: var(--color-brand-accent-text, #fff) !important;
  -webkit-text-fill-color: var(--color-brand-accent-text, #fff) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  min-height: 44px !important;
  padding: 10px 24px !important;
  border-radius: 0.75rem !important;
  border: 1px solid var(--color-brand-accent) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  box-shadow: var(--color-brand-accent-shadow) !important;
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
  white-space: nowrap !important;
  margin: 0 !important; /* CRITICAL: Remove any margins that could offset positioning */
}

.photo-book-btn:focus-visible {
  outline: none !important;
  box-shadow:
    var(--color-brand-accent-shadow),
    0 0 0 3px rgba(255, 255, 255, 0.92),
    0 0 0 5px var(--color-brand-accent) !important;
}

.photo-book-btn:hover {
  background: var(--color-brand-accent-hover) !important;
  border-color: var(--color-brand-accent-hover) !important;
  transform: translateX(-50%) scale(1.02) !important;
  box-shadow: var(--shadow-card-raised, var(--shadow-md)) !important;
}

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

.photo-book-btn--booked,
div.photo-book-btn.photo-book-btn--booked {
  background: rgba(16, 185, 129, 0.92) !important;
  border-color: rgba(5, 150, 105, 0.95) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  cursor: default !important;
  pointer-events: none !important;
  font-size: 12px !important;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35) !important;
}

.photo-book-btn--booked:hover,
.photo-book-btn--booked:active,
.photo-book-btn--booked:focus-visible {
  transform: translateX(-50%) !important;
  background: rgba(16, 185, 129, 0.92) !important;
  border-color: rgba(5, 150, 105, 0.95) !important;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35) !important;
}

/* CRITICAL: Bottomsheet book button - must stay at bottom center of photo gallery */
#listings-sheet .photo-book-btn,
#listings-sheet .spot-details-container .photo-book-btn,
#listings-sheet .photo-gallery-compact .photo-book-btn,
#listings-sheet #spot-detail-book.photo-book-btn,
#listings-sheet button.photo-book-btn {
  position: absolute !important;
  bottom: 8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: auto !important; /* Override any top positioning */
  right: auto !important; /* Override any right positioning */
  margin: 0 !important; /* CRITICAL: Remove any margins */
  z-index: 15 !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important; /* CRITICAL: Ensure button is clickable */
  cursor: pointer !important; /* CRITICAL: Show pointer cursor */
}

/* Amenity Badges Container - Top Right */
.photo-amenity-badges {
  position: absolute !important;
  top: 8px !important; /* Start from very top with small padding */
  right: 8px !important; /* Position on right side */
  left: auto !important; /* Ensure left is not set */
  bottom: auto !important; /* Ensure bottom is not set */
  z-index: 12 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important; /* Gap between vertical and horizontal groups */
  align-items: flex-end !important; /* Align to right side */
  pointer-events: auto !important;
  margin: 0 !important; /* Remove any margins that could push badges down */
  padding: 0 !important; /* Remove any padding */
}

/* Bottom sheet: keep amenity badges position/size when inside .spot-details-container (override any wildcard rules) */
#listings-sheet .spot-details-container .photo-amenity-badges,
#listings-sheet .photo-gallery-compact .photo-amenity-badges {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Vertical group: first 2 amenities stack vertically */
.amenity-badges-vertical,
#spot-detail-view .amenity-badges-vertical,
#spot-detail-content .amenity-badges-vertical,
.spot-details-container .amenity-badges-vertical,
.photo-amenity-badges .amenity-badges-vertical {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  align-items: flex-end !important; /* Align to right side */
  /* CRITICAL: Ensure it comes first in flex order */
  order: 1 !important; /* Explicitly set order to ensure it comes before horizontal group */
  position: relative !important; /* Ensure it's in normal flow */
}

/* Horizontal group: remaining amenities stack horizontally (can wrap to multiple rows) */
/* CRITICAL: This should start immediately after the 2 vertical badges, not after a 3rd vertical badge */
.amenity-badges-horizontal,
#spot-detail-view .amenity-badges-horizontal,
#spot-detail-content .amenity-badges-horizontal,
.spot-details-container .amenity-badges-horizontal,
.photo-amenity-badges .amenity-badges-horizontal {
  /* Use flexbox with wrapping to accommodate all amenities */
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important; /* Allow wrapping to multiple rows if needed */
  gap: 6px !important;
  justify-content: flex-end !important; /* Align badges to right edge */
  align-items: center !important;
  margin-top: 0 !important; /* CRITICAL: No margin - gap from parent container (6px) handles spacing between vertical and horizontal groups */
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: calc(100% - 60px) !important; /* Prevent overlap with photo nav button (44px button + 16px margin) */
  /* CRITICAL: Ensure it flows naturally in flex column after vertical group */
  position: relative !important; /* Ensure it's in normal flow, not absolute */
  align-self: flex-end !important; /* Align to right side of container */
  width: auto !important; /* Size based on content */
  /* CRITICAL: Ensure it starts after vertical group by being in normal flex flow */
  order: 2 !important; /* Explicitly set order to ensure it comes after vertical group (order: 1) */
}

/* Ensure badges in horizontal group size based on content and don't shrink */
.amenity-badges-horizontal .photo-amenity-badge,
#spot-detail-view .amenity-badges-horizontal .photo-amenity-badge,
#spot-detail-content .amenity-badges-horizontal .photo-amenity-badge,
.spot-details-container .amenity-badges-horizontal .photo-amenity-badge,
.photo-amenity-badges .amenity-badges-horizontal .photo-amenity-badge {
  width: auto !important; /* Size based on content */
  min-width: fit-content !important; /* Allow badge to be as wide as its content needs */
  flex-shrink: 0 !important; /* Prevent shrinking that would squish text */
  flex-grow: 0 !important; /* Don't grow beyond content size */
}

/* CRITICAL: Ensure photo-amenity-badges container allows both vertical and horizontal groups */
.photo-amenity-badges,
#spot-detail-view .photo-amenity-badges,
#spot-detail-content .photo-amenity-badges,
.spot-details-container .photo-amenity-badges {
  display: flex !important;
  flex-direction: column !important; /* Container stacks vertical and horizontal groups */
  gap: 6px !important; /* CRITICAL: Gap between vertical group (2 badges) and horizontal group (3 badges) */
  align-items: flex-end !important; /* Align to right side */
}

/* Desktop: Ensure amenities layout works in desktop overlay */

/* Individual Amenity Badge */
.photo-amenity-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #000000bf !important; /* Dark semi-transparent for contrast */
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #fff !important; /* CRITICAL: Light text on dark badge - inherits to children */
  -webkit-text-fill-color: #fff !important;
  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: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease !important;
  position: relative !important;
  white-space: nowrap !important;
  /* CRITICAL: Allow badge to size based on content, not forced width */
  width: auto !important; /* Size based on content */
  min-width: fit-content !important; /* Ensure text isn't squished */
  flex-shrink: 0 !important; /* Prevent shrinking that would squish text */
}

.photo-amenity-badge:hover {
  background: #000000d9 !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 .amenity-label,
.photo-amenity-badge span.badge-label,
.photo-amenity-badge span.amenity-label,
button.photo-amenity-badge .badge-label,
button.photo-amenity-badge .amenity-label,
.photo-amenity-badges .photo-amenity-badge .badge-label,
.photo-amenity-badges .photo-amenity-badge .amenity-label,
.photo-gallery-compact .photo-amenity-badge .badge-label,
.photo-gallery-compact .photo-amenity-badge .amenity-label,
.spot-details-container .photo-amenity-badge .badge-label,
.spot-details-container .photo-amenity-badge .amenity-label,
#spot-detail-content .photo-amenity-badge .badge-label,
#spot-detail-content .photo-amenity-badge .amenity-label,
#listings-sheet .photo-amenity-badge .badge-label,
#listings-sheet .photo-amenity-badge .amenity-label {
  line-height: 1 !important;
  color: #fff !important; /* CRITICAL: Light text on dark badge */
  -webkit-text-fill-color: #fff !important; /* WebKit override */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; /* Contrast on black background */
  font-weight: 500 !important; /* Medium weight for readability */
  /* CRITICAL: Prevent text from being squished */
  white-space: nowrap !important; /* Prevent text wrapping */
  overflow: visible !important; /* Allow text to be fully visible */
  text-overflow: clip !important; /* Don't clip text with ellipsis */
  min-width: 0 !important; /* Allow label to shrink if absolutely necessary, but badge min-width will prevent squishing */
  flex-shrink: 0 !important; /* Prevent label from shrinking */
}

/* 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 #0000004d !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;
}

/* Touch phones: keep photo amenity badges inside the gallery on two wrapped rows */
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
  .photo-gallery-compact .photo-amenity-badges,
  #listings-sheet .photo-gallery-compact .photo-amenity-badges,
  #listings-sheet .spot-details-container .photo-amenity-badges,
  #spot-detail-content .photo-amenity-badges,
  #spot-detail-view .photo-amenity-badges,
  .spot-details-container .photo-amenity-badges {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-content: flex-start !important;
    gap: 6px !important;
  }

  .photo-amenity-badges .amenity-badges-vertical,
  .photo-amenity-badges .amenity-badges-horizontal,
  #listings-sheet .photo-amenity-badges .amenity-badges-vertical,
  #listings-sheet .photo-amenity-badges .amenity-badges-horizontal,
  #spot-detail-content .photo-amenity-badges .amenity-badges-vertical,
  #spot-detail-content .photo-amenity-badges .amenity-badges-horizontal,
  #spot-detail-view .photo-amenity-badges .amenity-badges-vertical,
  #spot-detail-view .photo-amenity-badges .amenity-badges-horizontal,
  .spot-details-container .photo-amenity-badges .amenity-badges-vertical,
  .spot-details-container .photo-amenity-badges .amenity-badges-horizontal {
    display: contents !important;
  }

  .photo-amenity-badges .photo-amenity-badge,
  #listings-sheet .photo-amenity-badges .photo-amenity-badge,
  #spot-detail-content .photo-amenity-badges .photo-amenity-badge,
  #spot-detail-view .photo-amenity-badges .photo-amenity-badge {
    flex: 0 1 auto !important;
    max-width: calc(100% - 4px) !important;
  }
}

/* Mobile: Tooltip on bottom for better visibility */

/* Mobile - constrain book button width */
@media (max-width: 640px) {
  .photo-book-btn,
  #bottom-sheet-book-button.photo-book-btn,
  #listings-sheet .photo-book-btn {
    max-width: calc(100% - 32px) !important; /* Full width minus 16px margins on each side */
    width: auto !important;
  }
}

/* Small phones */
@media (max-width: 400px) {
  .photo-book-btn,
  .photo-book-btn--booked {
    min-height: 44px !important;
    font-size: 12px !important;
    padding: 8px 16px !important;
    max-width: calc(100% - 24px) !important;
  }

  .spot-price-overlay {
    padding: 5px 8px !important;
    max-width: min(48%, calc(100% - 7.5rem)) !important;
  }

  .spot-price-overlay__row--primary .spot-price-overlay__amount {
    font-size: 13px;
  }

  .spot-price-overlay__amount {
    font-size: 12px;
  }

  /* Ensure horizontal group doesn't overlap with photo nav button */
  .amenity-badges-horizontal {
    max-width: calc(100% - 60px) !important; /* Leave space for nav button */
  }

  .photo-amenity-badge .badge-label {
    /* CRITICAL: Remove max-width constraint to prevent text squishing */
    max-width: none !important; /* Allow text to be full width */
    overflow: visible !important; /* Don't clip text */
    text-overflow: clip !important; /* Don't use ellipsis */
    color: #fff !important; /* CRITICAL: Ensure white text on mobile and tablet */
    -webkit-text-fill-color: #fff !important;
    white-space: nowrap !important; /* Keep text on one line */
  }
}

/* General photo gallery images (non-carousel single photo) */
.photo-gallery-compact:not(.photo-carousel) img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block;
  image-rendering: auto !important; /* Industry standard: browser chooses best algorithm for photos */
}

/* 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,
#listings-content-sheet .photo-carousel-image,
#spot-detail-view .photo-carousel-image,
#spot-detail-content .photo-carousel-image,
#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;
  right: 0 !important; /* CRITICAL: Constrain to container edges */
  bottom: 0 !important; /* CRITICAL: Constrain to container edges */
  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 */
  min-width: 0 !important; /* CRITICAL: Allow shrinking if needed */
  min-height: 0 !important; /* CRITICAL: Allow shrinking if needed */
  box-sizing: border-box !important; /* CRITICAL: Include padding/border in dimensions */
  object-fit: contain !important;
  object-position: center !important;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none !important;
  z-index: 1;
  image-rendering: auto !important;
  /* CRITICAL: Images are clipped by parent .photo-carousel-container with overflow:hidden */
  /* Note: overflow property doesn't apply to img elements (replaced elements) */
  /* The container's overflow:hidden ensures images don't overflow visually */
}

/* CRITICAL: Bottomsheet spot details - ensure images don't expand beyond container */
/* CONSOLIDATED: This is a more specific override of the general rule at line 502-531 */
/* The general rule applies to all contexts, this rule specifically targets bottomsheet spot details */
#listings-sheet .spot-details-container .photo-carousel-image,
#listings-sheet .spot-details-container .photo-carousel-image.active {
  max-width: 100% !important; /* CRITICAL: Never exceed container width */
  max-height: 100% !important; /* CRITICAL: Never exceed container height */
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  box-sizing: border-box !important; /* CRITICAL: Include padding/border in dimensions */
  position: absolute !important; /* CRITICAL: Absolute positioning to fill container */
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

.photo-gallery-compact.photo-carousel .photo-carousel-image.active,
.photo-gallery-compact .photo-carousel-image.active,
#listings-sheet .photo-carousel-image.active,
#listings-content-sheet .photo-carousel-image.active,
#spot-detail-view .photo-carousel-image.active,
#spot-detail-content .photo-carousel-image.active,
#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;
  top: 0 !important; /* CRITICAL: Reset position */
  left: 0 !important; /* CRITICAL: Reset position */
  right: 0 !important; /* CRITICAL: Constrain to container edges */
  bottom: 0 !important; /* CRITICAL: Constrain to container edges */
  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 */
  min-width: 0 !important; /* CRITICAL: Allow shrinking if needed */
  min-height: 0 !important; /* CRITICAL: Allow shrinking if needed */
  box-sizing: border-box !important; /* CRITICAL: Include padding/border in dimensions */
  object-fit: contain !important; /* Show full photo for mixed proportions */
  object-position: center !important;
  image-rendering: auto !important;
}

/* CRITICAL: Bottomsheet spot details - ensure active images don't expand beyond container */
#listings-sheet .spot-details-container .photo-carousel-image.active {
  max-width: 100% !important; /* CRITICAL: Never exceed container width */
  max-height: 100% !important; /* CRITICAL: Never exceed container height */
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* CRITICAL: Smooth transition when dragging - JS adds .dragging class during drag */
.photo-carousel-container.dragging .photo-carousel-image,
#spot-detail-view .photo-carousel-container.dragging .photo-carousel-image,
#spot-detail-content .photo-carousel-container.dragging .photo-carousel-image,
.spot-details-container .photo-carousel-container.dragging .photo-carousel-image,
#listings-sheet .photo-carousel-container.dragging .photo-carousel-image {
  transition: opacity 0.2s ease-out !important; /* Faster transition during drag */
}

/* Discover galleries: desktop overlay shows full photo; bottom-sheet spot-detail frame uses cover (below). */
body.discover-page #spot-detail-view .photo-carousel-image,
body.discover-page .spot-details-container:not(#listings-sheet .spot-details-container):not(#listings-content-sheet .spot-details-container) .photo-carousel-image,
body.discover-page .photo-gallery-compact:not(.spot-detail-photo-frame) .photo-static-image {
  object-fit: contain !important;
  object-position: center !important;
}

body.discover-page #listings-sheet .spot-details-container .spot-detail-photo-frame .photo-carousel-image,
body.discover-page #listings-content-sheet .spot-details-container .spot-detail-photo-frame .photo-carousel-image {
  object-fit: cover !important;
  object-position: center center !important;
}

/* FALLBACK: Any img inside photo-gallery-compact should be constrained */
/* CRITICAL: Ensure images are properly contained to prevent overflow warnings */
.photo-gallery-compact img,
#listings-sheet .photo-gallery-compact img,
#spot-detail-view .photo-gallery-compact img,
.spot-details-container .photo-gallery-compact img {
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  /* CRITICAL: Ensure images are clipped by parent container - prevents view-transitions overflow warning */
  display: block !important;
  box-sizing: border-box !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 */

/* SMALL PHONE: Even more compact placeholder */
@media (max-width: 400px) {
  #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 - Wraps the top section (type badge + address). Stays within card width. */
.luxury-header {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0; /* Allow parent to constrain width so .header-top viewport stays fixed */
  overflow: hidden !important; /* Clip so horizontal scroll section never escapes card */
  box-sizing: border-box;
}

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

/* High-specificity override for Tailwind margin utility classes */

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

/* Alternative approach - target parent container with Backyard Access */

/* 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: -1rem !important;
  display: inline-block !important;
}

/* CSS-only solution: Target specific class combination for Backyard Access */

/* Dark mode variant for Backyard Access */

/* 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:not(#apply-custom-duration):not(#custom-duration-btn):not(.duration-apply-btn) {
  color: var(--text-primary) !important;
}

.dark .spot-details-container .text-white:not(#apply-custom-duration):not(#custom-duration-btn):not(.duration-apply-btn) {
  color: var(--text-primary-dark) !important;
}

/* Only fix the availability schedule tooltip green text that's too light */

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

/* High-specificity override for inline white text */

/* Dark mode variants with ultra high specificity */
html.dark body .feature-name,
html.dark body .location-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 and amenity-label - photo amenity badges need white text on dark background */
html body .spot-details-container span:not(.badge-label):not(.amenity-label):not(.photo-layout-badge),
html body .luxury-header span:not(.badge-label):not(.amenity-label):not(.photo-layout-badge),
html body .luxury-features span:not(.badge-label):not(.photo-layout-badge),
html body .luxury-description span:not(.badge-label):not(.photo-layout-badge) {
  color: #1f2937 !important; /* Better contrast - gray-800 */
}

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

/* Override any Tailwind text-white classes with maximum specificity (light mode only) */
/* Exclude .owned-spot-banner - it intentionally uses white text on amber */
html:not(.dark) body .spot-details-container .text-white:not(.owned-spot-banner):not(.owned-spot-banner *):not(#apply-custom-duration):not(#custom-duration-btn):not(.duration-apply-btn),
html:not(.dark) body .spot-details-container [class*="text-white"]:not(.owned-spot-banner):not(.owned-spot-banner *):not(#apply-custom-duration):not(#custom-duration-btn):not(.duration-apply-btn) {
  color: #1f2937 !important; /* Better contrast - gray-800 */
}

/* Dark mode: allow dark:text-white and related utilities on dark surfaces */
html.dark body .spot-details-container h1[class*="dark:text-white"],
html.dark body .spot-details-container h2[class*="dark:text-white"],
html.dark body .spot-details-container h3[class*="dark:text-white"],
html.dark body .spot-details-container h4[class*="dark:text-white"],
html.dark body .spot-details-container [class*="dark:text-white"]:not(.owned-spot-banner):not(.owned-spot-banner *):not(#apply-custom-duration):not(#custom-duration-btn):not(.duration-apply-btn) {
  color: #f9fafb !important;
}

/* 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 and amenity-label - photo amenity badges need white text */
/* Exclude owned-spot-banner - amber background with intentional 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):not(.amenity-label):not(.photo-layout-badge),
html body .spot-details-container div:not(.section-label):not(.feature-chip):not(.info-chip):not(.policy-item):not(.owned-spot-banner) {
  color: #1f2937 !important; /* Dark text for light mode - gray-800 */
}

/* Exclude bottom sheet from global 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):not(.amenity-label):not(.photo-layout-badge),
#listings-sheet .spot-details-container div:not(.section-label):not(.feature-chip):not(.info-chip):not(.policy-item):not(.owned-spot-banner) {
  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):not(.amenity-label):not(.photo-layout-badge),
html.dark body .spot-details-container div:not(.section-label):not(.feature-chip):not(.info-chip):not(.policy-item):not(.owned-spot-banner) {
  color: #f3f4f6 !important; /* Light gray for dark mode - gray-100 */
}

/* Specifically target problematic white text elements (light mode only) */
html:not(.dark) body .spot-details-container .text-white:not(svg):not(.section-label):not(.feature-chip):not(.owned-spot-banner):not(.owned-spot-banner *):not(#apply-custom-duration):not(#custom-duration-btn):not(.duration-apply-btn) {
  color: #4d5116 !important;
}

/* Owned-spot-banner: keep amber background and white text (excluded from contrast overrides above) */
.spot-details-container .owned-spot-banner,
#spot-detail-content .owned-spot-banner {
  background-color: rgb(245 158 11) !important; /* amber-500 */
  color: #fff !important;
}
.spot-details-container .owned-spot-banner *,
#spot-detail-content .owned-spot-banner * {
  color: inherit !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;
}

/* Photo amenity badges: keep icon and label light on dark background (override generic .spot-details-container svg/span rules) */
.photo-amenity-badge .amenity-icon,
.photo-amenity-badge svg,
.spot-details-container .photo-amenity-badge .amenity-icon,
.spot-details-container .photo-amenity-badge svg,
#listings-sheet .photo-amenity-badge .amenity-icon,
#listings-sheet .photo-amenity-badge svg {
  color: #fff !important;
}

/* Force all text inside photo amenity badge to be light (badge is black/dark) */
.photo-amenity-badge,
.photo-amenity-badge span,
.photo-amenity-badge .amenity-label,
.spot-details-container .photo-amenity-badge span,
#listings-sheet .photo-amenity-badge span {
  color: #fff !important;
  -webkit-text-fill-color: #fff !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-4.h-4,
html body .spot-details-container path[stroke="currentColor"] {
  color: #212121 !important;
}

/* Contact host CTA: icon must match button foreground (beats .w-4.h-4 / generic svg color locks) */
html body .spot-details-container .contact-host-btn svg,
html body .spot-details-container .contact-host-btn svg.w-4,
html body .spot-details-container .contact-host-btn svg.h-4,
html body .spot-details-container .contact-host-btn svg.w-4.h-4,
html body .spot-details-container .contact-host-btn path,
html body .spot-details-container .contact-host-btn path[stroke="currentColor"],
html.dark body .spot-details-container .contact-host-btn svg,
html.dark body .spot-details-container .contact-host-btn svg.w-4.h-4,
html.dark body .spot-details-container .contact-host-btn path,
html.dark body .spot-details-container .contact-host-btn path[stroke="currentColor"],
.dark body.discover-page .spot-details-container .contact-host-btn svg,
.dark body.discover-page .spot-details-container .contact-host-btn svg.w-4.h-4,
.dark body.discover-page .spot-details-container .contact-host-btn path,
body.dark.discover-page .spot-details-container .contact-host-btn svg,
body.dark.discover-page .spot-details-container .contact-host-btn svg.w-4.h-4,
body.dark.discover-page .spot-details-container .contact-host-btn path {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  stroke: currentColor !important;
  fill: none !important;
}

/* Explicit foreground: light mode = light icon on dark button; dark mode = dark icon on light button */
body.discover-page .contact-host-btn svg,
body.discover-page .contact-host-btn svg.w-4.h-4,
body.discover-page .contact-host-btn path {
  color: var(--discover-premium-surface-solid, #fafaf9) !important;
  stroke: var(--discover-premium-surface-solid, #fafaf9) !important;
}

.dark body.discover-page .contact-host-btn svg,
.dark body.discover-page .contact-host-btn svg.w-4.h-4,
.dark body.discover-page .contact-host-btn path,
body.dark.discover-page .contact-host-btn svg,
body.dark.discover-page .contact-host-btn svg.w-4.h-4,
body.dark.discover-page .contact-host-btn path {
  color: #1c1917 !important;
  stroke: #1c1917 !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-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: Uses the shared Discover premium accent system for selected state */
/* 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 #0000001a !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 {
  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 {
  background: #c4b91a !important; /* Darker yellow-gold on hover */
  border-color: #a39017 !important;
  color: #111827 !important;
}

/* Duration chip base styling */
.duration-chip {
  color: #111827; /* Dark text for light mode */
}

.duration-chip:hover {
  color: var(--discover-premium-ink) !important;
}

/* Dark mode variants for duration chips */
.dark .duration-chip,
html.dark .duration-chip,
body.dark .duration-chip {
  background: var(--color-dark-surface) !important;
  border-color: var(--color-dark-border-strong) !important;
  color: var(--color-dark-text-muted) !important;
}

.dark .duration-chip:hover,
html.dark .duration-chip:hover,
body.dark .duration-chip:hover {
  background: var(--color-dark-surface-raised) !important;
  border-color: var(--color-dark-border-strong) !important;
  color: var(--discover-premium-ink) !important;
}

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

.dark .duration-chip.selected {
  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 {
  background: #c4b91a !important;
  border-color: #a39017 !important;
  color: #111827 !important;
}

/* Duration chip icon styling */
.duration-chip svg,
.duration-chip .spot-detail-duration__chip-icon {
  width: 0.75rem !important;
  height: 0.75rem !important;
  min-width: 0.75rem !important;
  max-width: 0.75rem !important;
  min-height: 0.75rem !important;
  max-height: 0.75rem !important;
  flex-shrink: 0 !important;
  color: currentColor !important;
  transition: color 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;
}

/* Apple-style spot details scrollbar - thin and elegant */
#spot-detail-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 113, 108, 0.36) 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(120, 113, 108, 0.36) !important;
  border-radius: 2px !important; /* Minimal radius */
  border: none !important;
  min-height: 20px !important;
}

#spot-detail-content::-webkit-scrollbar-thumb:hover {
  background-color: rgba(87, 83, 78, 0.56) !important;
}

/* 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: 520px) {
  #spot-detail-content::-webkit-scrollbar {
    width: 2px !important; /* Ultra-thin on mobile and tablet */
  }

  #spot-detail-content::-webkit-scrollbar-thumb {
    background-color: rgba(120, 113, 108, 0.42) !important;
  }
}

/* Apple-style listings container scrollbar - ultra thin */
.mobile-listings-container,
[data-listings-container="true"] {
  scrollbar-width: thin;
  scrollbar-color: #00000026 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: #00000026 !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: #0000004d !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: 520px) {
  .mobile-listings-container::-webkit-scrollbar,
  [data-listings-container="true"]::-webkit-scrollbar {
    width: 1px !important; /* Barely visible on mobile and tablet */
  }

  .mobile-listings-container::-webkit-scrollbar-thumb,
  [data-listings-container="true"]::-webkit-scrollbar-thumb {
    background-color: #00000033 !important;
  }
}

/* =============================================================================
   HORIZONTAL SCROLLING SECTION (iOS-style)
   The top row (type badge + address) is a horizontal scroll viewport.
   - Viewport width = spot details container width (fixed; does not grow).
   - Content = type badge + address badge; if address is long it extends past
     the viewport and the user scrolls horizontally to see the end.
   - Clipped by .luxury-header so nothing escapes the card.
   ============================================================================= */
.header-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.25rem;
  /* Fixed-width viewport: exactly the width of the card, never grow with content */
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important; /* Critical: allow viewport to stay 100% when content is wider */
  flex-wrap: nowrap;
  box-sizing: border-box;
  /* Horizontal scroll when address extends past the right edge */
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain !important; /* Don't bleed into parent scroll */
  scrollbar-width: none !important;
}

.header-top::-webkit-scrollbar {
  display: none !important;
  height: 0 !important;
}

/* Bottom sheet: keep address row as horizontal scroll viewport (override listings.css overflow: visible on container *) */
#listings-sheet .spot-details-container .luxury-header {
  overflow: hidden !important; /* Clip so address row does not escape; scroll lives inside .header-top */
  max-width: 100% !important;
  min-width: 0 !important;
}
#listings-sheet .spot-details-container .header-top,
#listings-sheet #listings-content-sheet.spot-details-scroll-active .spot-details-container .header-top {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

/* Desktop: ensure horizontal scroll works when address reaches edge (viewport must not grow with content) */
#spot-detail-content .header-top,
#spot-detail-view .header-top,
#spot-detail-view .header-top {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

/*
 * Spot detail address must stay scrollable/readable if global discover-critical
 * .desktop-address-ellipsis / .desktop-address-text ever apply here (defensive).
 */
.spot-details-container .clickable-address.desktop-address-ellipsis,
.spot-details-container .location-badge.desktop-address-ellipsis,
#spot-detail-content .clickable-address.desktop-address-ellipsis,
#spot-detail-content .location-badge.desktop-address-ellipsis,
#spot-detail-view .clickable-address.desktop-address-ellipsis,
#spot-detail-view .location-badge.desktop-address-ellipsis {
  max-width: none !important;
  overflow: visible !important;
}

.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: var(--discover-premium-hover);
  border-color: var(--discover-premium-line);
  color: var(--discover-premium-ink);
}

.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: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  vertical-align: middle !important; /* Ensure proper alignment with sibling elements */
  transform: none !important; /* Remove any transforms that could misalign */
  min-height: 2rem !important; /* Match spot-type-badge height for consistent alignment */
}

/* Address badge: content-sized so the horizontal section has scrollable content when address is long */
#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 0 auto !important; /* Do not shrink; width = content */
  min-width: max-content !important; /* At least as wide as the address text */
  width: max-content !important; /* Container width = written content (full address) */
  max-width: none !important; /* Long addresses extend past viewport; user scrolls to see end */
  overflow: visible !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  text-align: left !important;
  direction: ltr !important;
}

/* 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(--discover-premium-line-strong);
  background: var(--discover-premium-hover);
  transform: translateY(-1px);
  box-shadow: var(--discover-premium-shadow-soft);
}

.location-badge:hover .location-icon {
  color: var(--discover-premium-ink);
}

.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: var(--color-dark-text-secondary, #a8a29e) !important;
}

.dark .location-badge .external-icon,
html.dark .location-badge .external-icon,
body.dark .location-badge .external-icon {
  color: var(--color-dark-text-secondary, #a8a29e) !important;
}

/* 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: var(--discover-premium-hover) !important;
  background: var(--discover-premium-hover) !important;
  border-color: var(--discover-premium-line-strong) !important;
}

/* 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: var(--discover-premium-ink) !important;
}

.dark .location-icon,
html.dark .location-icon,
body.dark .location-icon {
  color: var(--color-dark-text-secondary, #a8a29e) !important;
}

.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: var(--color-dark-text-secondary, #a8a29e) !important;
}

.dark .location-badge:hover,
html.dark .location-badge:hover,
body.dark .location-badge:hover {
  border-color: var(--discover-premium-line-strong) !important;
  background: var(--discover-premium-hover) !important;
}

.dark .location-badge:hover .location-icon,
html.dark .location-badge:hover .location-icon,
body.dark .location-badge:hover .location-icon {
  color: var(--discover-premium-ink) !important;
}

.dark .location-badge:hover .location-text,
html.dark .location-badge:hover .location-text,
body.dark .location-badge:hover .location-text {
  color: var(--discover-premium-ink) !important;
}

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

/* Header-top container - horizontal scroll when type + policy + address exceed width */
#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: 100% !important; /* Container padding defines inset; avoid double-subtracting viewport */
  overflow-x: auto !important;
  overflow-y: hidden !important;
  flex-wrap: nowrap !important;
  box-sizing: border-box !important;
  scrollbar-width: none !important;
}

#listings-sheet .header-top::-webkit-scrollbar,
#listings-sheet .spot-details-container .header-top::-webkit-scrollbar {
  display: none !important;
  height: 0 !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;
}

#listings-sheet .header-top .listing-business-use-tag {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

/* Base bottom sheet location badge - scrolls with header row (not internal scroll) */
#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 0 auto !important;
  min-width: max-content !important;
  max-width: none !important;
  width: max-content !important;
  overflow: visible !important;
  scroll-behavior: smooth !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
  padding: 0.375rem 0.625rem !important;
  gap: 0.375rem !important;
  border-radius: 9999px !important;
  box-sizing: border-box !important;
}

/* CRITICAL: Hide scrollbar immediately on bottom sheet location badges to prevent flash on load */
#listings-sheet .location-badge::-webkit-scrollbar,
#listings-sheet .location-badge.clickable-address::-webkit-scrollbar,
#listings-sheet button.location-badge::-webkit-scrollbar,
#listings-sheet .spot-details-container .location-badge::-webkit-scrollbar,
#listings-sheet .header-top .location-badge::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !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;
}

/* Phone bottom sheet spot details: content-sized type + address pills (wrap when needed) */
@media (max-width: 639px) {
  #listings-sheet .header-top,
  #listings-sheet .spot-details-container .header-top {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    align-content: flex-start !important;
    gap: 0.35rem !important;
    overflow: visible !important;
    padding-top: 0.375rem !important;
    padding-bottom: 0 !important;
  }

  #listings-sheet .header-top .spot-type-badge,
  #listings-sheet .spot-details-container .header-top .spot-type-badge {
    align-self: auto !important;
    flex: 0 0 auto !important;
    width: fit-content !important;
    max-width: 100% !important;
    padding: 0.1875rem 0.4375rem !important;
    min-height: 1.5rem !important;
    font-size: 0.6875rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    gap: 0.1875rem !important;
  }

  #listings-sheet .header-top .listing-business-use-tag,
  #listings-sheet .spot-details-container .header-top .listing-business-use-tag {
    flex: 0 0 auto !important;
    align-self: auto !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 1.5rem !important;
    padding: 0.1875rem 0.4375rem !important;
    font-size: 0.6875rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  #listings-sheet .header-top .listing-business-use-tag__label,
  #listings-sheet .spot-details-container .header-top .listing-business-use-tag__label {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #listings-sheet .header-top .spot-type-badge svg,
  #listings-sheet .spot-details-container .header-top .spot-type-badge svg {
    width: 0.6875rem !important;
    height: 0.6875rem !important;
    min-width: 0.6875rem !important;
    min-height: 0.6875rem !important;
    flex-shrink: 0 !important;
  }

  #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: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    align-self: auto !important;
    width: fit-content !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0.1875rem 0.4375rem !important;
    min-height: 1.5rem !important;
    gap: 0.25rem !important;
    overflow: hidden !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    box-sizing: border-box !important;
  }

  #listings-sheet .location-badge .location-icon,
  #listings-sheet .location-badge .external-icon {
    flex-shrink: 0 !important;
  }

  #listings-sheet .location-badge .location-icon {
    width: 0.625rem !important;
    height: 0.625rem !important;
    min-width: 0.625rem !important;
    min-height: 0.625rem !important;
  }

  #listings-sheet .location-badge .external-icon {
    width: 0.5625rem !important;
    height: 0.5625rem !important;
    min-width: 0.5625rem !important;
    min-height: 0.5625rem !important;
    opacity: 0.55 !important;
  }

  #listings-sheet .location-badge .location-text,
  #listings-sheet .spot-details-container .location-text,
  #listings-sheet .header-top .location-text,
  #listings-sheet .spot-details-container .location-badge .location-text,
  #listings-sheet .header-top .location-badge .location-text {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
    font-size: 0.6875rem !important;
    line-height: 1.2 !important;
  }

  #listings-sheet .spot-details-container .spot-detail-trust {
    padding: 0 0 0.125rem !important;
    margin-top: 0 !important;
  }

  #listings-sheet .spot-details-container .spot-detail-trust .marketplace-trust-summary {
    width: fit-content !important;
    max-width: 100% !important;
  }
}

/*   RESPONSIVE ADJUSTMENTS - Size-specific tweaks*/

/* Tablet (520px - 1100px) */
@media (min-width: 520px) and (max-width: 1100px) {
  #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: var(--type-badge-size, 0.75rem) !important;
    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: var(--type-badge-size, 0.75rem) !important;
    line-height: var(--line-height-tight, 1.2) !important;
  }
}

/* Mobile (340px - 520px) */
@media (min-width: 400px) and (max-width: 520px) {
  #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: 400px) {
  #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;
}

.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 #00000014;
  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 #0000004d;
}

.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: transform 0.2s ease, opacity 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: var(--discover-premium-hover);
}

.dark .info-chip:hover .icon-wrapper {
  background: var(--discover-premium-active);
}

.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 (scoped to discover page) */
body.discover-page,
.discover-page {
  --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;

  /* Legacy accent aliases mapped to the Discover premium palette */
  --blue-50: var(--discover-premium-wash);
  --blue-100: var(--discover-premium-hover);
  --blue-200: var(--discover-premium-line);
  --blue-300: var(--discover-premium-line-strong);
  --blue-400: var(--discover-premium-muted);
  --blue-500: var(--discover-premium-ink);
  --blue-600: var(--discover-premium-ink);
  --blue-700: var(--discover-premium-ink);
  --blue-800: var(--discover-premium-ink);
  --blue-900: var(--discover-premium-active);
  --blue-950: var(--discover-premium-active);

  /* Legacy indigo aliases use the same premium accent family */
  --indigo-50: var(--discover-premium-wash);
  --indigo-100: var(--discover-premium-hover);
  --indigo-500: var(--discover-premium-ink);
  --indigo-600: var(--discover-premium-ink);
  --indigo-700: var(--discover-premium-ink);

  /* 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 — overridden below when html.dark matches globals */
  --text-primary-dark: #fafaf9;
  --text-secondary-dark: #e7e5e4;
  --text-tertiary-dark: #e7e5e4;
  --text-muted-dark: #a8a29e;
}

html.dark body.discover-page,
html.dark .discover-page {
  --gray-750: var(--color-dark-surface-raised);
  --gray-800: var(--color-dark-surface);
  --gray-700: var(--color-dark-border-strong);
  --text-primary-dark: var(--color-dark-text);
  --text-secondary-dark: var(--color-dark-text-muted);
  --text-tertiary-dark: var(--color-dark-text-muted);
  --text-muted-dark: var(--color-dark-text-secondary);
}

/* Responsive adjustments for ultra-small devices - Maintaining readability */
@media (max-width: 400px) {
  .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 */
}

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

/* 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: var(--discover-premium-wash);
  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 var(--discover-premium-line);
  box-shadow: var(--discover-premium-shadow-soft);
  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(248, 250, 252, 0.35) 50%, transparent 100%);
}

.dark .section-label {
  color: #f8fafc !important; /* Light text for dark mode - override span rules */
  background: var(--discover-premium-active);
  border-color: var(--discover-premium-line);
  box-shadow: var(--discover-premium-shadow-soft);
  text-shadow: 0 1px 2px #0000004d;
}

/* 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: var(--discover-premium-ink);
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.12));
}

.dark .section-label svg {
  color: var(--discover-premium-ink);
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.3));
}

/* Enhanced hover effect for section labels */
.section-label:hover {
  transform: translateY(-1px);
  box-shadow: var(--discover-premium-shadow-soft);
  background: var(--discover-premium-hover);
}

.dark .section-label:hover {
  box-shadow: var(--discover-premium-shadow-soft);
  background: var(--discover-premium-hover);
}

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

/* Ensure back button aligns to top when title wraps */

/* CRITICAL: Lighten text in dark mode for better contrast on neutral-800 background */

/* Bottom sheet header - allow flexible height for 2-line titles */

/* Bottom sheet title - allow 2 lines */
#listings-sheet #spot-detail-title-sheet,
#listings-sheet .spot-details-container #spot-detail-title-sheet {
  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 */
}

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

.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: opacity 0.15s ease, transform 0.15s ease, background-color 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 #00000014 !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 #00000040 !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 */

/* ULTRA-SMALL PHONE: Compact but still readable feature chips */
@media (max-width: 400px) {
  #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: 400px) {
  .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: 0 !important; /* Remove top padding to prevent blocking arrow buttons */
}

/* Enhanced styling for "About this spot" content */

/* Enhanced styling for "Access Instructions" content */

/*   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: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

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

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

.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);
}

/* Must stay scoped to .policy-item — unscoped .policy-content also matched the
   cancellation policy expandable in spot_detail_info.html and broke max-height:0. */
.policy-item .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: transform 0.2s ease, opacity 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: center; /* Center the content */
  padding: 0.625rem 0.75rem;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  gap: 0.5rem;
}

.policy-expandable-trigger:hover {
  background: var(--discover-premium-hover);
}

.dark .policy-expandable-trigger:hover {
  background: var(--discover-premium-hover);
}

.policy-chevron {
  display: inline-block !important; /* Show chevron for expandable indicator */
  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;
  margin-left: 0.5rem !important; /* Space from text */
}



.policy-expandable-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 !important; /* Collapsed state - no padding */
}

.policy-expandable.expanded .policy-expandable-content {
  max-height: 500px;
  padding: 0.75rem !important; /* Expanded state - add padding */
}

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

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

/* Collapsed state: Remove border when parent is collapsed */
.policy-expandable:not(.expanded) .policy-details {
  border-top: none !important;
  padding: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

.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: var(--discover-premium-active);
  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: #fff !important; /* White text for dark mode visibility */
}

/* Specifically target elements with text-gray-700 dark:text-gray-300 classes */

.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);
}

/* Desktop spot details overlay: Add right transform to Reviews heading */

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

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

/*   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: var(--z-maximum) !important;
  overflow: visible !important;
  /* Restore essential tooltip styling */
  min-width: 300px !important;
  max-width: 400px !important;
  background: white !important;
  border: 2px solid var(--discover-premium-line) !important;
  border-radius: 0.75rem !important;
  box-shadow:
    0 25px 50px -12px #00000040,
    0 10px 20px -5px #0000001a,
    0 0 0 1px var(--discover-premium-line) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-10px) scale(0.95) !important;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  /* 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: none !important;
  transform: translateY(0) scale(1) !important;
}

.enhanced-tooltip.tooltip-pinned.show {
  pointer-events: auto !important;
}

/* 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:not(.spot-detail-fact__schedule-view),
.enhanced-tooltip-btn:not(.spot-detail-fact__schedule-view),
button[class*="enhanced-tooltip-btn"]:not(.spot-detail-fact__schedule-view),
[class*="enhanced-tooltip-btn"]:not(.spot-detail-fact__schedule-view) {
  position: relative !important;
  z-index: var(--z-high-modal) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.25rem !important;
  padding: 0.25rem 0.5rem !important;
  background: var(--discover-premium-wash) !important;
  border: 1px solid var(--discover-premium-line) !important;
  border-radius: 0.375rem !important;
  color: var(--discover-premium-ink) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 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 */

/* ULTRA-SMALL PHONE: Even more compact Self Access/About buttons */
@media (max-width: 400px) {
  #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: var(--discover-premium-hover) !important;
  border-color: var(--discover-premium-line-strong) !important;
  color: var(--discover-premium-ink) !important;
}

.dark .enhanced-tooltip-btn {
  background: var(--discover-premium-active) !important;
  border-color: var(--discover-premium-line) !important;
  color: var(--discover-premium-ink) !important;
}

.dark .enhanced-tooltip-btn:hover {
  background: var(--discover-premium-hover) !important;
  border-color: var(--discover-premium-line-strong) !important;
  color: var(--discover-premium-ink) !important;
}

/* Tooltip hint text styling */
.tooltip-hint {
  white-space: nowrap !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  transform: none !important;
  text-align: center !important;
}

/* Calendar icon inside enhanced tooltip button */
.enhanced-tooltip-btn svg {
  transform: none !important;
  flex-shrink: 0 !important;
}

/* Availability schedule specific tooltip positioning and styling */
.availability-schedule-tooltip {
  position: fixed !important; /* CRITICAL: Fixed positioning escapes all stacking contexts */
  z-index: var(--z-maximum) !important;
  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 #0000004d,
    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: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  /* 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: none !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 */
}

/* High-specificity overlay override: keep tooltip above the spot detail view */
body > .availability-schedule-tooltip.show,
.availability-schedule-tooltip.show {
  position: fixed !important; /* CRITICAL: Fixed positioning escapes all stacking contexts */
  z-index: var(--z-maximum) !important;
  isolation: isolate !important;
  contain: none !important;
  transform: translateZ(999px) !important;
  will-change: transform !important;
  pointer-events: none !important;
}

.availability-schedule-tooltip.tooltip-pinned.show,
body > .availability-schedule-tooltip.tooltip-pinned.show {
  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: var(--z-maximum) !important;
  isolation: isolate !important;
  contain: none !important;
  transform: translateZ(999px) !important;
  will-change: transform !important;
  pointer-events: none !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: opacity 0.2s ease, transform 0.2s ease, background-color 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 */
.spot-card,
.spot-card-body,
.luxury-info-grid,
.info-chip,
.luxury-features,
.luxury-description,
.luxury-policies {
  position: relative !important;
  z-index: var(--z-base) !important; /* Low z-index to stay below tooltip */
}

/* Lower z-index for cancellation policy container to allow dropdown to appear on top - Changed from z-index: -1 to z-index: auto - negative z-index pushed content behind parent background */
.cancellation-policy-container,
.policy-expandable,
.policy-expandable-content,
.policy-details,
.policy-label,
.policy-value {
  position: relative !important; /* Keep in normal flow but allow z-index */
  z-index: auto !important; /* Normal stacking - visible but below tooltips */
  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 */
}

/* High-specificity override: keep policy trigger descendants from blocking tooltips */

/* 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-sheet {
  isolation: auto !important; /* Don't create new stacking contexts */
  contain: none !important; /* Don't contain z-index */
}

/* NOTE: #listings-sheet positioning is handled in bottomsheet.css */

/* Cancellation policy container styling - ensure content is visible */
/* NOTE: Removed z-index: -1 which was hiding content behind parent background */
.cancellation-policy-container.bg-gray-50,
.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: relative !important;
  z-index: auto !important; /* Normal stacking - content stays visible */
  isolation: auto !important;
  contain: none !important;
  transform: none !important;
  will-change: auto !important;
  opacity: 1 !important;
}

/* 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 */
  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;
  margin-bottom: 0.75rem !important; /* Push content below further down */
}

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

/* Cancellation Policy Tooltip - ensure it appears above everything */
[id^="cancellation-tooltip-"] {
  z-index: var(--z-maximum) !important;
  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 */
/* Only display on desktop (>=1101px), hidden on tablet/mobile */
#spot-detail-view {
  display: flex !important; /* Flex container so #spot-detail-content flex:1 gets space */
  flex-direction: column !important;
  overflow: hidden !important; /* Dialog itself should not scroll */
}

/* Desktop-only display - dialog should only be visible on desktop - Hide dialog on tablet/mobile - it should use bottom sheet instead - Always respect the hidden class - highest priority */
#spot-detail-view.hidden,
#spot-detail-view.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Spot detail view container */
.spot-details-container {
  position: relative !important;
  z-index: var(--z-base) !important;
  overflow-y: hidden !important;
  overflow-x: hidden !important;
  max-width: 100% !important;
  height: auto !important;
  isolation: auto !important;
  contain: none !important;
  /* CONSISTENCY: No base padding - desktop has padding on #spot-detail-content, bottom sheet will add its own */
  padding: 0 !important;
}

/* #listings-sheet .spot-details-container overflow and padding: listings.css */

/* CRITICAL: Hide bottom spacer in desktop overlay - it's only needed for bottom sheet scrolling */
#spot-detail-view .spot-details-bottom-spacer,
#spot-detail-view .spot-details-bottom-spacer,
#spot-detail-content .spot-details-bottom-spacer {
  display: none !important;
  height: 0 !important;
  visibility: hidden !important;
}

/* Content area scrolls vertically */
#spot-detail-content {
  position: relative !important;
  z-index: inherit !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex: 1 !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Desktop dialog: ensure content area has minimum height so photo carousel is visible */
#spot-detail-view #spot-detail-content,
#spot-detail-view:not(.hidden) #spot-detail-content {
  min-height: 200px !important; /* Override min-height:0 so gallery has room to show */
}

/* CRITICAL: When spot details are shown in DESKTOP overlay, disable scrolling on sheet (dialog scrolls instead).
 * Do NOT hide overflow when sheet is the scroll container (spot-details-scroll-active) - bottom sheet spot details must scroll. */
#listings-sheet #listings-content-sheet:has(.spot-details-container):not(.spot-details-scroll-active),
#listings-sheet #listings-content-sheet:has(#spot-detail-content):not(.spot-details-scroll-active) {
  overflow-y: hidden !important;
  overflow-x: hidden !important;
}

/* Clip carousel / overflow: spot-details.css (.photo-gallery-compact.photo-carousel) */

/* 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-brand#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;
  margin: 0 !important; /* CRITICAL: Remove any margins */
  z-index: 15 !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important; /* CRITICAL: Show pointer cursor */
  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 - match button width */
.spot-detail-book-shell {
  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 */
}

/* Primary booking CTA now lives below the photo instead of inside the image. */
.spot-detail-primary-cta {
  margin: 0.75rem 0 1rem !important;
  padding: 0.75rem !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 0.875rem !important;
}

.dark .spot-detail-primary-cta {
  background: #111827 !important;
  border-color: #374151 !important;
}

.spot-detail-primary-cta #spot-detail-book,
.spot-detail-primary-cta #bottom-sheet-book-button,
.spot-detail-primary-cta .spot-detail-primary-cta__button {
  width: 100% !important;
  max-width: none !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: var(--z-high-modal) !important;
}

/* Sheet already owns home-indicator padding (--discover-sheet-bottom-gap on #listings-sheet).
   Sticky CTA only needs its own inset — not a second env(safe-area-inset-bottom). */
#listings-sheet .spot-details-container .spot-detail-primary-cta,
body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-primary-cta {
  position: sticky !important;
  bottom: 0 !important;
  z-index: var(--z-high-modal) !important;
  margin-top: 0.75rem !important;
  margin-bottom: 0 !important;
  padding: 0.75rem !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
}

/* MOBILE: Prevent element overlap in bottom sheet spot details */

/* ULTRA-SMALL PHONE: Even more compact, no overlap */
@media (max-width: 400px) {
  #listings-sheet .spot-details-container {
    /* CONSISTENCY: Slightly reduced padding on very small screens, but maintain horizontal consistency */
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-top: 0.375rem !important;
    padding-bottom: 0 !important; /* No bottom padding - bottom spacer handles this */
    gap: 0.5rem !important;
  }

  /* Ultra-small: allow hero to follow the short max-height (do not floor at 140px). */
  #listings-sheet .spot-details-container .photo-gallery-compact {
    min-height: 0 !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 */

/* 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: #00000080 !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: 1100px) {
  #custom-confirm-modal > div {
    transform: translateX(-8px) !important; /* Small left offset on touch mobile */
  }
}
/* NOTE: Dark mode contrast styles consolidated in dark-mode.css */

/* FIX: WHITE TEXT ON WHITE BACKGROUND ISSUE */
/* Override white text in spot details to ensure proper contrast */

/* Dark mode: Ensure proper contrast in dark mode */

/* SPECIFIC FIX: Target the microcopy text specifically */

/* 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,
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 duration chip text colors in dark mode - override inline styles */

/* 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,
.dark #spot-detail-view #bottom-sheet-duration-section.bg-gray-50,
.dark #spot-detail-content #bottom-sheet-duration-section.bg-gray-50,
.dark #spot-detail-view #bottom-sheet-duration-section.bg-blue-50,
.dark #spot-detail-content #bottom-sheet-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,
html.dark #spot-detail-view #bottom-sheet-duration-section.bg-gray-50,
html.dark #spot-detail-content #bottom-sheet-duration-section.bg-gray-50,
html.dark #spot-detail-view #bottom-sheet-duration-section.bg-blue-50,
html.dark #spot-detail-content #bottom-sheet-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,
body.dark #spot-detail-view #bottom-sheet-duration-section.bg-gray-50,
body.dark #spot-detail-content #bottom-sheet-duration-section.bg-gray-50,
body.dark #spot-detail-view #bottom-sheet-duration-section.bg-blue-50,
body.dark #spot-detail-content #bottom-sheet-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 mobile header white background */

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

/* ENHANCED FIX: Target the specific "You can extend your booking anytime" text */

/* Dark mode version for the enhanced fix */

/* COMPREHENSIVE FIX: Target all possible variations of white text in spot details */

/* Dark mode versions */

/*   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 *[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,
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"] {
  color: rgb(250, 204, 21) !important; /* Keep yellow in dark mode */
}

/* ============================================================================
 * PHOTO CAROUSEL NAVIGATION - Missing styles from spot-details.css
 * ============================================================================
 * CRITICAL: These styles are required for photo carousel functionality
 * JS creates these elements but they need CSS styling
 * ============================================================================ */

/* Photo Navigation Buttons - Desktop Modal Contexts */
.photo-gallery-compact .photo-nav-btn,
.photo-carousel .photo-nav-btn,
.photo-gallery-compact > .photo-nav-btn,
.photo-carousel > .photo-nav-btn,
#spot-detail-view .photo-nav-btn,
#spot-detail-content .photo-nav-btn,
.spot-details-container .photo-nav-btn,
#spot-detail-view .photo-gallery-compact .photo-nav-btn,
#spot-detail-content .photo-gallery-compact .photo-nav-btn,
#spot-detail-view .photo-carousel .photo-nav-btn,
#spot-detail-content .photo-carousel .photo-nav-btn,
#spot-detail-view .photo-nav-btn,
#spot-detail-view .photo-gallery-compact .photo-nav-btn,
#spot-detail-view .photo-carousel .photo-nav-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: var(--discover-glass-soft, rgba(248, 250, 252, 0.6)) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  z-index: var(--z-elevated, 10) !important;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 8px #00000026 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  margin: 0 !important;
  left: auto !important;
  right: auto !important;
  isolation: auto !important;
  contain: none !important;
}

/* Photo Navigation Button SVG */
.photo-gallery-compact .photo-nav-btn svg,
.photo-carousel .photo-nav-btn svg,
#spot-detail-view .photo-nav-btn svg,
#spot-detail-content .photo-nav-btn svg,
.spot-details-container .photo-nav-btn svg,
#spot-detail-view .photo-nav-btn svg {
  pointer-events: none !important;
}

/* Photo Navigation - Previous Button Positioning */
.photo-gallery-compact .photo-nav-prev,
.photo-carousel .photo-nav-prev,
.photo-gallery-compact > .photo-nav-prev,
.photo-carousel > .photo-nav-prev,
#spot-detail-view .photo-nav-prev,
#spot-detail-content .photo-nav-prev,
.spot-details-container .photo-nav-prev,
#spot-detail-view .photo-gallery-compact .photo-nav-prev,
#spot-detail-content .photo-gallery-compact .photo-nav-prev,
#spot-detail-view .photo-carousel .photo-nav-prev,
#spot-detail-content .photo-carousel .photo-nav-prev,
#spot-detail-view .photo-nav-prev,
#spot-detail-view .photo-gallery-compact .photo-nav-prev,
#spot-detail-view .photo-carousel .photo-nav-prev {
  left: 50% !important;
  right: auto !important;
  position: absolute !important;
  top: 50% !important;
  transform: translate(-50%, -50%) translateX(-30px) !important;
}

/* Photo Navigation - Next Button Positioning */
.photo-gallery-compact .photo-nav-next,
.photo-carousel .photo-nav-next,
.photo-gallery-compact > .photo-nav-next,
.photo-carousel > .photo-nav-next,
#spot-detail-view .photo-nav-next,
#spot-detail-content .photo-nav-next,
.spot-details-container .photo-nav-next,
#spot-detail-view .photo-gallery-compact .photo-nav-next,
#spot-detail-content .photo-gallery-compact .photo-nav-next,
#spot-detail-view .photo-carousel .photo-nav-next,
#spot-detail-content .photo-carousel .photo-nav-next,
#spot-detail-view .photo-nav-next,
#spot-detail-view .photo-gallery-compact .photo-nav-next,
#spot-detail-view .photo-carousel .photo-nav-next {
  left: 50% !important;
  right: auto !important;
  position: absolute !important;
  top: 50% !important;
  transform: translate(-50%, -50%) translateX(30px) !important;
}

/* Photo Navigation - Hover States */
.photo-gallery-compact .photo-nav-prev:hover,
.photo-carousel .photo-nav-prev:hover,
#spot-detail-view .photo-nav-prev:hover,
#spot-detail-content .photo-nav-prev:hover,
.spot-details-container .photo-nav-prev:hover {
  background: var(--discover-glass-medium, rgba(248, 250, 252, 0.95)) !important;
  box-shadow: 0 4px 12px #00000040;
  transform: translate(-50%, -50%) translateX(-30px) scale(1.1) !important;
}

.photo-gallery-compact .photo-nav-next:hover,
.photo-carousel .photo-nav-next:hover,
#spot-detail-view .photo-nav-next:hover,
#spot-detail-content .photo-nav-next:hover,
.spot-details-container .photo-nav-next:hover {
  background: var(--discover-glass-medium, rgba(248, 250, 252, 0.95)) !important;
  box-shadow: 0 4px 12px #00000040;
  transform: translate(-50%, -50%) translateX(30px) scale(1.1) !important;
}

/* Photo Navigation - Active States */
.photo-gallery-compact .photo-nav-prev:active,
.photo-carousel .photo-nav-prev:active,
#spot-detail-view .photo-nav-prev:active,
#spot-detail-content .photo-nav-prev:active,
.spot-details-container .photo-nav-prev:active {
  transform: translate(-50%, -50%) translateX(-30px) scale(0.95) !important;
  transition: transform 0.1s ease;
}

.photo-gallery-compact .photo-nav-next:active,
.photo-carousel .photo-nav-next:active,
#spot-detail-view .photo-nav-next:active,
#spot-detail-content .photo-nav-next:active,
.spot-details-container .photo-nav-next:active {
  transform: translate(-50%, -50%) translateX(30px) scale(0.95) !important;
  transition: transform 0.1s ease;
}

/* Dark Mode - Photo Navigation Buttons */
html.dark .photo-nav-btn {
  background: rgba(38, 38, 38, 0.6) !important;
  color: white;
}

html.dark .photo-nav-btn:hover {
  background: rgba(38, 38, 38, 0.95) !important;
}

/* Photo Indicators - Desktop Modal Contexts */
.photo-indicators,
#spot-detail-view .photo-indicators,
#spot-detail-content .photo-indicators,
.spot-details-container .photo-indicators,
#spot-detail-view .photo-gallery-compact .photo-indicators,
#spot-detail-content .photo-gallery-compact .photo-indicators,
#spot-detail-view .photo-carousel .photo-indicators,
#spot-detail-content .photo-carousel .photo-indicators {
  position: absolute !important;
  bottom: 16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  gap: 8px !important;
  z-index: var(--z-elevated, 10) !important;
  padding: 8px 12px !important;
  background: #0000004d !important;
  backdrop-filter: blur(8px) !important;
  border-radius: 20px !important;
  align-items: center !important;
  pointer-events: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Photo Indicators - Now shown in Bottom Sheet (same as desktop) */
#listings-sheet .photo-gallery-compact .photo-indicators,
#listings-sheet .photo-carousel .photo-indicators,
#listings-sheet .spot-details-container .photo-indicators {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Photo Indicator Buttons */
.photo-indicators .photo-indicator {
  pointer-events: auto;
}

/* Photo indicators external - overlaid on gallery bottom-right */
.photo-indicators-external {
  display: flex !important;
  gap: 8px !important;
  justify-content: flex-end !important;
  align-items: center !important;
  position: absolute !important;
  right: 0.5rem !important;
  bottom: 0.5rem !important;
  left: auto !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  background: #0000004d !important;
  backdrop-filter: blur(8px) !important;
  border-radius: 20px !important;
  pointer-events: none !important;
  width: fit-content !important;
  max-width: calc(100% - 1rem) !important;
  z-index: 8 !important;
  isolation: isolate !important;
  cursor: pointer !important;
}

.photo-indicators-external .photo-indicator {
  pointer-events: auto !important; /* Buttons inside are clickable */
  cursor: pointer !important;
}

/* Legacy markup: indicators still rendered as gallery sibling (cached HTML) */
.photo-gallery-compact.photo-carousel + .photo-indicators-external {
  position: relative !important;
  margin-top: -2.25rem !important;
  margin-bottom: 0.375rem !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 12 !important;
}

/* Bottom sheet: show photo indicators (same as desktop) for switching through photos */
#listings-sheet .photo-indicators-external,
#listings-sheet .spot-details-container .photo-indicators-external,
#listings-content-sheet .photo-indicators-external,
#listings-content-sheet .spot-details-container .photo-indicators-external,
#listings-sheet .photo-gallery-compact .photo-indicators-external,
#listings-content-sheet .photo-gallery-compact .photo-indicators-external {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  gap: 8px !important;
  justify-content: flex-end !important;
  align-items: center !important;
  position: absolute !important;
  right: 0.5rem !important;
  bottom: 0.5rem !important;
  left: auto !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  pointer-events: auto !important;
  /* Solid tint instead of backdrop-filter: blur recomposits heavily on each indicator/image change */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(0, 0, 0, 0.55) !important;
  z-index: 12 !important;
  isolation: isolate !important;
  cursor: pointer !important;
}

/* Desktop spot detail: same pointer affordance as sheet (parent may use grab on gallery) */
#spot-detail-view .photo-indicators-external,
#spot-detail-content .photo-indicators-external,
#spot-detail-view .photo-gallery-compact .photo-indicators-external,
#spot-detail-content .photo-gallery-compact .photo-indicators-external {
  cursor: pointer !important;
  position: absolute !important;
  right: 0.5rem !important;
  bottom: 0.5rem !important;
  margin: 0 !important;
}

#spot-detail-view .photo-indicators-external .photo-indicator,
#spot-detail-content .photo-indicators-external .photo-indicator {
  cursor: pointer !important;
}

/* Keep carousel frame under the external strip when margins overlap (avoids strip behind composited image) */
#listings-sheet .spot-details-container .photo-gallery-compact.photo-carousel,
#listings-sheet .spot-detail-content-wrapper.spot-details-container .photo-gallery-compact.photo-carousel,
#spot-detail-content .photo-gallery-compact.photo-carousel,
#spot-detail-view .photo-gallery-compact.photo-carousel,
#spot-detail-view .photo-gallery-compact.photo-carousel {
  z-index: 0 !important;
}

/*
 * Fixed 24x8 hit targets so active vs inactive does not change strip width.
 * Avoids ResizeObserver on #listings-content-sheet firing from dot width 8 -> 24,
 * which debounces into BottomSheet._setInnerScrollVisibleSliceHeight (layout thrash).
 */
#listings-sheet .photo-indicators-external .photo-indicator,
#listings-content-sheet .photo-indicators-external .photo-indicator {
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 8px !important;
  min-height: 8px !important;
  box-sizing: border-box !important;
  border-radius: 4px !important;
  transform: none !important;
  cursor: pointer !important;
}

#listings-sheet .photo-indicators-external .photo-indicator:not(.active) {
  background: radial-gradient(
      circle closest-side at 50% 50%,
      rgba(255, 255, 255, 0.55) 0,
      rgba(255, 255, 255, 0.55) 4px,
      transparent 4.5px
    )
    center / 100% 100% no-repeat transparent !important;
  box-shadow: none !important;
}

#listings-sheet .photo-indicators-external .photo-indicator.active {
  background: rgba(255, 255, 255, 1) !important;
  box-shadow: 0 2px 4px #00000033 !important;
}

#listings-sheet .photo-indicators-external .photo-indicator:hover {
  transform: none !important;
}

#listings-sheet .photo-indicators-external .photo-indicator:not(.active):hover {
  background: radial-gradient(
      circle closest-side at 50% 50%,
      rgba(255, 255, 255, 0.85) 0,
      rgba(255, 255, 255, 0.85) 4px,
      transparent 4.5px
    )
    center / 100% 100% no-repeat transparent !important;
}

#listings-sheet .photo-indicators-external .photo-indicator:active {
  transform: none !important;
  opacity: 0.85 !important;
}

html.dark #listings-sheet .photo-indicators-external .photo-indicator:not(.active) {
  background: radial-gradient(
      circle closest-side at 50% 50%,
      rgba(255, 255, 255, 0.45) 0,
      rgba(255, 255, 255, 0.45) 4px,
      transparent 4.5px
    )
    center / 100% 100% no-repeat transparent !important;
}

html.dark #listings-sheet .photo-indicators-external .photo-indicator.active {
  background: rgba(255, 255, 255, 0.92) !important;
}

/* Hide photo counter in bottom sheet (replaced with indicators) */
#listings-sheet .photo-counter,
#listings-sheet .photo-gallery-compact .photo-counter,
#listings-sheet .photo-carousel .photo-counter,
#listings-sheet .spot-details-container .photo-counter {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.photo-indicator {
  width: 8px;
  height: 8px;
  min-width: 8px;
  min-height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
  touch-action: manipulation;
}

.photo-indicator:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: scale(1.3);
}

.photo-indicator:active {
  transform: scale(0.9);
}

.photo-indicator.active {
  background: rgba(255, 255, 255, 1);
  width: 24px;
  border-radius: 4px;
  box-shadow: 0 2px 4px #00000033;
}

html.dark .photo-indicator {
  background: rgba(255, 255, 255, 0.4);
}

html.dark .photo-indicator:hover {
  background: rgba(255, 255, 255, 0.7);
}

html.dark .photo-indicator.active {
  background: rgba(255, 255, 255, 0.9);
}

/* Photo Counter - Already added earlier, but ensure desktop contexts are covered */
#spot-detail-view .photo-counter,
#spot-detail-content .photo-counter,
.spot-details-container .photo-counter:not(#listings-sheet .photo-counter),
#spot-detail-view .photo-gallery-compact .photo-counter,
#spot-detail-content .photo-gallery-compact .photo-counter,
#spot-detail-view .photo-carousel .photo-counter,
#spot-detail-content .photo-carousel .photo-counter {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Mobile Responsive - Photo Navigation Buttons */

/* PRICING DISPLAY - Spot Details Price Badges */

/* Pricing display container */
.pricing-display {
  margin-bottom: 1rem;
}

/* Horizontal flex container for price items */
.pricing-display > .flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* Individual price badge */
.price-item {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.5rem 0.75rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.dark .price-item {
  background: var(--color-dark-surface);
  border-color: var(--color-dark-border);
}

.price-item:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px #0000001a;
}

.dark .price-item:hover {
  background: var(--color-dark-surface-raised);
  border-color: var(--color-dark-border-strong);
}

/* Price info container (holds original and current price) */
.price-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  min-width: 0;
}

/* Original price (strikethrough) - make compact */

/* Current price value */
.price-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
  white-space: nowrap;
}

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

/* Price period (/hr, /day, etc.) */
.price-period {
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 500;
  margin-left: 0.125rem;
}

.dark .price-period {
  color: #94a3b8;
}

/* Price type label (Hourly, Daily, etc.) */
.price-type {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 500;
  margin-top: 0.25rem;
  text-transform: capitalize;
}

.dark .price-type {
  color: #94a3b8;
}

/* CRITICAL: Reduce gap when any price item has a discount */
.pricing-display:has(.original-price) > .flex {
  gap: 0.75rem !important;
}

/* CRITICAL: Make price items more compact when they have discounts */
.price-item:has(.original-price) {
  padding: 0.375rem 0.625rem;
  max-width: min-content;
}

/* Reduce font sizes slightly for discounted items to save space */
.price-item:has(.original-price) .price-value {
  font-size: 1rem;
  font-weight: 700;
}

.price-item:has(.original-price) .price-period {
  font-size: 0.8125rem;
}

/* Primary price item (first one) - slightly emphasized */
.price-item.primary {
  border-color: var(--discover-premium-line-strong);
  background: var(--discover-premium-wash);
}

.dark .price-item.primary {
  border-color: var(--discover-premium-line-strong);
  background: var(--discover-premium-active);
}

/* Mobile optimizations */
@media (max-width: 520px) {
  .pricing-display > .flex {
    gap: 0.5rem;
  }

  .price-item {
    padding: 0.375rem 0.5rem;
  }

  .price-value {
    font-size: 1rem;
  }

  /* Even more compact on mobile and tablet when discounts present */
  .pricing-display:has(.original-price) > .flex {
    gap: 0.5rem !important;
  }

  .price-item:has(.original-price) {
    padding: 0.25rem 0.5rem;
  }

  .price-item:has(.original-price) .price-value {
    font-size: 0.9375rem;
  }
}

@media (min-width: 1101px) {
#spot-detail-view .amenity-badges-vertical,
  #spot-detail-content .amenity-badges-vertical,
  #spot-detail-view .amenity-badges-vertical {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    align-items: flex-end !important; /* Align to right side */
  }

  #spot-detail-view .amenity-badges-horizontal,
  #spot-detail-content .amenity-badges-horizontal,
  #spot-detail-view .amenity-badges-horizontal {
    /* Use flexbox with wrapping to accommodate all amenities */
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important; /* Allow wrapping to multiple rows if needed */
    gap: 6px !important;
    justify-content: flex-end !important; /* Align badges to right edge */
    align-items: center !important;
    margin-top: 0 !important; /* CRITICAL: No margin - gap from parent container handles spacing */
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: calc(100% - 60px) !important; /* Prevent overlap with photo nav button */
    align-self: flex-end !important; /* Align to right side of container */
    width: auto !important; /* Size based on content */
  }

  #spot-detail-view .photo-amenity-badges,
  #spot-detail-content .photo-amenity-badges,
  #spot-detail-view .photo-amenity-badges {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important; /* CRITICAL: Gap between vertical and horizontal groups */
    align-items: flex-end !important; /* Align to right side */
  }

#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 */
  #spot-detail-view .policy-expandable-trigger[style*="z-index"] {
    z-index: 1 !important; /* Force low z-index even if inline style sets higher */
  }

  #spot-detail-view .policy-expandable-trigger .flex,
  #spot-detail-view .policy-expandable-trigger .policy-icon,
  #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 */
  #spot-detail-view .policy-expandable-trigger .policy-label,
  #spot-detail-view .policy-expandable-trigger span.policy-label,
  #spot-detail-view .policy-expandable-trigger .policy-label[style],
  #spot-detail-view .policy-expandable-trigger span.policy-label[style],
  #spot-detail-view .policy-expandable-trigger span[class*="policy-label"],
  #spot-detail-view .policy-expandable-trigger .flex .policy-label,
  #spot-detail-view .policy-expandable-trigger .flex span.policy-label,
  #spot-detail-view .policy-expandable-trigger div.flex .policy-label,
  #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 */
  }

#spot-detail-view:not(.hidden) {
    display: flex !important;
  }

/* CONSISTENCY: Desktop book button container styling */
  #spot-detail-view .spot-detail-book-shell {
    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 */
  #spot-detail-view #spot-detail-book,
  #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;
  }
}

/* Bottom-sheet gallery: pin the image to the gallery frame.
   Gallery is sized by aspect-ratio; image must match it exactly. */
#listings-sheet .spot-details-container .photo-gallery-compact.photo-frame--single > img.photo-static-image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* Legacy listing-card carousels (not spot-detail-photo-frame): cover fill */
#listings-sheet .spot-details-container .photo-gallery-compact.photo-carousel:not(.spot-detail-photo-frame) .photo-carousel-image.active,
#listings-sheet .spot-details-container .photo-gallery-compact.photo-carousel:not(.spot-detail-photo-frame)[data-total-photos="1"] .photo-carousel-image {
  opacity: 1 !important;
  visibility: visible !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  z-index: 2 !important;
}

@media (min-width: 768px) {
#spot-detail-view .spot-price-overlay,
  #spot-detail-content .spot-price-overlay,
  .spot-details-container .spot-price-overlay {
    bottom: 3px !important;
    left: 3px !important;
  }

.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(--discover-premium-ink) !important;
  }

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

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

#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 and tablet */
  #listings-sheet .photo-placeholder svg,
  #listings-sheet .photo-gallery-compact .photo-placeholder svg {
    width: 2rem !important; /* 32px instead of 64px */
    height: 2rem !important;
  }

.feature-chips,
  #listings-sheet .feature-chips,
  #listings-sheet .luxury-features .feature-chips {
    transform: none !important; /* CRITICAL: Remove translateY on mobile and tablet */
    margin-left: 0.5rem !important;
    padding-left: 0.5rem !important;
  }

.photo-gallery-compact .photo-nav-btn,
  .photo-carousel .photo-nav-btn,
  #spot-detail-view .photo-nav-btn,
  #spot-detail-content .photo-nav-btn,
  .spot-details-container .photo-nav-btn {
    width: 40px;
    height: 40px;
    opacity: 1;
    transition: opacity 0.3s ease;
  }

  .photo-gallery-compact .photo-nav-btn svg,
  .photo-carousel .photo-nav-btn svg {
    width: 20px;
    height: 20px;
  }

  .photo-gallery-compact .photo-nav-prev,
  .photo-carousel .photo-nav-prev,
  #spot-detail-view .photo-nav-prev,
  #spot-detail-content .photo-nav-prev,
  .spot-details-container .photo-nav-prev {
    transform: translate(-50%, -50%) translateX(-25px) !important;
  }

  .photo-gallery-compact .photo-nav-next,
  .photo-carousel .photo-nav-next,
  #spot-detail-view .photo-nav-next,
  #spot-detail-content .photo-nav-next,
  .spot-details-container .photo-nav-next {
    transform: translate(-50%, -50%) translateX(25px) !important;
  }

  .photo-gallery-compact .photo-nav-prev:hover,
  .photo-carousel .photo-nav-prev:hover {
    transform: translate(-50%, -50%) translateX(-25px) scale(1.1) !important;
  }

  .photo-gallery-compact .photo-nav-next:hover,
  .photo-carousel .photo-nav-next:hover {
    transform: translate(-50%, -50%) translateX(25px) scale(1.1) !important;
  }

  .photo-gallery-compact .photo-nav-prev:active,
  .photo-carousel .photo-nav-prev:active {
    transform: translate(-50%, -50%) translateX(-25px) scale(0.95) !important;
  }

  .photo-gallery-compact .photo-nav-next:active,
  .photo-carousel .photo-nav-next:active {
    transform: translate(-50%, -50%) translateX(25px) scale(0.95) !important;
  }

  .photo-indicators {
    bottom: 12px;
    gap: 6px;
  }

  .photo-indicator {
    width: 6px;
    height: 6px;
  }

  .photo-indicator.active {
    width: 18px;
  }
}

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

  /* In-gallery photo dots only (external strip uses 24x8 rules above) */
  #listings-sheet .spot-details-container .photo-indicators:not(.photo-indicators-external),
  #listings-sheet .photo-gallery-compact .photo-indicators:not(.photo-indicators-external),
  #listings-sheet .photo-carousel .photo-indicators:not(.photo-indicators-external) {
    padding: 6px 10px !important;
    gap: 5px !important;
    border-radius: 12px !important;
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    bottom: 10px !important;
  }

  #listings-sheet .spot-details-container .photo-gallery-compact .photo-indicator,
  #listings-sheet .spot-details-container .photo-carousel .photo-indicator,
  #listings-sheet .photo-gallery-compact .photo-indicators:not(.photo-indicators-external) .photo-indicator,
  #listings-sheet .photo-carousel .photo-indicators:not(.photo-indicators-external) .photo-indicator {
    width: 5px !important;
    height: 5px !important;
    min-width: 5px !important;
    min-height: 5px !important;
    max-width: 5px !important;
    max-height: 5px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.5) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #listings-sheet .spot-details-container .photo-gallery-compact .photo-indicator.active,
  #listings-sheet .spot-details-container .photo-carousel .photo-indicator.active,
  #listings-sheet .photo-gallery-compact .photo-indicators:not(.photo-indicators-external) .photo-indicator.active,
  #listings-sheet .photo-carousel .photo-indicators:not(.photo-indicators-external) .photo-indicator.active {
    width: 12px !important;
    min-width: 12px !important;
    max-width: 12px !important;
    height: 5px !important;
    min-height: 5px !important;
    max-height: 5px !important;
    border-radius: 3px !important;
    background: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
  }
}

@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 and tablet */
  #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 */
  }

button.enhanced-tooltip-btn:not(.spot-detail-fact__schedule-view),
  .enhanced-tooltip-btn:not(.spot-detail-fact__schedule-view),
  button[class*="enhanced-tooltip-btn"]:not(.spot-detail-fact__schedule-view),
  [class*="enhanced-tooltip-btn"]:not(.spot-detail-fact__schedule-view),
  #listings-sheet .enhanced-tooltip-btn:not(.spot-detail-fact__schedule-view),
  #listings-sheet button.enhanced-tooltip-btn:not(.spot-detail-fact__schedule-view) {
    width: 80px !important; /* REDUCED: More compact for mobile and tablet 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 and tablet */
  #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: none !important;
    text-align: center !important;
  }

/* Bottom sheet spot details container - PROPER VERTICAL STACKING */
  #listings-sheet .spot-details-container {
    /* CONSISTENCY: Use 0.75rem (12px) padding on mobile and tablet for better touch targets while maintaining visual consistency */
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0 !important; /* No bottom padding - bottom spacer handles this */
    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 in bottom-sheet spot details: fixed frame, no height: auto */
  #listings-sheet .spot-details-container .photo-gallery-compact {
    margin-bottom: 1rem !important;
    border-radius: 0.5rem !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }

  #listings-sheet .spot-details-container .photo-gallery-compact .photo-carousel-container {
    height: 100% !important;
    overflow: hidden !important;
  }

  /* Luxury header - CONSISTENCY: Match desktop spacing (mb-3 = 0.75rem) */
  #listings-sheet .spot-details-container .luxury-header {
    margin-bottom: 0.75rem !important; /* Match renderer mb-3 for consistency */
  }

  /* CRITICAL: Features section - proper block layout, NO overlap */
  /* CONSISTENCY: Match desktop spacing - no extra margin-top, use mb-3 from renderer */
  #listings-sheet .spot-details-container .luxury-features {
    display: block !important;
    position: relative !important;
    transform: none !important;
    margin-top: 0 !important; /* Remove extra top margin for consistency */
    margin-bottom: 0 !important; /* Let renderer's mb-3 handle spacing */
    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 */
  /* CONSISTENCY: Match desktop spacing - no extra margin-top, use mb-3 from renderer */
  #listings-sheet .spot-details-container .luxury-description {
    display: block !important;
    position: relative !important;
    transform: none !important;
    margin-top: 0 !important; /* Remove extra top margin for consistency */
    margin-bottom: 0 !important; /* Let renderer's mb-3 handle spacing */
    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 */
  }

  /* About section label - push down to account for photo overlay book button */
  #listings-sheet .spot-details-container .luxury-description .section-label:first-child,
  #listings-sheet .luxury-description .section-label:first-child {
    margin-top: 1rem !important; /* Extra top margin to clear book button */
  }

  /* 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 p {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Info sections - CONSISTENCY: Match desktop spacing (mb-3 = 0.75rem from renderer) */
  #listings-sheet .spot-details-container .luxury-info-grid {
    margin-bottom: 0 !important; /* Let renderer's mb-3 handle spacing for consistency */
    gap: 0.5rem !important;
  }

  /* Reviews section - CONSISTENCY: Match desktop spacing (mb-6 = 1.5rem from renderer) */
  #listings-sheet .spot-details-container .reviews-section {
    margin-bottom: 0 !important; /* Let renderer's mb-6 handle spacing for consistency */
  }

  /* Book button container - NO overlap, proper stacking */
  /* CONSISTENCY: Extra margins on mobile and tablet to prevent overlap with photo overlay book button */
  #listings-sheet .spot-details-container .spot-detail-book-shell {
    position: relative !important;
    transform: none !important;
    margin-top: 0.75rem !important; /* Extra margin to prevent overlap with photo overlay button */
    margin-bottom: 0.75rem !important; /* Extra margin for visual spacing */
    z-index: 10 !important;
  }

  /* Pricing section - CONSISTENCY: Match desktop spacing */
  #listings-sheet .spot-details-container .pricing-section {
    margin-bottom: 0 !important; /* Let renderer's mb-3 handle spacing for consistency */
    padding: 0.5rem !important;
  }

  /* Cancellation policy - CONSISTENCY: Match desktop spacing (mb-6 = 1.5rem from renderer) */
  #listings-sheet .spot-details-container .cancellation-policy-container {
    margin-bottom: 0 !important; /* Let renderer's mb-6 handle spacing for consistency */
    padding: 0.5rem !important;
  }

  /* Duration section - CONSISTENCY: Match desktop spacing (mb-6 = 1.5rem from renderer) */
  #listings-sheet .spot-details-container #smart-duration-section,
  #listings-sheet .spot-details-container #bottom-sheet-duration-section {
    margin-bottom: 0 !important; /* Let renderer's mb-6 handle spacing for consistency */
  }
}

/* Touch phones: amenity chip rows wrap inside sheet (wins over max-width 520px transforms) */
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
  #listings-sheet .luxury-features > .flex.items-center,
  #listings-sheet .luxury-features > .flex.items-start {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.375rem !important;
  }

  #listings-sheet .luxury-features .section-label {
    width: auto !important;
    height: auto !important;
  }

  #listings-sheet .spot-details-container .feature-chips,
  #listings-sheet .luxury-features .feature-chips {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    transform: none !important;
  }

  #listings-sheet .spot-details-container .spot-detail-highlights {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  #listings-sheet .spot-details-container .spot-detail-amenities {
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overscroll-behavior-x: auto !important;
  }

  #listings-sheet .spot-details-container .spot-detail-amenity {
    flex-shrink: 1 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }
}

/* OVERLAY SPOT DETAILS (desktop): Force carousel image visible - last in file so it wins */
@media (min-width: 1101px) {
  #spot-detail-view:not(.hidden) .photo-gallery-compact.photo-carousel:not(.spot-detail-photo-frame) {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  #spot-detail-view:not(.hidden) .spot-detail-photo-frame.photo-frame--carousel {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  #spot-detail-view:not(.hidden) .photo-carousel-container {
    min-height: 0 !important;
    height: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
  }
  #spot-detail-view:not(.hidden) .photo-carousel-image.active,
  #spot-detail-view:not(.hidden) .photo-carousel-container .photo-carousel-image.active,
  #spot-detail-view:not(.hidden) .photo-carousel-image-wrap .photo-carousel-image.active {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 2 !important;
  }
  #spot-detail-view:not(.hidden) .spot-detail-photo-frame .photo-carousel-image.active,
  #spot-detail-view:not(.hidden) .spot-detail-photo-frame .photo-carousel-image-wrap .photo-carousel-image.active {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: contain !important;
  }
}

/* Unified spot-group floor plan: geo sketch or row/column grid schematic */
#spot-detail-content .spot-floor-plan-section .spot-floor-plan-svg-wrap,
#spot-detail-view .spot-floor-plan-section .spot-floor-plan-svg-wrap,
.spot-details-page .spot-floor-plan-section .spot-floor-plan-svg-wrap {
  min-height: 0;
  overflow: hidden;
}

#spot-detail-content .spot-floor-plan-section .spot-floor-plan-map-wrap,
#spot-detail-view .spot-floor-plan-section .spot-floor-plan-map-wrap,
.spot-details-page .spot-floor-plan-section .spot-floor-plan-map-wrap,
#listings-sheet .spot-floor-plan-section .spot-floor-plan-map-wrap,
#listings-content-sheet .spot-floor-plan-section .spot-floor-plan-map-wrap,
#listings-overlay .spot-floor-plan-section .spot-floor-plan-map-wrap,
#listings-content .spot-floor-plan-section .spot-floor-plan-map-wrap {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  height: 270px;
  position: relative;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.35);
  /* Parent sheet scroll uses touch-action: pan-y; hand all gestures to Google Maps. */
  touch-action: none !important;
}

/* Center embedded map within the schematic wrapper so side gutters stay scrollable */
#spot-detail-content .spot-floor-plan-section .spot-floor-plan-svg-wrap:has(.spot-floor-plan-map-wrap),
#spot-detail-view .spot-floor-plan-section .spot-floor-plan-svg-wrap:has(.spot-floor-plan-map-wrap),
.spot-details-page .spot-floor-plan-section .spot-floor-plan-svg-wrap:has(.spot-floor-plan-map-wrap),
#listings-sheet .spot-floor-plan-section .spot-floor-plan-svg-wrap:has(.spot-floor-plan-map-wrap),
#listings-content-sheet .spot-floor-plan-section .spot-floor-plan-svg-wrap:has(.spot-floor-plan-map-wrap),
#listings-overlay .spot-floor-plan-section .spot-floor-plan-svg-wrap:has(.spot-floor-plan-map-wrap),
#listings-content .spot-floor-plan-section .spot-floor-plan-svg-wrap:has(.spot-floor-plan-map-wrap) {
  display: flex;
  justify-content: center;
  touch-action: pan-x pinch-zoom !important;
}

#listings-sheet #listings-content-sheet.spot-details-scroll-active .spot-floor-plan-section .spot-floor-plan-svg-wrap:has(.spot-floor-plan-map-wrap),
#listings-sheet #listings-content-sheet.spot-details-scroll-active .spot-floor-plan-section .spot-floor-plan-map-wrap,
#listings-sheet #listings-content-sheet.spot-details-scroll-active .spot-floor-plan-section .spot-floor-plan-map-wrap .spot-floor-plan-map,
#listings-sheet #listings-content-sheet.spot-details-scroll-active .spot-floor-plan-section .spot-floor-plan-map-wrap * {
  touch-action: pan-x pinch-zoom !important;
}

#listings-sheet #listings-content-sheet.spot-details-scroll-active .spot-floor-plan-section .spot-floor-plan-grid-svg,
#listings-sheet #listings-content-sheet.spot-details-scroll-active .spot-floor-plan-section .spot-floor-plan-grid-cell {
  touch-action: pan-y !important;
}

/* Removed spot-floor-plan-map-touching scroll lock — vertical gestures must reach the sheet. */

/* Isolate embedded map from sheet scroll-height reflows (reduces visible grid flash on zoom). */
#listings-sheet .spot-floor-plan-section .spot-floor-plan-map-wrap,
#listings-content-sheet .spot-floor-plan-section .spot-floor-plan-map-wrap {
  contain: layout style;
}

#spot-detail-content .spot-floor-plan-section .spot-floor-plan-map,
#spot-detail-view .spot-floor-plan-section .spot-floor-plan-map,
.spot-details-page .spot-floor-plan-section .spot-floor-plan-map,
#listings-sheet .spot-floor-plan-section .spot-floor-plan-map,
#listings-overlay .spot-floor-plan-section .spot-floor-plan-map,
#listings-content .spot-floor-plan-section .spot-floor-plan-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #e5e7eb;
  touch-action: pan-x pinch-zoom !important;
}

/* Embedded lot preview: no Google +/- zoom bar (wheel/pinch only) */
.spot-floor-plan-section .spot-floor-plan-map .gm-bundled-control,
.spot-floor-plan-section .spot-floor-plan-map .gm-bundled-control-on-bottom {
  display: none !important;
}

/* Spot-group floor plan preview: hide duplicate bottom attribution strip */
.spot-floor-plan-section .spot-floor-plan-map .gm-style-cc,
.spot-floor-plan-section .spot-floor-plan-map-wrap .gm-style-cc {
  display: none !important;
}

#spot-detail-content .spot-floor-plan-section .spot-floor-plan-svg-wrap svg,
#spot-detail-view .spot-floor-plan-section .spot-floor-plan-svg-wrap svg,
.spot-details-page .spot-floor-plan-section .spot-floor-plan-svg-wrap svg {
  display: block;
  max-width: 100%;
  max-height: 180px;
  height: auto;
}

#spot-detail-content .spot-floor-plan-section .spot-floor-plan-grid-label,
#spot-detail-view .spot-floor-plan-section .spot-floor-plan-grid-label,
.spot-details-page .spot-floor-plan-section .spot-floor-plan-grid-label {
  fill: #111827;
}

.dark #spot-detail-content .spot-floor-plan-section .spot-floor-plan-grid-label,
.dark #spot-detail-view .spot-floor-plan-section .spot-floor-plan-grid-label,
.dark .spot-details-page .spot-floor-plan-section .spot-floor-plan-grid-label {
  fill: #f3f4f6;
}

#spot-detail-content .spot-floor-plan-section .spot-floor-plan-grid-cell,
#spot-detail-view .spot-floor-plan-section .spot-floor-plan-grid-cell,
.spot-details-page .spot-floor-plan-section .spot-floor-plan-grid-cell {
  cursor: pointer;
}

.spot-floor-plan-section .spot-floor-plan-grid-cell--empty {
  fill: #e5e7eb;
  fill-opacity: 0.32;
  stroke: #cbd5e1;
  stroke-width: 0.5;
  cursor: default;
}

.dark .spot-floor-plan-section .spot-floor-plan-grid-cell--empty {
  fill: var(--color-dark-border);
  fill-opacity: 0.55;
  stroke: var(--color-dark-border-strong);
}

.spot-floor-plan-section [data-floor-plan-group]:focus-visible {
  outline: 2px solid var(--discover-premium-focus);
  outline-offset: 2px;
}

.spot-floor-plan-section [data-floor-plan-group] {
  cursor: pointer;
}

.spot-floor-plan-grid-cell.spot-floor-plan-shape--selected,
.spot-floor-plan-geo-cell.spot-floor-plan-shape--selected {
  /* fill/stroke set inline from JS to match each group's color */
  stroke-width: 2.5px;
}

.dark .spot-floor-plan-grid-cell.spot-floor-plan-shape--selected,
.dark .spot-floor-plan-geo-cell.spot-floor-plan-shape--selected {
  stroke-width: 2.5px;
}

.spot-floor-plan-grid-cell.spot-floor-plan-shape--selected + .spot-floor-plan-grid-label {
  font-weight: 700;
}

.dark .spot-floor-plan-grid-cell.spot-floor-plan-shape--selected + .spot-floor-plan-grid-label {
  font-weight: 700;
}

#listings-sheet .spot-floor-plan-section .spot-floor-plan-svg-wrap,
#listings-content-sheet .spot-floor-plan-section .spot-floor-plan-svg-wrap,
#listings-overlay .spot-floor-plan-section .spot-floor-plan-svg-wrap,
#listings-content .spot-floor-plan-section .spot-floor-plan-svg-wrap {
  min-height: 0;
  overflow: hidden;
}

#listings-sheet .spot-floor-plan-section .spot-floor-plan-svg-wrap svg,
#listings-content-sheet .spot-floor-plan-section .spot-floor-plan-svg-wrap svg,
#listings-overlay .spot-floor-plan-section .spot-floor-plan-svg-wrap svg,
#listings-content .spot-floor-plan-section .spot-floor-plan-svg-wrap svg {
  display: block;
  max-width: 100%;
  max-height: 180px;
  height: auto;
}

#listings-sheet .spot-floor-plan-section .spot-floor-plan-grid-label,
#listings-content-sheet .spot-floor-plan-section .spot-floor-plan-grid-label,
#listings-overlay .spot-floor-plan-section .spot-floor-plan-grid-label,
#listings-content .spot-floor-plan-section .spot-floor-plan-grid-label {
  fill: #111827;
}

.dark #listings-sheet .spot-floor-plan-section .spot-floor-plan-grid-label,
.dark #listings-content-sheet .spot-floor-plan-section .spot-floor-plan-grid-label,
.dark #listings-overlay .spot-floor-plan-section .spot-floor-plan-grid-label,
.dark #listings-content .spot-floor-plan-section .spot-floor-plan-grid-label {
  fill: #f3f4f6;
}

#listings-sheet .spot-floor-plan-section .spot-floor-plan-grid-cell,
#listings-content-sheet .spot-floor-plan-section .spot-floor-plan-grid-cell,
#listings-overlay .spot-floor-plan-section .spot-floor-plan-grid-cell,
#listings-content .spot-floor-plan-section .spot-floor-plan-grid-cell {
  cursor: pointer;
}

/* ============================================================================
 * PROFESSIONAL SPOT DETAIL LAYOUT
 * Shared by desktop detail dialog and bottom-sheet detail content.
 * ========================================================================= */

.spot-detail-content-wrapper {
  color: #111827;
}

.dark .spot-detail-content-wrapper {
  color: #f9fafb;
}

.spot-detail-photo-frame {
  margin: 0 0 1rem !important;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  background: #f3f4f6;
  box-shadow: none !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
}

.dark .spot-detail-photo-frame {
  border-color: #374151;
  background: #111827;
}

/*
 * Spot detail carousel: taller frame + natural image fit.
 * Phone listing photos are often portrait; 16:9 + cover/100% sizing crops or compresses vertically.
 */
.spot-detail-photo-frame.photo-frame--carousel,
#spot-detail-view .spot-detail-photo-frame.photo-frame--carousel,
#spot-detail-content .spot-detail-photo-frame.photo-frame--carousel {
  aspect-ratio: 4 / 3 !important;
  min-height: 0 !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#listings-sheet .spot-details-container .spot-detail-photo-frame.photo-frame--carousel,
#listings-content-sheet .spot-details-container .spot-detail-photo-frame.photo-frame--carousel,
body.bottom-sheet-spot-details-mode .spot-detail-photo-frame.photo-frame--carousel {
  aspect-ratio: 16 / 9 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-height: min(36vh, 220px) !important;
  min-height: 0 !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#listings-sheet .spot-details-container .photo-gallery-compact.photo-carousel.spot-detail-photo-frame,
#listings-content-sheet .spot-details-container .photo-gallery-compact.photo-carousel.spot-detail-photo-frame {
  aspect-ratio: 16 / 9 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-height: min(36vh, 220px) !important;
  min-height: 0 !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.spot-detail-booking-summary {
  margin: 0.875rem 0 1.25rem;
  padding: 1rem;
  border: 1px solid var(--discover-premium-line, #e5e7eb);
  border-radius: 1rem;
  background: var(--discover-premium-surface-solid, #ffffff);
  box-shadow: var(--discover-premium-shadow-soft, 0 10px 24px rgba(15, 23, 42, 0.06));
}

/* Sticky convert chrome: price + Book stay visible while reading details. */
#spot-detail-content .spot-detail-booking-summary--sticky {
  position: sticky;
  top: 0;
  z-index: 28;
  margin-top: 0.5rem;
  background: color-mix(in srgb, var(--discover-premium-surface-solid, #ffffff) 94%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow:
    var(--discover-premium-shadow-soft, 0 1px 2px rgba(28, 25, 23, 0.05)),
    0 10px 18px -12px rgba(28, 25, 23, 0.18);
}

.dark #spot-detail-content .spot-detail-booking-summary--sticky {
  background: color-mix(in srgb, var(--discover-premium-surface-solid, #1c1917) 94%, transparent);
  box-shadow:
    var(--discover-premium-shadow-soft, 0 1px 2px rgba(0, 0, 0, 0.28)),
    0 12px 22px -12px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  #spot-detail-content .spot-detail-booking-summary--sticky {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Price/availability + Book share one row on wide standalone pages; duration loads below so it cannot push the CTA down. */
.spot-detail-booking-summary__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: stretch;
}

.dark .spot-detail-booking-summary {
  border-color: var(--discover-premium-line, #374151);
  background: var(--discover-premium-surface-solid, #111827);
  box-shadow: none;
}

.spot-detail-booking-summary__content {
  min-width: 0;
}

.spot-detail-booking-summary__price {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.25rem;
  line-height: 1;
}

.spot-detail-booking-summary__price .discover-rate-chips {
  width: 100%;
}

.spot-detail-duration-section {
  margin-top: 0.625rem;
}

.spot-detail-duration-section .mb-6 {
  margin-bottom: 0 !important;
}

.spot-detail-duration-section h3 {
  margin-bottom: 0.375rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.spot-detail-duration {
  margin: 0;
}

.spot-detail-duration__title {
  margin: 0 0 0.375rem;
  color: #111827;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.dark .spot-detail-duration__title {
  color: #f3f4f6;
}

.spot-detail-duration__panel {
  padding: 0.625rem 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  background: #f9fafb;
}

.dark .spot-detail-duration__panel {
  border-color: #374151;
  background: #1f2937;
}

.spot-detail-duration__hint {
  margin: 0 0 0.5rem;
  color: #4b5563;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
}

.dark .spot-detail-duration__hint {
  color: #d1d5db;
}

/* Content-sized chips: equal minmax columns were ~4rem and crushed long labels
   ("30 days (monthly rate)") on mid-width sheet/desktop panels. */
.spot-detail-duration__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
}

.spot-detail-duration__chip,
.spot-detail-duration-section .duration-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  flex: 1 1 auto;
  width: auto;
  min-width: min(100%, 7.5rem);
  max-width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 9999px;
  border: 2px solid #cbd5e1;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  box-sizing: border-box;
}

@media (max-width: 380px) {
  .spot-detail-duration__chip,
  .spot-detail-duration-section .duration-chip {
    white-space: normal;
    text-align: center;
    min-width: min(100%, 6.5rem);
    padding: 0.5rem 0.625rem;
  }
}

.spot-detail-duration__chip-icon {
  width: 0.75rem;
  height: 0.75rem;
  min-width: 0.75rem;
  max-width: 0.75rem;
  min-height: 0.75rem;
  max-height: 0.75rem;
  flex-shrink: 0;
}

.duration-chip .spot-detail-duration__chip-icon,
.duration-chip svg.spot-detail-duration__chip-icon,
#listings-sheet .spot-detail-duration__chip-icon,
#listings-sheet .duration-chip svg,
#listings-sheet .custom-duration-btn svg,
.spot-details-container .spot-detail-duration__chip-icon,
.spot-details-container .duration-chip svg,
.spot-details-container .custom-duration-btn svg {
  width: 0.75rem !important;
  height: 0.75rem !important;
  min-width: 0.75rem !important;
  max-width: 0.75rem !important;
  min-height: 0.75rem !important;
  max-height: 0.75rem !important;
  flex-shrink: 0 !important;
}

#listings-sheet .duration-chip:hover svg,
.spot-details-container .duration-chip:hover svg {
  transform: none !important;
}

.spot-detail-duration__chip--readonly {
  background: #ececec;
  color: #1c1917;
}

.dark .spot-detail-duration__chip--readonly {
  background: #374151;
  color: #f5f5f4;
}

.spot-detail-duration__chip--custom {
  border-style: dashed;
  border-color: #a8a29e;
}

.spot-detail-duration__custom {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e5e7eb;
}

.dark .spot-detail-duration__custom {
  border-top-color: #374151;
}

.spot-detail-duration__custom-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.5rem;
}

.spot-detail-duration__custom-input {
  width: 4.25rem;
  min-width: 0;
  padding: 0.375rem 0.5rem;
  border: 1px solid #d6d3d1;
  border-radius: 0.5rem;
  background: #ffffff;
  color: #1c1917;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
}

.dark .spot-detail-duration__custom-input {
  border-color: #6b7280;
  background: #374151;
  color: #f9fafb;
}

.spot-detail-duration__custom-unit {
  color: #57534e;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.dark .spot-detail-duration__custom-unit {
  color: #d6d3d1;
}

.spot-detail-duration__custom-action {
  padding: 0.125rem 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.2;
}

.spot-detail-duration__custom-action--muted {
  opacity: 0.85;
}

.spot-detail-duration__custom-help {
  margin: 0.375rem 0 0;
  color: #78716c;
  font-size: 0.75rem;
  line-height: 1.35;
}

.dark .spot-detail-duration__custom-help {
  color: #a8a29e;
}

.spot-detail-duration__feedback {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  line-height: 1.35;
}

.spot-detail-booking-summary__button {
  display: inline-flex !important;
  min-width: 148px !important;
  min-height: 48px !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch;
  border-radius: 0.75rem !important;
  padding: 0.75rem 1.25rem !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.spot-detail-booking-summary__button:focus-visible {
  outline: none !important;
  box-shadow:
    var(--color-brand-accent-shadow, 0 2px 8px rgba(0, 0, 0, 0.12)),
    0 0 0 3px rgba(255, 255, 255, 0.92),
    0 0 0 5px var(--color-brand-accent) !important;
}

.spot-detail-booking-summary__amount {
  color: #111827;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.dark .spot-detail-booking-summary__amount {
  color: #f9fafb;
}

.spot-detail-booking-summary__unit {
  color: #6b7280;
  font-size: 0.875rem;
  font-weight: 600;
}

.dark .spot-detail-booking-summary__unit {
  color: var(--text-caption, #64748b);
}

.spot-detail-booking-summary__rates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.75rem;
  margin-top: 0.5rem;
  color: #6b7280;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.dark .spot-detail-booking-summary__rates {
  color: var(--text-caption, #64748b);
}

.spot-detail-booking-summary__availability {
  margin: 0.5rem 0 0;
  color: #374151;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}

.dark .spot-detail-booking-summary__availability {
  color: #d1d5db;
}

.spot-detail-booking-summary__reassurance {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0.875rem 0 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid #e5e7eb;
  list-style: none;
}

.dark .spot-detail-booking-summary__reassurance {
  border-top-color: #374151;
}

.spot-detail-booking-summary__reassurance-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: #4b5563;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
}

.dark .spot-detail-booking-summary__reassurance-item {
  color: var(--text-caption, #64748b);
}

.spot-detail-booking-summary__reassurance-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--discover-premium-muted, #78716c);
}

.dark .spot-detail-booking-summary__reassurance-icon {
  color: var(--discover-premium-muted, #a8a29e);
}

/* Bottom sheet only (.spot-details-container is added just for the sheet):
   size the reassurance icons to match the denser mobile layout. */
.spot-details-container .spot-detail-booking-summary__reassurance-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;
}

.spot-detail-section {
  margin-top: 1.25rem;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  background: #ffffff;
}

.dark .spot-detail-section {
  border-color: #374151;
  background: #111827;
}

.spot-detail-section__heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.875rem;
}

/* Highlights: single lead line, centered (no competing h3) */
.spot-detail-section__heading--centered-lead {
  display: block;
  text-align: center;
}

.spot-detail-section__heading--centered-lead .spot-detail-section__subtitle {
  margin: 0;
}

.spot-detail-section__title {
  margin: 0;
  color: #111827;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
}

.dark .spot-detail-section__title {
  color: #f9fafb;
}

.spot-detail-section__subtitle {
  margin: 0.125rem 0 0;
  color: #6b7280;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.dark .spot-detail-section__subtitle {
  color: var(--text-caption, #64748b);
}

.spot-detail-section__hint {
  margin: 0.5rem 0 0;
  color: #6b7280;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.dark .spot-detail-section__hint {
  color: var(--text-caption, #64748b);
}

.spot-detail-schedule-meaning {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.spot-detail-schedule-meaning__lead {
  display: block;
  font-weight: 600;
  color: inherit;
  font-size: inherit;
}

.spot-detail-schedule-meaning__body {
  display: block;
  font-weight: 400;
}

.spot-detail-booking-summary__schedule-footnote {
  margin: 0.35rem 0 0;
  color: #6b7280;
  font-size: 0.75rem;
  line-height: 1.4;
}

.dark .spot-detail-booking-summary__schedule-footnote {
  color: var(--text-caption, #64748b);
}

.spot-detail-section__body {
  margin: 0;
  color: #4b5563;
  font-size: 0.9rem;
  line-height: 1.65;
}

.dark .spot-detail-section__body {
  color: #d1d5db;
}

.spot-detail-highlights {
  min-width: 0;
}

.spot-detail-fact-list {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid #eef2f7;
}

.spot-detail-fact-list dt,
.spot-detail-fact-list dd {
  margin: 0;
}

.spot-detail-fact-group + .spot-detail-fact-group {
  border-top: 1px solid #eef2f7;
}

.dark .spot-detail-fact-group + .spot-detail-fact-group {
  border-top-color: #1f2937;
}

.dark .spot-detail-fact-list {
  border-top-color: #1f2937;
}

.spot-detail-fact {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  column-gap: 0.75rem;
  row-gap: 0.125rem;
  align-items: baseline;
  padding: 0.625rem 0;
  border-bottom: 1px solid #eef2f7;
}

.dark .spot-detail-fact {
  border-bottom-color: #1f2937;
}

.spot-detail-fact__label {
  color: #6b7280;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: uppercase;
  min-width: 0;
}

.dark .spot-detail-fact__label {
  color: var(--text-caption, #64748b);
}

.spot-detail-fact__value {
  color: #111827;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
  min-width: 0;
  overflow-wrap: break-word;
}

.spot-detail-fact__value--wrap {
  font-weight: 500;
  white-space: normal;
}

.spot-detail-fact--about {
  align-items: start;
}

.spot-detail-fact__value--about {
  margin: 0;
  font-weight: 500;
  line-height: 1.5;
}

.spot-detail-highlights__access {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #eef2f7;
}

.dark .spot-detail-highlights__access {
  border-top-color: #1f2937;
}

.spot-detail-highlights__access .spot-detail-note--inline {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.spot-detail-highlights__access .spot-detail-schedule-meaning {
  margin-top: 0.5rem;
}

.spot-detail-highlights__includes {
  margin-top: 0.875rem;
}

.spot-detail-highlights__includes .spot-detail-amenities {
  margin-top: 0;
}

.spot-detail-note--inline {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #eef2f7;
}

.dark .spot-detail-note--inline {
  border-top-color: #1f2937;
}

.dark .spot-detail-fact__value {
  color: #f3f4f6;
}

button.spot-detail-fact__value {
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.spot-detail-fact__link {
  color: var(--discover-premium-ink);
}

.dark .spot-detail-fact__link {
  color: var(--discover-premium-ink);
}

/* Operating hours fact: summary on first line, View control below */
.spot-detail-fact--schedule {
  align-items: start;
}

.spot-detail-fact__value--schedule {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 0.25rem;
}

.spot-detail-fact__schedule-summary {
  display: block;
  width: 100%;
  font-weight: 600;
}

.spot-detail-schedule-popover.tooltip-trigger-wrapper {
  display: block;
  width: 100%;
  position: relative !important;
  z-index: 1 !important;
  isolation: auto !important;
}

button.spot-detail-fact__schedule-view.enhanced-tooltip-btn,
.spot-detail-fact__schedule-view.enhanced-tooltip-btn {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--discover-premium-ink) !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  cursor: pointer;
  position: relative !important;
  z-index: 1 !important;
  display: inline-block !important;
  align-self: flex-start;
}

button.spot-detail-fact__schedule-view.enhanced-tooltip-btn:hover,
.spot-detail-fact__schedule-view.enhanced-tooltip-btn:hover {
  opacity: 0.82;
}

button.spot-detail-fact__schedule-view.enhanced-tooltip-btn.active,
.spot-detail-fact__schedule-view.enhanced-tooltip-btn.active {
  text-decoration: none;
}

.spot-detail-schedule-dropdown.enhanced-tooltip {
  min-width: 17rem !important;
  max-width: 22rem !important;
  padding: 0 !important;
}

.spot-detail-schedule-dropdown__header {
  padding: 0.625rem 0.875rem 0.4375rem;
  border-bottom: 1px solid var(--discover-premium-line);
}

.spot-detail-schedule-dropdown__title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--discover-premium-ink);
}

.dark .spot-detail-schedule-dropdown__title {
  color: #f3f4f6;
}

.spot-detail-schedule-dropdown__body {
  padding: 0.25rem 0.875rem 0.625rem;
  max-height: 16rem;
  overflow-y: auto;
}

.spot-detail-schedule-dropdown__body .flex.justify-between {
  color: #374151 !important;
}

.spot-detail-schedule-dropdown__body .text-green-400,
.spot-detail-schedule-dropdown__body .dark\:text-green-300 {
  color: #047857 !important;
}

.spot-detail-schedule-dropdown__body .text-gray-400,
.spot-detail-schedule-dropdown__body .dark\:text-gray-300 {
  color: var(--text-caption, #64748b) !important;
}

.dark .spot-detail-schedule-dropdown__body .flex.justify-between {
  color: #e5e7eb !important;
}

.dark .spot-detail-schedule-dropdown.enhanced-tooltip {
  background: #1f2937 !important;
  border-color: #374151 !important;
}

#listings-sheet button.spot-detail-fact__schedule-view.enhanced-tooltip-btn,
#listings-sheet .spot-detail-fact__schedule-view.enhanced-tooltip-btn,
.spot-details-container button.spot-detail-fact__schedule-view.enhanced-tooltip-btn {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
  font-size: inherit !important;
  gap: 0 !important;
  z-index: 1 !important;
  transform: none !important;
}

#listings-sheet .spot-detail-fact__schedule-view.enhanced-tooltip-btn .tooltip-hint,
.spot-details-container .spot-detail-fact__schedule-view.enhanced-tooltip-btn .tooltip-hint {
  font-size: inherit !important;
  transform: none !important;
}

.spot-detail-amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.875rem;
  min-width: 0;
}

.spot-detail-amenity {
  display: inline-flex;
  align-items: center;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 0.375rem 0.625rem;
  background: #f9fafb;
  color: #374151;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
  white-space: nowrap;
}

.dark .spot-detail-amenity {
  border-color: #374151;
  background: #1f2937;
  color: #d1d5db;
}

.listing-business-use-value {
  font-weight: 600;
}

.listing-business-use-hint {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.75rem;
  font-weight: 400;
  color: #6b7280;
  line-height: 1.35;
}

.dark .listing-business-use-hint {
  color: var(--text-caption, #64748b);
}

.listing-business-use-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
  background: #f9fafb;
  color: #374151;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.dark .listing-business-use-tag {
  border-color: #4b5563;
  background: #1f2937;
  color: #e5e7eb;
}

.listing-business-use-tag--compact {
  font-size: 0.625rem;
  padding: 0.25rem 0.5rem;
  gap: 0.25rem;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  white-space: normal;
  align-items: center;
}

.listing-business-use-tag__label {
  min-width: 0;
  line-height: 1.25;
}

.listing-business-use-tag--compact .listing-business-use-tag__label {
  overflow-wrap: anywhere;
}

.listing-business-use-tag__icon {
  display: inline-block;
  width: 0.875rem !important;
  height: 0.875rem !important;
  max-width: 0.875rem !important;
  max-height: 0.875rem !important;
  min-width: 0.875rem;
  min-height: 0.875rem;
  flex-shrink: 0;
  opacity: 0.85;
}

.spot-detail-note {
  margin-top: 0.875rem;
  padding-top: 0.875rem;
  border-top: 1px solid #eef2f7;
}

.dark .spot-detail-note {
  border-top-color: #1f2937;
}

.spot-detail-note__label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--discover-premium-ink);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dark .spot-detail-note__label {
  color: var(--discover-premium-ink);
}

.spot-detail-note__body {
  margin: 0;
  color: #4b5563;
  font-size: 0.9rem;
  line-height: 1.65;
}

.dark .spot-detail-note__body {
  color: #d1d5db;
}

.spot-detail-section-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.spot-detail-policy .policy-content {
  margin: 0 !important;
  padding: 0 !important;
}

.spot-detail-policy.policy-expandable:not(.expanded),
.spot-detail-policy.policy-expandable:has(.policy-expandable-trigger[aria-expanded="false"]) {
  margin-top: 0.625rem !important;
  padding: 0.625rem 0.75rem !important;
}

.spot-detail-policy.policy-expandable:not(.expanded) .policy-expandable-trigger,
.spot-detail-policy.policy-expandable:has(.policy-expandable-trigger[aria-expanded="false"]) .policy-expandable-trigger {
  min-height: 0 !important;
  padding: 0 !important;
}

.spot-detail-policy.policy-expandable:not(.expanded) .policy-content,
.spot-detail-policy .policy-expandable-trigger[aria-expanded="false"] + .policy-content {
  display: none !important;
}

.spot-detail-policy.expanded .policy-content,
.spot-detail-policy .policy-expandable-trigger[aria-expanded="true"] + .policy-content {
  padding: 0.75rem 0 0 !important;
}

.spot-detail-policy__paragraph {
  margin-top: 0.5rem;
}

.spot-detail-reviews__heading {
  align-items: flex-start;
}

.spot-detail-reviews__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: #111827;
  font-size: 0.875rem;
  font-weight: 700;
}

.dark .spot-detail-reviews__rating {
  color: #f9fafb;
}

.spot-detail-reviews__rating-count {
  color: #6b7280;
  font-weight: 500;
}

.dark .spot-detail-reviews__rating-count {
  color: var(--text-caption, #64748b);
}

/* Toggle now sits below the (expanded-by-default) ratings; give it breathing room. */
.reviews-more-content + .spot-detail-reviews__toggle {
  margin-top: 0.875rem;
}

.spot-detail-reviews__stars,
.spot-detail-review-card__stars {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
}

.spot-detail-empty-state {
  border: 1px dashed #d1d5db;
  border-radius: 0.75rem;
  padding: 1rem;
  background: #f9fafb;
  color: #6b7280;
  font-size: 0.875rem;
  text-align: center;
}

.dark .spot-detail-empty-state {
  border-color: #374151;
  background: #1f2937;
  color: var(--text-caption, #64748b);
}

.spot-detail-empty-state p {
  margin: 0;
}

.spot-detail-reviews__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--discover-premium-line);
  border-radius: 0.625rem;
  background: var(--discover-premium-wash);
  color: var(--discover-premium-ink);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}

.dark .spot-detail-reviews__toggle {
  border-color: var(--discover-premium-line);
  background: var(--discover-premium-active);
  color: var(--discover-premium-ink);
}

.spot-detail-reviews__toggle .btn-icon {
  width: 1rem;
  height: 1rem;
}

.reviews-more-content {
  margin-top: 0.875rem;
}

.spot-detail-review-card {
  display: flex;
  gap: 0.75rem;
  padding: 0.875rem 0;
  border-top: 1px solid #eef2f7;
}

.dark .spot-detail-review-card {
  border-top-color: #1f2937;
}

.spot-detail-review-card__avatar {
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--discover-premium-ink);
  color: var(--discover-premium-surface-solid);
  font-size: 0.875rem;
  font-weight: 700;
}

.spot-detail-review-card__avatar img,
.spot-detail-review-card__avatar span {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  object-fit: cover;
}

.spot-detail-review-card__content {
  min-width: 0;
  flex: 1;
}

.spot-detail-review-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.5rem;
  color: #6b7280;
  font-size: 0.75rem;
  line-height: 1.4;
}

.dark .spot-detail-review-card__meta {
  color: var(--text-caption, #64748b);
}

.spot-detail-review-card__author {
  color: #111827;
  font-size: 0.875rem;
  font-weight: 700;
}

.dark .spot-detail-review-card__author {
  color: #f9fafb;
}

.spot-detail-review-card__verified,
.spot-detail-review-card__categories span {
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.125rem 0.375rem;
}

.dark .spot-detail-review-card__verified,
.dark .spot-detail-review-card__categories span {
  background: #312e81;
  color: #c7d2fe;
}

.spot-detail-review-card__title {
  margin: 0.5rem 0 0;
  color: #111827;
  font-size: 0.9375rem;
  font-weight: 700;
}

.dark .spot-detail-review-card__title {
  color: #f9fafb;
}

.spot-detail-review-card__text {
  margin: 0.5rem 0 0;
  color: #4b5563;
  font-size: 0.875rem;
  line-height: 1.6;
}

.dark .spot-detail-review-card__text {
  color: #d1d5db;
}

.spot-detail-review-card__categories,
.spot-detail-review-card__images {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.625rem;
}

.spot-detail-review-card__images img,
.spot-detail-review-card__images span {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  object-fit: cover;
}

.spot-detail-review-card__images span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 0.75rem;
  font-weight: 700;
}

.dark .spot-detail-review-card__images img,
.dark .spot-detail-review-card__images span {
  border-color: #374151;
}

.dark .spot-detail-review-card__images span {
  background: #1f2937;
  color: var(--text-caption, #64748b);
}

/*
 * Sheet: sticky only the price + Book row (sibling of the reassurance section).
 * Duration / reassurance must scroll away — sticking the whole summary eats the fold.
 */
#listings-sheet .spot-details-container .spot-detail-booking-summary,
body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-booking-summary {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  margin: 0.25rem 0 0.5rem;
  margin-right: 0;
  margin-left: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none !important;
}

#listings-sheet .spot-details-container .spot-detail-booking-summary__top,
body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-booking-summary__top {
  position: sticky !important;
  top: 0 !important;
  z-index: 32 !important;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  align-items: stretch;
  margin: 0.35rem 0 0;
  padding: 0.65rem 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--discover-premium-surface-solid, #ffffff) 97%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  /* Keep a hairline when pinned under the sheet title. */
  box-shadow: 0 1px 0 color-mix(in srgb, var(--discover-chrome-border, #e5e7eb) 85%, transparent);
}

.dark #listings-sheet .spot-details-container .spot-detail-booking-summary,
.dark body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-booking-summary {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.dark #listings-sheet .spot-details-container .spot-detail-booking-summary__top,
.dark body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-booking-summary__top {
  background: color-mix(in srgb, var(--discover-premium-surface-solid, #1c1917) 97%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  #listings-sheet .spot-details-container .spot-detail-booking-summary,
  #listings-sheet .spot-details-container .spot-detail-booking-summary__top,
  body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-booking-summary,
  body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-booking-summary__top {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/*
 * Bottom sheet often sits ~640–900px wide (tablet / landscape / large phone).
 * Side-by-side rate chips + Book leaves a dead middle band; stack like phone
 * (grid columns set on sticky __top rule above). Phone ≤640 overrides to side-by-side.
 */
#listings-sheet .spot-details-container .spot-detail-booking-summary__button,
body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-booking-summary__button {
  width: 100% !important;
  min-width: 0 !important;
  align-self: stretch;
}

#listings-sheet .spot-details-container .spot-detail-duration-section,
body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-duration-section {
  margin: 0.35rem 0 0.5rem;
}

#listings-sheet .spot-details-container .spot-detail-duration__chips,
body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-duration__chips {
  gap: 0.5rem;
}

#listings-sheet .spot-details-container .spot-detail-duration__chip,
#listings-sheet .spot-details-container .spot-detail-duration-section .duration-chip,
body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-duration__chip,
body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-duration-section .duration-chip {
  min-width: min(100%, 7.5rem);
  padding: 0.5rem 0.75rem;
}

#listings-sheet .spot-details-container .spot-detail-duration__panel,
body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-duration__panel {
  padding: 0.5rem 0.625rem 0.625rem;
}

/* Sheet flow: identity sits under photos; details read as one continuous block after book. */
#listings-sheet .spot-details-container .spot-detail-trust,
body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-trust {
  margin: 0.25rem 0 0.125rem;
}

#listings-sheet .spot-details-container .luxury-header,
body.bottom-sheet-spot-details-mode #listings-content-sheet .luxury-header {
  margin-top: 0.125rem;
  margin-bottom: 0.375rem;
}

#listings-sheet .spot-details-container .spot-detail-booking-summary__reassurance,
body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-booking-summary__reassurance {
  margin-top: 0.625rem;
  padding-top: 0.5rem;
  gap: 0.375rem 0.75rem;
}

#listings-sheet .spot-details-container .spot-detail-booking-summary__reassurance-item,
body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-booking-summary__reassurance-item {
  font-size: 0.75rem;
}

#listings-sheet .spot-details-container .spot-detail-highlights,
body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-highlights {
  margin-top: 0.375rem;
  padding: 0.25rem 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.dark #listings-sheet .spot-details-container .spot-detail-highlights,
.dark body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-highlights {
  background: transparent;
  border-color: transparent;
}

#listings-sheet .spot-details-container .spot-detail-highlights .spot-detail-fact-list,
body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-highlights .spot-detail-fact-list {
  border-top: 1px solid #e5e7eb;
}

.dark #listings-sheet .spot-details-container .spot-detail-highlights .spot-detail-fact-list,
.dark body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-highlights .spot-detail-fact-list {
  border-top-color: #374151;
}

#listings-sheet .spot-details-container .spot-detail-policy,
body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-policy {
  margin-top: 0.5rem;
  padding: 0.625rem 0.75rem;
}

#listings-sheet .spot-details-container .spot-detail-reviews,
body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-reviews {
  margin-top: 0.5rem;
  padding: 0.625rem 0.75rem;
}

#listings-sheet .spot-details-container .spot-detail-reviews--empty,
body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-reviews--empty {
  padding: 0.5rem 0.75rem;
}

#listings-sheet .spot-details-container .spot-detail-reviews--empty .spot-detail-section__heading,
body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-reviews--empty .spot-detail-section__heading {
  margin-bottom: 0;
}

#listings-sheet .spot-details-container .spot-detail-contact-host,
body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-contact-host {
  margin-top: 0.625rem;
  margin-bottom: 0.25rem;
  scroll-margin-bottom: var(--spot-details-scroll-bottom-room, 4.5rem);
}

#listings-sheet .spot-details-container .spot-detail-contact-host .contact-host-btn,
body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-contact-host .contact-host-btn {
  min-height: 2.75rem;
}

#listings-sheet .spot-details-container .spot-detail-schedule-meaning--compact,
body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-schedule-meaning--compact {
  gap: 0;
}

#listings-sheet .spot-details-container .spot-detail-schedule-meaning--compact .spot-detail-schedule-meaning__body,
body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-schedule-meaning--compact .spot-detail-schedule-meaning__body {
  font-size: 0.75rem;
  line-height: 1.4;
}

#listings-sheet .spot-detail-booking-summary__availability,
body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-booking-summary__availability {
  overflow-wrap: anywhere;
  line-height: 1.45;
}

#listings-sheet .spot-details-container .availability-badge-next,
body.bottom-sheet-spot-details-mode #listings-content-sheet .availability-badge-next {
  align-items: flex-start;
  max-width: 100%;
  line-height: 1.35;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  white-space: normal;
  overflow: visible;
}

#listings-sheet .spot-details-container .availability-badge-next span,
body.bottom-sheet-spot-details-mode #listings-content-sheet .availability-badge-next span {
  line-height: 1.35;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .spot-detail-booking-summary__top {
    grid-template-columns: 1fr;
    gap: 0.875rem;
  }

  .spot-detail-booking-summary__button {
    width: 100% !important;
    align-self: stretch;
  }

  .spot-detail-fact {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .spot-detail-section__heading,
  .spot-detail-reviews__heading {
    display: block;
  }

  .spot-detail-reviews__rating {
    margin-top: 0.5rem;
  }
}

/* Phone-scale spot details in discover bottom sheet */
@media (max-width: 640px) {
  #listings-sheet .spot-details-container {
    padding-left: 0.625rem !important;
    padding-right: 0.625rem !important;
  }

  #listings-sheet .spot-details-container .spot-detail-amenities {
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 0.4375rem !important;
    margin-top: 0.75rem !important;
    padding-bottom: 0 !important;
  }

  #listings-sheet .spot-details-container .spot-detail-amenities::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  #listings-sheet .spot-details-container .owned-spot-banner {
    margin-bottom: 0.5rem !important;
    padding: 0.375rem 0.625rem !important;
    border-radius: 0.5rem !important;
  }

  #listings-sheet .spot-details-container .owned-spot-banner span {
    font-size: 0.75rem !important;
  }

  #listings-sheet .spot-details-container .owned-spot-banner svg {
    width: 1rem !important;
    height: 1rem !important;
  }

  #listings-sheet .spot-details-container .luxury-header {
    margin-top: 0.125rem !important;
    margin-bottom: 0.375rem !important;
  }

  #listings-sheet .spot-details-container .photo-gallery-compact,
  #listings-sheet .spot-details-container .photo-gallery-compact.photo-carousel {
    margin-bottom: 0.375rem !important;
  }

  /* Short landscape hero — reclaim fold for price/book + details. */
  #listings-sheet .spot-details-container .photo-gallery-compact.spot-detail-photo-frame,
  #listings-sheet .spot-details-container .photo-gallery-compact.spot-detail-photo-frame.photo-frame--carousel,
  #listings-sheet .spot-details-container .spot-detail-photo-frame.photo-frame--carousel,
  body.bottom-sheet-spot-details-mode #listings-content-sheet .photo-gallery-compact.spot-detail-photo-frame,
  body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-photo-frame.photo-frame--carousel {
    aspect-ratio: 16 / 9 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(34vh, 210px) !important;
    margin-bottom: 0.375rem !important;
  }

  #listings-sheet .spot-details-container .spot-detail-booking-summary,
  body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-booking-summary {
    margin-top: 0.15rem !important;
    margin-bottom: 0.25rem !important;
    padding: 0 !important;
  }

  /* Sticky price+Book bar — sibling of reassurance, not inset in a card. */
  #listings-sheet .spot-details-container .spot-detail-booking-summary__top,
  body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-booking-summary__top {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 0.5rem 0.625rem !important;
    align-items: end !important;
    margin: 0.25rem 0 0 !important;
    padding: 0.5rem 0 !important;
  }

  #listings-sheet .spot-details-container .spot-detail-booking-summary__button,
  body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-booking-summary__button {
    width: auto !important;
    min-width: 6.75rem !important;
    align-self: end !important;
  }

  #listings-sheet .spot-details-container .spot-detail-booking-summary__amount {
    font-size: 1.125rem !important;
  }

  /* Compact trust row under Book — Instant Book is the CTA; keep cancel / no-charge cues. */
  #listings-sheet .spot-details-container .spot-detail-booking-summary__reassurance,
  body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-booking-summary__reassurance {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.25rem 0.65rem !important;
    margin-top: 0.4rem !important;
    padding-top: 0.4rem !important;
    border-top: 1px solid color-mix(in srgb, var(--discover-chrome-border, #e5e7eb) 90%, transparent) !important;
  }

  #listings-sheet .spot-details-container .spot-detail-booking-summary__reassurance-item,
  body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-booking-summary__reassurance-item {
    font-size: 0.6875rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
  }

  #listings-sheet .spot-details-container .spot-detail-booking-summary__reassurance-icon,
  body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-booking-summary__reassurance-icon {
    width: 0.8125rem !important;
    height: 0.8125rem !important;
  }

  /* Terms stay out of the first fold on phones. */
  #listings-sheet .spot-details-container .spot-detail-booking-summary__terms-link,
  body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-booking-summary__terms-link {
    display: none !important;
  }

  #listings-sheet .spot-details-container .spot-detail-duration-section,
  body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-duration-section {
    margin-top: 0.375rem !important;
  }

  #listings-sheet .spot-details-container .availability-badge-next {
    margin-bottom: 0.35rem !important;
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
    font-size: 0.75rem !important;
  }

  #listings-sheet .spot-details-container .spot-detail-duration__panel,
  body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-duration__panel {
    padding: 0.375rem 0.5rem 0.5rem !important;
  }

  #listings-sheet .spot-details-container .spot-detail-duration__chip,
  #listings-sheet .spot-details-container .spot-detail-duration-section .duration-chip,
  body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-duration__chip,
  body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-duration-section .duration-chip {
    padding: 0.375rem 0.5rem !important;
    min-width: min(100%, 6.5rem) !important;
  }

  #listings-sheet .spot-details-container .luxury-header {
    margin-top: 0 !important;
    margin-bottom: 0.25rem !important;
  }

  #listings-sheet .spot-details-container .spot-detail-trust {
    margin: 0.125rem 0 !important;
  }

  #listings-sheet .spot-details-container .spot-detail-primary-cta,
  body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-primary-cta {
    margin-top: 0.5rem !important;
    margin-bottom: 0 !important;
    padding: 0.5rem !important;
  }

  #listings-sheet .spot-details-container .spot-detail-primary-cta #spot-detail-book,
  #listings-sheet .spot-details-container .spot-detail-primary-cta #bottom-sheet-book-button,
  body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-primary-cta #spot-detail-book,
  body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-primary-cta #bottom-sheet-book-button {
    min-height: 44px !important;
    font-size: 0.875rem !important;
  }

  #listings-sheet .spot-details-container .spot-detail-booking-summary__button,
  body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-booking-summary__button {
    min-height: 40px !important;
  }

  #listings-sheet .spot-details-container .spot-detail-section:not(.spot-detail-highlights) {
    margin-top: 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.75rem !important;
  }

  #listings-sheet .spot-details-container .spot-detail-highlights {
    margin-top: 0.25rem !important;
    padding: 0.125rem 0 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #listings-sheet .spot-details-container .spot-detail-section__heading {
    margin-bottom: 0.5rem !important;
    gap: 0.5rem !important;
  }

  #listings-sheet .spot-details-container .spot-detail-highlights .spot-detail-fact-list {
    margin-top: 0 !important;
  }

  #listings-sheet .spot-details-container .spot-detail-section__title {
    font-size: 0.875rem !important;
  }

  #listings-sheet .spot-details-container .spot-detail-section__subtitle {
    font-size: 0.75rem !important;
  }

  /* Keep facts in two columns in sheet (override global 640px stack) */
  #listings-sheet .spot-details-container .spot-detail-fact {
    grid-template-columns: 6.5rem minmax(0, 1fr) !important;
    column-gap: 0.5rem !important;
    row-gap: 0.1875rem !important;
    padding: 0.5rem 0 !important;
    align-items: baseline !important;
  }

  #listings-sheet .spot-details-container .spot-detail-fact__label {
    padding-top: 0 !important;
    line-height: 1.25 !important;
  }

  #listings-sheet .spot-details-container .spot-detail-fact__value {
    line-height: 1.35 !important;
    overflow-wrap: break-word !important;
  }

  #listings-sheet .spot-details-container .photo-gallery-compact.photo-carousel {
    margin-bottom: 0.5rem !important;
  }

  #listings-sheet .spot-details-container .spot-detail-highlights__access {
    margin-top: 0.5rem !important;
    padding-top: 0.5rem !important;
  }

  #listings-sheet .spot-details-container .spot-detail-highlights__includes {
    margin-top: 0.625rem !important;
  }

  #listings-sheet .spot-details-container .photo-gallery-compact .photo-indicators-external {
    right: 0.375rem !important;
    bottom: 0.375rem !important;
    padding: 5px 8px !important;
  }

  #listings-sheet .spot-details-container .policy-expandable-trigger.spot-detail-section-trigger,
  #listings-sheet .spot-details-container .spot-detail-policy .policy-expandable-trigger {
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    text-align: left !important;
    border-radius: 0 !important;
    font-size: inherit !important;
  }

  #listings-sheet .spot-details-container .photo-indicators-external .photo-indicator {
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 8px !important;
    min-height: 8px !important;
    max-height: 8px !important;
    padding: 0 !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
  }

  #listings-sheet .spot-details-container button.spot-detail-fact__value {
    padding: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    font-size: inherit !important;
    border-radius: 0 !important;
  }

  #listings-sheet .spot-details-container .spot-detail-fact__label,
  #listings-sheet .spot-details-container .spot-detail-fact__value {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
  }

  #listings-sheet .spot-details-container [data-spot-group-selected-confirmation] {
    display: none !important;
  }

  #listings-sheet .spot-details-container .spot-groups-picker-toolbar {
    margin-bottom: 0.25rem !important;
    gap: 0.375rem !important;
  }

  #listings-sheet .spot-details-container button.spot-groups-compare-btn {
    font-size: 0.6875rem !important;
    padding: 0.25rem 0.5rem !important;
    min-height: 2rem !important;
  }

  #listings-sheet .spot-details-container .spot-group-mini-card {
    min-width: 0;
    max-width: 100%;
  }

  #listings-sheet .spot-details-container .spot-detail-amenity {
    font-size: 0.6875rem !important;
    padding: 0.2rem 0.5rem !important;
    flex-shrink: 1 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  #listings-sheet .spot-details-container .spot-detail-note {
    margin-top: 0.5rem !important;
    padding: 0.5rem 0 0 !important;
  }
}

/* Short phones / landscape: keep sheet hero from dominating the fold. */
@media (max-height: 700px) {
  #listings-sheet .spot-details-container .photo-gallery-compact.spot-detail-photo-frame,
  #listings-sheet .spot-details-container .photo-gallery-compact.spot-detail-photo-frame.photo-frame--carousel,
  #listings-sheet .spot-details-container .spot-detail-photo-frame.photo-frame--carousel,
  #listings-content-sheet .spot-details-container .photo-gallery-compact.spot-detail-photo-frame,
  #listings-content-sheet .spot-details-container .spot-detail-photo-frame.photo-frame--carousel,
  body.bottom-sheet-spot-details-mode #listings-content-sheet .photo-gallery-compact.spot-detail-photo-frame,
  body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-photo-frame.photo-frame--carousel {
    max-height: min(20vh, 132px) !important;
  }
}

.photo-gallery-compact.spot-detail-photo-frame.photo-frame--carousel,
#spot-detail-view .photo-gallery-compact.spot-detail-photo-frame.photo-frame--carousel,
#spot-detail-content .photo-gallery-compact.spot-detail-photo-frame.photo-frame--carousel {
  position: relative !important;
  aspect-ratio: 4 / 3 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 0 1rem !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  contain: none !important;
  isolation: isolate !important;
}

#listings-sheet .spot-details-container .photo-gallery-compact.spot-detail-photo-frame.photo-frame--carousel,
#listings-content-sheet .spot-details-container .photo-gallery-compact.spot-detail-photo-frame.photo-frame--carousel,
body.bottom-sheet-spot-details-mode #listings-content-sheet .photo-gallery-compact.spot-detail-photo-frame.photo-frame--carousel {
  aspect-ratio: 16 / 9 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto 0.75rem !important;
  max-height: min(36vh, 220px) !important;
}

.photo-gallery-compact.spot-detail-photo-frame.photo-frame--carousel .photo-carousel-container,
#spot-detail-view .spot-detail-photo-frame.photo-frame--carousel .photo-carousel-container,
#spot-detail-content .spot-detail-photo-frame.photo-frame--carousel .photo-carousel-container,
#listings-sheet .spot-details-container .spot-detail-photo-frame.photo-frame--carousel .photo-carousel-container,
#listings-content-sheet .spot-details-container .spot-detail-photo-frame.photo-frame--carousel .photo-carousel-container {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  contain: none !important;
}

.photo-gallery-compact.spot-detail-photo-frame.photo-frame--carousel .photo-carousel-image-wrap,
#spot-detail-view .spot-detail-photo-frame.photo-frame--carousel .photo-carousel-image-wrap,
#spot-detail-content .spot-detail-photo-frame.photo-frame--carousel .photo-carousel-image-wrap,
#listings-sheet .spot-details-container .spot-detail-photo-frame.photo-frame--carousel .photo-carousel-image-wrap,
#listings-content-sheet .spot-details-container .spot-detail-photo-frame.photo-frame--carousel .photo-carousel-image-wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.photo-gallery-compact.spot-detail-photo-frame.photo-frame--carousel .photo-carousel-image,
.photo-gallery-compact.spot-detail-photo-frame.photo-frame--carousel .photo-carousel-image.active,
#spot-detail-view .spot-detail-photo-frame.photo-frame--carousel .photo-carousel-image,
#spot-detail-view .spot-detail-photo-frame.photo-frame--carousel .photo-carousel-image.active,
#spot-detail-content .spot-detail-photo-frame.photo-frame--carousel .photo-carousel-image,
#spot-detail-content .spot-detail-photo-frame.photo-frame--carousel .photo-carousel-image.active {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  box-sizing: border-box !important;
}

#listings-sheet .spot-details-container .spot-detail-photo-frame.photo-frame--carousel .photo-carousel-image,
#listings-sheet .spot-details-container .spot-detail-photo-frame.photo-frame--carousel .photo-carousel-image.active,
#listings-content-sheet .spot-details-container .spot-detail-photo-frame.photo-frame--carousel .photo-carousel-image,
#listings-content-sheet .spot-details-container .spot-detail-photo-frame.photo-frame--carousel .photo-carousel-image.active,
body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-photo-frame.photo-frame--carousel .photo-carousel-image,
body.bottom-sheet-spot-details-mode #listings-content-sheet .spot-detail-photo-frame.photo-frame--carousel .photo-carousel-image.active {
  object-fit: cover !important;
  object-position: center center !important;
}

/* Layout photo badge: above carousel image stack, readable on cover crop */
.photo-carousel-image-wrap .photo-layout-badge,
.spot-details-container .photo-layout-badge,
#spot-detail-view .photo-layout-badge,
#spot-detail-content .photo-layout-badge,
#listings-sheet .spot-details-container .photo-layout-badge,
#listings-content-sheet .spot-details-container .photo-layout-badge,
body.bottom-sheet-spot-details-mode #listings-content-sheet .photo-layout-badge {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  z-index: 4;
  padding: 0.3125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: rgba(15, 23, 42, 0.84) !important;
  border-radius: 0.375rem;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

html.dark .photo-carousel-image-wrap .photo-layout-badge,
html.dark .spot-details-container .photo-layout-badge,
html.dark #listings-sheet .spot-details-container .photo-layout-badge {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: rgba(15, 23, 42, 0.88) !important;
}

#listings-sheet .spot-details-container .photo-layout-badge,
#listings-content-sheet .spot-details-container .photo-layout-badge,
body.bottom-sheet-spot-details-mode #listings-content-sheet .photo-layout-badge {
  bottom: 0.625rem;
  left: 0.625rem;
  padding: 0.375rem 0.5625rem;
  font-size: 0.8125rem;
}

/* Group comparison modal z-index: shared group-comparison.css */
.group-comparison-modal-overlay {
  z-index: calc(var(--z-high-modal, 10000) + 8) !important;
}