/* ============================================================
   HYRINX EXPLORE — THEMES CSS
   Monsoon Mode Special Styles
   ============================================================ */

/* ============================================================
   LIGHT MODE EXTRAS
   ============================================================ */
[data-theme="light"] .hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(3,4,94,0.5) 0%,
    rgba(0,119,182,0.25) 40%,
    rgba(0,0,0,0.55) 100%
  );
}

/* ============================================================
   DARK MODE EXTRAS
   ============================================================ */
[data-theme="dark"] {
  --blob-color-1: rgba(0,119,182,0.06);
  --blob-color-2: rgba(0,180,216,0.04);
}

[data-theme="dark"] .cat-item { background: var(--bg-surface); }
[data-theme="dark"] .dest-card { background: var(--bg-surface); }
[data-theme="dark"] .hotel-card { background: var(--bg-surface); }
[data-theme="dark"] .section-title { color: var(--text-primary); }

[data-theme="dark"] .hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.6) 0%,
    rgba(0,50,80,0.35) 40%,
    rgba(0,0,0,0.75) 100%
  );
}

/* Dark mode: Leaflet map tiles filter */
[data-theme="dark"] .leaflet-tile {
  filter: brightness(0.7) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
}

/* ============================================================
   MONSOON MODE SPECIAL STYLES
   ============================================================ */
[data-theme="monsoon"] body {
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(0,109,119,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(131,197,190,0.06) 0%, transparent 40%);
}

[data-theme="monsoon"] .hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(0,30,45,0.65) 0%,
    rgba(0,60,75,0.45) 40%,
    rgba(0,0,0,0.75) 100%
  );
}

[data-theme="monsoon"] .hero-title em { color: #83C5BE; }
[data-theme="monsoon"] .hero-typewriter { color: #EDF6F9; }

[data-theme="monsoon"] .btn-primary {
  background: linear-gradient(135deg, #006D77, #83C5BE);
  box-shadow: 0 4px 16px rgba(0,109,119,0.4);
}

[data-theme="monsoon"] .btn-primary:hover {
  box-shadow: 0 8px 24px rgba(0,109,119,0.6);
}

[data-theme="monsoon"] .hero-search-btn {
  background: linear-gradient(135deg, #006D77, #83C5BE);
}

[data-theme="monsoon"] .cat-item:hover {
  box-shadow: 0 0 30px rgba(131,197,190,0.3);
  border-color: #83C5BE;
}

[data-theme="monsoon"] .dest-card:hover {
  box-shadow: 0 16px 40px rgba(0,109,119,0.25);
}

[data-theme="monsoon"] .section-label {
  color: #83C5BE;
}

[data-theme="monsoon"] .section-label::before,
[data-theme="monsoon"] .section-label::after {
  background: #83C5BE;
}

[data-theme="monsoon"] .section-title span { color: #83C5BE; }

[data-theme="monsoon"] .text-gradient {
  background: linear-gradient(135deg, #83C5BE, #EDF6F9);
}

/* Monsoon special sections */
.monsoon-section {
  display: none;
}

[data-theme="monsoon"] .monsoon-section {
  display: block;
}

/* Monsoon waterfall highlight card */
.monsoon-highlight-card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  cursor: pointer;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
}

.monsoon-highlight-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.monsoon-highlight-card:hover img { transform: scale(1.06); }

.monsoon-highlight-body {
  position: relative;
  z-index: 2;
  padding: 28px;
  background: linear-gradient(0deg, rgba(0,30,45,0.9) 0%, transparent 100%);
  width: 100%;
}

/* Monsoon road condition alert */
.road-alert {
  display: none;
  background: linear-gradient(135deg, rgba(245,101,101,0.1), rgba(229,62,62,0.05));
  border: 1px solid rgba(245,101,101,0.3);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

[data-theme="monsoon"] .road-alert {
  display: flex;
}

.road-alert-icon { font-size: 1.3rem; }

.road-alert-text {
  font-family: 'Outfit', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: #FC8181;
}

/* Monsoon Map Tile Filter */
[data-theme="monsoon"] .leaflet-tile {
  filter: brightness(0.6) saturate(0.7) hue-rotate(160deg);
}

/* ============================================================
   THEME TRANSITION OVERLAY
   ============================================================ */
.theme-transition-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  background: var(--color-primary);
  transition: opacity 0.25s ease;
}

.theme-transition-overlay.flash { opacity: 0.15; }

/* ============================================================
   MONSOON DROPLET ANIMATION (CSS only decorative drops)
   ============================================================ */
[data-theme="monsoon"] .section-header::after {
  content: '🌧️';
  display: block;
  font-size: 1.5rem;
  margin-top: 8px;
  animation: floatBob 2s ease-in-out infinite;
}

/* ============================================================
   COLOR SCHEME META (for browser UI)
   ============================================================ */
/* Applied dynamically via JS to <meta name="color-scheme"> */