/* ==========================================================================
   DESIGN SYSTEM & VARIABLES
   ========================================================================== */
:root {
  --sun-glow-rgb: 250, 204, 21;
  /* Fonts */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Theme Gradients & Colors - Default (Day) */
  --sky-gradient: linear-gradient(to bottom, #4f8df7, #9fc2fa);
  --header-text-color: #ffffff;
  --header-shadow: rgba(0, 0, 0, 0.08);
  
  /* UI Colors */
  --bg-color-main: #ffffff;
  --card-bg-white: #ffffff;
  --text-dark-primary: #121826;
  --text-dark-secondary: #6c727f;
  --text-dark-tertiary: #a0a5b1;
  --border-light: #eef1f6;
  
  /* Animations */
  --transition-speed: 0.8s;
  --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Theme overrides for Morning */
[data-theme="morning"] {
  --sky-gradient: linear-gradient(to bottom, #080d3b 0%, #28448b 45%, #7392c1 75%, #eba0b9 95%, #171c66 100%);
  --header-text-color: #ffffff;
  --header-shadow: rgba(0, 0, 0, 0.2);
}

/* Theme overrides for Night */
[data-theme="night"] {
  --sky-gradient: linear-gradient(to bottom, #060b26, #0c1642, #1b2668);
  --header-text-color: #ffffff;
  --header-shadow: rgba(0, 0, 0, 0.2);
}

/* Force white text on dark rainy/stormy backgrounds */
.weather-header.rainy {
  --header-text-color: #ffffff;
}

/* ==========================================================================
   RESET & GLOBAL STYLES
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  font-size: 10px;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-color-main);
  color: var(--text-dark-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column; /* FIXED: previously missing, causing row layout */
  justify-content: flex-start; /* Changed from center so header is at top */
  align-items: center; /* Changed from flex-start to center children horizontally */
  overflow-x: hidden;
  position: relative;
}

/* Desktop Presentation Ambient Background Glows */
.ambient-glow {
  position: absolute;
  width: 60vw;
  height: 60vw;
  border-radius: 50%;
  filter: blur(150px);
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
  transition: background-color var(--transition-speed) var(--transition-ease);
}

.glow-1 {
  top: -20%;
  left: -20%;
  background-color: #a4c4fc;
}

.glow-2 {
  bottom: -20%;
  right: -20%;
  background-color: #fadcc4;
}

[data-theme="morning"] ~ .glow-1 { background-color: #fad1d8; }
[data-theme="morning"] ~ .glow-2 { background-color: #f7dfcb; }
[data-theme="evening"] ~ .glow-1 { background-color: #f7a58a; }
[data-theme="evening"] ~ .glow-2 { background-color: #d889bd; }
[data-theme="night"] ~ .glow-1 { background-color: #141d52; }
[data-theme="night"] ~ .glow-2 { background-color: #0b1129; }

/* ==========================================================================
   DASHBOARD CARD CONTAINER
   ========================================================================== */
.app-container {
  width: 100%;
  max-width: 1080px;
  margin: -30px auto 40px auto;
  padding: 0 24px;
  z-index: 200;
  position: relative;
}

/* Boxed Card Layout (Centers the weather panel without phone styling) */
.dashboard-card {
  width: 100%;
  background-color: var(--card-bg-white);
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 150;
  position: relative;
}



/* ==========================================================================
   HEADER & WEATHER LANDSCAPE PANEL
   ========================================================================== */
.weather-header {
  position: relative;
  height: 100vh; min-height: 600px;
  width: 100%;
  color: var(--header-text-color);
  padding: 40px 5% 60px 5%; /* extra bottom padding to account for overlap */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  overflow: hidden;
}

/* Landscape background and layers */
.landscape-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: var(--sky-gradient);
  transition: background var(--transition-speed) var(--transition-ease);
}

.landscape-bg svg {
  width: 100%;
  height: 100%;
  object-fit: fill;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  transition: filter var(--transition-speed) var(--transition-ease);
}

/* Colorize the Day Landscape SVG dynamically for Morning (Warm rose/sunset glow) */
[data-theme="morning"] .base-landscape-layer > .landscape-filter-target {
  /* Make morning significantly darker and richer to match the dark blue/pink gradient */
  filter: sepia(0.3) saturate(1.2) brightness(0.6) hue-rotate(-15deg);
  transition: filter 5s ease, opacity 5s ease;
}

/* Beautiful morning gradient overlay (deep blue to soft pink sunrise) */


/* Colorize the Day Landscape SVG dynamically for Evening (Sunset/purple glow) */
[data-theme="evening"] .base-landscape-layer > .landscape-filter-target {
  /* Darken the base landscape heavily for evening */
  filter: sepia(0.4) hue-rotate(-15deg) saturate(1.2) brightness(0.55);
  transition: filter 5s ease, opacity 5s ease;
}

/* Beautiful orange-pink-darkblue gradient overlay for evening */


/* Colorize the Day Landscape SVG dynamically for Night (Deep blue starry darkness) */
[data-theme="night"] .base-landscape-layer > .landscape-filter-target {
  filter: brightness(0.25) saturate(0.8) contrast(1.2);
  transition: filter 5s ease, opacity 5s ease;
}

/* Rain / Storm Overrides (Desaturated and darker) */
[data-theme="day"] .weather-header.rainy .base-landscape-layer > .landscape-filter-target {
  filter: saturate(0.2) brightness(0.6) contrast(1.05);
  transition: filter 5s ease, opacity 5s ease;
}

[data-theme="morning"] .weather-header.rainy .base-landscape-layer > .landscape-filter-target,
[data-theme="evening"] .weather-header.rainy .base-landscape-layer > .landscape-filter-target {
  filter: saturate(0.1) brightness(0.4) contrast(1.1);
  transition: filter 5s ease, opacity 5s ease;
}

[data-theme="night"] .weather-header.rainy .base-landscape-layer > .landscape-filter-target {
  filter: saturate(0.0) brightness(0.15) contrast(1.2);
  transition: filter 5s ease, opacity 5s ease;
}


/* Weather animation overlay (rain, storm, snow) */
.weather-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
  will-change: transform; /* Consolidate rendering to a single GPU layer for all rain drops */
}

/* /* Rain animation */
.rain-drop {
  position: absolute;
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.7));
  width: 2px;
  height: 35px;
  opacity: 0.8;
  animation: fall linear infinite;
  pointer-events: none;
}

@keyframes fall {
  0% { transform: translateY(0); }
  100% { transform: translateY(120vh); }
}

/* Lightning flash */
.lightning-flash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  opacity: 0;
  z-index: 4;
  pointer-events: none;
}

@keyframes lightning {
  0%, 100% { opacity: 0; }
  
  /* Quick double flash */
  8%, 12% { opacity: 0; }
  9% { opacity: 0.8; }
  10% { opacity: 0.1; }
  11% { opacity: 0.7; }
  
  /* Single sharp flash */
  43%, 47% { opacity: 0; }
  45% { opacity: 0.9; }
  
  /* Erratic multi-flash */
  68%, 74% { opacity: 0; }
  69% { opacity: 0.5; }
  70% { opacity: 0.1; }
  71% { opacity: 0.8; }
  72% { opacity: 0.2; }
  73% { opacity: 0.9; }
  
  /* Soft distant glow */
  88%, 93% { opacity: 0; }
  90% { opacity: 0.4; }
}

.stormy .lightning-flash {
  animation: lightning 20s infinite;
}

/* Meteors / Shooting Stars */
.meteor {
  opacity: 0;
  animation: shootingStar 20s infinite linear;
  animation-delay: var(--meteor-delay, 0s);
  mix-blend-mode: overlay;
}

@keyframes shootingStar {
  0% { transform: translate(0, 0); opacity: 0; }
  0.5% { opacity: 1; }
  1% { opacity: 1; }
  2.5% { transform: translate(-100px, 100px); opacity: 0; }
  100% { transform: translate(-100px, 100px); opacity: 0; }
}

/* Twinkling stars */
@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.star {
  fill: #ffffff;
  animation: twinkle var(--twinkle-dur, 2s) ease-in-out infinite;
}

/* Planets */
.planet {
  /* Planets are solid, no twinkle */
  transition: opacity 2s ease;
}

.planet-venus {
  fill: #ffaa33; /* Bright warm orange */
  filter: drop-shadow(0 0 6px rgba(255,170,51,0.9));
}

.planet-jupiter {
  fill: #f5e4c6; /* Creamy off-white */
  filter: drop-shadow(0 0 5px rgba(245, 228, 198, 0.7));
}

.planet-mars {
  fill: #ff9b73; /* Reddish orange */
  filter: drop-shadow(0 0 5px rgba(255, 155, 115, 0.8));
}

.planet-saturn {
  fill: #ebdca8; /* Pale yellow */
  filter: drop-shadow(0 0 4px rgba(235, 220, 168, 0.6));
}

/* Hide planets outside of night/evening */
[data-theme="day"] .planet,
[data-theme="day"] .planet-label,
[data-theme="morning"] .planet,
[data-theme="morning"] .planet-label {
  opacity: 0 !important;
}

.planet-label {
  fill: rgba(255, 255, 255, 0.75);
  font-size: 5px; /* Scaled down */
  font-family: var(--font-body, sans-serif);
  font-weight: 500;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  pointer-events: none;
  transition: opacity 2s ease;
}

/* Seagulls */
.seagull-wrapper {
  animation: flyAcross var(--fly-dur) linear infinite;
  animation-delay: var(--fly-delay);
  opacity: 0;
}

.seagull-wrapper-3d {
  animation: flyFromDistance var(--fly-dur) cubic-bezier(0.5, 0, 1, 0.5) infinite;
  animation-delay: var(--fly-delay);
  opacity: 0;
  color: #111111; /* Ensure a base dark color */
}

.seagull-wrapper-3d path {
  fill: currentColor;
}

.seagull-wrapper-away {
  animation: flyToDistance var(--fly-dur) cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation-delay: var(--fly-delay);
  opacity: 0;
}

.seagull-wing-left {
  transform-origin: 90px 30px;
  animation: flapLeftWing var(--flap-dur, 2.5s) linear infinite;
  animation-delay: var(--flap-delay, 0s);
}

.seagull-wing-right {
  transform-origin: 90px 30px;
  animation: flapRightWing var(--flap-dur, 2.5s) linear infinite;
  animation-delay: var(--flap-delay, 0s);
}

@keyframes flyAcross {
  0% { transform: translate(-50px, var(--start-y)) scale(var(--scale)); opacity: 0; }
  5% { opacity: 1; }
  95% { opacity: 1; }
  100% { transform: translate(1250px, var(--end-y)) scale(var(--scale)); opacity: 0; }
}

@keyframes flyFromDistance {
  0% { transform: translate(var(--start-x), var(--start-y)) scale(0); opacity: 0; color: #111111; }
  5% { opacity: 1; color: #111111; }
  45% { color: #111111; }
  50% { color: #ffffff; }
  90% { opacity: 1; color: #ffffff; }
  100% { transform: translate(var(--end-x), var(--end-y)) scale(1.5); opacity: 0; color: #ffffff; }
}

@keyframes flyFromDistanceDark {
  0% { transform: translate(var(--start-x), var(--start-y)) scale(0); opacity: 0; color: #111111; }
  5% { opacity: 1; color: #111111; }
  90% { opacity: 1; color: #111111; }
  100% { transform: translate(var(--end-x), var(--end-y)) scale(1.5); opacity: 0; color: #111111; }
}

[data-theme="morning"] .seagull-wrapper-3d,
[data-theme="evening"] .seagull-wrapper-3d {
  animation-name: flyFromDistanceDark;
}

@keyframes flyToDistance {
  0% { transform: translate(var(--start-x), var(--start-y)) scale(1.5); opacity: 0; }
  5% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(var(--end-x), var(--end-y)) scale(0); opacity: 0; }
}

@keyframes flapLeftWing {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(-25deg); }
  20% { transform: rotate(25deg); }
  30% { transform: rotate(-25deg); }
  40% { transform: rotate(25deg); }
  50% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

@keyframes flapRightWing {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(25deg); }
  20% { transform: rotate(-25deg); }
  30% { transform: rotate(25deg); }
  40% { transform: rotate(-25deg); }
  50% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

/* Ripple animation on the water reflection */
@keyframes waterRipple {
  0% { transform: scale(1) translateY(0); opacity: 0.3; }
  50% { transform: scale(1.05) translateY(1px); opacity: 0.6; }
  100% { transform: scale(1) translateY(0); opacity: 0.3; }
}

.ripple {
  transform-origin: center bottom;
  animation: waterRipple 4s ease-in-out infinite;
}

/* Seamless individual cloud drifting for partly cloudy elements */
@keyframes driftLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-1200px); }
}

.cloud-drifting {
  animation: driftLeft calc(var(--drift-dur, 60s) / var(--wind-speed-factor, 1)) linear infinite;
}

/* Sun/Moon static glow */
.celestial-glow {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
}

/* ==========================================================================
   HEADER TEXT CONTENT
   ========================================================================== */
.header-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-start;
  gap: 10px;
}

.location-container {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 5px;
}

.city-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.2rem;
  letter-spacing: -0.5px;
}

.local-time {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.1rem;
  opacity: 0.85;
}

.temperature-container {
  display: flex;
  align-items: flex-start;
}

.current-temp {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 7.5rem;
  line-height: 1;
  letter-spacing: -3px;
}

.temp-unit {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 2.25rem;
  margin-top: 15px;
  margin-left: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.unit-btn {
  background: none;
  border: none;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

.unit-btn.active {
  opacity: 1;
}

.unit-divider {
  opacity: 0.4;
}

.condition-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 6px 14px;
  width: fit-content;
  align-self: flex-start;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

[data-theme="night"] .condition-badge {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}

.temperature-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}

.header-weather-icon-large {
  width: 96px;
  height: 96px;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.08));
}

.condition-text {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  text-transform: capitalize;
}

/* ==========================================================================
   WAVY TEMPERATURE TRANSITION
   ========================================================================== */
.wave-container {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 130px;
  z-index: 6;
  pointer-events: none;
}

#waveSvg {
  width: 100%;
  height: 100%;
  display: block;
}

#wavePath {
  transition: d 0.5s ease;
}

#waveLine {
  transition: d 0.5s ease;
}

/* Wave label container */
.wave-labels-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Absolute positioned temperature details above the curve */
.wave-label-point {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  margin-top: -12px;
  animation: fadeIn 0.5s ease forwards;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.wave-label-point span.time {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  margin-top: 2px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   DETAILS BODY & GRID LAYOUT
   ========================================================================== */
.details-card {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  padding: 40px;
  position: relative;
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 36px;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  margin-top: -2px;
}

/* Top Details Grid (Daily segments + Weather details) */
.top-details-grid {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

@media (min-width: 900px) {
  .top-details-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 36px;
  }
}

.left-details-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Bottom Multi-Day Forecasts Grid */
.bottom-forecasts-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
}

.bottom-forecasts-grid > .details-section {
  min-width: 0;
}

/* Section styling */
.details-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--text-dark-primary);
  letter-spacing: -0.2px;
}

/* Hourly Forecast Horizontal Slider Card */
.hourly-slider-card {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02);
  border-radius: 24px;
  padding: 16px;
  transition: all 0.3s ease;
}



.hourly-slider-wrapper {
  overflow-x: auto;
  scrollbar-width: none;
}

.hourly-slider-wrapper::-webkit-scrollbar {
  display: none;
}

.hourly-slider {
  display: flex;
  gap: 12px;
}

.hourly-item-placeholder {
  width: 100%;
  text-align: center;
  padding: 20px;
  color: var(--text-dark-tertiary);
  font-size: 0.95rem;
}

.hourly-item {
  min-width: 82px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}



.hourly-item.active {
  background-color: #ffffff;
  color: #121826;
  border-color: #ffffff;
}

.hourly-time {
  font-size: 1.1rem;
  font-weight: 500;
  opacity: 0.85;
}

.hourly-icon {
  width: 80px;
  height: 80px;
}

.hourly-temp {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.65rem;
}

.hourly-wind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.hourly-wind-arrow {
  width: 24px;
  height: 24px;
  color: #3b82f6; /* Modern Blue Arrow */
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Daily Segment Cards */
.segments-container-vertical {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.segment-card-horizontal {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02);
  border-radius: 20px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s ease;
}



.segment-name {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-dark-secondary);
  flex: 0 0 85px;
  text-align: left;
}

.segment-icon {
  width: 80px;
  height: 80px;
  flex: 0 0 80px;
  margin-left: 8px;
}

.segment-temp {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  flex: 0 0 55px;
  text-align: right;
}

.segment-wind-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  text-align: center;
}

.segment-wind-arrow-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.segment-wind-arrow {
  width: 28px;
  height: 28px;
  color: #3b82f6; /* Modern Blue Arrow */
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.segment-wind-name {
  font-weight: 600;
  color: var(--text-dark-secondary);
  text-align: center;
  white-space: nowrap;
}

/* Weather Metrics Grid (3-column) */
.metrics-grid-3col { display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

/* Moon card behaves like a normal grid item now that we have 6 cards */

.metric-card {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02);
  border-radius: 20px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 190px;
  transition: all 0.3s ease;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}



.metric-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  color: var(--text-dark-secondary);
}

.metric-icon {
  width: 28px;
  height: 28px;
}

.metric-label {
  font-size: 1.2rem;
  font-weight: 600;
}

.metric-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--text-dark-primary);
  margin-top: 8px;
  text-align: center;
}

.metric-sub {
  font-size: 1.25rem;
  color: var(--text-dark-tertiary);
  margin-top: 8px;
  text-align: center;
  width: 100%;
  font-weight: 500;
}

/* Moon Phase Specific */
#metricMoon .metric-value {
  font-size: 1.25rem;
}

/* 3-Day Forecast Cards */
.forecast-3day {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.forecast-3day-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02);
  border-radius: 20px;
  padding: 18px 22px;
  transition: all 0.3s ease;
}



.forecast-day-name {
  font-weight: 700;
  font-size: 1.2rem;
}

.forecast-3day-segments {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}

.forecast-3day-segment {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Accordion Chevron */
.forecast-3day-chevron {
  width: 24px;
  height: 24px;
  color: var(--text-dark-secondary);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  margin-left: 8px;
}

.forecast-3day-item.expanded .forecast-3day-chevron {
  transform: rotate(180deg);
}

/* Hourly Accordion Wrapper */
.forecast-3day-hourly-wrapper {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-top-color 0.4s ease;
  width: 100%;
  margin-top: 0;
  border-top: 1px solid transparent;
  
  /* Visual cue for swiping */
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
}

.forecast-3day-item.expanded .forecast-3day-hourly-wrapper {
  max-height: 480px;
  opacity: 1;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Hourly Accordion Internal Slider */
.forecast-3day-hourly-slider {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  gap: 4px;
  padding-bottom: 8px;
  padding-right: 40px; /* Allows scrolling the last item past the fade mask */
  scrollbar-width: none; /* Firefox */
  -webkit-overflow-scrolling: touch;
  user-select: none;
  -webkit-user-select: none;
}

.forecast-3day-hourly-slider::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.forecast-3day-hourly-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
  flex-shrink: 0;
  padding: 6px 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.forecast-3day-segment {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 44px;
}

.forecast-3day-segment .seg-label {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--text-dark-secondary);
  text-transform: uppercase;
}

.forecast-icon-small { width: 60px; height: 60px; }

.forecast-3day-segment .seg-temp {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
}

.forecast-3day-wind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.forecast-3day-wind-arrow {
  width: 24px;
  height: 24px;
  color: #3b82f6; /* Modern Blue Arrow */
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.forecast-3day-wind-name {
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--text-dark-secondary);
  text-align: center;
  margin-top: 1px;
}

/* 10-Day Forecast List */
.forecast-10day {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-light);
  padding-top: 16px;
}

.forecast-10day-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 12px 14px;
  margin: 0 -10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.forecast-10day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.forecast-10day-chevron {
  width: 20px;
  height: 20px;
  margin-left: 8px;
  color: var(--text-dark-secondary);
  transition: transform 0.3s ease;
}

.forecast-10day-item.expanded .forecast-10day-chevron {
  transform: rotate(90deg);
}

.forecast-10day-details-wrapper {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  width: 100%;
}

.forecast-10day-item.expanded .forecast-10day-details-wrapper {
  max-height: 300px;
}

.forecast-10day-item.zebra-row {
  background: #fbfbf8;
}

.forecast-10day-item.today {
  border-left: 4px solid #3b82f6 !important;
}

[data-theme="night"] .forecast-10day-item.zebra-row {
  background: rgba(255, 255, 255, 0.08);
}

.forecast-10day-day {
  font-size: 1.2rem;
  font-weight: 500;
  width: 100px;
}

.forecast-10day-day.today {
  font-weight: 700;
}

.forecast-10day-icon-col {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  width: 120px;
  justify-content: flex-start;
}

.forecast-10day-icon {
  width: 80px;
  height: 80px;
}

.forecast-10day-pop-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease;
  width: 42px;
}

.forecast-10day-pop-wrapper.visible {
  visibility: visible;
  opacity: 1;
}

.forecast-10day-drop {
  width: 20px;
  height: 20px;
  color: #3b82f6;
  flex-shrink: 0;
  animation: raindropFall 2.5s ease-in-out infinite;
}

@keyframes raindropFall {
  0% {
    transform: translateY(-3px);
    opacity: 0;
  }
  30% {
    transform: translateY(0);
    opacity: 1;
  }
  70% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(3px);
    opacity: 0;
  }
}

[data-theme="night"] .forecast-10day-drop {
  color: #60a5fa;
}

.forecast-10day-pop {
  font-size: 1.4rem;
  font-weight: 700;
  font-family: var(--font-display);
  color: #3b82f6;
  line-height: 1;
}

[data-theme="night"] .forecast-10day-pop {
  color: #60a5fa;
}

.forecast-10day-wind-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 50px;
  text-align: center;
}

.forecast-10day-wind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.forecast-10day-wind-arrow {
  width: 24px;
  height: 24px;
  color: #3b82f6;
}

[data-theme="night"] .forecast-10day-wind-arrow {
  color: #60a5fa;
}

.forecast-10day-wind-name {
  font-weight: 600;
  color: var(--text-dark-secondary);
  text-align: center;
  margin-top: 1px;
}


    /* ==========================================================================
   DESIGN SYSTEM & VARIABLES
   ========================================================================== */
:root {
  --sun-glow-rgb: 250, 204, 21;
  /* Fonts */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Theme Gradients & Colors - Default (Day) */
  --sky-gradient: linear-gradient(to bottom, #4f8df7, #9fc2fa);
  --header-text-color: #ffffff;
  --header-shadow: rgba(0, 0, 0, 0.08);
  
  /* UI Colors */
  --bg-color-main: #ffffff;
  --card-bg-white: #ffffff;
  --text-dark-primary: #121826;
  --text-dark-secondary: #6c727f;
  --text-dark-tertiary: #a0a5b1;
  --border-light: #eef1f6;
  
  /* Animations */
  --transition-speed: 0.8s;
  --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Theme overrides for Morning */
[data-theme="morning"] {
  --sky-gradient: linear-gradient(to bottom, #080d3b 0%, #28448b 45%, #7392c1 75%, #eba0b9 95%, #171c66 100%);
  --header-text-color: #ffffff;
  --header-shadow: rgba(0, 0, 0, 0.2);
}

/* Theme overrides for Night */
[data-theme="night"] {
  --sky-gradient: linear-gradient(to bottom, #060b26, #0c1642, #1b2668);
  --header-text-color: #ffffff;
  --header-shadow: rgba(0, 0, 0, 0.2);
}

/* Force white text on dark rainy/stormy backgrounds */
.weather-header.rainy {
  --header-text-color: #ffffff;
}

/* ==========================================================================
   RESET & GLOBAL STYLES
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  font-size: 10px;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-color-main);
  color: var(--text-dark-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column; /* FIXED: previously missing, causing row layout */
  justify-content: flex-start; /* Changed from center so header is at top */
  align-items: center; /* Changed from flex-start to center children horizontally */
  overflow-x: hidden;
  position: relative;
}

/* Desktop Presentation Ambient Background Glows */
.ambient-glow {
  position: absolute;
  width: 60vw;
  height: 60vw;
  border-radius: 50%;
  filter: blur(150px);
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
  transition: background-color var(--transition-speed) var(--transition-ease);
}

.glow-1 {
  top: -20%;
  left: -20%;
  background-color: #a4c4fc;
}

.glow-2 {
  bottom: -20%;
  right: -20%;
  background-color: #fadcc4;
}

[data-theme="morning"] ~ .glow-1 { background-color: #fad1d8; }
[data-theme="morning"] ~ .glow-2 { background-color: #f7dfcb; }
[data-theme="evening"] ~ .glow-1 { background-color: #f7a58a; }
[data-theme="evening"] ~ .glow-2 { background-color: #d889bd; }
[data-theme="night"] ~ .glow-1 { background-color: #141d52; }
[data-theme="night"] ~ .glow-2 { background-color: #0b1129; }

/* ==========================================================================
   DASHBOARD CARD CONTAINER
   ========================================================================== */
.app-container {
  width: 100%;
  max-width: 1080px;
  margin: -30px auto 40px auto;
  padding: 0 24px;
  z-index: 200;
  position: relative;
}

/* Boxed Card Layout (Centers the weather panel without phone styling) */
.dashboard-card {
  width: 100%;
  background-color: var(--card-bg-white);
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 150;
  position: relative;
}



/* ==========================================================================
   HEADER & WEATHER LANDSCAPE PANEL
   ========================================================================== */
.weather-header {
  position: relative;
  height: 100vh; min-height: 600px;
  width: 100%;
  color: var(--header-text-color);
  padding: 40px 5% 60px 5%; /* extra bottom padding to account for overlap */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  overflow: hidden;
}

/* Landscape background and layers */
.landscape-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: var(--sky-gradient);
  transition: background var(--transition-speed) var(--transition-ease);
}

.landscape-bg svg {
  width: 100%;
  height: 100%;
  object-fit: fill;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  transition: filter var(--transition-speed) var(--transition-ease);
}

/* Colorize the Day Landscape SVG dynamically for Morning (Warm rose/sunset glow) */
[data-theme="morning"] .base-landscape-layer > .landscape-filter-target {
  /* Make morning significantly darker and richer to match the dark blue/pink gradient */
  filter: sepia(0.3) saturate(1.2) brightness(0.6) hue-rotate(-15deg);
  transition: filter 5s ease, opacity 5s ease;
}

/* Beautiful morning gradient overlay (deep blue to soft pink sunrise) */


/* Colorize the Day Landscape SVG dynamically for Evening (Sunset/purple glow) */
[data-theme="evening"] .base-landscape-layer > .landscape-filter-target {
  /* Darken the base landscape heavily for evening */
  filter: sepia(0.4) hue-rotate(-15deg) saturate(1.2) brightness(0.55);
  transition: filter 5s ease, opacity 5s ease;
}

/* Beautiful orange-pink-darkblue gradient overlay for evening */


/* Colorize the Day Landscape SVG dynamically for Night (Deep blue starry darkness) */
[data-theme="night"] .base-landscape-layer > .landscape-filter-target {
  filter: brightness(0.25) saturate(0.8) contrast(1.2);
  transition: filter 5s ease, opacity 5s ease;
}

/* Rain / Storm Overrides (Desaturated and darker) */
[data-theme="day"] .weather-header.rainy .base-landscape-layer > .landscape-filter-target {
  filter: saturate(0.2) brightness(0.6) contrast(1.05);
  transition: filter 5s ease, opacity 5s ease;
}

[data-theme="morning"] .weather-header.rainy .base-landscape-layer > .landscape-filter-target,
[data-theme="evening"] .weather-header.rainy .base-landscape-layer > .landscape-filter-target {
  filter: saturate(0.1) brightness(0.4) contrast(1.1);
  transition: filter 5s ease, opacity 5s ease;
}

[data-theme="night"] .weather-header.rainy .base-landscape-layer > .landscape-filter-target {
  filter: saturate(0.0) brightness(0.15) contrast(1.2);
  transition: filter 5s ease, opacity 5s ease;
}


/* Weather animation overlay (rain, storm, snow) */
.weather-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
  will-change: transform; /* Consolidate rendering to a single GPU layer for all rain drops */
}

/* /* Rain animation */
.rain-drop {
  position: absolute;
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.7));
  width: 2px;
  height: 35px;
  opacity: 0.8;
  animation: fall linear infinite;
  pointer-events: none;
}

@keyframes fall {
  0% { transform: translateY(0); }
  100% { transform: translateY(120vh); }
}

/* Lightning flash */
.lightning-flash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  opacity: 0;
  z-index: 4;
  pointer-events: none;
}

@keyframes lightning {
  0%, 100% { opacity: 0; }
  
  /* Quick double flash */
  8%, 12% { opacity: 0; }
  9% { opacity: 0.8; }
  10% { opacity: 0.1; }
  11% { opacity: 0.7; }
  
  /* Single sharp flash */
  43%, 47% { opacity: 0; }
  45% { opacity: 0.9; }
  
  /* Erratic multi-flash */
  68%, 74% { opacity: 0; }
  69% { opacity: 0.5; }
  70% { opacity: 0.1; }
  71% { opacity: 0.8; }
  72% { opacity: 0.2; }
  73% { opacity: 0.9; }
  
  /* Soft distant glow */
  88%, 93% { opacity: 0; }
  90% { opacity: 0.4; }
}

.stormy .lightning-flash {
  animation: lightning 20s infinite;
}

/* Meteors / Shooting Stars */
.meteor {
  opacity: 0;
  animation: shootingStar 20s infinite linear;
  animation-delay: var(--meteor-delay, 0s);
  mix-blend-mode: overlay;
}

@keyframes shootingStar {
  0% { transform: translate(0, 0); opacity: 0; }
  0.5% { opacity: 1; }
  1% { opacity: 1; }
  2.5% { transform: translate(-100px, 100px); opacity: 0; }
  100% { transform: translate(-100px, 100px); opacity: 0; }
}

/* Twinkling stars */
@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.star {
  fill: #ffffff;
  animation: twinkle var(--twinkle-dur, 2s) ease-in-out infinite;
}

/* Planets */
.planet {
  /* Planets are solid, no twinkle */
  transition: opacity 2s ease;
}

.planet-venus {
  fill: #ffaa33; /* Bright warm orange */
  filter: drop-shadow(0 0 6px rgba(255,170,51,0.9));
}

.planet-jupiter {
  fill: #f5e4c6; /* Creamy off-white */
  filter: drop-shadow(0 0 5px rgba(245, 228, 198, 0.7));
}

.planet-mars {
  fill: #ff9b73; /* Reddish orange */
  filter: drop-shadow(0 0 5px rgba(255, 155, 115, 0.8));
}

.planet-saturn {
  fill: #ebdca8; /* Pale yellow */
  filter: drop-shadow(0 0 4px rgba(235, 220, 168, 0.6));
}

/* Hide planets outside of night/evening */
[data-theme="day"] .planet,
[data-theme="day"] .planet-label,
[data-theme="morning"] .planet,
[data-theme="morning"] .planet-label {
  opacity: 0 !important;
}

.planet-label {
  fill: rgba(255, 255, 255, 0.75);
  font-size: 5px; /* Scaled down */
  font-family: var(--font-body, sans-serif);
  font-weight: 500;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  pointer-events: none;
  transition: opacity 2s ease;
}

/* Seagulls */
.seagull-wrapper {
  animation: flyAcross var(--fly-dur) linear infinite;
  animation-delay: var(--fly-delay);
  opacity: 0;
}

.seagull-wrapper-3d {
  animation: flyFromDistance var(--fly-dur) cubic-bezier(0.5, 0, 1, 0.5) infinite;
  animation-delay: var(--fly-delay);
  opacity: 0;
  color: #111111; /* Ensure a base dark color */
}

.seagull-wrapper-3d path {
  fill: currentColor;
}

.seagull-wrapper-away {
  animation: flyToDistance var(--fly-dur) cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation-delay: var(--fly-delay);
  opacity: 0;
}

.seagull-wing-left {
  transform-origin: 90px 30px;
  animation: flapLeftWing var(--flap-dur, 2.5s) linear infinite;
  animation-delay: var(--flap-delay, 0s);
}

.seagull-wing-right {
  transform-origin: 90px 30px;
  animation: flapRightWing var(--flap-dur, 2.5s) linear infinite;
  animation-delay: var(--flap-delay, 0s);
}

@keyframes flyAcross {
  0% { transform: translate(-50px, var(--start-y)) scale(var(--scale)); opacity: 0; }
  5% { opacity: 1; }
  95% { opacity: 1; }
  100% { transform: translate(1250px, var(--end-y)) scale(var(--scale)); opacity: 0; }
}

@keyframes flyFromDistance {
  0% { transform: translate(var(--start-x), var(--start-y)) scale(0); opacity: 0; color: #111111; }
  5% { opacity: 1; color: #111111; }
  45% { color: #111111; }
  50% { color: #ffffff; }
  90% { opacity: 1; color: #ffffff; }
  100% { transform: translate(var(--end-x), var(--end-y)) scale(1.5); opacity: 0; color: #ffffff; }
}

@keyframes flyFromDistanceDark {
  0% { transform: translate(var(--start-x), var(--start-y)) scale(0); opacity: 0; color: #111111; }
  5% { opacity: 1; color: #111111; }
  90% { opacity: 1; color: #111111; }
  100% { transform: translate(var(--end-x), var(--end-y)) scale(1.5); opacity: 0; color: #111111; }
}

[data-theme="morning"] .seagull-wrapper-3d,
[data-theme="evening"] .seagull-wrapper-3d {
  animation-name: flyFromDistanceDark;
}

@keyframes flyToDistance {
  0% { transform: translate(var(--start-x), var(--start-y)) scale(1.5); opacity: 0; }
  5% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(var(--end-x), var(--end-y)) scale(0); opacity: 0; }
}

@keyframes flapLeftWing {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(-25deg); }
  20% { transform: rotate(25deg); }
  30% { transform: rotate(-25deg); }
  40% { transform: rotate(25deg); }
  50% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

@keyframes flapRightWing {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(25deg); }
  20% { transform: rotate(-25deg); }
  30% { transform: rotate(25deg); }
  40% { transform: rotate(-25deg); }
  50% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

/* Ripple animation on the water reflection */
@keyframes waterRipple {
  0% { transform: scale(1) translateY(0); opacity: 0.3; }
  50% { transform: scale(1.05) translateY(1px); opacity: 0.6; }
  100% { transform: scale(1) translateY(0); opacity: 0.3; }
}

.ripple {
  transform-origin: center bottom;
  animation: waterRipple 4s ease-in-out infinite;
}

/* Seamless individual cloud drifting for partly cloudy elements */
@keyframes driftLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-1200px); }
}

.cloud-drifting {
  animation: driftLeft calc(var(--drift-dur, 60s) / var(--wind-speed-factor, 1)) linear infinite;
}

/* Sun/Moon static glow */
.celestial-glow {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
}

/* ==========================================================================
   HEADER TEXT CONTENT
   ========================================================================== */
.header-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-start;
  gap: 10px;
}

.location-container {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 5px;
}

.city-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.2rem;
  letter-spacing: -0.5px;
}

.local-time {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.1rem;
  opacity: 0.85;
}

.temperature-container {
  display: flex;
  align-items: flex-start;
}

.current-temp {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 7.5rem;
  line-height: 1;
  letter-spacing: -3px;
}

.temp-unit {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 2.25rem;
  margin-top: 15px;
  margin-left: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.unit-btn {
  background: none;
  border: none;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

.unit-btn.active {
  opacity: 1;
}

.unit-divider {
  opacity: 0.4;
}

.condition-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 6px 14px;
  width: fit-content;
  align-self: flex-start;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

[data-theme="night"] .condition-badge {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}

.temperature-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}

.header-weather-icon-large {
  width: 96px;
  height: 96px;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.08));
}

.condition-text {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  text-transform: capitalize;
}

/* ==========================================================================
   WAVY TEMPERATURE TRANSITION
   ========================================================================== */
.wave-container {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 130px;
  z-index: 6;
  pointer-events: none;
}

#waveSvg {
  width: 100%;
  height: 100%;
  display: block;
}

#wavePath {
  transition: d 0.5s ease;
}

#waveLine {
  transition: d 0.5s ease;
}

/* Wave label container */
.wave-labels-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Absolute positioned temperature details above the curve */
.wave-label-point {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  margin-top: -12px;
  animation: fadeIn 0.5s ease forwards;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.wave-label-point span.time {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  margin-top: 2px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   DETAILS BODY & GRID LAYOUT
   ========================================================================== */
.details-card {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  padding: 40px;
  position: relative;
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 36px;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  margin-top: -2px;
}

/* Top Details Grid (Daily segments + Weather details) */
.top-details-grid {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

@media (min-width: 900px) {
  .top-details-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 36px;
  }
}

.left-details-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Bottom Multi-Day Forecasts Grid */
.bottom-forecasts-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
}

.bottom-forecasts-grid > .details-section {
  min-width: 0;
}

/* Section styling */
.details-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--text-dark-primary);
  letter-spacing: -0.2px;
}

/* Hourly Forecast Horizontal Slider Card */
.hourly-slider-card {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02);
  border-radius: 24px;
  padding: 16px;
  transition: all 0.3s ease;
}



.hourly-slider-wrapper {
  overflow-x: auto;
  scrollbar-width: none;
}

.hourly-slider-wrapper::-webkit-scrollbar {
  display: none;
}

.hourly-slider {
  display: flex;
  gap: 12px;
}

.hourly-item-placeholder {
  width: 100%;
  text-align: center;
  padding: 20px;
  color: var(--text-dark-tertiary);
  font-size: 0.95rem;
}

.hourly-item {
  min-width: 82px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}



.hourly-item.active {
  background-color: #ffffff;
  color: #121826;
  border-color: #ffffff;
}

.hourly-time {
  font-size: 1.1rem;
  font-weight: 500;
  opacity: 0.85;
}

.hourly-icon {
  width: 80px;
  height: 80px;
}

.hourly-temp {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.65rem;
}

.hourly-wind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.hourly-wind-arrow {
  width: 24px;
  height: 24px;
  color: #3b82f6; /* Modern Blue Arrow */
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Daily Segment Cards */
.segments-container-vertical {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.segment-card-horizontal {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02);
  border-radius: 20px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s ease;
}



.segment-name {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-dark-secondary);
  flex: 0 0 85px;
  text-align: left;
}

.segment-icon {
  width: 80px;
  height: 80px;
  flex: 0 0 80px;
  margin-left: 8px;
}

.segment-temp {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  flex: 0 0 55px;
  text-align: right;
}

.segment-wind-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  text-align: center;
}

.segment-wind-arrow-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.segment-wind-arrow {
  width: 28px;
  height: 28px;
  color: #3b82f6; /* Modern Blue Arrow */
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.segment-wind-name {
  font-weight: 600;
  color: var(--text-dark-secondary);
  text-align: center;
  white-space: nowrap;
}

/* Weather Metrics Grid (3-column) */
.metrics-grid-3col { display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

/* Moon card behaves like a normal grid item now that we have 6 cards */

.metric-card {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02);
  border-radius: 20px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 190px;
  transition: all 0.3s ease;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}



.metric-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  color: var(--text-dark-secondary);
}

.metric-icon {
  width: 28px;
  height: 28px;
}

.metric-label {
  font-size: 1.2rem;
  font-weight: 600;
}

.metric-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--text-dark-primary);
  margin-top: 8px;
  text-align: center;
}

.metric-sub {
  font-size: 1.25rem;
  color: var(--text-dark-tertiary);
  margin-top: 8px;
  text-align: center;
  width: 100%;
  font-weight: 500;
}

/* Moon Phase Specific */
#metricMoon .metric-value {
  font-size: 1.25rem;
}

/* 3-Day Forecast Cards */
.forecast-3day {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.forecast-3day-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02);
  border-radius: 20px;
  padding: 18px 22px;
  transition: all 0.3s ease;
}



.forecast-day-name {
  font-weight: 700;
  font-size: 1.2rem;
}

.forecast-3day-segments {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}

.forecast-3day-segment {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Accordion Chevron */
.forecast-3day-chevron {
  width: 24px;
  height: 24px;
  color: var(--text-dark-secondary);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  margin-left: 8px;
}

.forecast-3day-item.expanded .forecast-3day-chevron {
  transform: rotate(180deg);
}

/* Hourly Accordion Wrapper */
.forecast-3day-hourly-wrapper {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-top-color 0.4s ease;
  width: 100%;
  margin-top: 0;
  border-top: 1px solid transparent;
  
  /* Visual cue for swiping */
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
}

.forecast-3day-item.expanded .forecast-3day-hourly-wrapper {
  max-height: 480px;
  opacity: 1;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Hourly Accordion Internal Slider */
.forecast-3day-hourly-slider {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  gap: 4px;
  padding-bottom: 8px;
  padding-right: 40px; /* Allows scrolling the last item past the fade mask */
  scrollbar-width: none; /* Firefox */
  -webkit-overflow-scrolling: touch;
  user-select: none;
  -webkit-user-select: none;
}

.forecast-3day-hourly-slider::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.forecast-3day-hourly-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
  flex-shrink: 0;
  padding: 6px 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.forecast-3day-segment {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 44px;
}

.forecast-3day-segment .seg-label {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--text-dark-secondary);
  text-transform: uppercase;
}

.forecast-icon-small { width: 60px; height: 60px; }

.forecast-3day-segment .seg-temp {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
}

.forecast-3day-wind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.forecast-3day-wind-arrow {
  width: 24px;
  height: 24px;
  color: #3b82f6; /* Modern Blue Arrow */
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.forecast-3day-wind-name {
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--text-dark-secondary);
  text-align: center;
  margin-top: 1px;
}

/* 10-Day Forecast List */
.forecast-10day {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-light);
  padding-top: 16px;
}

.forecast-10day-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 12px 14px;
  margin: 0 -10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.forecast-10day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.forecast-10day-chevron {
  width: 20px;
  height: 20px;
  margin-left: 8px;
  color: var(--text-dark-secondary);
  transition: transform 0.3s ease;
}

.forecast-10day-item.expanded .forecast-10day-chevron {
  transform: rotate(90deg);
}

.forecast-10day-details-wrapper {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  width: 100%;
}

.forecast-10day-item.expanded .forecast-10day-details-wrapper {
  max-height: 300px;
}

.forecast-10day-item.zebra-row {
  background: #fbfbf8;
}

.forecast-10day-item.today {
  border-left: 4px solid #3b82f6 !important;
}

[data-theme="night"] .forecast-10day-item.zebra-row {
  background: rgba(255, 255, 255, 0.08);
}

.forecast-10day-day {
  font-size: 1.2rem;
  font-weight: 500;
  width: 100px;
}

.forecast-10day-day.today {
  font-weight: 700;
}

.forecast-10day-icon-col {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  width: 120px;
  justify-content: flex-start;
}

.forecast-10day-icon {
  width: 80px;
  height: 80px;
}

.forecast-10day-pop-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease;
  width: 42px;
}

.forecast-10day-pop-wrapper.visible {
  visibility: visible;
  opacity: 1;
}

.forecast-10day-drop {
  width: 20px;
  height: 20px;
  color: #3b82f6;
  flex-shrink: 0;
  animation: raindropFall 2.5s ease-in-out infinite;
}

@keyframes raindropFall {
  0% {
    transform: translateY(-3px);
    opacity: 0;
  }
  30% {
    transform: translateY(0);
    opacity: 1;
  }
  70% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(3px);
    opacity: 0;
  }
}

[data-theme="night"] .forecast-10day-drop {
  color: #60a5fa;
}

.forecast-10day-pop {
  font-size: 1.4rem;
  font-weight: 700;
  font-family: var(--font-display);
  color: #3b82f6;
  line-height: 1;
}

[data-theme="night"] .forecast-10day-pop {
  color: #60a5fa;
}

.forecast-10day-wind-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 50px;
  text-align: center;
}

.forecast-10day-wind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.forecast-10day-wind-arrow {
  width: 24px;
  height: 24px;
  color: #3b82f6;
}

[data-theme="night"] .forecast-10day-wind-arrow {
  color: #60a5fa;
}

.forecast-10day-wind-name {
  font-weight: 600;
  color: var(--text-dark-secondary);
  text-align: center;
  margin-top: 1px;
}

.forecast-10day-range {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8rem;
  width: auto;
}

/* ==========================================================================
   INTERACTIVE PREVIEW CONTROLS
   ========================================================================== */
.control-panel-card {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02);
  border-radius: 24px;
  padding: 20px 24px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all 0.3s ease;
}

.control-panel-card:hover {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
}

.control-header-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.control-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.2;
  color: var(--text-dark-primary);
  letter-spacing: -0.2px;
}

.control-description {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text-dark-secondary);
  line-height: 1.4;
}

.control-row {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-width: 250px;
}

.control-group label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dark-primary);
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.control-btn {
  background-color: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.control-btn:hover {
  background-color: #f1f5f9;
  border-color: #cbd5e1;
}

.control-btn.active {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #121826;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

/* ==========================================================================
   LOADER OVERLAY
   ========================================================================== */
.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(240, 244, 249, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  z-index: 1000;
  transition: opacity 0.5s ease, pointer-events 0.5s ease;
}

.loader-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #e2e8f0;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loader-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--text-dark-primary);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -80%); }
  to { opacity: 1; transform: translate(-50%, -100%); }
}

/* ==========================================================================
   RESPONSIVE DESIGN (MEDIA QUERIES)
   ========================================================================== */
@media (max-width: 1024px) {
  .top-details-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  
  .metrics-grid-3col { grid-template-columns: repeat(4, 1fr); }
  
  .bottom-forecasts-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 600px) {
  #nowForecastCard {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .app-container {
  width: 100%;
  max-width: 1080px;
  margin: -30px auto 20px auto;
  padding: 0 4px;
  z-index: 200;
  position: relative;
}
  
  .dashboard-card {
  width: 100%;
  background-color: var(--card-bg-white);
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 150;
  position: relative;
}
  
  .weather-header {
  position: relative;
  height: 100vh; min-height: 600px;
  width: 100%;
  color: var(--header-text-color);
  padding: 40px 5% 60px 5%; /* extra bottom padding to account for overlap */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  overflow: hidden;
}
  
  .city-name {
    font-size: 1.8rem;
  }
  
  .current-temp {
    font-size: 5.8rem;
  }
  
  .details-card {
    padding: 20px 4px 60px 4px;
    gap: 24px;
  }
  
  .metrics-grid-3col { grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px;
  }
  
  .metric-card {
    padding: 14px 10px;
    min-height: 170px;
  }
  
  .control-row {
    flex-direction: column;
    gap: 16px;
  }
}

@media (max-width: 320px) {
  .metrics-grid-3col {
    grid-template-columns: 1fr !important;
  }
}

/* Wind Direction Compass Custom Gauge */
.compass-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
}

.compass-svg {
  width: 100px;
  height: 100px;
  display: block;
}

.compass-ring {
  fill: none;
  stroke: rgba(148, 163, 184, 0.25); /* Slightly grey dashed ring */
  stroke-width: 1.5px;
  stroke-dasharray: 2 3;
}

[data-theme="night"] .compass-ring {
  stroke: rgba(255, 255, 255, 0.15);
}

.compass-center {
  fill: var(--text-dark-tertiary);
}

.compass-mark {
  font-size: 0.75rem;
  font-weight: 700;
  fill: var(--text-dark-secondary);
  font-family: var(--font-body);
}

[data-theme="night"] .compass-mark {
  fill: var(--text-dark-tertiary);
}

.compass-arrow {
  color: #3b82f6;
  fill: currentColor; /* Inherit global wind-speed classes (Red/Orange) */
}

#windArrowGroup {
  /* Animation removed */
}

.wind-readout-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4px;
}

.wind-number-row {
  display: flex;
  align-items: baseline;
}

.wind-integer {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--text-dark-primary);
}

.wind-unit-sign {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text-dark-secondary);
  margin-left: 4px;
}


/* Sunrise & Sunset Card */
.sunrise-sunset-card {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02);
  border-radius: 24px;
  padding: 24px;
  transition: all 0.3s ease;
}



.sunrise-sunset-container {
  display: flex;
  align-items: center;
  gap: 24px;
}

.sun-times-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 100px;
}

.sun-time-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sun-label {
  font-size: 0.8rem;
  color: var(--text-dark-secondary);
  font-weight: 500;
}

.sun-time {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-dark-primary);
  letter-spacing: -0.5px;
}

#todayForecastCard .sun-time, #todayForecastCard .sun-label {
  font-weight: 500;
}

.sun-graph-column {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.svg-container-sun {
  width: 100%;
  height: 170px;
  position: relative;
}

#sunGraphSvg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sun-indicator-dot {
  position: absolute;
  width: 18px;
  height: 18px;
  background-color: #fbbf24;
  border: 2px solid #f59e0b;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.7);
  pointer-events: none;
  transition: left 0.1s ease, top 0.1s ease;
}

.moon-indicator-dot {
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: #e2e8f0;
  border: 2px solid #94a3b8;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  box-shadow: 0 0 8px rgba(148, 163, 184, 0.6);
  pointer-events: none;
  transition: left 0.1s ease, top 0.1s ease;
}

.graph-labels {
  display: flex;
  justify-content: space-between;
  padding: 0 12px;
}

.graph-label-dawn,
.graph-label-dusk {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.graph-label-dawn {
  align-items: flex-start;
}

.graph-label-dusk {
  align-items: flex-end;
}

.graph-labels .label-name {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-dark-tertiary);
  text-transform: uppercase;
}

.graph-labels .label-time {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dark-secondary);
}

/* Left column of bottom forecasts grid */
.forecasts-left-col {
  display: flex;
  flex-direction: column;
  gap: 36px;
  min-width: 0;
}

/* Pressure Gauge & Readout Custom Layout */
.pressure-gauge-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
}

.pressure-gauge-svg {
  width: 100px;
  height: 75px;
  display: block;
}

.pressure-gauge-svg .gauge-bg {
  stroke: rgba(59, 130, 246, 0.12);
}

.pressure-gauge-svg .gauge-fill {
  stroke: #3b82f6;
  transition: stroke-dashoffset 0.8s ease-out;
}

.pressure-gauge-svg #pressureArrow {
  fill: var(--text-dark-primary);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.gauge-labels-row {
  display: flex;
  justify-content: space-between;
  width: 102px;
  margin-top: -12px;
}

.gauge-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-dark-secondary);
}

.pressure-readout-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4px;
}

.pressure-number-row {
  display: flex;
  align-items: baseline;
}

.pressure-integer {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--text-dark-primary);
}

.pressure-decimal {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text-dark-secondary);
  align-self: flex-start;
  margin-left: 1px;
}

.pressure-unit {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-dark-secondary);
  margin-top: 2px;
}

/* Humidity Custom Gauge & Readout Layout */
.humidity-gauge-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
}

.humidity-gauge-svg {
  width: 80px;
  height: 90px;
  display: block;
}

.humidity-gauge-svg .gauge-bg {
  fill: rgba(59, 130, 246, 0.12);
}

.humidity-gauge-svg .gauge-fill-rect {
  fill: #06b6d4; /* Vibrant Cyan fill like in mockup */
  transition: y 0.8s ease-out, height 0.8s ease-out;
}

.humidity-gauge-svg #humidityArrow {
  fill: var(--text-dark-primary);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.humidity-gauge-svg .gauge-label {
  font-size: 0.6rem;
  font-weight: 700;
  fill: var(--text-dark-secondary);
  font-family: var(--font-body);
}

.humidity-readout-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4px;
}

.humidity-number-row {
  display: flex;
  align-items: baseline;
}

.humidity-integer {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--text-dark-primary);
}

.humidity-percent-sign {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text-dark-secondary);
  margin-left: 4px;
}

/* Sea Temp Custom Gauge & Readout Layout */
.temp-gauge-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
}

.temp-gauge-svg {
  width: 80px;
  height: 90px;
  display: block;
}

.temp-gauge-svg .gauge-bg {
  fill: rgba(59, 130, 246, 0.12);
}

.temp-gauge-svg .gauge-fill-rect {
  fill: var(--temp-color, #3b82f6);
  transition: y 0.8s ease-out, height 0.8s ease-out, fill 0.5s ease;
}

.temp-gauge-svg #tempArrow {
  fill: var(--text-dark-primary);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.temp-gauge-svg .gauge-label {
  font-size: 0.6rem;
  font-weight: 700;
  fill: var(--text-dark-secondary);
  font-family: var(--font-body);
}

.temp-readout-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4px;
}

.temp-number-row {
  display: flex;
  align-items: baseline;
}

.temp-integer {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.0rem;
  line-height: 1;
  color: var(--text-dark-primary);
}

.temp-unit-sign {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text-dark-secondary);
  margin-left: 4px;
}

/* Active Live Thermometer Styles */
.temp-gauge-svg .temp-pulse-ring {
  stroke: var(--temp-color, #3b82f6);
  fill: none;
  stroke-width: 2px;
  transform-origin: 40px 63px;
  animation: tempPulse 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
  transition: stroke 0.5s ease;
}

@keyframes tempPulse {
  0% {
    transform: scale(0.9);
    opacity: 0.9;
  }
  70% {
    transform: scale(1.6);
    opacity: 0;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* UV Index Custom Gauge & Readout Layout */
.uv-gauge-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
}

.uv-gauge-svg {
  width: 80px;
  height: 90px;
  display: block;
}

.uv-gauge-svg .gauge-bg-path {
  fill: #ffedd5; /* Light peach/orange background like mockup */
  stroke: rgba(249, 115, 22, 0.1);
  stroke-width: 0.5;
}

.uv-gauge-svg .gauge-fill-rect {
  fill: #ea580c; /* Vibrant deep orange fill like in mockup */
  transition: y 0.8s ease-out, height 0.8s ease-out;
}

.uv-gauge-svg #uvArrow {
  fill: var(--text-dark-primary);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.uv-gauge-svg .gauge-label {
  font-size: 0.6rem;
  font-weight: 700;
  fill: var(--text-dark-secondary);
  font-family: var(--font-body);
}

.uv-readout-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4px;
}

.uv-number-row {
  display: flex;
  align-items: baseline;
}

.uv-integer {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--text-dark-primary);
}

/* Moon Phase Custom Gauge Layout */
.moon-gauge-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
}

.moon-gauge-svg {
  width: 100px;
  height: 100px;
  display: block;
}

.moon-gauge-svg .moon-bg {
  fill: rgba(59, 130, 246, 0.08); /* Faint slate/blue background representing unlit moon */
}

[data-theme="night"] .moon-gauge-svg .moon-bg {
  fill: rgba(255, 255, 255, 0.06); /* Faint white background for night theme */
}

.moon-gauge-svg .moon-fill {
  fill: #e2e8f0; /* Soft light grey moon surface */
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.7)); /* Soft celestial white glow */
}

.moon-gauge-svg .moon-crater {
  fill: rgba(148, 163, 184, 0.25); /* Soft cool grey crater details */
  transition: opacity 0.3s ease;
}

/* Weather Warnings Section Layout */
#warningsContainer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.warning-item {
  border-radius: 20px;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.warning-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.warning-icon-svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.warning-title {
  font-size: 1.15rem;
  font-weight: 700;
  font-family: var(--font-body);
}

.warning-message {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-dark-secondary);
}

/* Severe Warnings (Soft red/pink glassmorphism) */
.warning-item.warning-level-severe {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.22);
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.04);
}
.warning-item.warning-level-severe .warning-icon-svg,
.warning-item.warning-level-severe .warning-title {
  color: #ef4444;
}

/* Moderate Warnings (Soft orange glassmorphism) */
.warning-item.warning-level-moderate {
  background: rgba(249, 115, 22, 0.08);
  border: 1px solid rgba(249, 115, 22, 0.22);
  box-shadow: 0 4px 15px rgba(249, 115, 22, 0.04);
}
.warning-item.warning-level-moderate .warning-icon-svg,
.warning-item.warning-level-moderate .warning-title {
  color: #f97316;
}

/* Safe / No Warnings (Standard glassmorphism style) */
.warning-item.warning-level-none {
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02);
}
.warning-item.warning-level-none .warning-icon-svg,
.warning-item.warning-level-none .warning-title {
  color: #3b82f6; /* Premium branding blue color */
}

/* Night Theme Weather Warning Adjustments */
[data-theme="night"] .warning-item.warning-level-severe {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
}
[data-theme="night"] .warning-item.warning-level-moderate {
  background: rgba(249, 115, 22, 0.12);
  border-color: rgba(249, 115, 22, 0.3);
}
[data-theme="night"] .warning-item.warning-level-none {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Dynamic Wind Speed Visualizations & Keyframes */
@keyframes windBlow { 0% { transform: translateY(0); } 50% { transform: translateY(-4px); } 100% { transform: translateY(0); } }

.wind-arrow-animate {
  transform-origin: center;
  transform-box: fill-box;
  transition: color 0.3s ease, transform 0.3s ease;
}

.wind-arrow-active-blow {
  animation: windBlow 1.5s infinite ease-in-out;
}

.wind-arrow-gentle-blow {
  animation: windBlow 2.5s infinite ease-in-out;
}

.wind-arrow-light-blow {
  animation: windBlow 4s infinite ease-in-out;
}

.wind-arrow-very-light-blow {
  animation: windBlow 6s infinite ease-in-out;
}

.wind-arrow-severe-blow {
  animation: windBlow 0.8s infinite ease-in-out;
}

.wind-speed-moderate {
  color: #f97316 !important; /* Warning Orange */
}

.wind-speed-severe {
  color: #ef4444 !important; /* Red */
}

.wind-speed-danger {
  color: #d946ef !important; /* Pink/Purple */
}

.wind-speed-extreme {
  color: #06b6d4 !important; /* Turquoise */
  filter: drop-shadow(0 0 6px rgba(6, 182, 212, 0.8)) !important; /* LED glow */
}

.wind-speed-hurricane {
  color: #39ff14 !important; /* Neon Green */
  filter: drop-shadow(0 0 6px rgba(57, 255, 20, 0.8)) !important; /* LED glow */
}

/* Ensure rotated containers preserve layout structure */
.segment-wind-arrow-container,
.hourly-wind,
.forecast-3day-wind,
.forecast-10day-wind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Navigation Tabs for Dashboard vs Radar */
.dashboard-nav {
  display: flex;
  gap: 12px;
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px 24px 0 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 100;
  position: relative;
}

[data-theme="night"] .dashboard-nav {
  background: rgba(18, 24, 38, 0.3);
  border-color: rgba(255, 255, 255, 0.05);
}

.nav-tab {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dark-secondary);
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

[data-theme="night"] .nav-tab {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
}

.nav-tab:hover {
  background: rgba(255, 255, 255, 0.5);
  color: var(--text-dark-primary);
}

[data-theme="night"] .nav-tab:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.nav-tab.active {
  background: #3b82f6 !important;
  color: #ffffff !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Radar Map Card (Glassmorphic dashboard card) */
.radar-map-card {
  background: var(--card-bg-light);
  border: 1px solid var(--border-light);
  border-radius: 24px;
  box-shadow: var(--shadow-light);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  position: relative;
  width: 100%;
}

[data-theme="night"] .radar-map-card {
  background: var(--card-bg-night);
  border-color: var(--border-night);
  box-shadow: var(--shadow-night);
}

/* Radar Map Container styling */
.radar-map-container {
  position: relative;
  width: 100%;
  height: 500px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.1);
}

#radarMap {
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Radar UI Overlays (Glassmorphic look) */
.radar-legend-card {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 16px 12px;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  height: 160px;
}

[data-theme="night"] .radar-legend-card {
  background: rgba(18, 24, 38, 0.7);
  border-color: rgba(255, 255, 255, 0.08);
}

.radar-legend-bar {
  width: 12px;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(to top, 
    rgba(59, 130, 246, 0) 0%,
    rgba(59, 130, 246, 0.8) 20%, 
    rgba(147, 51, 234, 0.8) 50%, 
    rgba(249, 115, 22, 0.9) 75%, 
    rgba(239, 68, 68, 1) 100%
  );
}

.radar-legend-labels {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-dark-primary);
}

/* Redesigned Radar Control Panel (Positioned below the map) */
.radar-control-panel {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0 0 24px 24px;
  z-index: 200;
  position: relative;
}

[data-theme="night"] .radar-control-panel {
  background: rgba(18, 24, 38, 0.85);
  border-top-color: rgba(255, 255, 255, 0.05);
}

.radar-timeline-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}

.radar-slider-container {
  position: relative;
  width: 100%;
}

.radar-time-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.radar-play-btn {
  background: #3b82f6;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.radar-play-btn:hover {
  transform: scale(1.08);
  background: #2563eb;
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.radar-play-btn svg {
  width: 20px;
  height: 20px;
}

.radar-time-limit {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dark-secondary);
}

[data-theme="night"] .radar-time-limit {
  color: rgba(255, 255, 255, 0.5);
}

/* Beautiful central time badge */
.radar-current-time-badge {
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.25);
  padding: 6px 14px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.05);
}

[data-theme="night"] .radar-current-time-badge {
  background: rgba(96, 165, 250, 0.15);
  border-color: rgba(96, 165, 250, 0.3);
}

.radar-time-display {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: #3b82f6; /* Accent Blue */
  text-align: center;
}

[data-theme="night"] .radar-time-display {
  color: #60a5fa;
}

/* Timeline Range Slider */
.radar-timeline-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(59, 130, 246, 0.15);
  outline: none;
  cursor: pointer;
  transition: background 0.3s ease;
}

[data-theme="night"] .radar-timeline-slider {
  background: rgba(255, 255, 255, 0.1);
}

.radar-timeline-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #3b82f6;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.radar-timeline-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* Cleaned up old timeline limits */

/* Action Buttons (GPS) */
.radar-action-btn {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--text-dark-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

[data-theme="night"] .radar-action-btn {
  background: rgba(18, 24, 38, 0.7);
  border-color: rgba(255, 255, 255, 0.08);
}

.radar-action-btn:hover {
  transform: scale(1.06);
  background: #ffffff;
  color: #3b82f6;
}

[data-theme="night"] .radar-action-btn:hover {
  background: #1e293b;
  color: #60a5fa;
}

.radar-action-btn svg {
  width: 20px;
  height: 20px;
}

/* Custom Leaflet Map Marker for Zadar */
.zadar-map-marker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marker-dot {
  width: 10px;
  height: 10px;
  background: #3b82f6;
  border: 2px solid #ffffff;
  border-radius: 50%;
  z-index: 10;
  box-shadow: 0 0 6px rgba(59, 130, 246, 0.5);
}

.marker-pulse-ring {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 2px solid #3b82f6;
  border-radius: 50%;
  animation: markerPulse 1.8s ease-out infinite;
  opacity: 0;
  z-index: 5;
}

@keyframes markerPulse {
  0% {
    transform: scale(0.5);
    opacity: 0.8;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

/* Footer Animated Hue Logo */
.footer-logo {
  display: block;
  margin: 16px auto 0 auto;
  width: 120px; height: auto; /* beautiful responsive size (increased 50% from 80px) */
  height: auto;
  opacity: 0.85;
  
  transition: opacity 0.3s ease;
}

.footer-logo:hover {
  opacity: 1;
}

@keyframes hueCycle {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

@keyframes wave-motion {
  0% { transform: translateX(0); }
  100% { transform: translateX(40px); }
}
.tide-wave-anim {
  animation: wave-motion 2s linear infinite;
}


@keyframes float-up {
  0% { transform: translateY(0px) scale(0.8); opacity: 0; }
  20% { opacity: 0.6; }
  80% { opacity: 0.6; }
  100% { transform: translateY(-85px) scale(1.2); opacity: 0; }
}
.bubble {
  animation: float-up 3s ease-in infinite;
}
.bubble-1 { animation-delay: 0s; animation-duration: 2.5s; }
.bubble-2 { animation-delay: 1.2s; animation-duration: 3.2s; }
.bubble-3 { animation-delay: 0.7s; animation-duration: 2.8s; }
.bubble-4 { animation-delay: 2.1s; animation-duration: 3.5s; }
.bubble-5 { animation-delay: 0.4s; animation-duration: 2.2s; }
.bubble-6 { animation-delay: 1.8s; animation-duration: 3.8s; }
.bubble-7 { animation-delay: 2.5s; animation-duration: 2.9s; }
.bubble-8 { animation-delay: 0.9s; animation-duration: 4.1s; }

@keyframes solar-pulse-anim {
  0% { transform: scale(1); opacity: 0.8; stroke-width: 3px; }
  100% { transform: scale(2.5); opacity: 0; stroke-width: 0px; }
}

.solar-pulse {
  animation: solar-pulse-anim 6s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
  transform-origin: center center;
  transform-box: fill-box;
}

.anim-delay-1 { animation-delay: 0s; }
.anim-delay-2 { animation-delay: 2s; }
.anim-delay-3 { animation-delay: 4s; }


/* ==========================================================================
   AUTOCOMPLETE SUGGESTIONS
   ========================================================================== */
.suggestions-dropdown {
  max-height: 250px;
  overflow-y: auto;
  position: relative;
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: none; border-top: 1px solid #eef1f6; margin-top: 0px; overflow: hidden; display: none; flex-direction: column;
}

.suggestion-item {
  padding: 8px 18px;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 1.45rem;
  cursor: pointer;
  transition: background 0.2s ease;
  display: flex;
  flex-direction: column;
}

.suggestion-item:hover {
  background: rgba(255, 255, 255, 0.15);
}

.suggestion-subtext {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0px;
}



/* Lightning bolt animations */
.lightning-bolt {
  opacity: 0;
  animation: strike 21s infinite;
  animation-delay: var(--flash-delay, 0s);
  filter: drop-shadow(0 0 10px #fff9d7) drop-shadow(0 0 20px #fff9d7);
}

@keyframes strike {
  0%, 2% { opacity: 1; }
  1% { opacity: 0.2; }
  3%, 100% { opacity: 0; }
}

.flash-cloud {
  animation: cloudFlash 21s infinite;
  animation-delay: var(--flash-delay, 0s);
}

.flash-cloud-only {
  animation: cloudFlash 21s infinite;
  animation-delay: var(--flash-delay, 0s);
}

@keyframes cloudFlash {
  0%, 2% { opacity: 1; }
  1% { opacity: 0.6; }
  3%, 100% { opacity: var(--base-bright, 0.25); }
}

/* Seamless cloud scroll animation */
.seamless-cloud-group {
  animation: seamlessDrift 60s linear infinite;
  will-change: transform;
  transform: translateZ(0);
}

@keyframes seamlessDrift {
  0% { transform: translateX(0); }
  100% { transform: translateX(-1200px); }
}

/* Individual seamless cloud drift */
.individual-cloud-drift {
  animation: seamlessDrift calc(var(--drift-dur, 150s) / var(--wind-speed-factor, 1)) linear infinite;
  will-change: transform;
  transform: translateZ(0);
}

.individual-cloud-drift image {
  opacity: var(--base-bright, 1);
}

/* ==========================================================================
   SEARCH COMPONENT
   ========================================================================== */
.search-wrapper { overflow: hidden;
  background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 30px;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.6), 0 0 6px rgba(255, 255, 255, 0.8), inset 0 0 10px rgba(255, 255, 255, 0.3);
  width: 58px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 200;
  position: relative; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column;
}

.search-wrapper:focus-within,
.search-wrapper.open,
.search-wrapper.active {
  width: 320px;
  cursor: default;
}

.search-input-area {
  width: 100%;
  position: relative;
}

.search-input-area input {
  background: transparent;
  border: none;
  padding: 16px 24px 16px 54px;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 1.3rem;
  outline: none;
  width: 100%;
  transition: opacity 0.3s ease, color 0.3s ease;
  box-sizing: border-box;
  opacity: 0;
  cursor: pointer;
}

.search-wrapper:focus-within .search-input-area input,
.search-wrapper.open .search-input-area input,
.search-wrapper.active .search-input-area input {
  opacity: 1;
  cursor: text;
}

.search-input-area input::placeholder {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.3s ease;
}

.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #ffffff;
  transition: color 0.3s ease;
  pointer-events: none;
  z-index: 150;
  position: relative;
}

/* Open State */
.search-wrapper.open {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.85);
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.search-wrapper.open .search-input-area input { color: #ffffff; }

.search-wrapper.open .search-input-area input::placeholder { color: rgba(255, 255, 255, 0.7); }

.search-wrapper.open .search-icon { color: #ffffff; }

/* Morphing Overlay Classes */
.morning-overlay, .evening-overlay {
  opacity: 0;
  transition: opacity 5s ease;
}
[data-theme="morning"] .morning-overlay {
  opacity: 0.8;
}
[data-theme="evening"] .evening-overlay {
  opacity: 0.9;
}

/* Daily Segments Responsive Wrapper */
.daily-segments-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 24px;
  width: 100%;
  padding: 0 16px 24px 16px;
}
@media (max-width: 600px) {
  #nowForecastCard {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .daily-segments-wrapper {
    flex-direction: column;
    gap: 16px;
  }
}

/* Wind Card Particles Effect */
.wind-line {
  stroke: rgba(59, 130, 246, 0.4);
  stroke-width: 1.2;
  stroke-linecap: round;
  animation: windFlow 1.2s linear infinite;
  opacity: 0;
}
.wind-line.line-1 { animation-duration: 1.1s; animation-delay: 0s; }
.wind-line.line-2 { animation-duration: 1.4s; animation-delay: 0.3s; }
.wind-line.line-3 { animation-duration: 1.0s; animation-delay: 0.6s; }
.wind-line.line-4 { animation-duration: 1.3s; animation-delay: 0.1s; }

@keyframes windFlow {
  0% { transform: translateY(-30px); opacity: 0; }
  30% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateY(20px); opacity: 0; }
}

/* Animated Radar Icon - Pulse Style */
.radar-pulse {
  transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: radarPing 3s cubic-bezier(0.21, 0.53, 0.56, 1) infinite;
  -webkit-animation: radarPing 3s cubic-bezier(0.21, 0.53, 0.56, 1) infinite;
  opacity: 0;
}
.radar-pulse.ring-1 { animation-delay: 0s; -webkit-animation-delay: 0s; }
.radar-pulse.ring-2 { animation-delay: 1s; -webkit-animation-delay: 1s; }
.radar-pulse.ring-3 { animation-delay: 2s; -webkit-animation-delay: 2s; }

@-webkit-keyframes radarPing {
  0% { -webkit-transform: scale(1); opacity: 0.8; stroke-width: 2px; }
  100% { -webkit-transform: scale(4.5); opacity: 0; stroke-width: 0.5px; }
}
@keyframes radarPing {
  0% { transform: scale(1); opacity: 0.8; stroke-width: 2px; }
  100% { transform: scale(4.5); opacity: 0; stroke-width: 0.5px; }
}

/* Live Header Celestial Glows */
.header-sun-glow {
  filter: drop-shadow(0 0 8px rgba(var(--sun-glow-rgb), 1)) drop-shadow(0 0 25px rgba(var(--sun-glow-rgb), 0.9)) drop-shadow(0 0 80px rgba(var(--sun-glow-rgb), 0.8)) drop-shadow(0 0 200px rgba(var(--sun-glow-rgb), 0.6));
}
.header-moon-glow {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 1)) drop-shadow(0 0 25px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 80px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 200px rgba(255, 255, 255, 0.4));
}

/* Magnetic Field Animation */
.mag-line-left, .mag-line-right {
  stroke-dasharray: 4 10;
  animation: magFlow 3s linear infinite;
  -webkit-animation: magFlow 3s linear infinite;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.mag-line-right {
  animation-direction: reverse;
  -webkit-animation-direction: reverse;
}

@keyframes magFlow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 28; }
}

@-webkit-keyframes magFlow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 28; }
}

@media (max-width: 600px) {
  #nowForecastCard {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .sunrise-sunset-container {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .sun-times-column {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    gap: 0;
  }
  .sun-time-block {
    align-items: center;
  }
  .sun-graph-column {
    width: 100%;
  }
}


.wind-speed-light {
  color: #7dd3fc !important; /* Light Blue */
}

.wind-speed-very-light {
  color: #e0f2fe !important; /* Very Light Blue */
}

/* ==========================================================================
   PRECIPITATION INDICATORS
   ========================================================================== */
.hourly-precip-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 40px;
  margin-top: 16px;
}

.hourly-precip-circle {
  border-radius: 50% 0 50% 50%;
  transform: rotate(-45deg);
  background-color: #3b82f6; /* Blue */
  flex-shrink: 0; /* Ensures it never squishes into an oval */
  margin-bottom: 4px;
  transition: all 0.3s ease;
}

.hourly-precip-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dark-secondary);
  line-height: 1;
}

@keyframes pulseRedDot {
  0% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}
.orbit-pulse-dot {
  animation: pulseRedDot 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

.active-marker .marker-core { fill: #ef4444 !important; }
.active-marker .marker-pulse {
  fill: #ef4444;
  animation: pulseMarker 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes pulseMarker {
  0% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(3.5); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}

@keyframes orbitFlow {
  from { stroke-dashoffset: 6; }
  to { stroke-dashoffset: 0; }
}

.orbit-path-animated {
  animation: orbitFlow 2s linear infinite reverse;
}

/* Normalize visual weight of weather SVG icons 
   Reduces the size of icons that fill their entire viewBox (like the sun)
   so they visually match the smaller cloud/rain icons. */
img[src*="clear-day.svg"],
img[src*="clear-night.svg"],
img[src*="sunrise.svg"] {
  transform: scale(0.75);
}

img[src*="mostly-clear-day.svg"],
img[src*="mostly-clear-night.svg"],
img[src*="partly-cloudy-day.svg"],
img[src*="partly-cloudy-night.svg"] {
  transform: scale(1.15);
}




/* Removed old zebra-row-new to prevent conflicts */
/* 10-Day Redesign Media Queries */

/* 10-Day Redesign Bugfix */
.forecast-10day-item.expanded .forecast-10day-details-wrapper {
  max-height: 450px !important;
}

.forecast-10day-item.expanded .forecast-3day-hourly-wrapper {
  max-height: 480px !important;
  opacity: 1 !important;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
[data-theme="night"] .forecast-10day-item.expanded .forecast-3day-hourly-wrapper {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.Groups[0].Value -replace 'font-size: 1\.8rem;', 'font-size: 0.9rem;'


/* ==========================================================================
   INTERACTIVE PREVIEW CONTROLS
   ========================================================================== */
.control-panel-card {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02);
  border-radius: 24px;
  padding: 20px 24px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all 0.3s ease;
}

.control-panel-card:hover {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
}

.control-header-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.control-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.2;
  color: var(--text-dark-primary);
  letter-spacing: -0.2px;
}

.control-description {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text-dark-secondary);
  line-height: 1.4;
}

.control-row {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-width: 250px;
}

.control-group label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dark-primary);
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.control-btn {
  background-color: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.control-btn:hover {
  background-color: #f1f5f9;
  border-color: #cbd5e1;
}

.control-btn.active {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #121826;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

/* ==========================================================================
   LOADER OVERLAY
   ========================================================================== */
.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(240, 244, 249, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  z-index: 1000;
  transition: opacity 0.5s ease, pointer-events 0.5s ease;
}

.loader-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #e2e8f0;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loader-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--text-dark-primary);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -80%); }
  to { opacity: 1; transform: translate(-50%, -100%); }
}

/* ==========================================================================
   RESPONSIVE DESIGN (MEDIA QUERIES)
   ========================================================================== */
@media (max-width: 1024px) {
  .top-details-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  
  .metrics-grid-3col { grid-template-columns: repeat(4, 1fr); }
  
  .bottom-forecasts-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 600px) {
  #nowForecastCard {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .app-container {
  width: 100%;
  max-width: 1080px;
  margin: -30px auto 20px auto;
  padding: 0 4px;
  z-index: 200;
  position: relative;
}
  
  .dashboard-card {
  width: 100%;
  background-color: var(--card-bg-white);
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 150;
  position: relative;
}
  
  .weather-header {
  position: relative;
  height: 100vh; min-height: 600px;
  width: 100%;
  color: var(--header-text-color);
  padding: 40px 5% 60px 5%; /* extra bottom padding to account for overlap */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  overflow: hidden;
}
  
  .city-name {
    font-size: 1.8rem;
  }
  
  .current-temp {
    font-size: 5.8rem;
  }
  
  .details-card {
    padding: 20px 4px 60px 4px;
    gap: 24px;
  }
  
  .metrics-grid-3col { grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px;
  }
  
  .metric-card {
    padding: 14px 10px;
    min-height: 170px;
  }
  
  .control-row {
    flex-direction: column;
    gap: 16px;
  }
}

@media (max-width: 320px) {
  .metrics-grid-3col {
    grid-template-columns: 1fr !important;
  }
}

/* Wind Direction Compass Custom Gauge */
.compass-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
}

.compass-svg {
  width: 100px;
  height: 100px;
  display: block;
}

.compass-ring {
  fill: none;
  stroke: rgba(148, 163, 184, 0.25); /* Slightly grey dashed ring */
  stroke-width: 1.5px;
  stroke-dasharray: 2 3;
}

[data-theme="night"] .compass-ring {
  stroke: rgba(255, 255, 255, 0.15);
}

.compass-center {
  fill: var(--text-dark-tertiary);
}

.compass-mark {
  font-size: 0.75rem;
  font-weight: 700;
  fill: var(--text-dark-secondary);
  font-family: var(--font-body);
}

[data-theme="night"] .compass-mark {
  fill: var(--text-dark-tertiary);
}

.compass-arrow {
  color: #3b82f6;
  fill: currentColor; /* Inherit global wind-speed classes (Red/Orange) */
}

#windArrowGroup {
  /* Animation removed */
}

.wind-readout-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4px;
}

.wind-number-row {
  display: flex;
  align-items: baseline;
}

.wind-integer {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--text-dark-primary);
}

.wind-unit-sign {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text-dark-secondary);
  margin-left: 4px;
}


/* Sunrise & Sunset Card */
.sunrise-sunset-card {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02);
  border-radius: 24px;
  padding: 24px;
  transition: all 0.3s ease;
}



.sunrise-sunset-container {
  display: flex;
  align-items: center;
  gap: 24px;
}

.sun-times-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 100px;
}

.sun-time-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sun-label {
  font-size: 0.8rem;
  color: var(--text-dark-secondary);
  font-weight: 500;
}

.sun-time {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-dark-primary);
  letter-spacing: -0.5px;
}

#todayForecastCard .sun-time, #todayForecastCard .sun-label {
  font-weight: 500;
}

.sun-graph-column {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.svg-container-sun {
  width: 100%;
  height: 170px;
  position: relative;
}

#sunGraphSvg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sun-indicator-dot {
  position: absolute;
  width: 18px;
  height: 18px;
  background-color: #fbbf24;
  border: 2px solid #f59e0b;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.7);
  pointer-events: none;
  transition: left 0.1s ease, top 0.1s ease;
}

.moon-indicator-dot {
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: #e2e8f0;
  border: 2px solid #94a3b8;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  box-shadow: 0 0 8px rgba(148, 163, 184, 0.6);
  pointer-events: none;
  transition: left 0.1s ease, top 0.1s ease;
}

.graph-labels {
  display: flex;
  justify-content: space-between;
  padding: 0 12px;
}

.graph-label-dawn,
.graph-label-dusk {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.graph-label-dawn {
  align-items: flex-start;
}

.graph-label-dusk {
  align-items: flex-end;
}

.graph-labels .label-name {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-dark-tertiary);
  text-transform: uppercase;
}

.graph-labels .label-time {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dark-secondary);
}

/* Left column of bottom forecasts grid */
.forecasts-left-col {
  display: flex;
  flex-direction: column;
  gap: 36px;
  min-width: 0;
}

/* Pressure Gauge & Readout Custom Layout */
.pressure-gauge-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
}

.pressure-gauge-svg {
  width: 100px;
  height: 75px;
  display: block;
}

.pressure-gauge-svg .gauge-bg {
  stroke: rgba(59, 130, 246, 0.12);
}

.pressure-gauge-svg .gauge-fill {
  stroke: #3b82f6;
  transition: stroke-dashoffset 0.8s ease-out;
}

.pressure-gauge-svg #pressureArrow {
  fill: var(--text-dark-primary);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.gauge-labels-row {
  display: flex;
  justify-content: space-between;
  width: 102px;
  margin-top: -12px;
}

.gauge-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-dark-secondary);
}

.pressure-readout-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4px;
}

.pressure-number-row {
  display: flex;
  align-items: baseline;
}

.pressure-integer {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--text-dark-primary);
}

.pressure-decimal {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text-dark-secondary);
  align-self: flex-start;
  margin-left: 1px;
}

.pressure-unit {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-dark-secondary);
  margin-top: 2px;
}

/* Humidity Custom Gauge & Readout Layout */
.humidity-gauge-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
}

.humidity-gauge-svg {
  width: 80px;
  height: 90px;
  display: block;
}

.humidity-gauge-svg .gauge-bg {
  fill: rgba(59, 130, 246, 0.12);
}

.humidity-gauge-svg .gauge-fill-rect {
  fill: #06b6d4; /* Vibrant Cyan fill like in mockup */
  transition: y 0.8s ease-out, height 0.8s ease-out;
}

.humidity-gauge-svg #humidityArrow {
  fill: var(--text-dark-primary);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.humidity-gauge-svg .gauge-label {
  font-size: 0.6rem;
  font-weight: 700;
  fill: var(--text-dark-secondary);
  font-family: var(--font-body);
}

.humidity-readout-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4px;
}

.humidity-number-row {
  display: flex;
  align-items: baseline;
}

.humidity-integer {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--text-dark-primary);
}

.humidity-percent-sign {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text-dark-secondary);
  margin-left: 4px;
}

/* Sea Temp Custom Gauge & Readout Layout */
.temp-gauge-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
}

.temp-gauge-svg {
  width: 80px;
  height: 90px;
  display: block;
}

.temp-gauge-svg .gauge-bg {
  fill: rgba(59, 130, 246, 0.12);
}

.temp-gauge-svg .gauge-fill-rect {
  fill: var(--temp-color, #3b82f6);
  transition: y 0.8s ease-out, height 0.8s ease-out, fill 0.5s ease;
}

.temp-gauge-svg #tempArrow {
  fill: var(--text-dark-primary);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.temp-gauge-svg .gauge-label {
  font-size: 0.6rem;
  font-weight: 700;
  fill: var(--text-dark-secondary);
  font-family: var(--font-body);
}

.temp-readout-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4px;
}

.temp-number-row {
  display: flex;
  align-items: baseline;
}

.temp-integer {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.0rem;
  line-height: 1;
  color: var(--text-dark-primary);
}

.temp-unit-sign {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text-dark-secondary);
  margin-left: 4px;
}

/* Active Live Thermometer Styles */
.temp-gauge-svg .temp-pulse-ring {
  stroke: var(--temp-color, #3b82f6);
  fill: none;
  stroke-width: 2px;
  transform-origin: 40px 63px;
  animation: tempPulse 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
  transition: stroke 0.5s ease;
}

@keyframes tempPulse {
  0% {
    transform: scale(0.9);
    opacity: 0.9;
  }
  70% {
    transform: scale(1.6);
    opacity: 0;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* UV Index Custom Gauge & Readout Layout */
.uv-gauge-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
}

.uv-gauge-svg {
  width: 80px;
  height: 90px;
  display: block;
}

.uv-gauge-svg .gauge-bg-path {
  fill: #ffedd5; /* Light peach/orange background like mockup */
  stroke: rgba(249, 115, 22, 0.1);
  stroke-width: 0.5;
}

.uv-gauge-svg .gauge-fill-rect {
  fill: #ea580c; /* Vibrant deep orange fill like in mockup */
  transition: y 0.8s ease-out, height 0.8s ease-out;
}

.uv-gauge-svg #uvArrow {
  fill: var(--text-dark-primary);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.uv-gauge-svg .gauge-label {
  font-size: 0.6rem;
  font-weight: 700;
  fill: var(--text-dark-secondary);
  font-family: var(--font-body);
}

.uv-readout-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4px;
}

.uv-number-row {
  display: flex;
  align-items: baseline;
}

.uv-integer {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--text-dark-primary);
}

/* Moon Phase Custom Gauge Layout */
.moon-gauge-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
}

.moon-gauge-svg {
  width: 100px;
  height: 100px;
  display: block;
}

.moon-gauge-svg .moon-bg {
  fill: rgba(59, 130, 246, 0.08); /* Faint slate/blue background representing unlit moon */
}

[data-theme="night"] .moon-gauge-svg .moon-bg {
  fill: rgba(255, 255, 255, 0.06); /* Faint white background for night theme */
}

.moon-gauge-svg .moon-fill {
  fill: #e2e8f0; /* Soft light grey moon surface */
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.7)); /* Soft celestial white glow */
}

.moon-gauge-svg .moon-crater {
  fill: rgba(148, 163, 184, 0.25); /* Soft cool grey crater details */
  transition: opacity 0.3s ease;
}

/* Weather Warnings Section Layout */
#warningsContainer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.warning-item {
  border-radius: 20px;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.warning-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.warning-icon-svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.warning-title {
  font-size: 1.15rem;
  font-weight: 700;
  font-family: var(--font-body);
}

.warning-message {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-dark-secondary);
}

/* Severe Warnings (Soft red/pink glassmorphism) */
.warning-item.warning-level-severe {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.22);
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.04);
}
.warning-item.warning-level-severe .warning-icon-svg,
.warning-item.warning-level-severe .warning-title {
  color: #ef4444;
}

/* Moderate Warnings (Soft orange glassmorphism) */
.warning-item.warning-level-moderate {
  background: rgba(249, 115, 22, 0.08);
  border: 1px solid rgba(249, 115, 22, 0.22);
  box-shadow: 0 4px 15px rgba(249, 115, 22, 0.04);
}
.warning-item.warning-level-moderate .warning-icon-svg,
.warning-item.warning-level-moderate .warning-title {
  color: #f97316;
}

/* Safe / No Warnings (Standard glassmorphism style) */
.warning-item.warning-level-none {
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02);
}
.warning-item.warning-level-none .warning-icon-svg,
.warning-item.warning-level-none .warning-title {
  color: #3b82f6; /* Premium branding blue color */
}

/* Night Theme Weather Warning Adjustments */
[data-theme="night"] .warning-item.warning-level-severe {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
}
[data-theme="night"] .warning-item.warning-level-moderate {
  background: rgba(249, 115, 22, 0.12);
  border-color: rgba(249, 115, 22, 0.3);
}
[data-theme="night"] .warning-item.warning-level-none {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Dynamic Wind Speed Visualizations & Keyframes */
@keyframes windBlow { 0% { transform: translateY(0); } 50% { transform: translateY(-4px); } 100% { transform: translateY(0); } }

.wind-arrow-animate {
  transform-origin: center;
  transform-box: fill-box;
  transition: color 0.3s ease, transform 0.3s ease;
}

.wind-arrow-active-blow {
  animation: windBlow 1.5s infinite ease-in-out;
}

.wind-arrow-gentle-blow {
  animation: windBlow 2.5s infinite ease-in-out;
}

.wind-arrow-light-blow {
  animation: windBlow 4s infinite ease-in-out;
}

.wind-arrow-very-light-blow {
  animation: windBlow 6s infinite ease-in-out;
}

.wind-arrow-severe-blow {
  animation: windBlow 0.8s infinite ease-in-out;
}

.wind-speed-moderate {
  color: #f97316 !important; /* Warning Orange */
}

.wind-speed-severe {
  color: #ef4444 !important; /* Red */
}

.wind-speed-danger {
  color: #d946ef !important; /* Pink/Purple */
}

.wind-speed-extreme {
  color: #06b6d4 !important; /* Turquoise */
  filter: drop-shadow(0 0 6px rgba(6, 182, 212, 0.8)) !important; /* LED glow */
}

.wind-speed-hurricane {
  color: #39ff14 !important; /* Neon Green */
  filter: drop-shadow(0 0 6px rgba(57, 255, 20, 0.8)) !important; /* LED glow */
}

/* Ensure rotated containers preserve layout structure */
.segment-wind-arrow-container,
.hourly-wind,
.forecast-3day-wind,
.forecast-10day-wind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Navigation Tabs for Dashboard vs Radar */
.dashboard-nav {
  display: flex;
  gap: 12px;
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px 24px 0 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 100;
  position: relative;
}

[data-theme="night"] .dashboard-nav {
  background: rgba(18, 24, 38, 0.3);
  border-color: rgba(255, 255, 255, 0.05);
}

.nav-tab {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dark-secondary);
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

[data-theme="night"] .nav-tab {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
}

.nav-tab:hover {
  background: rgba(255, 255, 255, 0.5);
  color: var(--text-dark-primary);
}

[data-theme="night"] .nav-tab:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.nav-tab.active {
  background: #3b82f6 !important;
  color: #ffffff !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Radar Map Card (Glassmorphic dashboard card) */
.radar-map-card {
  background: var(--card-bg-light);
  border: 1px solid var(--border-light);
  border-radius: 24px;
  box-shadow: var(--shadow-light);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  position: relative;
  width: 100%;
}

[data-theme="night"] .radar-map-card {
  background: var(--card-bg-night);
  border-color: var(--border-night);
  box-shadow: var(--shadow-night);
}

/* Radar Map Container styling */
.radar-map-container {
  position: relative;
  width: 100%;
  height: 500px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.1);
}

#radarMap {
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Radar UI Overlays (Glassmorphic look) */
.radar-legend-card {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 16px 12px;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  height: 160px;
}

[data-theme="night"] .radar-legend-card {
  background: rgba(18, 24, 38, 0.7);
  border-color: rgba(255, 255, 255, 0.08);
}

.radar-legend-bar {
  width: 12px;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(to top, 
    rgba(59, 130, 246, 0) 0%,
    rgba(59, 130, 246, 0.8) 20%, 
    rgba(147, 51, 234, 0.8) 50%, 
    rgba(249, 115, 22, 0.9) 75%, 
    rgba(239, 68, 68, 1) 100%
  );
}

.radar-legend-labels {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-dark-primary);
}

/* Redesigned Radar Control Panel (Positioned below the map) */
.radar-control-panel {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0 0 24px 24px;
  z-index: 200;
  position: relative;
}

[data-theme="night"] .radar-control-panel {
  background: rgba(18, 24, 38, 0.85);
  border-top-color: rgba(255, 255, 255, 0.05);
}

.radar-timeline-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}

.radar-slider-container {
  position: relative;
  width: 100%;
}

.radar-time-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.radar-play-btn {
  background: #3b82f6;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.radar-play-btn:hover {
  transform: scale(1.08);
  background: #2563eb;
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.radar-play-btn svg {
  width: 20px;
  height: 20px;
}

.radar-time-limit {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dark-secondary);
}

[data-theme="night"] .radar-time-limit {
  color: rgba(255, 255, 255, 0.5);
}

/* Beautiful central time badge */
.radar-current-time-badge {
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.25);
  padding: 6px 14px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.05);
}

[data-theme="night"] .radar-current-time-badge {
  background: rgba(96, 165, 250, 0.15);
  border-color: rgba(96, 165, 250, 0.3);
}

.radar-time-display {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: #3b82f6; /* Accent Blue */
  text-align: center;
}

[data-theme="night"] .radar-time-display {
  color: #60a5fa;
}

/* Timeline Range Slider */
.radar-timeline-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(59, 130, 246, 0.15);
  outline: none;
  cursor: pointer;
  transition: background 0.3s ease;
}

[data-theme="night"] .radar-timeline-slider {
  background: rgba(255, 255, 255, 0.1);
}

.radar-timeline-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #3b82f6;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.radar-timeline-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* Cleaned up old timeline limits */

/* Action Buttons (GPS) */
.radar-action-btn {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--text-dark-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

[data-theme="night"] .radar-action-btn {
  background: rgba(18, 24, 38, 0.7);
  border-color: rgba(255, 255, 255, 0.08);
}

.radar-action-btn:hover {
  transform: scale(1.06);
  background: #ffffff;
  color: #3b82f6;
}

[data-theme="night"] .radar-action-btn:hover {
  background: #1e293b;
  color: #60a5fa;
}

.radar-action-btn svg {
  width: 20px;
  height: 20px;
}

/* Custom Leaflet Map Marker for Zadar */
.zadar-map-marker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marker-dot {
  width: 10px;
  height: 10px;
  background: #3b82f6;
  border: 2px solid #ffffff;
  border-radius: 50%;
  z-index: 10;
  box-shadow: 0 0 6px rgba(59, 130, 246, 0.5);
}

.marker-pulse-ring {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 2px solid #3b82f6;
  border-radius: 50%;
  animation: markerPulse 1.8s ease-out infinite;
  opacity: 0;
  z-index: 5;
}

@keyframes markerPulse {
  0% {
    transform: scale(0.5);
    opacity: 0.8;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

/* Footer Animated Hue Logo */
.footer-logo {
  display: block;
  margin: 16px auto 0 auto;
  width: 120px; height: auto; /* beautiful responsive size (increased 50% from 80px) */
  height: auto;
  opacity: 0.85;
  
  transition: opacity 0.3s ease;
}

.footer-logo:hover {
  opacity: 1;
}

@keyframes hueCycle {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

@keyframes wave-motion {
  0% { transform: translateX(0); }
  100% { transform: translateX(40px); }
}
.tide-wave-anim {
  animation: wave-motion 2s linear infinite;
}


@keyframes float-up {
  0% { transform: translateY(0px) scale(0.8); opacity: 0; }
  20% { opacity: 0.6; }
  80% { opacity: 0.6; }
  100% { transform: translateY(-85px) scale(1.2); opacity: 0; }
}
.bubble {
  animation: float-up 3s ease-in infinite;
}
.bubble-1 { animation-delay: 0s; animation-duration: 2.5s; }
.bubble-2 { animation-delay: 1.2s; animation-duration: 3.2s; }
.bubble-3 { animation-delay: 0.7s; animation-duration: 2.8s; }
.bubble-4 { animation-delay: 2.1s; animation-duration: 3.5s; }
.bubble-5 { animation-delay: 0.4s; animation-duration: 2.2s; }
.bubble-6 { animation-delay: 1.8s; animation-duration: 3.8s; }
.bubble-7 { animation-delay: 2.5s; animation-duration: 2.9s; }
.bubble-8 { animation-delay: 0.9s; animation-duration: 4.1s; }

@keyframes solar-pulse-anim {
  0% { transform: scale(1); opacity: 0.8; stroke-width: 3px; }
  100% { transform: scale(2.5); opacity: 0; stroke-width: 0px; }
}

.solar-pulse {
  animation: solar-pulse-anim 6s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
  transform-origin: center center;
  transform-box: fill-box;
}

.anim-delay-1 { animation-delay: 0s; }
.anim-delay-2 { animation-delay: 2s; }
.anim-delay-3 { animation-delay: 4s; }


/* ==========================================================================
   AUTOCOMPLETE SUGGESTIONS
   ========================================================================== */
.suggestions-dropdown {
  max-height: 250px;
  overflow-y: auto;
  position: relative;
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: none; border-top: 1px solid #eef1f6; margin-top: 0px; overflow: hidden; display: none; flex-direction: column;
}

.suggestion-item {
  padding: 8px 18px;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 1.45rem;
  cursor: pointer;
  transition: background 0.2s ease;
  display: flex;
  flex-direction: column;
}

.suggestion-item:hover {
  background: rgba(255, 255, 255, 0.15);
}

.suggestion-subtext {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0px;
}



/* Lightning bolt animations */
.lightning-bolt {
  opacity: 0;
  animation: strike 21s infinite;
  animation-delay: var(--flash-delay, 0s);
  filter: drop-shadow(0 0 10px #fff9d7) drop-shadow(0 0 20px #fff9d7);
}

@keyframes strike {
  0%, 2% { opacity: 1; }
  1% { opacity: 0.2; }
  3%, 100% { opacity: 0; }
}

.flash-cloud {
  animation: cloudFlash 21s infinite;
  animation-delay: var(--flash-delay, 0s);
}

.flash-cloud-only {
  animation: cloudFlash 21s infinite;
  animation-delay: var(--flash-delay, 0s);
}

@keyframes cloudFlash {
  0%, 2% { opacity: 1; }
  1% { opacity: 0.6; }
  3%, 100% { opacity: var(--base-bright, 0.25); }
}

/* Seamless cloud scroll animation */
.seamless-cloud-group {
  animation: seamlessDrift 60s linear infinite;
  will-change: transform;
  transform: translateZ(0);
}

@keyframes seamlessDrift {
  0% { transform: translateX(0); }
  100% { transform: translateX(-1200px); }
}

/* Individual seamless cloud drift */
.individual-cloud-drift {
  animation: seamlessDrift calc(var(--drift-dur, 150s) / var(--wind-speed-factor, 1)) linear infinite;
  will-change: transform;
  transform: translateZ(0);
}

.individual-cloud-drift image {
  opacity: var(--base-bright, 1);
}

/* ==========================================================================
   SEARCH COMPONENT
   ========================================================================== */
.search-wrapper { overflow: hidden;
  background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 30px;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.6), 0 0 6px rgba(255, 255, 255, 0.8), inset 0 0 10px rgba(255, 255, 255, 0.3);
  width: 58px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 200;
  position: relative; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column;
}

.search-wrapper:focus-within,
.search-wrapper.open,
.search-wrapper.active {
  width: 320px;
  cursor: default;
}

.search-input-area {
  width: 100%;
  position: relative;
}

.search-input-area input {
  background: transparent;
  border: none;
  padding: 16px 24px 16px 54px;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 1.3rem;
  outline: none;
  width: 100%;
  transition: opacity 0.3s ease, color 0.3s ease;
  box-sizing: border-box;
  opacity: 0;
  cursor: pointer;
}

.search-wrapper:focus-within .search-input-area input,
.search-wrapper.open .search-input-area input,
.search-wrapper.active .search-input-area input {
  opacity: 1;
  cursor: text;
}

.search-input-area input::placeholder {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.3s ease;
}

.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #ffffff;
  transition: color 0.3s ease;
  pointer-events: none;
  z-index: 150;
  position: relative;
}

/* Open State */
.search-wrapper.open {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.85);
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.search-wrapper.open .search-input-area input { color: #ffffff; }

.search-wrapper.open .search-input-area input::placeholder { color: rgba(255, 255, 255, 0.7); }

.search-wrapper.open .search-icon { color: #ffffff; }

/* Morphing Overlay Classes */
.morning-overlay, .evening-overlay {
  opacity: 0;
  transition: opacity 5s ease;
}
[data-theme="morning"] .morning-overlay {
  opacity: 0.8;
}
[data-theme="evening"] .evening-overlay {
  opacity: 0.9;
}

/* Daily Segments Responsive Wrapper */
.daily-segments-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 24px;
  width: 100%;
  padding: 0 16px 24px 16px;
}
@media (max-width: 600px) {
  #nowForecastCard {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .daily-segments-wrapper {
    flex-direction: column;
    gap: 16px;
  }
}

/* Wind Card Particles Effect */
.wind-line {
  stroke: rgba(59, 130, 246, 0.4);
  stroke-width: 1.2;
  stroke-linecap: round;
  animation: windFlow 1.2s linear infinite;
  opacity: 0;
}
.wind-line.line-1 { animation-duration: 1.1s; animation-delay: 0s; }
.wind-line.line-2 { animation-duration: 1.4s; animation-delay: 0.3s; }
.wind-line.line-3 { animation-duration: 1.0s; animation-delay: 0.6s; }
.wind-line.line-4 { animation-duration: 1.3s; animation-delay: 0.1s; }

@keyframes windFlow {
  0% { transform: translateY(-30px); opacity: 0; }
  30% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateY(20px); opacity: 0; }
}

/* Animated Radar Icon - Pulse Style */
.radar-pulse {
  transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: radarPing 3s cubic-bezier(0.21, 0.53, 0.56, 1) infinite;
  -webkit-animation: radarPing 3s cubic-bezier(0.21, 0.53, 0.56, 1) infinite;
  opacity: 0;
}
.radar-pulse.ring-1 { animation-delay: 0s; -webkit-animation-delay: 0s; }
.radar-pulse.ring-2 { animation-delay: 1s; -webkit-animation-delay: 1s; }
.radar-pulse.ring-3 { animation-delay: 2s; -webkit-animation-delay: 2s; }

@-webkit-keyframes radarPing {
  0% { -webkit-transform: scale(1); opacity: 0.8; stroke-width: 2px; }
  100% { -webkit-transform: scale(4.5); opacity: 0; stroke-width: 0.5px; }
}
@keyframes radarPing {
  0% { transform: scale(1); opacity: 0.8; stroke-width: 2px; }
  100% { transform: scale(4.5); opacity: 0; stroke-width: 0.5px; }
}

/* Live Header Celestial Glows */
.header-sun-glow {
  filter: drop-shadow(0 0 8px rgba(var(--sun-glow-rgb), 1)) drop-shadow(0 0 25px rgba(var(--sun-glow-rgb), 0.9)) drop-shadow(0 0 80px rgba(var(--sun-glow-rgb), 0.8)) drop-shadow(0 0 200px rgba(var(--sun-glow-rgb), 0.6));
}
.header-moon-glow {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 1)) drop-shadow(0 0 25px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 80px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 200px rgba(255, 255, 255, 0.4));
}

/* Magnetic Field Animation */
.mag-line-left, .mag-line-right {
  stroke-dasharray: 4 10;
  animation: magFlow 3s linear infinite;
  -webkit-animation: magFlow 3s linear infinite;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.mag-line-right {
  animation-direction: reverse;
  -webkit-animation-direction: reverse;
}

@keyframes magFlow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 28; }
}

@-webkit-keyframes magFlow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 28; }
}

@media (max-width: 600px) {
  #nowForecastCard {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .sunrise-sunset-container {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .sun-times-column {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    gap: 0;
  }
  .sun-time-block {
    align-items: center;
  }
  .sun-graph-column {
    width: 100%;
  }
}


.wind-speed-light {
  color: #7dd3fc !important; /* Light Blue */
}

.wind-speed-very-light {
  color: #e0f2fe !important; /* Very Light Blue */
}

/* ==========================================================================
   PRECIPITATION INDICATORS
   ========================================================================== */
.hourly-precip-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 40px;
  margin-top: 16px;
}

.hourly-precip-circle {
  border-radius: 50% 0 50% 50%;
  transform: rotate(-45deg);
  background-color: #3b82f6; /* Blue */
  flex-shrink: 0; /* Ensures it never squishes into an oval */
  margin-bottom: 4px;
  transition: all 0.3s ease;
}

.hourly-precip-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dark-secondary);
  line-height: 1;
}

@keyframes pulseRedDot {
  0% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}
.orbit-pulse-dot {
  animation: pulseRedDot 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

.active-marker .marker-core { fill: #ef4444 !important; }
.active-marker .marker-pulse {
  fill: #ef4444;
  animation: pulseMarker 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes pulseMarker {
  0% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(3.5); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}

@keyframes orbitFlow {
  from { stroke-dashoffset: 6; }
  to { stroke-dashoffset: 0; }
}

.orbit-path-animated {
  animation: orbitFlow 2s linear infinite reverse;
}

/* Normalize visual weight of weather SVG icons 
   Reduces the size of icons that fill their entire viewBox (like the sun)
   so they visually match the smaller cloud/rain icons. */
img[src*="clear-day.svg"],
img[src*="clear-night.svg"],
img[src*="sunrise.svg"] {
  transform: scale(0.75);
}

img[src*="mostly-clear-day.svg"],
img[src*="mostly-clear-night.svg"],
img[src*="partly-cloudy-day.svg"],
img[src*="partly-cloudy-night.svg"] {
  transform: scale(1.15);
}




/* Removed old zebra-row-new to prevent conflicts */
/* 10-Day Redesign Media Queries */

/* 10-Day Redesign Bugfix */
.forecast-10day-item.expanded .forecast-10day-details-wrapper {
  max-height: 450px !important;
}

.forecast-10day-item.expanded .forecast-3day-hourly-wrapper {
  max-height: 480px !important;
  opacity: 1 !important;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
[data-theme="night"] .forecast-10day-item.expanded .forecast-3day-hourly-wrapper {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Reduce 10-day range font size by half */
.forecast-10day-range {
  font-size: 0.9rem !important;
}
/* Show and style min/max temperatures for 10-day row */
.forecast-10day-range .forecast-temp-max,
.forecast-10day-range .forecast-temp-min {
  display: block !important;
  font-size: 1.5rem !important;
  font-weight: 700;
  text-align: right;
  line-height: 1.2;
}
.forecast-10day-range .forecast-temp-max::before {
  content: "MAX ";
  font-size: 1rem !important;
  font-weight: 600;
  color: var(--text-dark-secondary);
}
.forecast-10day-range .forecast-temp-min::before {
  content: "MIN ";
  font-size: 1rem !important;
  font-weight: 600;
  color: var(--text-dark-secondary);
}
/* Increase Morning/Day/Night segment temperature font sizes to 1.5rem */
.forecast-10day-header .forecast-3day-segments .seg-temp {
  font-size: 1.5rem !important;
}
/* Re-arrange 10-day inline row segments */
.forecast-10day-header {
  gap: 16px !important;
}
.forecast-10day-header .forecast-3day-segments {
  flex: 1 1 auto !important;
  justify-content: space-evenly !important;
  gap: 8px !important;
  margin: 0 10px !important;
}
.forecast-10day-header .forecast-3day-segment {
  flex: 1 1 auto !important;
  min-width: 60px !important;
  max-width: 90px !important;
}
.forecast-10day-header .forecast-icon-small {
  width: 55px !important;
  height: 55px !important;
}
/* Clean up dividers and spacing */
.forecast-10day-header .forecast-3day-segments > div:not(.forecast-3day-segment) {
  display: none !important;
}
.forecast-10day-header .forecast-3day-segment {
  border-right: 1px solid rgba(0,0,0,0.08);
  padding-right: 15px;
  padding-left: 15px;
  margin: 0;
}
.forecast-10day-header .forecast-3day-segment:last-child {
  border-right: none;
}
[data-theme="night"] .forecast-10day-header .forecast-3day-segment {
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}




/* ========================================================= */
/* SAFE RE-APPLICATION OF 10-DAY TWEAKS                      */
/* ========================================================= */

/* Show and style min/max temperatures for 10-day row */
.forecast-10day-range .forecast-temp-max,
.forecast-10day-range .forecast-temp-min {
  display: block !important;
  font-size: 1.5rem !important;
  font-weight: 700;
  text-align: right;
  line-height: 1.2;
}
.forecast-10day-range .forecast-temp-max::before {
  content: "MAX ";
  font-size: 1rem !important;
  font-weight: 600;
  color: var(--text-dark-secondary);
}
.forecast-10day-range .forecast-temp-min::before {
  content: "MIN ";
  font-size: 1rem !important;
  font-weight: 600;
  color: var(--text-dark-secondary);
}

/* Make Morning/Day/Night fonts larger */
.forecast-10day-header .forecast-3day-segments .seg-temp {
  font-size: 1.5rem !important;
}

/* Hide divider lines inside segments */
.forecast-10day-header .forecast-3day-segments > div[style*="width: 1px"] {
  display: none !important;
}

/* Replace dividers with clean right borders */
.forecast-10day-header .forecast-3day-segment {
  border-right: 1px solid rgba(0,0,0,0.08) !important;
  margin: 0 !important;
}
[data-theme="night"] .forecast-10day-header .forecast-3day-segment {
  border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.forecast-10day-header .forecast-3day-segment:last-child {
  border-right: none !important;
}

/* Centering the Wind Column horizontally and vertically */
.forecast-10day-header .forecast-10day-wind-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
}

/* Desktop Icon Scaling */
@media (min-width: 769px) {
  .forecast-10day-header .forecast-icon-small {
    width: 60px !important;
    height: 60px !important;
    margin-bottom: 4px !important;
  }
}

/* Mobile Icon Scaling */
@media (max-width: 768px) {
  .forecast-10day-header .forecast-icon-small {
    width: 45px !important;
    height: 45px !important;
  }
  
  /* Shrink text slightly on mobile so it fits on one row */
  .forecast-10day-header .forecast-3day-segments .seg-temp {
    font-size: 1.25rem !important;
  }
}


/* ========================================================= */
/* REDUCE 10-DAY WIND ARROW SIZE                             */
/* ========================================================= */

.forecast-10day-header .forecast-10day-wind-arrow {
  width: 20px !important;
  height: 20px !important;
}










/* Zebra striping for 10-day forecast rows */
#forecast3day .forecast-3day-item:nth-child(odd) {
  background-color: #fbfbf8 !important;
}





/* Remove bold from daylight value in forecast cards */
.forecast-3day-item .sun-time {
  font-weight: 500;
}


/* Sun/Moon Card Headings and Values adjustments */
.sunrise-sunset-container .sun-label {
  font-size: 1rem !important;
}

.sunrise-sunset-container .sun-time {
  font-size: 1.4rem !important;
  font-weight: 500 !important;
}

/* Dotted separator for the Midnight (00:00) card in the Today hourly slider */
.forecast-3day-hourly-item.day-separator {
  position: relative;
}
.forecast-3day-hourly-item.day-separator::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 15px;
  bottom: 25px;
  width: 1px;
  border-right: 2px dotted rgba(0, 0, 0, 0.25);
  pointer-events: none;
  z-index: 5;
}

/* Mobile overrides for new horizontal header layout */
@media (max-width: 600px) {
  #nowForecastCard {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .location-container {
    flex-direction: row !important; justify-content: space-between !important; align-items: center !important;
    margin-top: -15px !important;
  }
  .city-name {
    font-size: 4.5rem !important;
  }
  .current-temp {
    font-size: 5rem !important;
  }
  .header-weather-icon-large {
    width: 80px !important;
    height: 80px !important;
  }
}







@media (max-width: 600px) {
  #nowForecastCard {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .temperature-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
  }
  .local-time, #lastUpdateText {
    font-size: 1rem !important;
    white-space: nowrap !important;
  }
}

/* Fix mobile width by removing the 40px left/right padding on the main dashboard container */
@media (max-width: 600px) {
  #nowForecastCard {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  #detailsCardWrapper {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}

#todayForecastCard .sun-time, #todayForecastCard .sun-label {
  color: #94a3b8 !important;
}

#todayForecastCard .sun-label {
  font-size: 1rem !important;
}


@media (max-width: 600px) {
  #nowForecastCard {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  #todayForecastCard .forecast-3day-header > div:first-child { flex: 0 0 60px !important; min-width: 60px !important; }
  #todayForecastCard .forecast-3day-segments { gap: 4px !important; }
  #todayForecastCard .forecast-icon-small { width: 45px !important; height: 45px !important; }
  #todayForecastCard .seg-temp { font-size: 2.5rem !important; }
  #todayForecastCard svg[viewBox="0 0 80 90"] { width: 34px !important; height: 38px !important; }
  #todayForecastCard [id$="HumText"] { font-size: 0.9rem !important; }
}

.forecast-10day-range .forecast-temp-min {
  display: block !important;
  font-size: 1.5rem !important;
  font-weight: 700;
  text-align: right;
  line-height: 1.2;
}
.forecast-10day-range .forecast-temp-max::before {
  content: "MAX ";
  font-size: 1rem !important;
  font-weight: 600;
  color: var(--text-dark-secondary);
}
.forecast-10day-range .forecast-temp-min::before {
  content: "MIN ";
  font-size: 1rem !important;
  font-weight: 600;
  color: var(--text-dark-secondary);
}

/* Make Morning/Day/Night fonts larger */
.forecast-10day-header .forecast-3day-segments .seg-temp {
  font-size: 1.5rem !important;
}

/* Hide divider lines inside segments */
.forecast-10day-header .forecast-3day-segments > div[style*="width: 1px"] {
  display: none !important;
}

/* Replace dividers with clean right borders */
.forecast-10day-header .forecast-3day-segment {
  border-right: 1px solid rgba(0,0,0,0.08) !important;
  margin: 0 !important;
}
[data-theme="night"] .forecast-10day-header .forecast-3day-segment {
  border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.forecast-10day-header .forecast-3day-segment:last-child {
  border-right: none !important;
}

/* Centering the Wind Column horizontally and vertically */
.forecast-10day-header .forecast-10day-wind-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
}

/* Desktop Icon Scaling */
@media (min-width: 769px) {
  .forecast-10day-header .forecast-icon-small {
    width: 60px !important;
    height: 60px !important;
    margin-bottom: 4px !important;
  }
}

/* Mobile Icon Scaling */
@media (max-width: 768px) {
  .forecast-10day-header .forecast-icon-small {
    width: 45px !important;
    height: 45px !important;
  }
  
  /* Shrink text slightly on mobile so it fits on one row */
  .forecast-10day-header .forecast-3day-segments .seg-temp {
    font-size: 1.25rem !important;
  }
}


/* ========================================================= */
/* REDUCE 10-DAY WIND ARROW SIZE                             */
/* ========================================================= */

.forecast-10day-header .forecast-10day-wind-arrow {
  width: 20px !important;
  height: 20px !important;
}










/* Zebra striping for 10-day forecast rows */
#forecast3day .forecast-3day-item:nth-child(odd) {
  background-color: #fbfbf8 !important;
}





/* Remove bold from daylight value in forecast cards */
.forecast-3day-item .sun-time {
  font-weight: 500;
}


/* Sun/Moon Card Headings and Values adjustments */
.sunrise-sunset-container .sun-label {
  font-size: 1rem !important;
}

.sunrise-sunset-container .sun-time {
  font-size: 1.4rem !important;
  font-weight: 500 !important;
}

/* Dotted separator for the Midnight (00:00) card in the Today hourly slider */
.forecast-3day-hourly-item.day-separator {
  position: relative;
}
.forecast-3day-hourly-item.day-separator::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 15px;
  bottom: 25px;
  width: 1px;
  border-right: 2px dotted rgba(0, 0, 0, 0.25);
  pointer-events: none;
  z-index: 5;
}

/* Mobile overrides for new horizontal header layout */
@media (max-width: 600px) {
  #nowForecastCard {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .location-container {
    flex-direction: row !important; justify-content: space-between !important; align-items: center !important;
    margin-top: -15px !important;
  }
  .city-name {
    font-size: 4.5rem !important;
  }
  .current-temp {
    font-size: 5rem !important;
  }
  .header-weather-icon-large {
    width: 80px !important;
    height: 80px !important;
  }
}







@media (max-width: 600px) {
  #nowForecastCard {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .temperature-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
  }
  .local-time, #lastUpdateText {
    font-size: 1rem !important;
    white-space: nowrap !important;
  }
}

/* Fix mobile width by removing the 40px left/right padding on the main dashboard container */
@media (max-width: 600px) {
  #nowForecastCard {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  #detailsCardWrapper {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}

#todayForecastCard .sun-time, #todayForecastCard .sun-label {
  color: #94a3b8 !important;
}

#todayForecastCard .sun-label {
  font-size: 1rem !important;
}


@media (max-width: 600px) {
  #nowForecastCard {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  #todayForecastCard .forecast-3day-header > div:first-child { flex: 0 0 60px !important; min-width: 60px !important; }
  #todayForecastCard .forecast-3day-segments { gap: 4px !important; }
  #todayForecastCard .forecast-icon-small { width: 45px !important; height: 45px !important; }
  #todayForecastCard .seg-temp { font-size: 2.5rem !important; }
  #todayForecastCard svg[viewBox="0 0 80 90"] { width: 34px !important; height: 38px !important; }
  #todayForecastCard [id$="HumText"] { font-size: 0.9rem !important; }
}

/* User overrides for 10-day forecast font sizes */
.forecast-10day-header .forecast-3day-segments .seg-temp {
  font-size: 2rem !important;
}
.forecast-10day-header .forecast-10day-wind-col span:first-of-type {
  font-size: 1.5rem !important;
}

/* Force Today Card temperatures */
#todayForecastCard .seg-temp {
  font-weight: bold !important;
  font-size: 3rem !important;
  font-family: 'Cousine', var(--font-display) !important;
  text-align: center !important;
  line-height: 0.95 !important;
}

@font-face {
  font-family: 'Cousine';
  src: url('./assets/font/Cousine-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Cousine';
  src: url('./assets/font/Cousine-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Cousine';
  src: url('./assets/font/Cousine-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'Cousine';
  src: url('./assets/font/Cousine-BoldItalic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}

#mornHumText, #dayHumText, #nightHumText,
#morningWindSpeed span:first-child, #dayWindSpeed span:first-child, #nightWindSpeed span:first-child {
  font-family: 'Cousine', var(--font-body) !important;
}

.wave-label-point {
  font-family: 'Cousine', var(--font-display) !important;
}

.forecast-3day-hourly-item span[style*="font-size: 1.5rem"] {
  font-family: 'Cousine', var(--font-display) !important;
}

.forecast-temp-max,
.forecast-temp-min,
.forecast-10day-item .seg-temp,
.forecast-3day-item .seg-temp,
.forecast-10day-item span[style*="font-size: 1.5rem"],
.forecast-10day-item span[style*="font-size: 2rem"],
.forecast-10day-item span[style*="font-size: 1.4rem"],
.forecast-3day-item span[style*="font-size: 1.5rem"],
.forecast-3day-item span[style*="font-size: 2rem"],
.forecast-3day-item span[style*="font-size: 1.4rem"] {
  font-family: 'Cousine', var(--font-display) !important;
}

/* Revert precipitation numbers (which use blue color #3b82f6) back to default font */
.forecast-3day-hourly-item span[style*="color: #3b82f6"],
.forecast-10day-item span[style*="color: #3b82f6"],
.forecast-3day-item span[style*="color: #3b82f6"] {
  font-family: var(--font-body) !important;
}

.forecast-10day-range .forecast-temp-max::before,
.forecast-10day-range .forecast-temp-min::before {
  font-family: var(--font-body) !important;
}

.forecast-temp-max,
.forecast-temp-min,
.forecast-10day-item .seg-temp {
  font-weight: 900 !important;
}

.forecast-10day-day {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
}

@media (max-width: 600px) {
  #nowForecastCard {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  #todayForecastCard .seg-temp { font-size: 2.5rem !important; }
}

@media (max-width: 600px) {
  #nowForecastCard {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .forecast-3day-hourly-item {
    min-width: 55px !important;
    padding: 6px 4px !important;
    flex-shrink: 0 !important;
  }
  .forecast-3day-hourly-slider {
    gap: 4px !important;
  }



@media (max-width: 600px) {
  #nowForecastCard {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  #headerSearchContainer {
    top: 15px !important;
    right: 15px !important;
    left: 15px !important;
    display: flex;
    justify-content: flex-end;
  }
  .search-wrapper:focus-within,
  .search-wrapper.open,
  .search-wrapper.active {
    width: 100% !important;
  }
  .suggestions-dropdown {
    max-height: 200px;
  }
}
















@keyframes bob-rise { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
  50% { transform: translateY(calc(var(--base-y, 0px) - 3px)); }
}
@keyframes bob-fall { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
  50% { transform: translateY(calc(var(--base-y, 0px) + 3px)); }
}
.trend-rise {
  animation: bob-rise 1.5s ease-in-out infinite !important;
}
.trend-fall {
  animation: bob-fall 1.5s ease-in-out infinite !important;
}

@media (max-width: 600px) {
  .metrics-grid-3col { 
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
  }
  .metric-card {
    padding: 10px 4px !important;
    min-height: 160px !important;
    border-radius: 14px !important;
    overflow: hidden;
  }
  .metric-card .metric-label {
    font-size: 1.05rem !important;
    letter-spacing: -0.3px;
    text-align: center;
    line-height: 1.1;
  }
  .metric-card .metric-value {
    font-size: 1.1rem !important;
  }
  .metric-card .metric-sub {
    font-size: 0.95rem !important;
    line-height: 1.1;
  }
  .compass-svg, .magnetic-gauge-svg, .season-gauge-svg {
    max-width: 100%;
    height: auto;
  }
}
/* Favorites View Styles */
.favorite-card {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--text-dark-primary);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), inset 0 2px 10px rgba(255,255,255,0.5);
  border-radius: 20px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 1 / 1;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.favorite-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08), inset 0 2px 10px rgba(255,255,255,0.7);
  background: rgba(255, 255, 255, 0.75);
}
.fav-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.fav-temp {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--text-dark-primary);
  line-height: 0.9;
  letter-spacing: -1px;
}
.fav-temp-deg {
  font-size: 1.5rem;
  font-weight: 500;
  vertical-align: top;
}
.fav-icon-svg {
  width: 50px;
  height: 50px;
  filter: drop-shadow(0 4px 6px rgba(255, 100, 100, 0.2));
}
.fav-city {
  font-family: var(--font-primary);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-dark-primary);
  margin-bottom: 2px;
}
.fav-country {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-dark-tertiary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.fav-bottom-row {
  display: flex;
  gap: 20px;
  align-items: center;
}
.fav-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-dark-primary);
}
.fav-stat svg {
  color: #3b82f6; /* Blueish for humidity/wind */
}
.fav-remove-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.05);
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
  color: var(--text-dark-secondary);
}
.favorite-card:hover .fav-remove-btn {
  opacity: 1;
}
.fav-remove-btn:hover {
  background: rgba(239, 68, 68, 0.15); /* Red tinted hover */
  color: #ef4444;
}

@media (max-width: 600px) {
  .favorites-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* ==========================================================================
   FAVORITES VIEW TOGGLE STATES
   ========================================================================== */
/* Hide Dashboard Elements */
body.view-mode-favorites #headerTempBlock,
body.view-mode-favorites .header-content,
body.view-mode-favorites .wave-container,
body.view-mode-favorites .search-wrapper,
body.view-mode-favorites #footerLogoContainer,
body.view-mode-favorites .control-panel-card,
body.view-mode-favorites #detailsCardWrapper {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transition: opacity 0.4s ease, visibility 0.4s;
}

body.view-mode-favorites #detailsCardWrapper {
  display: none !important; /* To collapse layout space */
}

/* Remove White Dashboard Card Background */
body.view-mode-favorites .dashboard-card {
  background: transparent !important;
  box-shadow: none !important;
}

body.view-mode-favorites .app-container {
  margin-top: -340px !important; /* Pull up into the sky */
}

/* Show Favorites Wrapper */
body.view-mode-favorites #favoritesWrapper {
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  display: flex !important;
  transition: opacity 0.4s ease, visibility 0.4s;
}

body:not(.view-mode-favorites) #favoritesWrapper {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  display: none !important;
  transition: opacity 0.4s ease, visibility 0.4s;
}

@media (max-width: 600px) {
  #nowForecastCard {
    min-height: auto !important;
  }
}