/* =============================================================
   neo-map-layout.css — Map-First Layout System (Design System v2.2)
   NashDomBG · Full-screen map + overlay UI
   Sections:
     1. Map Full-Screen Layout
     2. Hero Filter Bar (top overlay)
     3. Side Panel (left, slides in)
     4. Listing Card (GoFanly-style with score badge)
     5. Status Tags
     6. Panel Table View
     7. Listing Detail Modal
     8. Map Legend
     9. City Marker DivIcon Styles
    10. Mobile Responsive
   ============================================================= */

/* =============================================================
   1. MAP FULL-SCREEN LAYOUT
   ============================================================= */

/* Prevent any scrolling/zooming on map page */
html, body {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation; /* prevent double-tap zoom */
}

#app {
  position: fixed;
  inset: 0;
  overflow: hidden;
  /* Override container styles from neo-layout.css */
  max-width: none;
  margin: 0;
  padding: 0;
}

#leaflet-map {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  /* Override neo-layout.css defaults */
  border-radius: 0;
  border: none;
  height: auto;
  margin: 0;
  background: #e8ecf0;
}

/* =============================================================
   2. HERO FILTER BAR (top overlay)
   ============================================================= */

#map-hero-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-xs) var(--space-lg);
  background: var(--glass-heavy);
  backdrop-filter: var(--blur-medium);
  -webkit-backdrop-filter: var(--blur-medium);
  border-bottom: var(--border-glass);
  border-radius: 0;
  max-width: 100vw;
  box-sizing: border-box;
}

/* Left: brand + mode toggle */
.hero-left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-shrink: 0;
}

.hero-brand {
  font: var(--text-h3);
  font-weight: 500;
  color: var(--palette-text-primary);
  white-space: nowrap;
  text-decoration: none;
}

a.hero-brand:hover {
  opacity: 0.8;
}

/* Filters — moved to right sidebar, hidden in header */
.hero-filters {
  display: none;
}

.hero-price-range {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.hero-price-sep {
  color: var(--palette-text-tertiary);
}

.filter-select--compact {
  height: 34px;
  width: auto;
  min-width: 100px;
  font: var(--text-body-sm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  border: var(--border-glass);
  background: var(--glass-light);
  backdrop-filter: var(--blur-light);
  -webkit-backdrop-filter: var(--blur-light);
  color: var(--palette-text-primary);
  cursor: pointer;
  transition: background var(--dur-quick) var(--ease-glass),
              border-color var(--dur-quick) var(--ease-glass);
  appearance: none;
  -webkit-appearance: none;
}

.filter-select--compact:hover {
  background: var(--glass-medium);
  border-color: rgba(255, 255, 255, 0.5);
}

.filter-select--compact:focus {
  outline: none;
  border-color: var(--palette-accent-muted);
  box-shadow: 0 0 0 2px var(--accent-muted-faint);
}

/* Right: stats + toggles */
.hero-right {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-shrink: 0;
}

.hero-stats {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  white-space: nowrap;
}

.hero-stat-value {
  font: var(--text-h3);
  color: var(--palette-text-primary);
  font-variant-numeric: tabular-nums;
}

.hero-stat-label {
  font: var(--text-caption);
  color: var(--palette-text-tertiary);
}

.hero-toggles {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

/* =============================================================
   2b. FILTER SIDEBAR (right, slides in)
   ============================================================= */

#filter-sidebar {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 420px;
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  background: var(--glass-heavy);
  backdrop-filter: var(--blur-heavy);
  -webkit-backdrop-filter: var(--blur-heavy);
  border-left: var(--border-glass);
  border-radius: 0;
  transform: translateX(100%);
  transition: transform var(--dur-slide) var(--ease-spring-gentle);
  will-change: transform;
  overflow: hidden;
}

#filter-sidebar[data-state="open"] {
  transform: translateX(0);
}

.filter-sidebar-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  padding-top: 56px;
  border-bottom: 1px solid var(--divider-soft);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.filter-header-layers {
  display: flex;
  gap: var(--space-xs);
  margin-left: auto;
  margin-right: var(--space-sm);
}
.btn--xs {
  padding: 4px 10px;
  font-size: 12px;
  height: 28px;
}

.filter-sidebar-title {
  font: var(--text-h3);
  margin: 0;
  color: var(--palette-text-primary);
}

.filter-sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-sm) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  scrollbar-width: thin;
  scrollbar-color: var(--glass-medium) transparent;
}
.filter-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm) var(--space-md);
}

.filter-sidebar-body::-webkit-scrollbar {
  width: 4px;
}

.filter-sidebar-body::-webkit-scrollbar-thumb {
  background: var(--glass-medium);
  border-radius: var(--radius-pill);
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filter-group--divider {
  padding-top: var(--space-sm);
  border-top: 1px solid var(--divider-soft);
}

.filter-label {
  font: var(--text-overline);
  font-weight: 500;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--palette-text-tertiary);
}

.filter-select--full {
  width: 100%;
  height: 38px;
  font: var(--text-body-sm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  border: var(--border-glass);
  background: var(--glass-light);
  color: var(--palette-text-primary);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background var(--dur-quick) var(--ease-glass),
              border-color var(--dur-quick) var(--ease-glass);
}

.filter-select--full:hover {
  background: var(--glass-medium);
  border-color: rgba(255, 255, 255, 0.5);
}

.filter-select--full:focus {
  outline: none;
  border-color: var(--palette-accent-muted);
  box-shadow: 0 0 0 2px var(--accent-muted-faint);
}

.filter-price-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.filter-price-row .input {
  flex: 1;
  min-width: 0;
}

.filter-price-sep {
  color: var(--palette-text-tertiary);
  flex-shrink: 0;
}

.filter-layer-toggles {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.filter-layer-btn {
  width: 100%;
  justify-content: center;
}

.filter-apply-btn {
  width: 100%;
  margin-top: var(--space-sm);
}

.filter-sidebar-toggle-btn {
  white-space: nowrap;
}

.filter-sidebar-toggle-btn.active {
  background: var(--palette-accent-gradient);
  color: var(--palette-text-on-accent);
}

/* =============================================================
   3. SIDE PANEL (left, slides in)
   ============================================================= */

#side-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 520px;
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  background: var(--glass-heavy);
  backdrop-filter: var(--blur-heavy);
  -webkit-backdrop-filter: var(--blur-heavy);
  border-right: var(--border-glass);
  border-radius: 0;
  transform: translateX(-100%);
  transition: transform var(--dur-slide) var(--ease-spring-gentle);
  will-change: transform;
  overflow: hidden;
}

#side-panel[data-state="open"] {
  transform: translateX(0);
}

.side-panel-header {
  padding: var(--space-md);
  padding-top: 72px; /* offset below hero bar */
  border-bottom: 1px solid var(--divider-soft);
  flex-shrink: 0;
}

/* Close button — top-left, below hero bar */
#panel-close {
  position: absolute;
  top: 80px;
  left: var(--space-md);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: var(--border-glass);
  background: var(--glass-medium);
  backdrop-filter: var(--blur-light);
  -webkit-backdrop-filter: var(--blur-light);
  color: var(--palette-text-primary);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background var(--dur-quick) var(--ease-glass),
              box-shadow var(--dur-quick) var(--ease-glass),
              transform var(--dur-quick) var(--ease-glass);
}

#panel-close:hover {
  background: var(--glass-heavy);
  box-shadow: var(--shadow-card);
  transform: scale(1.1);
}

.side-panel-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.side-panel-title-row h2 {
  font: var(--text-h2);
  margin: 0;
  color: var(--palette-text-primary);
  text-align: center;
  padding-left: 40px; /* offset for close button space */
}

.panel-city-stats {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-sm);
  font: var(--text-body-sm);
  color: var(--palette-text-secondary);
}

.side-panel-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-sm);
  gap: var(--space-sm);
}

.panel-view-toggle {
  display: flex;
  gap: 2px;
  background: var(--glass-ultra);
  border-radius: var(--radius-sm);
  padding: 2px;
}

.view-btn {
  width: 32px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 6px; /* radius-sm (8px) minus 2px padding */
  cursor: pointer;
  color: var(--palette-text-secondary);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-quick) var(--ease-glass),
              color var(--dur-quick) var(--ease-glass);
}

.view-btn:hover {
  background: var(--glass-light);
}

.view-btn.active {
  background: var(--palette-accent);
  color: var(--palette-text-on-accent);
}

.side-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--glass-medium) transparent;
}

.side-panel-body::-webkit-scrollbar {
  width: 4px;
}

.side-panel-body::-webkit-scrollbar-thumb {
  background: var(--glass-medium);
  border-radius: var(--radius-pill);
}

.side-panel-footer {
  padding: var(--space-md);
  border-top: 1px solid var(--divider-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.panel-page-info {
  font: var(--text-caption);
  color: var(--palette-text-tertiary);
}

/* =============================================================
   3b. PANEL LISTING DETAIL (in-panel drill-down)
   ============================================================= */

#panel-listing-detail {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
  scrollbar-width: thin;
  scrollbar-color: var(--glass-medium) transparent;
}

#panel-listing-detail::-webkit-scrollbar { width: 4px; }
#panel-listing-detail::-webkit-scrollbar-thumb {
  background: var(--glass-medium);
  border-radius: var(--radius-pill);
}

.panel-back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 6px var(--space-md);
  margin-bottom: var(--space-md);
  background: var(--glass-light);
  border: var(--border-glass);
  border-radius: var(--radius-sm);
  color: var(--palette-text-secondary);
  font: var(--text-body-sm);
  cursor: pointer;
  transition: background var(--dur-quick) var(--ease-glass),
              color var(--dur-quick) var(--ease-glass);
}

.panel-back-btn:hover {
  background: var(--glass-medium);
  color: var(--palette-text-primary);
}

/* Gallery adapted for panel width */
.panel-gallery {
  margin: 0 calc(-1 * var(--space-md)) var(--space-lg);
}

.panel-gallery-main {
  width: 100%;
  height: 260px;
  overflow: hidden;
}

.panel-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.panel-gallery-thumbs {
  display: flex;
  gap: 4px;
  padding: var(--space-sm) var(--space-md);
  overflow-x: auto;
  scrollbar-width: none;
}

.panel-gallery-thumbs::-webkit-scrollbar { display: none; }

.panel-thumb {
  width: 56px;
  height: 42px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--dur-quick) var(--ease-glass);
  flex-shrink: 0;
}

.panel-thumb:hover,
.panel-thumb.active {
  opacity: 1;
}

.panel-thumb.active {
  outline: 2px solid var(--palette-accent);
  outline-offset: 1px;
}

.panel-thumb-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 42px;
  background: var(--glass-ultra);
  border-radius: var(--radius-sm);
  font: var(--text-caption);
  color: var(--palette-text-secondary);
  flex-shrink: 0;
}

/* Score + price row */
.panel-detail-score-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.panel-detail-price {
  font: var(--text-h1);
  color: var(--palette-text-primary);
  font-variant-numeric: tabular-nums;
}

/* Metrics in single column for panel */
.panel-detail-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  margin: var(--space-md) 0;
}

/* =============================================================
   4. LISTING CARD (GoFanly-style with score badge)
   ============================================================= */

.listing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--glass-light);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-quick) var(--ease-glass),
              border-color var(--dur-quick) var(--ease-glass),
              box-shadow var(--dur-quick) var(--ease-glass),
              transform var(--dur-quick) var(--ease-glass);
}

.listing-card:hover {
  background: var(--glass-medium);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}

.listing-card:active {
  transform: translateY(0);
  box-shadow: var(--shadow-inset);
}

.listing-card.is-selected {
  background: var(--glass-medium);
  border-color: var(--palette-accent-muted);
  box-shadow: var(--shadow-accent-glow);
}

/* Card photo */
.listing-card-photo {
  position: relative;
  width: 100%;
  height: 140px;
  overflow: hidden;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.listing-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.listing-card-photo-count {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font: var(--text-caption);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

/* Card Gallery Carousel */
.listing-card-gallery {
  position: relative;
  width: 100%;
  height: 160px;
  overflow: hidden;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.listing-card-gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.15s ease;
}
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  color: #333;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 2;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.listing-card:hover .gallery-arrow,
.listing-card-gallery:active .gallery-arrow {
  opacity: 1;
}
/* Always show arrows on touch devices */
@media (hover: none) {
  .gallery-arrow { opacity: 0.8; }
}
.gallery-arrow--left { left: 6px; }
.gallery-arrow--right { right: 6px; }
.gallery-arrow:active { background: rgba(255, 255, 255, 1); }
.gallery-counter {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
  z-index: 2;
}
.gallery-dots {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
}
.gallery-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transition: background 0.2s;
}
.gallery-dot.active {
  background: #fff;
  box-shadow: 0 0 2px rgba(0,0,0,0.3);
}
.gallery-dot-more {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.8);
}

/* Card body = score + content side by side */
.listing-card-body {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--space-sm);
  padding: var(--space-md);
}

.score-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--text-body-sm);
  font-weight: 600;
  color: #ffffff;
  flex-shrink: 0;
}

.score-badge.score-high {
  background: var(--green);
}

.score-badge.score-mid {
  background: var(--yellow);
}

.score-badge.score-low {
  background: var(--red);
}

.listing-card-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.listing-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-right: 40px; /* space for shortlist heart button */
}

.listing-card-price {
  font: var(--text-h3);
  font-weight: 500;
  color: var(--palette-text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.listing-card-m2price {
  font: var(--text-caption);
  color: var(--palette-text-secondary);
  font-variant-numeric: tabular-nums;
}

.listing-card-stats {
  display: flex;
  gap: var(--space-md);
  font: var(--text-body-sm);
  color: var(--palette-text-secondary);
}

.listing-card-stat {
  display: flex;
  align-items: center;
  gap: 4px;
}

.listing-card-stat strong {
  color: var(--palette-text-primary);
  font-weight: 500;
}

.listing-card-location {
  font: var(--text-caption);
  color: var(--palette-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.listing-card-bar {
  height: 4px;
  background: var(--glass-ultra);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-top: var(--space-xs);
}

.listing-card-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width var(--dur-standard) var(--ease-glass);
}

.listing-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: var(--space-xs);
}

/* =============================================================
   5. STATUS TAGS (GoFanly-style)
   ============================================================= */

.status-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-sm);
  height: 20px;
  font: var(--text-overline);
  font-weight: 500;
  letter-spacing: var(--ls-overline);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.status-tag.tag-bargain {
  background: rgba(34, 197, 94, 0.12);
  color: var(--green);
}

.status-tag.tag-average {
  background: rgba(234, 179, 8, 0.12);
  color: var(--yellow);
}

.status-tag.tag-expensive {
  background: rgba(239, 68, 68, 0.12);
  color: var(--red);
}

.status-tag.tag-new {
  background: rgba(59, 122, 140, 0.12);
  color: var(--palette-accent);
}

.status-tag.tag-reduced {
  background: rgba(124, 58, 237, 0.12);
  color: var(--purple);
}

/* =============================================================
   6. PANEL TABLE VIEW (compact sortable table inside side panel)
   ============================================================= */

.panel-table {
  border-collapse: collapse;
  width: 100%;
  font: var(--text-caption);
}

.panel-table thead {
  position: sticky;
  top: 0;
  z-index: var(--z-card);
}

.panel-table th {
  padding: 6px var(--space-sm);
  font: var(--text-overline);
  font-weight: 500;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--palette-text-tertiary);
  text-align: left;
  background: var(--glass-ultra);
  backdrop-filter: var(--blur-light);
  -webkit-backdrop-filter: var(--blur-light);
  border-bottom: 1px solid var(--divider-soft);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: color var(--dur-quick) var(--ease-glass);
}

.panel-table th:hover {
  color: var(--palette-text-primary);
}

.panel-table th.sort-asc::after {
  content: ' ↑';
  color: var(--palette-accent);
}

.panel-table th.sort-desc::after {
  content: ' ↓';
  color: var(--palette-accent);
}

.panel-table td {
  padding: 6px var(--space-sm);
  border-bottom: 1px solid var(--glass-ultra);
  font-variant-numeric: tabular-nums;
  color: var(--palette-text-primary);
  transition: background var(--dur-quick) var(--ease-glass);
}

.panel-table tbody tr:hover td {
  background: var(--glass-ultra);
}

.panel-table tbody tr {
  cursor: pointer;
}

.panel-table .score-cell {
  width: 40px;
  text-align: center;
}

.score-mini {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font: var(--text-caption);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 600;
}

.score-mini.score-high {
  background: var(--green);
}

.score-mini.score-mid {
  background: var(--yellow);
}

.score-mini.score-low {
  background: var(--red);
}

/* =============================================================
   7. LISTING DETAIL MODAL (wider, with metrics)
   ============================================================= */

.listing-modal {
  max-width: 600px;
  width: calc(100% - var(--space-xl));
  max-height: 85vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--glass-medium) transparent;
}

.listing-modal::-webkit-scrollbar {
  width: 4px;
}

.listing-modal::-webkit-scrollbar-thumb {
  background: var(--glass-medium);
  border-radius: var(--radius-pill);
}

/* Modal photo gallery */
.modal-gallery {
  margin: calc(-1 * var(--space-xl)) calc(-1 * var(--space-xl)) var(--space-lg);
}

.modal-gallery-main {
  width: 100%;
  height: 280px;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.modal-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-gallery-thumbs {
  display: flex;
  gap: 4px;
  padding: var(--space-sm) var(--space-xl);
  overflow-x: auto;
  scrollbar-width: none;
}

.modal-gallery-thumbs::-webkit-scrollbar { display: none; }

.modal-thumb {
  width: 52px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--dur-quick) var(--ease-glass);
  flex-shrink: 0;
}

.modal-thumb:hover,
.modal-thumb.active {
  opacity: 1;
}

.modal-thumb.active {
  outline: 2px solid var(--palette-accent);
  outline-offset: 1px;
}

.modal-thumb-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 40px;
  background: var(--glass-ultra);
  border-radius: var(--radius-sm);
  font: var(--text-caption);
  color: var(--palette-text-secondary);
  flex-shrink: 0;
}

.modal-score-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.modal-price {
  font: var(--text-h1);
  color: var(--palette-text-primary);
  font-variant-numeric: tabular-nums;
}

.modal-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  margin: var(--space-lg) 0;
}

.metric-card {
  padding: var(--space-sm) var(--space-md);
  background: var(--glass-ultra);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.metric-label {
  font: var(--text-overline);
  color: var(--palette-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--ls-overline);
}

.metric-value {
  font: var(--text-body);
  font-weight: 500;
  color: var(--palette-text-primary);
  margin-top: 2px;
}

.metric-comparison {
  font: var(--text-caption);
  margin-top: 2px;
}

.metric-comparison.better {
  color: var(--green);
}

.metric-comparison.worse {
  color: var(--red);
}

.metric-comparison.neutral {
  color: var(--slate);
}

.modal-section {
  margin-top: var(--space-lg);
}

.modal-section-title {
  font: var(--text-overline);
  color: var(--palette-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--ls-overline);
  margin-bottom: var(--space-sm);
}

.modal-description {
  font: var(--text-body-sm);
  color: var(--palette-text-secondary);
  line-height: 1.6;
  max-height: 120px;
  overflow-y: auto;
}

.price-history-bar {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 40px;
  margin-top: var(--space-sm);
}

.price-history-bar span {
  flex: 1;
  background: var(--accent-muted-faint);
  border-radius: 2px;
  min-height: 4px;
  transition: background var(--dur-quick) var(--ease-glass);
}

.price-history-bar span:hover {
  background: var(--palette-accent-muted);
}

/* =============================================================
   8. MAP LEGEND (compact, bottom-right)
   ============================================================= */

#map-legend {
  position: absolute;
  bottom: var(--space-lg);
  right: var(--space-lg);
  z-index: var(--z-card);
  padding: var(--space-sm) var(--space-md);
  background: var(--glass-heavy);
  backdrop-filter: var(--blur-medium);
  -webkit-backdrop-filter: var(--blur-medium);
  border: var(--border-glass);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.legend-title {
  font: var(--text-overline);
  font-weight: 500;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--palette-text-tertiary);
  margin-bottom: var(--space-xs);
}

.legend-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font: var(--text-caption);
  color: var(--palette-text-secondary);
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-dot.dot-bargain { background: var(--green); }
.legend-dot.dot-average { background: var(--yellow); }
.legend-dot.dot-expensive { background: var(--red); }

/* =============================================================
   9. CITY MARKER DIVICON STYLES
   ============================================================= */

.city-marker {
  /* Leaflet DivIcon container — no bg, no border from Leaflet */
  background: transparent !important;
  border: none !important;
}

.marker-bubble {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 12px;
  background: var(--glass-heavy);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform var(--dur-quick) var(--ease-spring),
              opacity var(--dur-quick) var(--ease-spring),
              border-color var(--dur-quick) var(--ease-glass);
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.marker-bubble:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translate(-50%, -50%) scale(1.05);
  border-color: var(--palette-accent-muted);
}

.marker-bubble.marker-selected {
  border-color: var(--palette-accent);
  box-shadow: var(--shadow-accent-glow);
}

.marker-name {
  font: var(--text-body-sm);
  font-weight: 500;
  color: var(--palette-text-primary);
}

.marker-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  background: var(--palette-accent);
  color: #ffffff;
  font: var(--text-overline);
  font-weight: 600;
  border-radius: var(--radius-pill);
  margin-top: 2px;
}

.marker-price {
  font: var(--text-caption);
  color: var(--palette-text-secondary);
  margin-top: 2px;
}

.marker-no-listings .marker-bubble {
  opacity: 0.4;
  transform: scale(0.85);
}

.marker-no-listings .marker-count,
.marker-no-listings .marker-price {
  display: none;
}

/* =============================================================
   9b. ZOOM-LEVEL PROGRESSIVE DISCLOSURE
   Classes applied to #leaflet-map:
     .zoom-far  — zoom 7-8:  badge only, clean circle
     .zoom-mid  — zoom 9-10: badge + city name
     .zoom-close — zoom 11+: everything (default)
   ============================================================= */

/* Shared transition for show/hide elements (opacity only — GPU compositable) */
.marker-name,
.marker-price {
  transition: opacity var(--dur-normal) var(--ease-glass);
  overflow: hidden;
}

/* --- zoom-far: badge only --- */
#leaflet-map.zoom-far .marker-bubble {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

#leaflet-map.zoom-far .marker-bubble:hover {
  box-shadow: none;
  transform: translate(-50%, -50%) scale(1.1);
}

#leaflet-map.zoom-far .marker-name,
#leaflet-map.zoom-far .marker-price {
  display: none;
}

#leaflet-map.zoom-far .marker-count {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  font-size: 10px;
  margin-top: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* --- zoom-mid: badge + name, no price --- */
#leaflet-map.zoom-mid .marker-price {
  display: none;
}

#leaflet-map.zoom-mid .marker-bubble {
  padding: 4px 10px;
}

/* --- zoom-close: everything visible (default state) --- */
/* No overrides needed — base styles already show everything */

/* =============================================================
   10. MOBILE RESPONSIVE
   ============================================================= */

@media (max-width: 768px) {
  #map-hero-bar {
    padding: 4px 8px;
    gap: 2px;
    flex-wrap: wrap !important;
    touch-action: manipulation;
  }

  .hero-left {
    width: 100% !important;
    flex: 0 0 100% !important;
    min-width: 0;
    gap: 4px;
    order: 1;
  }

  .hero-right {
    width: 100% !important;
    flex: 0 0 100% !important;
    order: 2;
  }

  .hero-brand {
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
  }

  .hero-nav-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-shrink: 1;
    min-width: 0;
  }
  .hero-nav-tabs::-webkit-scrollbar { display: none; }

  .hero-nav-tabs .nav-tab {
    padding: 4px 10px;
    font-size: 12px;
    height: 28px;
    white-space: nowrap;
  }

  .hero-nav-tabs .nav-tab--link {
    padding-left: 10px;
    margin-left: 1px;
  }

  .hero-filters {
    width: 100%;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .hero-stats { display: none; }

  .hero-right .poi-filter-btn,
  .hero-right .filter-sidebar-toggle-btn {
    font-size: 12px;
    padding: 4px 10px;
    height: 28px;
  }

  /* POI dropdown: bottom sheet on mobile */
  .hero-right .poi-filter-dropdown {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 50vh;
    border-radius: 16px 16px 0 0;
    z-index: 10001;
  }

  .hero-toggles {
    gap: var(--space-xs);
  }

  .filter-select--compact {
    min-width: 90px;
  }

  #side-panel {
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    max-height: 100%;
    border-right: none;
    border-top: none;
    border-radius: 0;
    transform: translateX(-100%);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #side-panel[data-state="open"] {
    transform: translateX(0);
  }

  .side-panel-header {
    padding: 4px 8px;
    padding-top: 58px; /* below compact 2-row hero bar */
  }

  /* Compact mobile panel header */
  .side-panel-title-row h2 {
    font-size: 16px;
    padding-left: 0;
  }

  /* Close button repositioned for mobile — top-right, below hero bar */
  #panel-close {
    top: 56px;
    right: 8px;
    left: auto;
    width: 32px;
    height: 32px;
    font-size: 16px;
    background: rgba(0, 0, 0, 0.06);
    border: none;
    z-index: 20;
  }

  .panel-city-stats {
    margin-top: 2px;
    gap: var(--space-sm);
    font-size: 12px;
  }

  .side-panel-controls {
    margin-top: 2px;
  }

  .side-panel-body {
    padding: 4px 6px;
    gap: 6px;
  }

  /* Bigger listing cards on mobile */
  .listing-card {
    margin: 0;
    border-radius: 10px;
  }

  .listing-card-gallery {
    height: 200px;
  }

  /* Legend: position above zoom to avoid overlap */
  #map-legend {
    bottom: auto;
    top: 56px;
    right: var(--space-sm);
    left: var(--space-sm);
    font-size: 11px;
    padding: var(--space-xs) var(--space-sm);
  }

  #filter-sidebar {
    width: 100%;
    top: auto;
    bottom: 0;
    height: 70vh;
    max-height: 70vh;
    border-left: none;
    border-top: var(--border-glass);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    transform: translateY(100%);
  }

  #filter-sidebar[data-state="open"] {
    transform: translateY(0);
  }

  .filter-sidebar-header {
    padding-top: var(--space-sm);
    flex-wrap: nowrap;
  }

  .filter-header-layers {
    gap: 4px;
  }

  .filter-header-layers .btn--xs {
    padding: 3px 8px;
    font-size: 11px;
    height: 26px;
  }

  /* Force 1 column on mobile */
  .filter-row-2col {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }

  .filter-sidebar-body {
    padding: var(--space-xs) var(--space-sm);
    gap: var(--space-xs);
  }


  .listing-modal {
    max-width: none;
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .modal-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .hero-price-range {
    width: 100%;
  }

  .hero-price-range .input {
    flex: 1;
  }

  .score-badge {
    width: 36px;
    height: 36px;
    font: var(--text-caption);
  }
}

/* =============================================================
   11. RENTAL YIELD ANALYTICS
   ============================================================= */

/* --- Mode Toggle (.hero-mode-toggle) --- */

.hero-mode-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--glass-light);
  border: var(--border-glass);
  border-radius: var(--radius-pill);
  padding: 2px;
  flex-shrink: 0;
}

.mode-btn {
  padding: 0 var(--space-md);
  height: 28px;
  border: none;
  background: transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font: var(--text-body-sm);
  font-weight: 500;
  color: var(--palette-text-secondary);
  white-space: nowrap;
  transition: background var(--dur-quick) var(--ease-glass),
              color var(--dur-quick) var(--ease-glass),
              box-shadow var(--dur-quick) var(--ease-glass);
}

.mode-btn:hover {
  color: var(--palette-text-primary);
  background: var(--glass-light);
}

.mode-btn.active {
  background: var(--palette-accent-gradient);
  color: var(--palette-text-on-accent);
  box-shadow: var(--shadow-accent-glow-subtle);
}

/* --- Yield Overview Panel (#yield-overview / .yield-overview) --- */

#yield-overview,
.yield-overview {
  position: absolute;
  bottom: calc(var(--space-lg) + 80px); /* above legend */
  left: var(--space-lg);
  width: 380px;
  max-height: 60vh;
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  background: var(--glass-heavy);
  backdrop-filter: var(--blur-medium);
  -webkit-backdrop-filter: var(--blur-medium);
  border: var(--border-glass-glow);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-floating);
  overflow: hidden;
  transition: opacity var(--dur-standard) var(--ease-glass),
              transform var(--dur-standard) var(--ease-glass);
}

#yield-overview.is-hidden,
.yield-overview.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(var(--space-sm));
}

.yield-overview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-md) var(--space-sm);
  border-bottom: 1px solid var(--divider-soft);
  flex-shrink: 0;
}

.yield-overview-title {
  font: var(--text-h3);
  color: var(--palette-text-primary);
  margin: 0;
  letter-spacing: var(--ls-headline);
}

.yield-overview-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-sm) 0;
  scrollbar-width: thin;
  scrollbar-color: var(--glass-medium) transparent;
}

.yield-overview-body::-webkit-scrollbar {
  width: 4px;
}

.yield-overview-body::-webkit-scrollbar-thumb {
  background: var(--glass-medium);
  border-radius: var(--radius-pill);
}

/* --- Yield City Row (.yield-city-row) --- */

.yield-city-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  transition: background var(--dur-quick) var(--ease-glass);
}

.yield-city-row:hover {
  background: var(--glass-medium);
}

.yield-city-row.is-active {
  background: var(--glass-light);
  border-left: 2px solid var(--palette-accent);
}

.yield-city-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.yield-city-name {
  font: var(--text-body-sm);
  font-weight: 500;
  color: var(--palette-text-primary);
}

.yield-city-metrics,
.yield-city-row-stats {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font: var(--text-caption);
  color: var(--palette-text-tertiary);
  flex-wrap: wrap;
}

/* --- Yield Bar (.yield-bar) --- */

.yield-bar-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.yield-bar {
  flex: 1;
  height: 6px;
  background: var(--glass-ultra);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.yield-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width var(--dur-standard) var(--ease-glass);
}

.yield-bar-fill.yield-high { background: var(--green); }
.yield-bar-fill.yield-mid  { background: var(--yellow); }
.yield-bar-fill.yield-low  { background: var(--red); }

/* --- Yield Metric Badge (.yield-badge) --- */

.yield-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-sm);
  height: 20px;
  font: var(--text-overline);
  font-weight: 600;
  letter-spacing: var(--ls-overline);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.yield-badge.yield-high {
  background: rgba(34, 197, 94, 0.12);
  color: var(--green);
}

.yield-badge.yield-mid {
  background: rgba(234, 179, 8, 0.12);
  color: var(--yellow);
}

.yield-badge.yield-low {
  background: rgba(239, 68, 68, 0.12);
  color: var(--red);
}

/* Standalone yield color classes (for metric values) */
.yield-value.yield-high { color: var(--green); }
.yield-value.yield-mid  { color: var(--yellow); }
.yield-value.yield-low  { color: var(--red); }

/* --- Yield Side Panel Detail (.yield-detail-*) --- */

.yield-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  margin: var(--space-md) 0;
}

.yield-detail-section {
  margin-top: var(--space-lg);
}

.yield-detail-section-title {
  font: var(--text-overline);
  color: var(--palette-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--ls-overline);
  margin-bottom: var(--space-sm);
}

.yield-compare-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

.yield-compare-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm);
  background: var(--glass-ultra);
  border-radius: var(--radius-sm);
  border: var(--border-glass);
  text-align: center;
}

.yield-compare-label {
  font: var(--text-caption);
  color: var(--palette-text-tertiary);
}

.yield-compare-value {
  font: var(--text-body);
  font-weight: 500;
  color: var(--palette-text-primary);
  font-variant-numeric: tabular-nums;
}

.yield-airbnb-card {
  padding: var(--space-md);
  background: var(--glass-light);
  border-radius: var(--radius-md);
  border: var(--border-glass);
  border-left: 3px solid var(--palette-accent);
  margin-top: var(--space-sm);
}

.yield-airbnb-card .metric-label {
  color: var(--palette-accent);
}

/* --- Yield Marker Override (.marker-yield) --- */

.marker-yield .marker-bubble {
  background: var(--glass-heavy);
  border-color: var(--palette-accent-muted);
}

.marker-yield-value {
  font: var(--text-h3);
  font-weight: 600;
  color: var(--palette-text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-headline);
}

.marker-yield-label {
  font: var(--text-caption);
  color: var(--palette-text-tertiary);
  text-align: center;
  margin-top: 2px;
}

/* --- btn-icon--sm variant --- */

.btn-icon--sm {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--border-glass);
  border-radius: var(--radius-sm);
  background: var(--glass-light);
  backdrop-filter: var(--blur-light);
  -webkit-backdrop-filter: var(--blur-light);
  cursor: pointer;
  color: var(--palette-text-secondary);
  font-size: 14px;
  transition: background var(--dur-quick) var(--ease-glass),
              color var(--dur-quick) var(--ease-glass),
              box-shadow var(--dur-quick) var(--ease-glass);
}

.btn-icon--sm:hover {
  background: var(--glass-medium);
  color: var(--palette-text-primary);
  box-shadow: var(--shadow-card);
}

/* --- Mobile responsive for yield components --- */

@media (max-width: 768px) {
  #yield-overview,
  .yield-overview {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 40vh;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }

  .yield-detail-grid {
    grid-template-columns: 1fr;
  }

  .yield-compare-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =============================================================
   12. NAVIGATION LINKS & SHORTLIST
   ============================================================= */

.hero-guide-link,
.hero-compare-link {
  color: var(--neo-accent, #64b5f6);
  text-decoration: none; font-size: 0.85rem;
  padding: 4px 10px; border-radius: 6px;
  border: 1px solid rgba(100,181,246,0.3);
  white-space: nowrap;
}
.hero-guide-link:hover,
.hero-compare-link:hover { background: rgba(100,181,246,0.1); }

.hero-shortlist-btn {
  display: flex; align-items: center; gap: 4px;
  background: rgba(255,50,50,0.1); border: 1px solid rgba(255,50,50,0.3);
  color: var(--palette-text-primary); font-size: 0.85rem;
  padding: 4px 10px; border-radius: 6px; cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-quick) var(--ease-glass);
}
.hero-shortlist-btn:hover { background: rgba(255,50,50,0.2); }

/* Heart shortlist button — top-right of card, overlaps photo if present */
.shortlist-btn {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-quick) var(--ease-glass),
              background var(--dur-quick) var(--ease-glass);
  z-index: 3;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.shortlist-btn:hover {
  transform: scale(1.15);
  background: rgba(0, 0, 0, 0.7);
}
.shortlist-btn--active {
  background: rgba(220, 38, 38, 0.45);
  border-color: rgba(255, 100, 100, 0.4);
}

.shortlist-auth-modal { padding: var(--space-md); }
.shortlist-auth-modal h3 { margin: 0 0 var(--space-md); }
.shortlist-auth-tabs {
  display: flex; gap: 2px; margin-bottom: var(--space-md);
  background: var(--glass-light); border-radius: var(--radius-sm); padding: 2px;
}
.shortlist-auth-tabs .tab-btn {
  flex: 1; border: none; background: transparent; padding: 6px;
  border-radius: 6px; cursor: pointer; font-size: 0.9rem;
  color: var(--palette-text-secondary);
  transition: background var(--dur-quick) var(--ease-glass);
}
.shortlist-auth-tabs .tab-btn.active {
  background: var(--palette-accent); color: var(--palette-text-on-accent);
}

/* =============================================================
   13. COST CALCULATOR
   ============================================================= */

.cost-calculator {
  margin-top: 1.5rem;
  padding: 1.2rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}
.cost-calculator h3 { margin: 0 0 1rem; font-size: 1.1rem; }
.cost-calculator h4 { margin: 1.2rem 0 0.6rem; font-size: 0.95rem; opacity: 0.8; }
.cost-rows { display: flex; flex-direction: column; gap: 0.4rem; }
.cost-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.3rem 0; font-size: 0.9rem;
}
.cost-row--total {
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: 0.5rem; padding-top: 0.7rem;
}
.cost-row--toggle label { display: flex; align-items: center; gap: 0.5rem; }
.cost-row--toggle select {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15);
  color: inherit; border-radius: 6px; padding: 2px 6px; font-size: 0.85rem;
}
.cost-row--mortgage { opacity: 0.7; font-style: italic; }
.cost-value { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cost-disclaimer {
  margin-top: 1rem; font-size: 0.78rem; opacity: 0.5; line-height: 1.4;
}

/* =============================================================
   REDUCED MOTION
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
  #side-panel,
  .listing-card,
  .marker-bubble,
  .filter-select--compact,
  .listing-card-bar-fill {
    transition-duration: var(--dur-instant);
  }
}

/* =============================================================
   POI MARKERS
   ============================================================= */
.poi-cluster-icon {
  background: transparent;
}
.poi-cluster {
  width: 30px;
  height: 30px;
  background: var(--glass-heavy, rgba(30,30,50,0.7));
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  color: #fff;
  font: 600 11px/30px var(--font-body, 'Source Sans 3', sans-serif);
  text-align: center;
}
.poi-tooltip {
  background: var(--glass-heavy, rgba(30,30,50,0.85)) !important;
  backdrop-filter: blur(8px);
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  font: 500 12px var(--font-body, 'Source Sans 3', sans-serif) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}
.poi-tooltip::before {
  border-top-color: rgba(30,30,50,0.85) !important;
}

/* ── POI Filter Dropdown ── */
.poi-filter-wrap {
  position: relative;
}
.poi-filter-btn {
  font-size: 0.85rem;
  white-space: nowrap;
  transition: background var(--dur-quick) var(--ease-glass),
              border-color var(--dur-quick) var(--ease-glass);
}
.poi-filter-btn.active,
.poi-filter-btn.poi-active {
  background: var(--palette-accent-gradient, linear-gradient(135deg, #42a5f5, #1e88e5));
  color: #fff;
  border-color: transparent;
}
.poi-filter-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  transform: none;
  width: 260px;
  max-height: 400px;
  background: var(--glass-heavy, rgba(25,25,45,0.92));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  z-index: 9999;
  overflow: hidden;
  animation: poiDropIn 0.15s var(--ease-glass, ease-out);
}
@keyframes poiDropIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.poi-filter-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font: 500 12px var(--font-body, 'Source Sans 3', sans-serif);
  color: var(--palette-text-secondary, #aab);
}
.poi-filter-header span:first-child { flex: 1; }
.poi-link-btn {
  background: none;
  border: none;
  color: var(--palette-accent, #42a5f5);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.poi-link-btn:hover {
  background: rgba(100,181,246,0.12);
}
.poi-filter-list {
  padding: 6px 0;
  max-height: 340px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.poi-filter-list::-webkit-scrollbar { width: 4px; }
.poi-filter-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
.poi-filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--palette-text-primary, #eee);
  transition: background 0.1s;
}
.poi-filter-item:hover {
  background: rgba(255,255,255,0.06);
}
.poi-cat-check {
  width: 15px;
  height: 15px;
  accent-color: var(--palette-accent, #42a5f5);
  flex-shrink: 0;
}
.poi-cat-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.3);
}
.poi-cat-emoji {
  font-size: 14px;
  flex-shrink: 0;
}
.poi-cat-label {
  flex: 1;
  white-space: nowrap;
}

/* =============================================================
   14. NEIGHBORHOOD HEATMAP
   ============================================================= */

.heatmap-tooltip {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.legend-heatmap-row {
  margin-top: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--divider-soft, rgba(255,255,255,0.08));
}

.legend-heatmap-bar {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: 4px;
}

.legend-heatmap-gradient {
  flex: 1;
  height: 8px;
  border-radius: var(--radius-pill);
  background: linear-gradient(to right, rgb(0,255,60), rgb(255,255,60), rgb(255,0,60));
  min-width: 60px;
}

.legend-heatmap-label {
  font: var(--text-caption);
  color: var(--palette-text-tertiary);
  white-space: nowrap;
  font-size: 11px;
}

/* Toggle button */
.heatmap-toggle-btn.active {
  background: var(--accent, rgba(59, 130, 246, 0.3));
  border-color: var(--accent-border, rgba(59, 130, 246, 0.5));
}

/* Price labels (zoom 13+) */
.heatmap-price-label span {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
}

/* Name labels */
.heatmap-name-label span {
  display: inline-block;
  font-size: 10px;
  color: var(--palette-text-secondary, #ccc);
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
}

/* Neighborhood popup */
.heatmap-popup .leaflet-popup-content-wrapper {
  border-radius: 12px;
  backdrop-filter: blur(12px);
  background: var(--glass-bg, rgba(30, 34, 46, 0.9));
  border: 1px solid var(--divider-soft, rgba(255,255,255,0.08));
}

.heatmap-popup .leaflet-popup-tip {
  background: var(--glass-bg, rgba(30, 34, 46, 0.9));
}

.heatmap-popup-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
  min-width: 140px;
}

.heatmap-popup-content b {
  font-size: 14px;
  color: var(--palette-text-primary, #fff);
}

.heatmap-popup-city {
  font-size: 12px;
  color: var(--palette-text-tertiary, #999);
}

.heatmap-popup-stats {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--palette-text-secondary, #ccc);
  margin: 4px 0;
}

.heatmap-popup-btn {
  width: 100%;
  margin-top: 4px;
  font-size: 12px;
  padding: 6px 10px;
  cursor: pointer;
}

/* Neighborhood filter badge */
.nb-filter-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  margin: 8px 12px;
  border-radius: 8px;
  background: var(--accent, rgba(59, 130, 246, 0.15));
  border: 1px solid var(--accent-border, rgba(59, 130, 246, 0.3));
  font-size: 13px;
  color: var(--palette-text-primary, #fff);
}

.nb-filter-clear {
  background: none;
  border: none;
  color: var(--palette-text-tertiary, #999);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
}
.nb-filter-clear:hover {
  color: var(--palette-text-primary, #fff);
}

/* Toast notification */
.heatmap-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  transition: opacity 300ms ease, transform 300ms ease;
  z-index: 10000;
  padding: 10px 20px;
  border-radius: 10px;
  backdrop-filter: blur(12px);
  background: rgba(30, 34, 46, 0.92);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
  pointer-events: auto;
  max-width: calc(100vw - 100px);
}

.heatmap-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.heatmap-toast-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-size: 14px;
  padding: 0;
}
.heatmap-toast-close:hover {
  color: #fff;
}

/* =============================================================
   PERF: Remove backdrop-filter from map overlays.
   Compositor re-samples blur kernel on every map repaint frame.
   Solid semi-transparent background gives same visual at zero cost.
   ============================================================= */
#map-hero-bar {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(255, 255, 255, 0.92);
}
#side-panel {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(255, 255, 255, 0.96);
}
#filter-sidebar {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(255, 255, 255, 0.96);
}
#map-legend,
.map-legend.glass-card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(255, 255, 255, 0.92);
}
.panel-reopen-btn {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(255, 255, 255, 0.90);
}
.hero-filter select,
.hero-filter input {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* PERF: Markers — biggest source of zoom lag (blur re-sampled per frame per marker) */
.marker-bubble {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(255, 255, 255, 0.88);
}
.poi-cluster {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(30, 30, 50, 0.85);
}
/* PERF: Hide decorative blur shapes behind map — saves 2 compositor layers */
#app .scene-bg-shape {
  display: none;
}

/* =============================================================
   11. ENHANCED FILTER PANEL
   ============================================================= */

/* Nav tabs in header */
.hero-nav-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--glass-ultra);
  border-radius: var(--radius-pill);
  padding: 3px;
}

.hero-nav-tabs .nav-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  height: 32px;
  font: var(--text-body-sm);
  font-weight: 500;
  color: var(--palette-text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-quick) var(--ease-glass), color var(--dur-quick) var(--ease-glass);
}

.hero-nav-tabs .nav-tab:hover {
  background: var(--glass-light);
  color: var(--palette-text-primary);
}

.hero-nav-tabs .nav-tab.active {
  background: var(--palette-accent);
  color: var(--palette-text-on-accent);
}

.hero-nav-tabs .nav-tab--link {
  color: var(--palette-text-tertiary);
  font-weight: 400;
  border-left: 1px solid var(--divider-light, rgba(0,0,0,0.08));
  margin-left: 2px;
  padding-left: 14px;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}

.hero-nav-tabs .nav-tab--link:hover {
  color: var(--palette-accent);
  background: var(--glass-ultra);
}

/* Filter chip groups */
.filter-chip-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
  font: var(--text-body-sm);
  font-weight: 500;
  color: var(--palette-text-secondary);
  background: var(--glass-ultra);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--dur-quick) var(--ease-glass);
  flex: 1;
  min-width: 0;
}

.filter-chip:hover {
  background: var(--glass-light);
  color: var(--palette-text-primary);
  border-color: rgba(255, 255, 255, 0.3);
}

.filter-chip.active {
  background: var(--palette-accent);
  color: var(--palette-text-on-accent);
  border-color: transparent;
}

/* Score range slider */
.filter-score-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.filter-range {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--glass-ultra);
  border-radius: var(--radius-pill);
  outline: none;
  cursor: pointer;
}

.filter-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--palette-accent);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: transform var(--dur-quick) var(--ease-glass);
}

.filter-range::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.filter-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--palette-accent);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  cursor: pointer;
}

.filter-range-value {
  font: var(--text-body-sm);
  font-weight: 600;
  color: var(--palette-accent);
  min-width: 32px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Filter actions row */
.filter-actions {
  display: flex;
  gap: var(--space-sm);
  padding-top: var(--space-md);
}

.filter-actions .btn-glass {
  flex: 0 0 auto;
}

.filter-actions .filter-apply-btn {
  flex: 1;
}