:root {
  /* Ensure a surface RGB variable exists for theme-aware overlays */
  --color-surface-rgb: 255, 255, 253;
}

/* Override when dark mode is active via data-color-scheme */
[data-color-scheme="dark"] {
  --color-surface-rgb: 38, 40, 40;
}

/* Header scrolled state */
.header.header--scrolled {
  background-color: rgba(var(--color-surface-rgb), 0.95);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.12);
}

[data-color-scheme="dark"] .header.header--scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

/* Map card adjustments to respect theme */
.map__card {
  background: var(--color-surface);
}

.map__iframe {
  background: var(--color-background);
}

/* Loading overlay that respects theme */
#map-loading {
  background: linear-gradient(180deg, rgba(var(--color-surface-rgb), 0.6), rgba(var(--color-surface-rgb), 0.4));
  color: var(--color-text);
}

/* Marker button style (centered) */
#map-marker {
  background: var(--color-primary);
  color: #fff;
}

/* Modal styles (if added later) */
.business-modal {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}