/* Glass Override — Forces dark theme + video background + glassmorphism */

/* Force dark theme always */
:root {
  --bg: #0a0f0a !important;
  --surface: rgba(20, 30, 20, 0.7) !important;
  --surface2: rgba(25, 35, 25, 0.6) !important;
  --border: rgba(255, 255, 255, 0.1) !important;
  --text: #fafafa !important;
  --muted: #a1a1aa !important;
  --header-bg: rgba(10, 15, 10, 0.85) !important;
  --header-border: rgba(255, 255, 255, 0.08) !important;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3) !important;
  --shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2) !important;
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.3), 0 4px 6px rgba(0,0,0,0.2) !important;
}

/* Video background */
.video-bg {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  object-fit: cover;
}

.video-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
  pointer-events: none;
}

/* Ensure all content sits above video */
body { background: #0a0f0a !important; position: relative; }
#header, #hero-overlay, #map-controls, #area-indicator, #results-panel, 
#map-legend, #draw-hint, footer, .landing-footer { position: relative; z-index: 10; }
#map { position: relative; z-index: 5; }

/* Glassmorphism on key surfaces */
#header {
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  background: rgba(10, 15, 10, 0.7) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#results-panel {
  backdrop-filter: blur(30px) !important;
  -webkit-backdrop-filter: blur(30px) !important;
  background: rgba(10, 15, 10, 0.8) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.panel-header {
  backdrop-filter: blur(20px) !important;
  background: rgba(10, 15, 10, 0.6) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Cards and surfaces */
.step-card, .layer-card, .track-card, .price-card, .faq-item,
.bng-card, .summary-card, .stat, .trust-item {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Map controls */
#map-controls .map-btn {
  backdrop-filter: blur(12px) !important;
  background: rgba(10, 15, 10, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

#area-indicator {
  backdrop-filter: blur(20px) !important;
  background: rgba(10, 15, 10, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Buttons */
.btn-primary {
  backdrop-filter: blur(8px) !important;
}

/* Landing page sections over video */
.landing-section {
  background: transparent !important;
  position: relative;
  z-index: 10;
}

.landing-section[style*="background:var(--surface)"] {
  background: rgba(10, 15, 10, 0.4) !important;
}

.landing-hero {
  position: relative;
  z-index: 10;
}

.landing-trust {
  position: relative;
  z-index: 10;
  background: rgba(0, 0, 0, 0.2) !important;
}

.landing-final-cta {
  background: rgba(10, 20, 10, 0.6) !important;
}

/* Footer */
.landing-footer {
  background: rgba(5, 10, 5, 0.8) !important;
  backdrop-filter: blur(12px) !important;
}

/* Modals */
.modal-overlay {
  backdrop-filter: blur(8px) !important;
}

.modal-content, .auth-modal {
  backdrop-filter: blur(30px) !important;
  background: rgba(15, 20, 15, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Layer toggles in results panel */
.layer-item {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Pricing cards */
.price-card.featured {
  border-color: rgba(34, 197, 94, 0.3) !important;
  background: rgba(34, 197, 94, 0.05) !important;
}

/* FAQ */
.faq-item summary {
  color: var(--text) !important;
}

/* Remove theme toggle — always dark now */
#btn-theme { display: none !important; }