/*
  ╔══════════════════════════════════════════════════════════════╗
  ║                 AirPulse — styles.css                        ║
  ║   Techniques: CSS Variables, Flexbox, Grid, Glassmorphism,  ║
  ║               CSS Animations, SVG Styling, Media Queries     ║
  ╚══════════════════════════════════════════════════════════════╝

  INTERVIEW TIP — "What CSS techniques did you use?"
  → CSS Custom Properties (variables) for a consistent design system.
  → Glassmorphism: backdrop-filter + translucent backgrounds.
  → CSS animations with @keyframes for entry effects & loaders.
  → Responsive design with Bootstrap grid + custom media queries.
*/

/* ─────────────────────────────────────────────────────────────────
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ─────────────────────────────────────────────────────────────────
   WHY? Centralizing colors/sizes in :root means one change updates
   the entire theme — essential for maintainability at scale.
   INTERVIEW TIP: "How do you manage design consistency?"
   → "CSS variables in :root act as a single source of truth."
──────────────────────────────────────────────────────────────── */
:root {
  /* Color Palette — LIGHT THEME */
  --clr-bg-deep:    #f8fafc;      /* Main background - clean off-white */
  --clr-bg-surface: #ffffff;      /* Card surface color */
  --clr-bg-glass:   rgba(255, 255, 255, 0.7);  /* Glassmorphism base */
  
  --clr-cyan:      #0891b2;       /* Primary accent — deeper cyan for contrast on white */
  --clr-indigo:    #4f46e5;       /* Secondary accent — deeper indigo */
  --clr-purple:    #9333ea;       /* Tertiary — purple */
  --clr-rose:      #e11d48;       /* Danger / warning */
  --clr-amber:     #d97706;       /* Warning mid */
  --clr-green:     #059669;       /* Healthy / good */
  
  --clr-text:      #1e293b;       /* Main text — dark slate */
  --clr-muted:     #64748b;       /* Secondary text */
  
  /* Gradients */
  --grad-primary:  linear-gradient(135deg, #0891b2, #4f46e5);
  --grad-hero:     linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
  --grad-glow:     linear-gradient(135deg, #0891b222, #4f46e522);
  
  /* Typography */
  --font-display:  'Outfit', sans-serif;
  --font-body:     'Inter', sans-serif;
  
  /* Spacing */
  --section-py:    6rem;
  
  /* Effects */
  --glass-border:  1px solid rgba(0, 0, 0, 0.08);
  --glass-blur:    blur(20px);
  --shadow-glow:   0 0 40px rgba(8, 145, 178, 0.1);
  --shadow-card:   0 10px 40px rgba(0, 0, 0, 0.08);
  
  /* Border radius */
  --radius-card:   20px;
  --radius-sm:     10px;
  --radius-pill:   999px;
  
  /* Transitions */
  --transition:    all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─────────────────────────────────────────────────────────────────
   2. CSS RESET & BASE STYLES
   ─────────────────────────────────────────────────────────────────
   WHY box-sizing: border-box?
   → Makes padding/border INCLUDED inside declared width.
     Without it: width:100px + padding:20px = 120px wide (confusing).
     With it:    width:100px with padding applied inside = 100px.
──────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Smooth anchor scrolling — pure CSS, no JS needed */
  scroll-behavior: smooth;
  font-size: 16px; /* Base for rem units: 1rem = 16px */
}

body {
  font-family: var(--font-body);
  background-color: var(--clr-bg-deep);
  color: var(--clr-text);
  line-height: 1.6;
  overflow-x: hidden; /* Prevent horizontal scroll from animations */
  min-height: 100vh;
}

/* ─────────────────────────────────────────────────────────────────
   3. PARTICLE CANVAS BACKGROUND
   ─────────────────────────────────────────────────────────────────
   position: fixed   → stays behind ALL content as user scrolls
   z-index: 0        → stacked below everything else
   pointer-events: none → clicks pass THROUGH the canvas to content
──────────────────────────────────────────────────────────────── */
#particleCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
}

/* All content must sit above the canvas */
nav, section, footer, .modal, .toast-container {
  position: relative;
  z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────
   4. NAVBAR
──────────────────────────────────────────────────────────────── */
#mainNav {
  background: rgba(255, 255, 255, 0.85);
  /* backdrop-filter: GLASSMORPHISM KEY TECHNIQUE
     Applies a blur to everything BEHIND the element.
     Browser support: 95%+ (Chrome, Firefox 103+, Safari, Edge) */
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur); /* Safari prefix */
  border-bottom: var(--glass-border);
  padding: 1rem 0;
  transition: var(--transition);
}

/* Navbar scroll effect — class added by JS */
#mainNav.scrolled {
  background: rgba(255, 255, 255, 0.98);
  padding: 0.5rem 0;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}

.brand-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: #1e293b;
  letter-spacing: -0.5px;
}

.brand-accent {
  background: var(--grad-primary);
  -webkit-background-clip: text;        /* Clips background to text shape */
  -webkit-text-fill-color: transparent; /* Makes text color transparent → shows gradient */
  background-clip: text;
}

/* Nav links */
.nav-link {
  color: #475569 !important;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem !important;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  position: relative;
}

.nav-link:hover,
.nav-link.active {
  color: #0f172a !important;
  background: rgba(8, 145, 178, 0.08);
}

/* ─────────────────────────────────────────────────────────────────
   5. BUTTONS
──────────────────────────────────────────────────────────────── */
.btn-glow,
.btn-primary-glow {
  background: var(--grad-primary);
  border: none;
  color: white;
  font-weight: 600;
  padding: 0.6rem 1.4rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 0.9rem;
  transition: var(--transition);
  /* box-shadow creates the "glow" effect */
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.btn-glow:hover,
.btn-primary-glow:hover {
  transform: translateY(-2px);          /* Subtle lift on hover */
  box-shadow: 0 8px 30px rgba(34, 211, 238, 0.5);
  color: white;
}

.btn-outline-glass {
  background: transparent;
  border: var(--glass-border);
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
  padding: 0.6rem 1.4rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 0.9rem;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
}

.btn-outline-glass:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  color: white;
  transform: translateY(-2px);
}

.btn-secondary-glass {
  background: rgba(255,255,255,0.05);
  border: var(--glass-border);
  color: rgba(255,255,255,0.7);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1.2rem;
  font-weight: 500;
  transition: var(--transition);
}

/* ─────────────────────────────────────────────────────────────────
   6. HERO SECTION
──────────────────────────────────────────────────────────────── */
.hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 8rem 0 4rem;
  background: var(--grad-hero);
  /* Radial gradient overlay adds depth */
  background-image:
    radial-gradient(ellipse 80% 60% at 70% 50%, rgba(99, 102, 241, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 60% 80% at 20% 50%, rgba(34, 211, 238, 0.08) 0%, transparent 60%),
    var(--grad-hero);
}

/* Live badge with pulsing dot */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.3);
  color: var(--clr-cyan);
  padding: 0.35rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  font-family: var(--font-display);
  animation: fadeSlideUp 0.6s ease forwards;
}

/* Pulsing dot — @keyframes animation */
.badge-dot {
  width: 8px;
  height: 8px;
  background: var(--clr-cyan);
  border-radius: 50%;
  animation: pulse 2s infinite;  /* Runs animation infinitely */
}

/* @keyframes defines steps of an animation.
   0% = start state, 100% = end state.
   box-shadow 'spread' grows to create ripple. */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.4); }
  50%       { opacity: 0.8; transform: scale(1.1); box-shadow: 0 0 0 6px rgba(34, 211, 238, 0); }
}

/* Entry animations — staggered with animation-delay */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem); /* clamp(min, preferred, max) — fluid typography */
  font-weight: 800;
  line-height: 1.1;
  color: white;
  animation: fadeSlideUp 0.6s ease 0.1s both;
  letter-spacing: -1px;
}

/* Gradient text on specific words */
.gradient-text {
  background: var(--grad-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.65);
  max-width: 500px;
  animation: fadeSlideUp 0.6s ease 0.2s both;
  margin-top: 1.2rem;
}

/* Quick stats strip */
.quick-stats {
  display: flex;
  align-items: center;
  gap: 2rem;
  animation: fadeSlideUp 0.6s ease 0.4s both;
}

.quick-stat-item {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--clr-muted);
  font-weight: 500;
  margin-top: 0.25rem;
}

.quick-stat-divider {
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
}

/* ─────────────────────────────────────────────────────────────────
   7. AQI GAUGE CARD
──────────────────────────────────────────────────────────────── */
.aqi-gauge-card {
  background: var(--clr-bg-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: var(--radius-card);
  padding: 2rem;
  box-shadow: var(--shadow-card), var(--shadow-glow);
  animation: fadeSlideUp 0.6s ease 0.3s both;
  
  /* Subtle top glow line */
  position: relative;
  overflow: hidden;
}

/* Decorative top glow — ::before pseudo-element */
.aqi-gauge-card::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--clr-cyan), transparent);
}

.gauge-header {
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 1.5rem;
}

.text-cyan { color: #0891b2 !important; }

.live-time {
  font-family: var(--font-display);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.gauge-wrapper {
  text-align: center;
}

.aqi-gauge-svg {
  width: 100%;
  max-width: 280px;
}

/* SVG text styled via CSS — works for inline SVG only */
.gauge-number {
  font-family: var(--font-display);
  font-size: 2.5rem; /* SVG font-size in px, not rem */
  font-weight: 800;
  fill: white;
}

.gauge-label-svg {
  font-family: var(--font-display);
  font-size: 0.9rem;
  fill: rgba(255, 255, 255, 0.4);
  letter-spacing: 2px;
  font-weight: 600;
}

/* SVG arc animation — transition on stroke-dashoffset */
#gaugeArc {
  transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.aqi-status-badge {
  display: inline-block;
  padding: 0.4rem 1.5rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  margin-top: 1rem;
  background: rgba(8, 145, 178, 0.1);
  color: #0891b2;
  border: 1px solid rgba(8, 145, 178, 0.2);
  transition: var(--transition);
}

.health-advice {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  background: rgba(8, 145, 178, 0.05);
  border-radius: var(--radius-sm);
  padding: 1rem;
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  border-left: 3px solid var(--clr-cyan);
}

/* ─────────────────────────────────────────────────────────────────
   8. SECTION STYLES
──────────────────────────────────────────────────────────────── */
.section-block {
  padding: var(--section-py) 0;
}

.section-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
  font-family: var(--font-display);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  color: #000000;
  letter-spacing: -0.5px;
}

.section-sub {
  font-size: 1.05rem;
  max-width: 500px;
  margin: 0 auto;
}

/* ─────────────────────────────────────────────────────────────────
   9. POLLUTANT CARDS (Glass Morphism)
   ─────────────────────────────────────────────────────────────────
   Glassmorphism Stack:
   1. Semi-transparent background (rgba)
   2. backdrop-filter: blur() — blurs what's BEHIND
   3. Thin white border — gives "glass edge" look
   4. Subtle box-shadow for depth
──────────────────────────────────────────────────────────────── */
.pollutant-card {
  background: var(--clr-bg-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  transition: var(--transition);
  /* Hidden initially — JS triggers animation */
  opacity: 0;
  transform: translateY(20px);
  cursor: default;
}

/* .visible class added by Intersection Observer API */
.pollutant-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.pollutant-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card), 0 0 30px rgba(8, 145, 178, 0.08);
  border-color: rgba(0,0,0,0.12);
}

.pollutant-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.pollutant-name {
  font-size: 0.75rem;
  color: var(--clr-muted);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: var(--font-display);
}

.pollutant-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: #000000;
  line-height: 1;
  margin: 0.4rem 0;
}

.pollutant-unit {
  font-size: 0.75rem;
  color: var(--clr-muted);
  font-weight: 500;
}

/* Progress bar track */
.pollutant-bar-track {
  height: 6px;
  background: rgba(0,0,0,0.05);
  border-radius: var(--radius-pill);
  margin-top: 1rem;
  overflow: hidden;
}

/* Progress bar fill — width set by JS */
.pollutant-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  width: 0; /* Start at 0, JS sets actual width */
}

.pollutant-status-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  margin-top: 0.6rem;
}

/* ─────────────────────────────────────────────────────────────────
   10. CITY SELECTOR
──────────────────────────────────────────────────────────────── */
.city-selector-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.city-search-icon {
  position: absolute;
  left: 0.9rem;
  color: var(--clr-cyan);
  font-size: 0.85rem;
  z-index: 2;
}

.city-select {
  appearance: none;         /* Remove native dropdown arrow */
  -webkit-appearance: none;
  background: var(--clr-bg-glass);
  backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  color: #1e293b;
  padding: 0.65rem 2.5rem 0.65rem 2.5rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  /* Custom chevron via background-image SVG */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2322d3ee' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
}

.city-select:focus {
  outline: none;
  border-color: rgba(34, 211, 238, 0.5);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.1);
}

/* ─────────────────────────────────────────────────────────────────
   11. GLASS CARD — reusable component
   ─────────────────────────────────────────────────────────────────
   Used for chart container, scale legend, tips.
──────────────────────────────────────────────────────────────── */
.glass-card {
  background: var(--clr-bg-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* Chart wrapper — must have explicit height for Chart.js
   when maintainAspectRatio is false. Without this, the canvas
   stretches to fill the entire page height. */
.chart-container {
  position: relative;
  height: 420px;
  width: 100%;
}

@media (max-width: 576px) {
  .chart-container {
    height: 300px;
  }
}

/* ─────────────────────────────────────────────────────────────────
   12. CHART FILTER BUTTONS
──────────────────────────────────────────────────────────────── */
.chart-filter-btn {
  background: rgba(255, 255, 255, 0.06);
  border: var(--glass-border);
  color: #64748b;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: var(--font-display);
  cursor: pointer;
  transition: var(--transition);
}

.chart-filter-btn.active,
.chart-filter-btn:hover {
  background: var(--grad-primary);
  border-color: transparent;
  color: white;
  box-shadow: 0 0 15px rgba(34, 211, 238, 0.25);
}

/* ─────────────────────────────────────────────────────────────────
   13. AQI SCALE LIST ITEMS
──────────────────────────────────────────────────────────────── */
.aqi-scale-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.aqi-scale-item:last-child { border-bottom: none; }

.scale-color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.scale-range {
  font-family: var(--font-display);
  font-weight: 700;
  color: #1e293b;
  font-size: 0.85rem;
  min-width: 60px;
}

.scale-label {
  font-size: 0.8rem;
  color: var(--clr-muted);
  flex: 1;
}

.tip-text {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.6;
}

/* ─────────────────────────────────────────────────────────────────
   14. FEATURE CARDS (How it Works)
──────────────────────────────────────────────────────────────── */
.feature-card {
  background: var(--clr-bg-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: var(--radius-card);
  padding: 2rem;
  box-shadow: var(--shadow-card);
  transition: var(--transition);
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.feature-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.feature-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.2);
  box-shadow: var(--shadow-card), var(--shadow-glow);
}

.feature-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 1.5rem;
}

.feature-card h5 {
  font-family: var(--font-display);
  font-weight: 700;
  color: #000000;
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
}

.feature-card p {
  font-size: 0.88rem;
  color: #374151;
  line-height: 1.7;
}

/* ─────────────────────────────────────────────────────────────────
   15. MODAL STYLES
──────────────────────────────────────────────────────────────── */

/* Ensure modal sits above the particle canvas and all other content */
.modal {
  z-index: 1060 !important;
}

.modal-backdrop {
  z-index: 1055 !important;
  background-color: rgba(0, 0, 0, 0.7) !important;
}

.glass-modal {
  background: rgba(15, 23, 42, 0.97);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-card);
  box-shadow: 0 30px 80px rgba(0,0,0,0.9), 0 0 60px rgba(34, 211, 238, 0.08);
}

/* Modal title styling */
.glass-modal .modal-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
}

/* Modal description text — fix low contrast */
.glass-modal .modal-body > p {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 0.88rem;
}

/* Form labels — make clearly visible */
.glass-modal .form-label {
  color: rgba(255, 255, 255, 0.75) !important;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.3px;
  margin-bottom: 0.5rem;
}

/* Input & Select shared glass styling */
.glass-input,
.glass-modal .form-select,
.glass-modal .form-control {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: white !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.65rem 1rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  transition: var(--transition);
}

/* Select dropdown specific — dark option backgrounds */
.glass-modal .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2322d3ee' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.9rem center !important;
  background-size: 12px !important;
  cursor: pointer;
}

.glass-modal .form-select option {
  background: #1e293b;
  color: white;
  padding: 0.5rem;
}

/* Focus state for all modal inputs */
.glass-input:focus,
.glass-modal .form-select:focus,
.glass-modal .form-control:focus {
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.2) !important;
  border-color: rgba(34, 211, 238, 0.5) !important;
  outline: none;
}

/* Placeholder text inside inputs */
.glass-modal .form-control::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

/* Range slider label — improve threshold display */
.glass-modal .text-cyan {
  color: var(--clr-cyan) !important;
}

/* Range slider — custom styling */
.form-range::-webkit-slider-thumb {
  background: var(--clr-cyan);
  border: 2px solid white;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.4);
}

.form-range::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--clr-green), var(--clr-amber), var(--clr-rose));
  height: 6px;
  border-radius: var(--radius-pill);
}

/* Scale labels under the slider */
.glass-modal .d-flex.justify-content-between span {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Modal footer buttons */
.glass-modal .modal-footer {
  padding-top: 0;
}

.glass-modal .btn-close-white {
  filter: invert(1);
  opacity: 0.6;
}

.glass-modal .btn-close-white:hover {
  opacity: 1;
}

/* ─────────────────────────────────────────────────────────────────
   16. TOAST
──────────────────────────────────────────────────────────────── */
.glass-toast {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: var(--glass-blur);
  border: var(--glass-border) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12);
  border-radius: var(--radius-sm) !important;
  color: #1e293b !important;
}

/* ─────────────────────────────────────────────────────────────────
   17. FOOTER
──────────────────────────────────────────────────────────────── */
.footer-block {
  padding: 3rem 0;
  border-top: var(--glass-border);
  background: #f1f5f9;
  backdrop-filter: var(--glass-blur);
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 0.25rem;
}

.footer-sub {
  font-size: 0.85rem;
}

.footer-icon {
  width: 38px;
  height: 38px;
  background: rgba(0,0,0,0.04);
  border: var(--glass-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 1rem;
  text-decoration: none;
  transition: var(--transition);
}

.footer-icon:hover {
  background: var(--grad-primary);
  border-color: transparent;
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(34, 211, 238, 0.3);
}

/* ─────────────────────────────────────────────────────────────────
   18. SCROLLBAR STYLING
──────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--clr-bg-deep); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--clr-cyan), var(--clr-indigo));
  border-radius: 3px;
}

/* ─────────────────────────────────────────────────────────────────
   19. RESPONSIVE OVERRIDES
   ─────────────────────────────────────────────────────────────────
   Media queries are the backbone of responsive design.
   @media (max-width: 768px) targets tablets and phones.
   We reduce font sizes, adjust padding for small screens.
──────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .hero-section {
    padding-top: 7rem;
    text-align: center;
  }
  
  .hero-subtitle { margin: 1rem auto 0; }
  
  .d-flex > .btn-primary-glow,
  .d-flex > .btn-outline-glass {
    flex: 1;
    justify-content: center;
  }

  .quick-stats {
    justify-content: center;
  }
}

@media (max-width: 576px) {
  :root { --section-py: 4rem; }
  
  .hero-title {
    font-size: 2.2rem;
  }

  .quick-stats {
    gap: 1.2rem;
  }

  .stat-number {
    font-size: 1.6rem;
  }
}

/* ─────────────────────────────────────────────────────────────────
   20. UTILITY / LOADER
──────────────────────────────────────────────────────────────── */
/* Skeleton shimmer — used while data loads */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.05) 25%,
    rgba(255,255,255,0.12) 50%,
    rgba(255,255,255,0.05) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}

/* Fade-in utility class */
.fade-in {
  animation: fadeSlideUp 0.6s ease both;
}