/* ---------- CSS Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  line-height: 1.15;
}

body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: inherit;
  font-size: inherit;
}

/* ---------- Design Tokens ---------- */
:root {
  /* Sky gradient */
  --sky-top: #4facfe;
  --sky-mid: #2b86c5;
  --sky-bottom: #0f4c81;

  /* Surfaces / Cards */
  --card-bg: rgba(255, 255, 255, 0.12);
  --surface: rgba(255, 255, 255, 0.18);

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.18);
  --glass-bg-strong: rgba(255, 255, 255, 0.28);
  --glass-border: rgba(255, 255, 255, 0.35);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  --glass-blur: 14px;

  /* Text */
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.78);
  --text-muted: rgba(255, 255, 255, 0.78);
  --text-strong: #f7fbff;

  /* Accents */
  --accent: #ffd166;
  --danger-bg: rgba(220, 53, 69, 0.85);
  --danger-text: #ffffff;

  /* Sizing */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --gap: 1rem;
  --gap-sm: 0.5rem;
  --container-max: 480px;
}

/* ---------- Dark theme overrides ---------- */
body.dark {
  --card-bg: rgba(15, 23, 35, 0.55);
  --surface: rgba(20, 30, 50, 0.65);

  --glass-bg: rgba(15, 23, 35, 0.55);
  --glass-bg-strong: rgba(20, 30, 50, 0.7);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);

  --text-primary: #e6edf3;
  --text-secondary: rgba(230, 237, 243, 0.7);
  --text-muted: rgba(230, 237, 243, 0.6);
  --text-strong: #ffffff;

  --accent: #ffc14d;
  --danger-bg: rgba(180, 40, 56, 0.9);
}

/* Smooth theme transition (scoped to color/background-color/border-color
   so existing component transitions and weather gradient animations are
   not affected) */
*,
*::before,
*::after {
  transition: background-color 0.4s ease, color 0.4s ease,
    border-color 0.4s ease;
}

/* ---------- Utilities ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Base ---------- */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  color: var(--text-primary);
  background: linear-gradient(
    180deg,
    var(--sky-top) 0%,
    var(--sky-mid) 55%,
    var(--sky-bottom) 100%
  );
  background-attachment: fixed;
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

header,
main,
footer {
  width: 100%;
  max-width: var(--container-max);
}

header {
  text-align: center;
  margin-bottom: 1.5rem;
}

header h1 {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

main {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

footer {
  margin-top: 2rem;
  text-align: center;
  color: var(--text-muted);
}

/* ---------- Glass surface ---------- */
.glass,
#weather-card,
#search-form,
#forecast > li,
#error-msg {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
}

/* ---------- Search bar ---------- */
#search-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  padding: 0.5rem;
  border-radius: 999px;
}

#city-input {
  flex: 1 1 100%;
  min-width: 0;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: #0f4c81;
  font-size: 1rem;
  outline: none;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

#city-input::placeholder {
  color: rgba(15, 76, 129, 0.55);
}

#city-input:focus {
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
}

#search-form button {
  flex: 1 1 0;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.15s ease, background 0.2s ease;
}

#search-form button:hover {
  background: rgba(255, 255, 255, 0.4);
}

#search-form button:active {
  transform: scale(0.97);
}

#search-form button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Weather card ---------- */
#weather-card {
  padding: 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

#weather-card header {
  margin-bottom: 0;
}

#city-name {
  font-size: 1.5rem;
  font-weight: 600;
}

#weather-card figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

#weather-icon {
  width: 120px;
  height: 120px;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25));
}

#condition {
  font-size: 1.1rem;
  color: var(--text-muted);
  text-transform: capitalize;
}

#temperature {
  font-size: 3.25rem;
  font-weight: 300;
  line-height: 1;
  color: var(--text-strong);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

#weather-card dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-sm);
  width: 100%;
  margin-top: 1rem;
}

#weather-card dl > div {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 0.75rem;
}

#weather-card dt {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#weather-card dd {
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 0.25rem;
}

/* ---------- Forecast ---------- */
section[aria-label="5-day forecast"] h2 {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  padding-left: 0.25rem;
}

#forecast {
  display: flex;
  flex-direction: row;
  gap: var(--gap-sm);
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

#forecast > li {
  flex: 0 0 auto;
  min-width: 84px;
  padding: 0.75rem 0.5rem;
  text-align: center;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  border-radius: var(--radius-md);
}

#forecast img {
  width: 48px;
  height: 48px;
}

#forecast .day {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#forecast .temp {
  font-size: 1rem;
  font-weight: 600;
}

/* Hide scrollbar visually while keeping it functional */
#forecast::-webkit-scrollbar {
  height: 6px;
}
#forecast::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 999px;
}

/* ---------- Error message ---------- */
#error-msg {
  background: var(--danger-bg);
  color: var(--danger-text);
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  border-color: rgba(255, 255, 255, 0.4);
  text-align: center;
  font-weight: 500;
}

#error-msg[hidden] {
  display: none;
}

/* ---------- Responsive: phones ---------- */
@media (max-width: 480px) {
  body {
    padding: 1rem 0.75rem;
  }

  header h1 {
    font-size: 1.5rem;
  }

  #search-form {
    border-radius: var(--radius-lg);
  }

  #weather-card {
    padding: 1.25rem;
  }

  #weather-icon {
    width: 96px;
    height: 96px;
  }

  #temperature {
    font-size: 2.75rem;
  }

  #weather-card dl {
    grid-template-columns: 1fr;
  }

  #forecast > li {
    min-width: 72px;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- Fallback for no backdrop-filter ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #weather-card,
  #search-form,
  #forecast > li {
    background: rgba(255, 255, 255, 0.35);
  }
}

/* ---------- Utility: hidden ---------- */
.hidden {
  display: none !important;
}

/* ---------- Fade-in animation ---------- */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#weather-card {
  animation: fade-in-up 0.4s ease both;
}

@media (prefers-reduced-motion: reduce) {
  #weather-card {
    animation: none;
  }
}

/* ---------- Loading spinner overlay ---------- */
#loading-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 76, 129, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
}

.spinner {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  animation: spin 0.8s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 2s;
  }
}

/* ---------- Unit toggle ---------- */
.controls {
  display: flex;
  justify-content: flex-end;
}

.unit-toggle {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transition: background 0.2s ease, transform 0.15s ease;
}

.unit-toggle:hover {
  background: rgba(255, 255, 255, 0.4);
}

.unit-toggle:active {
  transform: scale(0.96);
}

.unit-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.unit-toggle[aria-pressed="true"] {
  background: var(--accent);
  color: #0f4c81;
  border-color: rgba(255, 255, 255, 0.6);
}

/* ---------- History pills ---------- */
.history {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
  padding: 0;
  list-style: none;
}

.history[hidden] {
  display: none;
}

.history-pill {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 500;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transition: background 0.2s ease, transform 0.15s ease;
}

.history-pill:hover {
  background: rgba(255, 255, 255, 0.32);
}

.history-pill:active {
  transform: scale(0.96);
}

.history-pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.history-pill .star {
  color: var(--accent);
  margin-right: 0.25rem;
}

/* ---------- Favorite button (weather card) ---------- */
#weather-card > header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
}

.favorite-btn {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-muted);
  padding: 0.15rem 0.35rem;
  border-radius: 999px;
  transition: color 0.2s ease, transform 0.15s ease;
}

.favorite-btn:hover {
  color: var(--accent);
  transform: scale(1.1);
}

.favorite-btn[aria-pressed="true"] {
  color: var(--accent);
  text-shadow: 0 0 8px rgba(255, 209, 102, 0.6);
}

.favorite-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Dynamic animated weather backgrounds ---------- */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

body {
  transition: background 1.2s ease;
  background-size: 400% 400%;
}

body.bg-sunny {
  background: linear-gradient(
    135deg,
    #ffb347 0%,
    #ff8c42 35%,
    #ffd166 65%,
    #56ccf2 100%
  );
  background-size: 400% 400%;
  animation: gradientShift 12s ease infinite;
}

body.bg-night {
  background: linear-gradient(
    135deg,
    #0a1633 0%,
    #1a1a3e 35%,
    #2d1b4e 65%,
    #0f3a3a 100%
  );
  background-size: 400% 400%;
  animation: gradientShift 12s ease infinite;
}

body.bg-cloudy {
  background: linear-gradient(
    135deg,
    #5d6d7e 0%,
    #7f8c8d 35%,
    #95a5a6 65%,
    #4a6987 100%
  );
  background-size: 400% 400%;
  animation: gradientShift 12s ease infinite;
}

body.bg-rainy {
  background: linear-gradient(
    135deg,
    #1e3a5f 0%,
    #2c5f6f 35%,
    #4a7c7e 65%,
    #5d6d7e 100%
  );
  background-size: 400% 400%;
  animation: gradientShift 12s ease infinite;
}

body.bg-snowy {
  background: linear-gradient(
    135deg,
    #f5f7fa 0%,
    #c3e1f0 35%,
    #d8d8f0 65%,
    #b8c5e0 100%
  );
  background-size: 400% 400%;
  animation: gradientShift 12s ease infinite;
}

body.bg-stormy {
  background: linear-gradient(
    135deg,
    #232526 0%,
    #2c2c54 35%,
    #3a1c4f 65%,
    #1a1a3e 100%
  );
  background-size: 400% 400%;
  animation: gradientShift 12s ease infinite;
}

/* Pause animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.bg-sunny,
  body.bg-night,
  body.bg-cloudy,
  body.bg-rainy,
  body.bg-snowy,
  body.bg-stormy {
    animation: none;
  }
}

/* ---------- Premium glassmorphism: weather card ---------- */
#weather-card {
  position: relative;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-lg);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

/* Inner top-edge highlight to mimic light catching the glass */
#weather-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0) 35%
  );
  pointer-events: none;
  z-index: 0;
}

/* Keep card content above the highlight overlay */
#weather-card > * {
  position: relative;
  z-index: 1;
}

/* Text readability over translucent surface */
#weather-card #city-name,
#weather-card #temperature,
#weather-card #condition,
#weather-card dt,
#weather-card dd {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

#weather-card #temperature {
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.15),
    0 2px 12px rgba(0, 0, 0, 0.2);
}

/* Refine the inner detail tiles to match the premium feel */
#weather-card dl > div {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Fallback when backdrop-filter isn't supported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #weather-card {
    background: rgba(255, 255, 255, 0.32);
  }
}

/* ---------- Pill-shaped search bar ---------- */
.search-section {
  position: relative;
}

#search-form {
  display: block;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.search-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 52px;
  padding: 0 20px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.search-pill:focus-within {
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

.search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  opacity: 0.8;
  flex-shrink: 0;
}

#city-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 1rem;
  outline: none;
  border-radius: 0;
  box-shadow: none;
}

#city-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

#city-input:focus {
  background: transparent;
  box-shadow: none;
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--text-primary);
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.15s ease;
}

.icon-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.icon-btn:active {
  transform: scale(0.92);
}

.icon-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Autocomplete dropdown ---------- */
.autocomplete {
  position: absolute;
  top: calc(52px + 0.4rem);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-md);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
  z-index: 50;
  max-height: 280px;
  overflow-y: auto;
}

.autocomplete[hidden] {
  display: none;
}

.autocomplete li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.autocomplete li:hover,
.autocomplete li[aria-selected="true"] {
  background: rgba(255, 255, 255, 0.25);
}

.autocomplete li .flag {
  font-size: 1.15rem;
  line-height: 1;
}

.autocomplete li .name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.autocomplete li .badge {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.autocomplete li .badge.fav {
  color: var(--accent);
}

/* ---------- Hourly forecast strip ---------- */
.section-title {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  padding-left: 0.25rem;
}

.hourly-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 0.25rem 0.5rem 0.75rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  /* Hide scrollbar across browsers */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.hourly-strip::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.hour-card {
  flex: 0 0 64px;
  width: 64px;
  padding: 0.6rem 0.4rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-primary);
  transition: background 0.2s ease, transform 0.15s ease;
}

.hour-card:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}

.hour-card .hour-time {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

.hour-card img {
  width: 28px;
  height: 28px;
}

.hour-card .hour-temp {
  font-size: 0.95rem;
  font-weight: 600;
}

/* ---------- AQI widget ---------- */
.aqi-widget {
  position: relative;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.aqi-widget[hidden] {
  display: none;
}

.aqi-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Colored circle badge */
.aqi-badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ffffff;
  font-weight: 700;
  font-size: 1.5rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.aqi-badge[data-aqi="1"] { background: linear-gradient(135deg, #4caf50, #2e7d32); }
.aqi-badge[data-aqi="2"] { background: linear-gradient(135deg, #ffeb3b, #fbc02d); color: #5b4500; text-shadow: none; }
.aqi-badge[data-aqi="3"] { background: linear-gradient(135deg, #ff9800, #f57c00); }
.aqi-badge[data-aqi="4"] { background: linear-gradient(135deg, #f44336, #c62828); }
.aqi-badge[data-aqi="5"] { background: linear-gradient(135deg, #9c27b0, #6a1b9a); }

.aqi-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.aqi-title {
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.aqi-label {
  font-size: 1.25rem;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Pollutant pills */
.aqi-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.aqi-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.6rem 0.4rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.aqi-pill-label {
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.aqi-pill-value {
  font-size: 1rem;
  font-weight: 600;
}

.aqi-pill-unit {
  font-size: 0.65rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

@media (max-width: 480px) {
  .aqi-badge {
    width: 56px;
    height: 56px;
    font-size: 1.3rem;
  }

  .aqi-label {
    font-size: 1.1rem;
  }
}

/* ---------- Sunrise/sunset arc ---------- */
.sun-arc {
  width: 100%;
  margin-top: 1rem;
}

.sun-arc[hidden] {
  display: none;
}

.sun-arc-svg {
  width: 100%;
  height: 90px;
  display: block;
  overflow: visible;
}

#sun-dot {
  filter: url(#sun-glow);
  transition: opacity 0.3s ease;
}

.sun-times {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.25rem;
  padding: 0 0.25rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.sun-time {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  align-items: flex-start;
}

.sun-time-right {
  align-items: flex-end;
}

.sun-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.75;
}

#sunrise-time,
#sunset-time {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* ---------- Micro-animations ---------- */

/* Crossfade weather icon */
#weather-icon {
  transition: opacity 0.3s ease;
}

/* Scale pulse on the weather card when new data arrives */
@keyframes card-pulse {
  0% { transform: scale(0.98); }
  100% { transform: scale(1); }
}

#weather-card.pulse {
  animation: card-pulse 200ms ease-out;
}

/* Staggered slide-in for stat rows */
@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.stat-item.slide-in {
  animation: slide-in 0.35s ease both;
}

/* Stagger delays — applied via nth-child so HTML stays clean */
#weather-card .stat-item.slide-in:nth-child(1) { animation-delay: 0ms; }
#weather-card .stat-item.slide-in:nth-child(2) { animation-delay: 100ms; }

#aqi-widget .stat-item.slide-in:nth-child(1) { animation-delay: 0ms; }
#aqi-widget .stat-item.slide-in:nth-child(2) { animation-delay: 100ms; }
#aqi-widget .stat-item.slide-in:nth-child(3) { animation-delay: 200ms; }

/* Reduced motion — skip the flair */
@media (prefers-reduced-motion: reduce) {
  #weather-card.pulse,
  .stat-item.slide-in,
  #weather-icon {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Theme toggle button ---------- */
header {
  position: relative;
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

#theme-toggle {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#theme-toggle:hover {
  background: var(--glass-bg-strong);
  transform: translateY(-50%) scale(1.05);
}

#theme-toggle:active {
  transform: translateY(-50%) scale(0.95);
}

#theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Dark-mode body backdrop — lightly dim the weather gradient so glass
   cards have more contrast without losing the colored atmosphere. */
body.dark::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 0;
}

body.dark > *:not(#splash):not(#sidebar):not(#sidebar-backdrop):not(#ptr-indicator) {
  position: relative;
  z-index: 1;
}

/* ---------- Visual stat bars ---------- */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  width: 100%;
  margin-top: 1rem;
}

.stat-row {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.7rem 0.85rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.stat-row-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.stat-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}

.stat-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
}

.stat-bar {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  overflow: hidden;
}

.stat-fill {
  height: 100%;
  width: 0;
  border-radius: 2px;
  transition: width 0.6s ease;
}

.stat-fill-humidity {
  background: linear-gradient(90deg, #4facfe 0%, #00b3ff 100%);
}

.stat-fill-wind {
  background: linear-gradient(90deg, #5eead4 0%, #14b8a6 100%);
}

.stat-fill-uv {
  background: linear-gradient(90deg, #ffd166 0%, #ff9800 100%);
}

.stat-fill-visibility {
  background: linear-gradient(90deg, #6ee7b7 0%, #2e7d32 100%);
}

/* Extend staggered slide-in to cover the new 4 rows */
#weather-card .stat-item.slide-in:nth-child(3) { animation-delay: 200ms; }
#weather-card .stat-item.slide-in:nth-child(4) { animation-delay: 300ms; }

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Smart tips widget ---------- */
.tips-widget {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  background: var(--card-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--glass-shadow);
}

.tips-widget[hidden] {
  display: none;
}

.tips-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tips-label {
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}

.tips-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tip-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 500;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  white-space: nowrap;
}

.tip-pill .tip-icon {
  font-size: 1rem;
  line-height: 1;
}

/* Reuse the .stat-item slide-in cascade for tip rows */
#tips-widget .stat-item.slide-in:nth-child(1) { animation-delay: 0ms; }
#tips-widget .stat-item.slide-in:nth-child(2) { animation-delay: 120ms; }

/* ---------- Skeleton loading ---------- */
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.1) 25%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0.1) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: var(--radius-sm);
}

.skeleton-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem 0;
}

.skeleton-layout[hidden] {
  display: none;
}

.skeleton-line {
  height: 16px;
}

.skeleton-city { width: 140px; }
.skeleton-condition { width: 100px; }
.skeleton-temp { width: 80px; height: 38px; }

.skeleton-icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
}

.skeleton-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  width: 100%;
  margin-top: 0.5rem;
}

.skeleton-stat {
  height: 56px;
  width: 100%;
}

/* When the card is loading, hide its real content and show skeletons. */
#weather-card.loading > *:not(.skeleton-layout) {
  display: none;
}

#weather-card.loading #weather-skeleton {
  display: flex;
}

/* ---------- Pull-to-refresh indicator ---------- */
.ptr-indicator {
  position: fixed;
  top: 12px;
  left: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transform: translate(-50%, -80px) rotate(0deg);
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  transition: opacity 0.2s ease;
}

.ptr-indicator.visible {
  opacity: 1;
}

.ptr-indicator.spinning svg {
  animation: ptr-spin 0.8s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
    background: rgba(255, 255, 255, 0.18);
  }
  .ptr-indicator.spinning svg {
    animation-duration: 2s;
  }
}

/* =========================================================
   RESPONSIVE OVERHAUL — mobile-first
   Layered after all component styles so it overrides cleanly.
   ========================================================= */

/* ---------- Fluid type tokens ---------- */
:root {
  --fs-h1: clamp(1.25rem, 1rem + 1.5vw, 1.875rem);
  --fs-h2: clamp(1rem, 0.85rem + 0.6vw, 1.25rem);
  --fs-body: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
  --fs-small: clamp(0.72rem, 0.68rem + 0.15vw, 0.85rem);
  --fs-temp: clamp(2.5rem, 1.6rem + 4.5vw, 4.25rem);
  --fs-city: clamp(1.15rem, 1rem + 0.8vw, 1.6rem);
  --tap-min: 44px;
}

/* ---------- Base (mobile-first) ---------- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  /* Honor iOS / Android safe areas (notches, home indicators) */
  padding-top: max(env(safe-area-inset-top), 1rem);
  padding-right: max(env(safe-area-inset-right), 0.75rem);
  padding-bottom: max(env(safe-area-inset-bottom), 1rem);
  padding-left: max(env(safe-area-inset-left), 0.75rem);
  font-size: var(--fs-body);
}

header,
main,
footer {
  width: 100%;
  max-width: 100%;
}

main {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

header h1 { font-size: var(--fs-h1); }
section h2 { font-size: var(--fs-h2); }

#city-name { font-size: var(--fs-city); }
#temperature { font-size: var(--fs-temp); }
#condition { font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem); }

/* ---------- Touch targets (WCAG 2.5.5 — 44x44 minimum) ---------- */
button,
[role="button"],
.icon-btn,
.unit-toggle,
.history-pill,
.tip-pill,
#theme-toggle,
#favorite-btn,
#search-btn,
#geo-btn {
  min-height: var(--tap-min);
  min-width: var(--tap-min);
}

/* Pills can stay visually compact, but tap area is ≥44px via padding */
.history-pill,
.tip-pill {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  display: inline-flex;
  align-items: center;
}

/* The unit toggle and favorite button sit beside text — keep them circular */
.unit-toggle {
  min-width: var(--tap-min);
}

/* Inline icon buttons inside the search pill stay 36px visually,
   but extend tap area with a transparent surrounding hit zone */
.search-pill .icon-btn {
  width: 40px;
  height: 40px;
}

/* ---------- Sticky search bar (mobile) ---------- */
.search-section {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 0.5rem 0;
  margin: -0.5rem 0 0;
}

/* A backdrop blur strip behind the sticky bar so content scrolls under it cleanly */
.search-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  z-index: -1;
  border-radius: var(--radius-md);
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* Reveal the strip only once the user scrolls (set by JS or via :has support) */
@supports (selector(:has(*))) {
  body:has(.search-section:not(:first-child))
    .search-section::before {
    opacity: 1;
  }
}

/* ---------- Forecast: 2-col grid on small phones, row at 480px+ ---------- */
@media (max-width: 479.98px) {
  #forecast {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    overflow-x: visible;
    padding-bottom: 0;
  }

  #forecast > li {
    min-width: 0;
    flex: initial;
    width: 100%;
  }
}

/* ---------- 480px+ : centered card layout ---------- */
@media (min-width: 480px) {
  header,
  main,
  footer {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Forecast back to single horizontal row */
  #forecast {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
  }

  #forecast > li {
    flex: 0 0 auto;
    min-width: 84px;
    width: auto;
  }

  /* Hide the sticky backdrop at this size */
  .search-section::before {
    display: none;
  }

  .search-section {
    position: static;
  }
}

/* ---------- 768px+ : side-by-side layout ---------- */
@media (min-width: 768px) {
  header,
  main,
  footer {
    max-width: 900px;
  }

  main {
    display: grid;
    grid-template-columns: 60% 40%;
    grid-template-areas:
      "search    search"
      "history   history"
      "error     error"
      "controls  controls"
      "weather   aqi"
      "weather   tips"
      "hourly    hourly"
      "forecast  forecast";
    gap: 1rem;
    align-items: start;
  }

  .search-section { grid-area: search; }
  #history       { grid-area: history; }
  #error-msg     { grid-area: error; }
  .controls      { grid-area: controls; }
  #weather-card  { grid-area: weather; }
  #aqi-widget    { grid-area: aqi; }
  #tips-widget   { grid-area: tips; }

  /* Both forecast sections — distinguish by their nested wrappers */
  section[aria-label="Hourly forecast"]  { grid-area: hourly; }
  section[aria-label="5-day forecast"]   { grid-area: forecast; }

  /* 5-day forecast becomes a 5-column grid */
  #forecast {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
    overflow-x: visible;
  }

  #forecast > li {
    flex: initial;
    min-width: 0;
    width: 100%;
  }

  /* Stats grid inside the card stays 2-col, fits naturally in 60% column */
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Hourly strip stays scrollable but gets more breathing room */
  .hourly-strip {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
}

/* ---------- 1024px+ : a touch wider, slightly more luxurious ---------- */
@media (min-width: 1024px) {
  header,
  main,
  footer {
    max-width: 1000px;
  }

  main {
    gap: 1.25rem;
  }
}

/* ---------- Reduced motion: disable everything ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  /* Static fallback for shimmer skeletons */
  .skeleton {
    background: rgba(255, 255, 255, 0.18) !important;
  }

  /* Stop the looping gradient animations on the body */
  body.bg-sunny,
  body.bg-night,
  body.bg-cloudy,
  body.bg-rainy,
  body.bg-snowy,
  body.bg-stormy {
    animation: none !important;
  }
}

/* ---------- App navbar (header) ---------- */
.app-navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  /* Override the constrained max-width that previously applied to <header> */
  max-width: none;
  margin: 0;
}

.app-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-primary);
  /* Reset the default visited/link colors */
}

.app-brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 6px;
}

.app-logo {
  width: 32px;
  height: 32px;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

.app-name {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.app-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Reset the previously absolute-positioned theme toggle so it sits in flex flow */
.app-navbar #theme-toggle {
  position: static;
  transform: none;
}

.app-navbar #theme-toggle:hover {
  transform: scale(1.05);
}

.app-navbar #theme-toggle:active {
  transform: scale(0.95);
}

/* Honor safe-area on notched devices for the sticky bar */
@supports (padding-top: env(safe-area-inset-top)) {
  .app-navbar {
    padding-top: max(12px, env(safe-area-inset-top));
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
}

/* On small screens trim down a touch */
@media (max-width: 380px) {
  .app-navbar {
    padding: 10px 14px;
  }
  .app-name {
    font-size: 16px;
  }
}

/* ============================================================
   Splash Screen
   ============================================================ */
#splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0a2540 0%, #1b4f8a 100%);
  transition: opacity 0.5s ease;
  opacity: 1;
}

#splash[hidden] {
  display: none;
}

#splash.fade-out {
  opacity: 0;
  pointer-events: none;
}

.splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding: 1.5rem;
  text-align: center;
}

.splash-icon {
  display: block;
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.35));
  animation: splash-icon-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes splash-icon-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.splash-title {
  margin: 0.2rem 0 0;
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.01em;
  animation: splash-fade-up 0.7s 0.1s ease-out both;
}

.splash-dots {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0.25rem;
  animation: splash-fade-up 0.7s 0.2s ease-out both;
}

.splash-dots span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7ec8e3;
  animation: splash-dot-pulse 1.2s ease-in-out infinite;
}

.splash-dots span:nth-child(1) { animation-delay: 0s; }
.splash-dots span:nth-child(2) { animation-delay: 0.2s; }
.splash-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes splash-dot-pulse {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.4;
  }
  40% {
    transform: scale(1.1);
    opacity: 1;
  }
}

.splash-tagline {
  margin: 0.5rem 0 0;
  color: #ffffff;
  opacity: 0.45;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  animation: splash-fade-up 0.7s 0.3s ease-out both;
}

@keyframes splash-fade-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* While splash is active, hide the rest of the app to avoid a flash */
body.splash-active > *:not(#splash):not(#ptr-indicator) {
  opacity: 0;
  pointer-events: none;
}

body:not(.splash-active) > *:not(#splash) {
  opacity: 1;
  transition: opacity 0.5s ease;
}

/* Honor reduced motion */
@media (prefers-reduced-motion: reduce) {
  .splash-icon,
  .splash-title,
  .splash-dots,
  .splash-tagline {
    animation: none !important;
  }
  .splash-dots span {
    animation: none !important;
    opacity: 0.8;
  }
}

/* ============================================================
   Sidebar
   ============================================================ */
.menu-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.15s ease;
}

.menu-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.menu-btn:active {
  transform: scale(0.95);
}

.menu-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- Backdrop ---- */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  z-index: 200;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  cursor: pointer;
}

.sidebar-backdrop.open {
  opacity: 1;
  visibility: visible;
}

/* ---- Panel ---- */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100vh;
  max-width: 85vw;
  background: linear-gradient(180deg, #0a2540 0%, #1b4f8a 100%);
  color: #ffffff;
  z-index: 210;
  transform: translateX(-280px);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.35);
  /* Honor iOS safe areas on devices with notches/home indicators */
  padding-top: max(1.25rem, env(safe-area-inset-top));
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  padding-left: max(1.25rem, env(safe-area-inset-left));
  padding-right: 1.25rem;
}

.sidebar.open {
  transform: translateX(0);
}

/* ---- Header section ---- */
.sidebar-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.3));
}

.sidebar-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.sidebar-name {
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.01em;
}

.sidebar-version {
  display: inline-block;
  align-self: flex-start;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
}

/* ---- Divider ---- */
.sidebar-divider {
  margin: 1rem 0 0.75rem;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* ---- Nav links ---- */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
}

.sidebar-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: background 0.15s ease, transform 0.15s ease;
}

.sidebar-link:hover,
.sidebar-link:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.sidebar-link:active {
  transform: scale(0.98);
}

.sidebar-link i.ti {
  font-size: 1.2rem;
  width: 22px;
  text-align: center;
  opacity: 0.92;
}

/* ---- Footer ---- */
.sidebar-footer {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 11px;
  color: #ffffff;
  opacity: 0.3;
  letter-spacing: 0.02em;
}

/* When the sidebar is open, lock the body scroll */
body.sidebar-open {
  overflow: hidden;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar-backdrop {
    transition: none !important;
  }
}

/* ============================================================
   Sidebar + navbar fixes
   ============================================================ */

/* The sidebar and its backdrop must always be fixed to the viewport,
   even with a dark-mode body or a flex body layout. !important is used
   to override the broad `body.dark > *` rule that sets position:relative. */
#sidebar,
#sidebar-backdrop,
#splash,
#ptr-indicator {
  position: fixed !important;
}

/* Body uses display:flex on small screens to center content. The sidebar
   should ignore flex layout and span the full viewport height. */
#sidebar {
  align-self: stretch;
  margin: 0;
}

/* ---------- Navbar fixes ---------- */
.app-navbar {
  /* Allow children to shrink; on narrow widths the brand will collapse. */
  flex-wrap: nowrap;
  gap: 0.5rem;
}

.app-brand {
  /* Center the brand block within the navbar */
  margin: 0 auto;
  /* Allow the name to truncate cleanly if there isn't room */
  min-width: 0;
  overflow: hidden;
}

.app-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* On narrow phones, drop the brand text — keep just the logo */
@media (max-width: 480px) {
  .app-name {
    display: none;
  }

  .app-brand {
    margin: 0;
  }

  .app-navbar {
    justify-content: space-between;
    padding: 10px 14px;
  }

  /* Tighten the action buttons too */
  .app-nav-actions {
    gap: 6px;
  }

  #unit-toggle {
    padding: 0.35rem 0.65rem;
    font-size: 0.85rem;
  }

  #theme-toggle {
    width: 36px;
    height: 36px;
  }
}

/* The body's flex column centering is fine for content, but the navbar
   should always span the full width regardless of body padding. */
body {
  align-items: stretch;
}

main {
  margin: 0 auto;
  width: 100%;
  max-width: var(--container-max);
}

footer {
  margin: 2rem auto 0;
  text-align: center;
}

/* ============================================================
   Desktop layout polish
   ============================================================ */

/* Widen the container on desktop for a more spacious feel */
@media (min-width: 768px) {
  :root {
    --container-max: 820px;
  }

  main {
    max-width: var(--container-max);
  }

  /* The weather card should show all stats without clipping */
  #weather-card {
    min-width: 0;
    overflow: visible;
  }

  /* Stats grid: ensure values don't get cut off */
  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  .stat-value {
    font-size: 0.95rem;
  }

  /* AQI and tips widgets should fill their column */
  #aqi-widget,
  #tips-widget {
    width: 100%;
    min-width: 0;
  }

  /* Hourly strip: give it more room and show more cards */
  .hourly-strip {
    gap: 10px;
  }

  .hour-card {
    flex: 0 0 72px;
    width: 72px;
  }

  /* 5-day forecast: evenly distributed */
  #forecast {
    gap: 0.75rem;
  }

  #forecast > li {
    padding: 0.85rem 0.6rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --container-max: 960px;
  }
}

/* ---------- Search bar geo button fix ---------- */
/* The geo button inside the search pill was too large on desktop */
.search-pill .icon-btn {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

.search-pill {
  max-width: 100%;
}

/* ---------- Weather icon sizing fix ---------- */
/* Ensure the weather icon always renders at a visible size */
#weather-icon {
  width: 96px;
  height: 96px;
  min-width: 96px;
  min-height: 96px;
  object-fit: contain;
}

@media (min-width: 768px) {
  #weather-icon {
    width: 112px;
    height: 112px;
    min-width: 112px;
    min-height: 112px;
  }
}

/* ---------- Forecast icon sizing ---------- */
#forecast img {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  object-fit: contain;
}

/* ---------- Navbar full-width on desktop ---------- */
.app-navbar {
  width: 100%;
  max-width: 100%;
}

/* ---------- Footer update ---------- */
footer {
  width: 100%;
  max-width: var(--container-max);
}

/* ============================================================
   DEFINITIVE DESKTOP LAYOUT (overrides all previous rules)
   ============================================================ */

/* Hide the weather card's empty state (broken image, empty stats) */
#weather-card figure img[hidden] {
  display: none;
}

/* On initial load, hide sections that have no data yet */
#weather-card:not(:has(#city-name:not(:empty))) .sun-arc,
#weather-card:not(:has(#city-name:not(:empty))) .stats-grid {
  opacity: 0.4;
}

/* ---- Single-column centered layout (default, up to 767px) ---- */
main {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1rem;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 1rem;
}

main > * {
  width: 100%;
}

/* ---- Desktop: 768px+ ---- */
@media (min-width: 768px) {
  main {
    display: grid !important;
    max-width: 900px !important;
    padding: 0 1.5rem;
    grid-template-columns: 1fr 320px;
    grid-template-rows: auto;
    grid-template-areas:
      "search    search"
      "card      sidebar-r"
      "hourly    hourly"
      "forecast  forecast";
    gap: 1.25rem;
    align-items: start;
  }

  /* Search section spans full width */
  .search-section {
    grid-area: search;
  }

  /* Weather card on the left */
  #weather-card {
    grid-area: card;
  }

  /* AQI + Tips stacked on the right */
  #aqi-widget {
    grid-area: sidebar-r;
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    align-self: start;
  }

  #tips-widget {
    grid-area: sidebar-r;
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    align-self: end;
  }

  /* If both AQI and tips exist, stack them in the right column */
  main:has(#aqi-widget:not([hidden])):has(#tips-widget:not([hidden])) {
    grid-template-areas:
      "search    search"
      "card      aqi"
      "card      tips"
      "hourly    hourly"
      "forecast  forecast";
  }

  main:has(#aqi-widget:not([hidden])):has(#tips-widget:not([hidden])) #aqi-widget {
    grid-area: aqi;
    grid-row: auto;
    grid-column: auto;
  }

  main:has(#aqi-widget:not([hidden])):has(#tips-widget:not([hidden])) #tips-widget {
    grid-area: tips;
    grid-row: auto;
    grid-column: auto;
  }

  /* Hourly and forecast span full width */
  section[aria-label="Hourly forecast"] {
    grid-area: hourly;
  }

  section[aria-label="5-day forecast"] {
    grid-area: forecast;
  }

  /* 5-day forecast as a 5-column grid */
  #forecast {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 0.75rem;
    overflow: visible;
  }

  #forecast > li {
    min-width: 0;
    width: 100%;
  }

  /* History pills */
  #history {
    grid-column: 1 / -1;
  }

  /* Error message */
  #error-msg {
    grid-column: 1 / -1;
  }
}

/* ---- Wide desktop: 1024px+ ---- */
@media (min-width: 1024px) {
  main {
    max-width: 1000px !important;
    grid-template-columns: 1fr 340px;
    gap: 1.5rem;
  }
}

/* ---- Ensure the navbar always spans full width ---- */
.app-navbar {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  max-width: none !important;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ============================================================
   Empty state: show placeholder styling until data loads
   ============================================================ */
#weather-card:not(.has-data) {
  opacity: 0.7;
}

#weather-card:not(.has-data) .stats-grid {
  opacity: 0.5;
}

/* ============================================================
   Navbar visibility + auto-hide on scroll + desktop width fix
   ============================================================ */

/* Make navbar actually visible against the gradient */
.app-navbar {
  background: rgba(0, 20, 50, 0.65) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Auto-hide state (toggled by JS on scroll down) */
.app-navbar.nav-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* ---- Weather card: wider on desktop, better text contrast ---- */
@media (min-width: 768px) {
  #weather-card {
    max-width: 100%;
    min-height: 380px;
  }

  main {
    max-width: 960px !important;
    grid-template-columns: 1fr 300px !important;
  }
}

@media (min-width: 1200px) {
  main {
    max-width: 1100px !important;
    grid-template-columns: 1fr 340px !important;
  }
}

/* Text inside the weather card needs better contrast on light backgrounds */
#weather-card #city-name,
#weather-card #temperature,
#weather-card #condition {
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

#weather-card #city-name {
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
}

#weather-card #temperature {
  font-size: clamp(3rem, 2rem + 4vw, 5rem);
  font-weight: 200;
}

#weather-card #condition {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
  opacity: 0.9;
}

/* Stat labels and values need contrast too */
.stat-label,
.stat-value {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ============================================================
   FINAL FIX: Navbar flush to top + card full width
   These rules use !important to override all earlier conflicts.
   ============================================================ */

/* Remove body top padding so navbar sits flush at the top */
body {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Navbar: flush to viewport top, full width, no gaps */
.app-navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  z-index: 100 !important;
}

/* Push main content below the fixed navbar */
main {
  margin-top: 70px !important;
}

/* ---- Weather card: full width of its container ---- */
#weather-card {
  width: 100% !important;
  max-width: 100% !important;
}

/* ---- Desktop: wider main container ---- */
@media (min-width: 768px) {
  main {
    max-width: 880px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 2rem !important;
  }
}

@media (min-width: 1024px) {
  main {
    max-width: 1000px !important;
  }
}

@media (min-width: 1280px) {
  main {
    max-width: 1100px !important;
  }
}

/* ============================================================
   Placeholder/empty state styling for all widgets
   ============================================================ */
#aqi-widget:not(.has-data),
#tips-widget:not(.has-data),
section[aria-label="Hourly forecast"]:not(.has-data),
section[aria-label="5-day forecast"]:not(.has-data) {
  opacity: 0.5;
}

/* When data loads, full opacity with a smooth transition */
#aqi-widget.has-data,
#tips-widget.has-data,
section[aria-label="Hourly forecast"].has-data,
section[aria-label="5-day forecast"].has-data,
#weather-card.has-data {
  opacity: 1;
  transition: opacity 0.4s ease;
}

/* ============================================================
   Navbar inline search
   ============================================================ */
.nav-search {
  flex: 1;
  max-width: 360px;
  position: relative;
}

.nav-search-form {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 6px 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.nav-search-form:focus-within {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

.nav-search-form #city-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: #ffffff;
  font-size: 0.9rem;
  outline: none;
  border-radius: 0;
  box-shadow: none;
}

.nav-search-form #city-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.nav-search-icon,
.nav-geo-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-search-icon:hover,
.nav-geo-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Autocomplete dropdown positioned below the navbar search */
.nav-search .autocomplete {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
}

/* ---- History section with clear button ---- */
.history-section {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  width: 100%;
}

.history-section #history {
  flex: 1;
  min-width: 0;
}

.clear-history-btn {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  min-height: 32px;
  transition: background 0.2s ease, color 0.2s ease;
}

.clear-history-btn:hover {
  background: rgba(220, 53, 69, 0.3);
  color: #ffffff;
  border-color: rgba(220, 53, 69, 0.5);
}

.clear-history-btn[hidden] {
  display: none;
}

/* On mobile, hide the "Weather View" text in navbar to make room for search */
@media (max-width: 600px) {
  .app-name {
    display: none !important;
  }
  .nav-search {
    max-width: none;
  }
}

/* ============================================================
   SEARCH BAR ALIGNMENT FIX (final override)
   ============================================================ */

/* Navbar layout: hamburger | search (centered, flexible) | actions */
.app-navbar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 16px !important;
}

/* Hamburger stays fixed size on the left */
.menu-btn {
  flex-shrink: 0;
}

/* Brand: hide on all sizes since search takes priority in the navbar */
.app-brand {
  display: none !important;
}

/* Search takes all available center space */
.nav-search {
  flex: 1 !important;
  max-width: 480px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
}

.nav-search-form {
  width: 100% !important;
}

.nav-search-form #city-input {
  flex: 1 !important;
  min-width: 0 !important;
  font-size: 0.88rem !important;
}

/* Action buttons stay fixed size on the right */
.app-nav-actions {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* ---- Mobile: tighter spacing ---- */
@media (max-width: 480px) {
  .app-navbar {
    gap: 6px !important;
    padding: 8px 10px !important;
  }

  .nav-search {
    max-width: none !important;
  }

  .nav-search-form {
    height: 36px !important;
    padding: 0 4px 0 10px !important;
  }

  .nav-search-form #city-input {
    font-size: 0.82rem !important;
  }

  .nav-search-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    display: none !important; /* hide search icon on mobile to save space */
  }

  .nav-geo-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
  }

  .menu-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  #unit-toggle {
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    font-size: 0.8rem !important;
  }

  #theme-toggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
}

/* ---- Desktop: centered search with max width ---- */
@media (min-width: 768px) {
  .nav-search {
    max-width: 420px !important;
  }

  .nav-search-form {
    height: 42px !important;
  }
}

/* ============================================================
   DEFINITIVE SEARCH BAR + DESKTOP LAYOUT FIX
   ============================================================ */

/* Force the search form into a single horizontal row — no wrapping */
.nav-search-form {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  overflow: hidden !important;
}

/* The geo button must stay inline, never wrap to a new line */
.nav-geo-btn {
  flex-shrink: 0 !important;
  order: 2 !important;
}

.nav-search-icon {
  flex-shrink: 0 !important;
  order: 0 !important;
}

.nav-search-form #city-input {
  order: 1 !important;
  flex: 1 1 0% !important;
  min-width: 60px !important;
}

/* ---- Desktop layout: proper grid ---- */
@media (min-width: 768px) {
  main {
    display: grid !important;
    grid-template-columns: 1fr 320px !important;
    grid-template-areas:
      "history   history"
      "card      right"
      "hourly    hourly"
      "forecast  forecast" !important;
    gap: 1.25rem !important;
    align-items: start !important;
    max-width: 960px !important;
    margin: 80px auto 0 !important;
    padding: 0 1.5rem !important;
  }

  .history-section {
    grid-area: history !important;
  }

  #weather-card {
    grid-area: card !important;
    width: 100% !important;
  }

  /* Stack AQI and Tips in the right column */
  #aqi-widget {
    grid-area: right !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start !important;
  }

  #tips-widget {
    grid-column: 2 !important;
    grid-row: 3 !important;
    align-self: start !important;
  }

  section[aria-label="Hourly forecast"] {
    grid-area: hourly !important;
    grid-column: 1 / -1 !important;
  }

  section[aria-label="5-day forecast"] {
    grid-area: forecast !important;
    grid-column: 1 / -1 !important;
  }

  /* When tips exists, push hourly/forecast down */
  main {
    grid-template-rows: auto auto auto auto auto !important;
  }

  /* Error message spans full width */
  #error-msg {
    grid-column: 1 / -1 !important;
  }
}

@media (min-width: 1100px) {
  main {
    max-width: 1060px !important;
    grid-template-columns: 1fr 340px !important;
  }
}

/* ============================================================
   MOBILE GEO BUTTON + DESKTOP NAVBAR FINAL FIX
   ============================================================ */

/* ---- Geo button: small circle inside the search pill ---- */
.nav-geo-btn {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.nav-geo-btn svg {
  width: 16px !important;
  height: 16px !important;
}

/* ---- Brand: show banner on desktop, icon on mobile ---- */
.app-brand {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
}

.app-banner {
  display: none; /* hidden on mobile */
  height: 26px;
  width: auto;
}

.app-logo {
  width: 28px !important;
  height: 28px !important;
}

/* ---- DESKTOP NAVBAR (768px+) ---- */
@media (min-width: 768px) {
  /* Show brand with banner, hide icon */
  .app-brand {
    display: flex !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }

  .app-banner {
    display: block !important;
  }

  .app-logo {
    display: block !important;
    width: 30px !important;
    height: 30px !important;
  }

  /* Navbar layout: [hamburger] [brand/banner] ... [search] [actions] */
  .app-navbar {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 10px 24px !important;
  }

  /* Search moves to the right, fixed width */
  .nav-search {
    flex: 0 0 auto !important;
    width: 280px !important;
    max-width: 280px !important;
    margin: 0 0 0 auto !important; /* push to right */
  }

  .nav-search-form {
    height: 38px !important;
    padding: 0 6px 0 12px !important;
    gap: 6px !important;
  }

  .nav-search-form #city-input {
    font-size: 0.88rem !important;
  }

  /* Geo button stays compact */
  .nav-geo-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
  }

  /* Search icon stays compact */
  .nav-search-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    display: flex !important;
  }

  /* Actions stay on the far right */
  .app-nav-actions {
    margin-left: 0 !important;
    flex-shrink: 0 !important;
  }
}

/* ---- MOBILE: hide brand, search takes center ---- */
@media (max-width: 767px) {
  .app-brand {
    display: none !important;
  }

  .nav-search {
    flex: 1 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .nav-search-form {
    height: 38px !important;
    padding: 0 4px 0 10px !important;
    gap: 4px !important;
  }

  /* Hide the search magnifier icon on mobile to save space */
  .nav-search-icon {
    display: none !important;
  }

  .nav-geo-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }

  .nav-geo-btn svg {
    width: 14px !important;
    height: 14px !important;
  }
}

/* ============================================================
   Desktop brand: icon + "Weather View" + tagline (text-based)
   ============================================================ */

/* Icon size bump */
.app-logo {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

/* Remove the old banner image rule */
.app-banner {
  display: none !important;
}

/* Brand text block: name on top, tagline below */
.brand-text {
  display: none; /* hidden on mobile */
  flex-direction: column;
  gap: 1px;
  line-height: 1.2;
}

.brand-name {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.02em;
}

.brand-tagline {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* Show brand text only on desktop */
@media (min-width: 768px) {
  .brand-text {
    display: flex !important;
  }

  .app-brand {
    display: flex !important;
    gap: 10px !important;
  }
}

/* ============================================================
   DESKTOP SEARCH BAR: icon left, input center, geo circle right
   ============================================================ */
@media (min-width: 768px) {
  .nav-search {
    width: 300px !important;
    max-width: 300px !important;
    flex: 0 0 300px !important;
  }

  .nav-search-form {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    height: 40px !important;
    padding: 0 5px 0 5px !important;
    gap: 0 !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
  }

  /* Search magnifier icon: small circle on the left */
  .nav-search-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin-right: 6px !important;
  }

  .nav-search-icon svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* Input fills the middle */
  .nav-search-form #city-input {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 0 6px !important;
    font-size: 0.88rem !important;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
  }

  /* Geo button: small circle on the right */
  .nav-geo-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin-left: 4px !important;
    aspect-ratio: 1 / 1 !important;
  }

  .nav-geo-btn svg {
    width: 14px !important;
    height: 14px !important;
  }
}

/* ============================================================
   NAVBAR SEARCH: icon left, input center, geo circle right
   ============================================================ */

/* The search form pill container */
.nav-search-form {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  height: 40px !important;
  padding: 0 5px 0 5px !important;
  gap: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  overflow: hidden !important;
}

/* Search magnifier icon — small circle on the left */
.nav-search-icon {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin-right: 6px !important;
}

.nav-search-icon svg {
  width: 14px !important;
  height: 14px !important;
}

/* Input field — takes remaining space */
.nav-search-form #city-input {
  flex: 1 1 0% !important;
  min-width: 50px !important;
  height: 100% !important;
  padding: 0 6px !important;
  border: none !important;
  background: transparent !important;
  color: #ffffff !important;
  font-size: 0.88rem !important;
  outline: none !important;
}

/* Geo button — small circle on the right */
.nav-geo-btn {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin-left: 4px !important;
}

.nav-geo-btn svg {
  width: 14px !important;
  height: 14px !important;
}

/* Hover states */
.nav-search-icon:hover,
.nav-geo-btn:hover {
  background: rgba(255, 255, 255, 0.25) !important;
}

/* ============================================================
   Weather icon: better rendering for OWM icons
   ============================================================ */
#weather-card figure {
  position: relative;
}

#weather-icon {
  width: 100px !important;
  height: 100px !important;
  min-width: 100px !important;
  min-height: 100px !important;
  object-fit: contain !important;
  border-radius: 50%;
  padding: 0;
  background: none;
}

@media (min-width: 768px) {
  #weather-icon {
    width: 120px !important;
    height: 120px !important;
    min-width: 120px !important;
    min-height: 120px !important;
  }
}

/* ============================================================
   RESPONSIVE: All devices — mobile, tablet, desktop
   This is the FINAL responsive override. Single source of truth.
   ============================================================ */

/* ---- Base: single column for everything under 900px ---- */
@media (max-width: 899px) {
  main {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
    max-width: 600px !important;
    margin: 70px auto 0 !important;
    padding: 0 1rem !important;
    width: 100% !important;
  }

  main > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* AQI, tips — full width stacked */
  #aqi-widget,
  #tips-widget {
    grid-column: unset !important;
    grid-row: unset !important;
  }

  /* Hourly strip scrolls horizontally */
  .hourly-strip {
    overflow-x: auto !important;
  }

  /* Forecast: 2-col grid on tablets, scrollable row on small phones */
  #forecast {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
    gap: 0.6rem !important;
    overflow: visible !important;
  }

  #forecast > li {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ---- Small phones (under 480px): tighter spacing ---- */
@media (max-width: 479px) {
  main {
    max-width: 100% !important;
    padding: 0 0.75rem !important;
    margin-top: 60px !important;
  }

  #forecast {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---- Tablets (480px - 899px): comfortable single column ---- */
@media (min-width: 480px) and (max-width: 899px) {
  main {
    max-width: 640px !important;
    padding: 0 1.5rem !important;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  #forecast {
    grid-template-columns: repeat(5, 1fr) !important;
  }

  .hourly-strip {
    gap: 10px !important;
  }
}

/* ---- Desktop (900px+): 2-column grid ---- */
@media (min-width: 900px) {
  main {
    display: grid !important;
    grid-template-columns: 1fr 320px !important;
    grid-template-rows: auto !important;
    gap: 1.25rem !important;
    max-width: 1000px !important;
    margin: 80px auto 0 !important;
    padding: 0 2rem !important;
    align-items: start !important;
  }

  /* History spans full width */
  .history-section {
    grid-column: 1 / -1 !important;
  }

  /* Error spans full width */
  #error-msg {
    grid-column: 1 / -1 !important;
  }

  /* Weather card: left column */
  #weather-card {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  /* AQI: right column, row 2 */
  #aqi-widget {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start !important;
  }

  /* Tips: right column, row 3 */
  #tips-widget {
    grid-column: 2 !important;
    grid-row: 3 !important;
    align-self: start !important;
  }

  /* Hourly: full width */
  section[aria-label="Hourly forecast"] {
    grid-column: 1 / -1 !important;
  }

  /* Forecast: full width, 5-col grid */
  section[aria-label="5-day forecast"] {
    grid-column: 1 / -1 !important;
  }

  #forecast {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 0.75rem !important;
    overflow: visible !important;
  }

  #forecast > li {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ---- Wide desktop (1100px+) ---- */
@media (min-width: 1100px) {
  main {
    max-width: 1100px !important;
    grid-template-columns: 1fr 360px !important;
  }
}

/* ---- Ultra-wide (1400px+) ---- */
@media (min-width: 1400px) {
  main {
    max-width: 1200px !important;
  }
}

/* ============================================================
   TABLET FIX ONLY: force single column at 900-1023px
   Does not affect mobile (<900px) or desktop (1024px+)
   ============================================================ */
@media (min-width: 900px) and (max-width: 1023px) {
  main {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    max-width: 700px !important;
    margin: 80px auto 0 !important;
  }

  main > * {
    width: 100% !important;
    max-width: 100% !important;
    grid-column: unset !important;
    grid-row: unset !important;
  }

  #aqi-widget,
  #tips-widget {
    grid-column: unset !important;
    grid-row: unset !important;
  }

  #forecast {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}

/* ============================================================
   TABLET (iPad) FIX: 768px - 1099px
   Grid with proper placement, no overlaps
   ============================================================ */
@media (min-width: 768px) and (max-width: 1099px) {
  main {
    display: grid !important;
    grid-template-columns: 1fr 260px !important;
    grid-template-rows: auto auto auto auto auto !important;
    gap: 1rem !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 70px auto 0 !important;
    padding: 0 1rem !important;
    align-items: start !important;
  }

  /* Row 1: history full width */
  .history-section {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  /* Row 2: weather card left, AQI right */
  #weather-card {
    grid-column: 1 !important;
    grid-row: 2 / 4 !important; /* span 2 rows so it aligns with AQI + tips */
    width: 100% !important;
  }

  #aqi-widget {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Row 3: tips in right column */
  #tips-widget {
    grid-column: 2 !important;
    grid-row: 3 !important;
    align-self: start !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Row 4: hourly — FULL WIDTH edge to edge */
  section[aria-label="Hourly forecast"] {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .hourly-strip {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Row 5: forecast — FULL WIDTH */
  section[aria-label="5-day forecast"] {
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
    width: 100% !important;
  }

  #forecast {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    width: 100% !important;
  }

  /* Error message full width */
  #error-msg {
    grid-column: 1 / -1 !important;
  }
}

/* ============================================================
   TABLET: Hourly strip full width stretch to right edge
   ============================================================ */
@media (min-width: 768px) and (max-width: 1099px) {
  section[aria-label="Hourly forecast"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
  }

  .hourly-strip {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    gap: 8px !important;
  }

  .hour-card {
    flex: 1 1 0% !important;
    min-width: 60px !important;
    width: auto !important;
  }
}

/* ============================================================
   Weather emojis
   ============================================================ */
.weather-emoji {
  font-size: 72px;
  line-height: 1;
  display: block;
  text-align: center;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

@media (min-width: 768px) {
  .weather-emoji {
    font-size: 88px;
  }
}

.hour-emoji {
  font-size: 22px;
  line-height: 1;
  display: block;
  text-align: center;
}

.forecast-emoji {
  font-size: 32px;
  line-height: 1;
  display: block;
  text-align: center;
  margin: 0.25rem 0;
}

/* ============================================================
   DESKTOP: Tips in right column + hourly/forecast full width
   ============================================================ */
@media (min-width: 900px) {
  main {
    grid-template-columns: 1fr 320px !important;
    grid-template-rows: auto !important;
  }

  /* Row 1: history */
  .history-section {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  /* Row 2-3: weather card spans left, AQI top-right */
  #weather-card {
    grid-column: 1 !important;
    grid-row: 2 / 5 !important;
  }

  /* AQI: right column row 2 */
  #aqi-widget {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start !important;
  }

  /* Tips (What to Wear): right column row 3 — moved UP next to card */
  #tips-widget {
    grid-column: 2 !important;
    grid-row: 3 !important;
    align-self: start !important;
  }

  /* Hourly: full width, row 5 */
  section[aria-label="Hourly forecast"] {
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
  }

  /* Forecast: full width, row 6 */
  section[aria-label="5-day forecast"] {
    grid-column: 1 / -1 !important;
    grid-row: 6 !important;
  }

  /* Make hourly and forecast stretch full width */
  .hourly-strip {
    width: 100% !important;
    gap: 10px !important;
  }

  .hour-card {
    flex: 1 1 0% !important;
    min-width: 70px !important;
  }

  #forecast {
    width: 100% !important;
  }

  #forecast > li {
    flex: 1 !important;
    min-width: 0 !important;
  }
}

@media (min-width: 1100px) {
  main {
    grid-template-columns: 1fr 360px !important;
  }

  .hour-card {
    min-width: 80px !important;
  }
}

/* ============================================================
   Hourly cards: same size as 5-day forecast cards
   ============================================================ */
.hour-card {
  padding: 0.85rem 0.6rem !important;
  min-height: 110px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
}

.hour-emoji {
  font-size: 28px !important;
  margin: 0.2rem 0 !important;
}

.hour-time {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
}

.hour-temp {
  font-size: 1rem !important;
  font-weight: 600 !important;
}

/* ============================================================
   DESKTOP: Wider layout — card + right column fill viewport
   ============================================================ */
@media (min-width: 900px) {
  main {
    max-width: 1200px !important;
    padding: 0 2.5rem !important;
    grid-template-columns: 1fr 380px !important;
    gap: 1.5rem !important;
  }
}

@media (min-width: 1100px) {
  main {
    max-width: 1300px !important;
    grid-template-columns: 1fr 400px !important;
  }
}

@media (min-width: 1400px) {
  main {
    max-width: 1440px !important;
    padding: 0 3rem !important;
    grid-template-columns: 1fr 420px !important;
  }
}

/* ============================================================
   Geo location toast notification
   ============================================================ */
.geo-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  opacity: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  max-width: 420px;
  width: calc(100% - 2rem);
  border-radius: 14px;
  background: rgba(10, 37, 64, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  color: #ffffff;
  font-size: 0.88rem;
  line-height: 1.4;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s ease;
}

.geo-toast.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.geo-toast.hiding {
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
}

.geo-toast-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  animation: geo-toast-bounce 1.5s ease infinite;
}

@keyframes geo-toast-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.geo-toast-text {
  flex: 1;
}

.geo-toast-text strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  font-size: 0.85rem;
  margin: 0 2px;
  vertical-align: middle;
}

.geo-toast-close {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.geo-toast-close:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .geo-toast-icon {
    animation: none !important;
  }
}

/* ============================================================
   LIGHT MODE: softer, easier on the eyes
   ============================================================ */
body:not(.dark) {
  background: linear-gradient(180deg, #e8f4f8 0%, #d4e8f0 50%, #c5dde8 100%) !important;
  background-attachment: fixed !important;
  animation: none !important;
}

/* Override the weather gradient backgrounds in light mode */
body:not(.dark).bg-sunny {
  background: linear-gradient(135deg, #fef9e7 0%, #fdeaa8 35%, #b8e6f0 65%, #87ceeb 100%) !important;
  animation: none !important;
}

body:not(.dark).bg-night {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 50%, #4a6fa5 100%) !important;
  animation: none !important;
}

body:not(.dark).bg-cloudy {
  background: linear-gradient(135deg, #dfe6e9 0%, #b2bec3 55%, #a4b0be 100%) !important;
  animation: none !important;
}

body:not(.dark).bg-rainy {
  background: linear-gradient(135deg, #c8d6e5 0%, #8395a7 55%, #576574 100%) !important;
  animation: none !important;
}

body:not(.dark).bg-snowy {
  background: linear-gradient(135deg, #f5f6fa 0%, #dcdde1 55%, #c8d6e5 100%) !important;
  animation: none !important;
}

body:not(.dark).bg-stormy {
  background: linear-gradient(135deg, #636e72 0%, #4a5568 50%, #2d3748 100%) !important;
  animation: none !important;
}

/* Cards in light mode: softer glass with dark text */
body:not(.dark) #weather-card,
body:not(.dark) #aqi-widget,
body:not(.dark) #tips-widget,
body:not(.dark) .hour-card,
body:not(.dark) #forecast > li {
  background: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Text in light mode: dark for readability */
body:not(.dark) #weather-card #city-name,
body:not(.dark) #weather-card #temperature,
body:not(.dark) #weather-card #condition,
body:not(.dark) .stat-label,
body:not(.dark) .stat-value,
body:not(.dark) .hour-time,
body:not(.dark) .hour-temp,
body:not(.dark) #forecast .day,
body:not(.dark) #forecast .temp,
body:not(.dark) .aqi-label,
body:not(.dark) .aqi-title,
body:not(.dark) .aqi-pill-label,
body:not(.dark) .aqi-pill-value,
body:not(.dark) .aqi-pill-unit,
body:not(.dark) .tips-label,
body:not(.dark) .tip-pill,
body:not(.dark) .section-title,
body:not(.dark) section[aria-label="5-day forecast"] h2,
body:not(.dark) .sun-times,
body:not(.dark) #sunrise-time,
body:not(.dark) #sunset-time,
body:not(.dark) .sun-label {
  color: #1a2a3a !important;
  text-shadow: none !important;
}

/* Slightly muted secondary text */
body:not(.dark) #weather-card #condition,
body:not(.dark) .stat-label,
body:not(.dark) .aqi-pill-label,
body:not(.dark) .aqi-pill-unit,
body:not(.dark) .tips-label,
body:not(.dark) .sun-label,
body:not(.dark) .hour-time {
  color: #4a5568 !important;
}

/* Stat bars track in light mode */
body:not(.dark) .stat-bar {
  background: rgba(0, 0, 0, 0.08) !important;
}

/* Stat row tiles */
body:not(.dark) .stat-row {
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* AQI pills */
body:not(.dark) .aqi-pill {
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Tip pills */
body:not(.dark) .tip-pill {
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #1a2a3a !important;
}

/* History pills */
body:not(.dark) .history-pill {
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #1a2a3a !important;
}

/* Navbar in light mode */
body:not(.dark) .app-navbar {
  background: rgba(255, 255, 255, 0.85) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

body:not(.dark) .app-navbar .brand-name,
body:not(.dark) .app-navbar .brand-tagline {
  color: #1a2a3a !important;
}

body:not(.dark) .app-navbar .brand-tagline {
  color: #64748b !important;
}

body:not(.dark) .menu-btn,
body:not(.dark) #unit-toggle,
body:not(.dark) #theme-toggle {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #1a2a3a !important;
}

body:not(.dark) .nav-search-form {
  background: rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

body:not(.dark) .nav-search-form #city-input {
  color: #1a2a3a !important;
}

body:not(.dark) .nav-search-form #city-input::placeholder {
  color: #64748b !important;
}

body:not(.dark) .nav-search-icon,
body:not(.dark) .nav-geo-btn {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #1a2a3a !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Sun arc in light mode */
body:not(.dark) #sun-arc-bg {
  stroke: rgba(0, 0, 0, 0.1) !important;
}

/* Clear history button */
body:not(.dark) .clear-history-btn {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #4a5568 !important;
}

/* Footer */
body:not(.dark) footer {
  color: #4a5568 !important;
}

/* ============================================================
   LIGHT MODE: All section cards white like the weather card
   ============================================================ */
body:not(.dark) section[aria-label="Hourly forecast"],
body:not(.dark) section[aria-label="5-day forecast"] {
  background: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  padding: 1.25rem !important;
}

/* Hourly cards inside the white section — subtle inner tiles */
body:not(.dark) .hour-card {
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: none !important;
}

/* Forecast cards inside the white section — subtle inner tiles */
body:not(.dark) #forecast > li {
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: none !important;
}

/* Section titles inside the white cards */
body:not(.dark) .section-title,
body:not(.dark) section[aria-label="5-day forecast"] h2 {
  color: #1a2a3a !important;
}

/* ============================================================
   LIGHT MODE: Make ALL cards solid white like the weather card
   ============================================================ */
body:not(.dark) #aqi-widget,
body:not(.dark) #tips-widget,
body:not(.dark) section[aria-label="Hourly forecast"],
body:not(.dark) section[aria-label="5-day forecast"] {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06) !important;
}

body:not(.dark) #weather-card {
  background: rgba(255, 255, 255, 0.95) !important;
}

/* ============================================================
   LIGHT MODE: All card text dark and clearly visible
   ============================================================ */
body:not(.dark) #aqi-widget,
body:not(.dark) #aqi-widget *,
body:not(.dark) #tips-widget,
body:not(.dark) #tips-widget *,
body:not(.dark) section[aria-label="Hourly forecast"],
body:not(.dark) section[aria-label="Hourly forecast"] *,
body:not(.dark) section[aria-label="5-day forecast"],
body:not(.dark) section[aria-label="5-day forecast"] * {
  color: #1a2a3a !important;
  text-shadow: none !important;
}

/* Secondary/muted text slightly lighter */
body:not(.dark) .aqi-title,
body:not(.dark) .aqi-pill-unit,
body:not(.dark) .tips-label,
body:not(.dark) .hour-time,
body:not(.dark) .section-title {
  color: #4a5568 !important;
}

/* AQI badge text stays white (it's on a colored background) */
body:not(.dark) .aqi-badge,
body:not(.dark) .aqi-badge * {
  color: #ffffff !important;
}

/* ============================================================
   FIX: Hide sidebar completely when closed (no bleed/shadow)
   ============================================================ */
.sidebar:not(.open) {
  transform: translateX(-100%) !important;
  box-shadow: none !important;
  visibility: hidden !important;
}

.sidebar.open {
  visibility: visible !important;
  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.35) !important;
}

/* ============================================================
   ERROR TOAST: improved animation + positioning
   ============================================================ */
#error-msg {
  position: fixed !important;
  top: 80px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-20px) !important;
  opacity: 0 !important;
  z-index: 150 !important;
  width: auto !important;
  max-width: 420px !important;
  min-width: 280px !important;
  padding: 12px 20px !important;
  border-radius: 12px !important;
  background: rgba(220, 53, 69, 0.95) !important;
  color: #ffffff !important;
  font-size: 0.88rem !important;
  text-align: center !important;
  box-shadow: 0 8px 32px rgba(220, 53, 69, 0.3) !important;
  pointer-events: none !important;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.35s ease !important;
}

#error-msg:not([hidden]) {
  transform: translateX(-50%) translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#error-msg[hidden] {
  display: block !important;
  visibility: hidden !important;
}

/* ============================================================
   DESKTOP (768px+): Hide sidebar hamburger + geo toast
   ============================================================ */
@media (min-width: 768px) {
  /* Hide the geo location toast on desktop — not needed */
  .geo-toast {
    display: none !important;
  }

  /* Keep hamburger but optional — hide if you want cleaner desktop nav */
  /* .menu-btn { display: none !important; } */
}

/* ============================================================
   ERROR TOAST: slide from right, compact, non-blocking
   ============================================================ */
#error-msg {
  position: fixed !important;
  top: 80px !important;
  right: 16px !important;
  left: auto !important;
  transform: translateX(120%) !important;
  opacity: 0 !important;
  z-index: 150 !important;
  width: auto !important;
  max-width: 320px !important;
  min-width: 200px !important;
  padding: 10px 16px !important;
  border-radius: 10px !important;
  background: rgba(30, 30, 40, 0.88) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #f8d7da !important;
  font-size: 0.82rem !important;
  line-height: 1.4 !important;
  text-align: left !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2) !important;
  pointer-events: none !important;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s ease !important;
}

#error-msg:not([hidden]) {
  transform: translateX(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#error-msg[hidden] {
  display: block !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#error-msg p {
  margin: 0 !important;
}

/* ============================================================
   WEATHER ANIMATED THEMES — particles/effects per condition
   ============================================================ */

/* Container for weather particles */
#weather-particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Ensure main content stays above particles */
.app-navbar,
main,
footer {
  position: relative;
  z-index: 1;
}

/* ---- NIGHT: Shooting stars ---- */
.particle-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #ffffff;
  border-radius: 50%;
  opacity: 0;
  animation: star-shoot linear infinite;
}

@keyframes star-shoot {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-300px, 300px);
  }
}

/* Static twinkling stars */
.particle-twinkle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #ffffff;
  border-radius: 50%;
  animation: twinkle ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.9; }
}

/* ---- RAINY: Falling rain drops ---- */
.particle-rain {
  position: absolute;
  top: -20px;
  width: 2px;
  height: 18px;
  background: linear-gradient(to bottom, transparent, rgba(174, 214, 241, 0.6));
  border-radius: 0 0 2px 2px;
  animation: rain-fall linear infinite;
}

@keyframes rain-fall {
  0% {
    transform: translateY(-20px);
    opacity: 0.7;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0.3;
  }
}

/* ---- SNOWY: Drifting snowflakes ---- */
.particle-snow {
  position: absolute;
  top: -10px;
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: snow-fall linear infinite;
}

@keyframes snow-fall {
  0% {
    transform: translateY(-10px) translateX(0) rotate(0deg);
    opacity: 0.9;
  }
  100% {
    transform: translateY(100vh) translateX(40px) rotate(360deg);
    opacity: 0.4;
  }
}

/* ---- SUNNY: Floating light particles ---- */
.particle-sun {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255, 215, 0, 0.4);
  border-radius: 50%;
  animation: sun-float ease-in-out infinite;
}

@keyframes sun-float {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-30px) scale(1.3);
    opacity: 0.6;
  }
}

/* ---- STORMY: Lightning flashes ---- */
.particle-lightning {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.08);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  animation: lightning-flash 6s ease-in-out infinite;
}

@keyframes lightning-flash {
  0%, 92%, 100% { opacity: 0; }
  93% { opacity: 0.7; }
  94% { opacity: 0; }
  96% { opacity: 0.4; }
  97% { opacity: 0; }
}

/* ---- CLOUDY: Slow drifting shapes ---- */
.particle-cloud {
  position: absolute;
  width: 120px;
  height: 40px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 50px;
  animation: cloud-drift linear infinite;
}

@keyframes cloud-drift {
  0% {
    transform: translateX(-150px);
  }
  100% {
    transform: translateX(calc(100vw + 150px));
  }
}

/* Reduced motion: disable all particles */
@media (prefers-reduced-motion: reduce) {
  #weather-particles {
    display: none !important;
  }
}

/* ============================================================
   NIGHT THEME: Enhanced shooting stars
   ============================================================ */
.particle-star {
  width: 2px !important;
  height: 2px !important;
  background: #ffffff !important;
  border-radius: 50% !important;
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.6) !important;
}

/* Longer, brighter tail */
.particle-star::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.8), transparent);
  transform: rotate(45deg);
  transform-origin: left center;
}

@keyframes star-shoot {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
  }
  5% {
    opacity: 1;
    transform: translate(-10px, 10px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-400px, 400px) scale(0.3);
  }
}

/* ============================================================
   CANVAS-BASED WEATHER PARTICLES
   ============================================================ */
#weather-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Hide old DOM-based particles */
.particle-star,
.particle-twinkle,
.particle-rain,
.particle-snow,
.particle-sun,
.particle-lightning,
.particle-cloud {
  display: none !important;
}

/* ============================================================
   WEATHER CANVAS: Full visibility — ensure it's not hidden
   ============================================================ */
#weather-particles {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#weather-canvas {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ============================================================
   CLEAR BUTTON: visible in dark/night theme
   ============================================================ */
.clear-history-btn {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 600 !important;
  padding: 0.4rem 1rem !important;
  font-size: 0.78rem !important;
}

.clear-history-btn:hover {
  background: rgba(255, 80, 80, 0.3) !important;
  border-color: rgba(255, 80, 80, 0.5) !important;
  color: #ffffff !important;
}

/* In light mode, make it dark */
body:not(.dark) .clear-history-btn {
  background: rgba(0, 0, 0, 0.06) !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  color: #374151 !important;
}

body:not(.dark) .clear-history-btn:hover {
  background: rgba(220, 53, 69, 0.12) !important;
  border-color: rgba(220, 53, 69, 0.4) !important;
  color: #dc3545 !important;
}

/* ============================================================
   GEO TOAST: slide from right, professional aesthetic
   ============================================================ */
.geo-toast {
  position: fixed !important;
  bottom: auto !important;
  top: 80px !important;
  right: 16px !important;
  left: auto !important;
  transform: translateX(120%) !important;
  opacity: 0 !important;
  max-width: 320px !important;
  width: auto !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  background: rgba(15, 23, 42, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
  font-size: 0.82rem !important;
  line-height: 1.4 !important;
  gap: 10px !important;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.3s ease !important;
}

.geo-toast.visible {
  transform: translateX(0) !important;
  opacity: 1 !important;
}

.geo-toast.hiding {
  transform: translateX(120%) !important;
  opacity: 0 !important;
}

.geo-toast-icon {
  animation: none !important;
  font-size: 1.2rem !important;
}

.geo-toast-text {
  font-size: 0.82rem !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.geo-toast-close {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  font-size: 1rem !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* ============================================================
   NAVBAR AUTO-HIDE: faster, smoother
   ============================================================ */
.app-navbar {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.25s ease !important;
}

.app-navbar.nav-hidden {
  transform: translateY(-100%) !important;
  opacity: 0 !important;
}

/* ============================================================
   SIDEBAR PANELS (Favorites, History, Settings, About)
   ============================================================ */
.side-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 90vw;
  height: 100vh;
  z-index: 220;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  background: rgba(15, 23, 42, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
  color: #ffffff;
}

.side-panel:not([hidden]) {
  transform: translateX(0);
}

.side-panel[hidden] {
  display: block !important;
  visibility: hidden;
  pointer-events: none;
}

.side-panel-inner {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 100%;
}

.side-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.side-panel-header h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
}

.side-panel-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.side-panel-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* List items */
.side-panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.side-panel-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.15s ease;
}

.side-panel-list li:hover {
  background: rgba(255, 255, 255, 0.12);
}

.side-panel-list .item-name {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}

.side-panel-list .item-name:hover {
  color: var(--accent);
}

.side-panel-list .item-delete {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 80, 80, 0.15);
  border: none;
  color: rgba(255, 120, 120, 0.8);
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.side-panel-list .item-delete:hover {
  background: rgba(255, 80, 80, 0.35);
  color: #ffffff;
}

.side-panel-empty {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  padding: 2rem 0;
}

.side-panel-action-btn {
  padding: 0.65rem 1rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}

.side-panel-action-btn.danger {
  background: rgba(220, 53, 69, 0.15);
  border-color: rgba(220, 53, 69, 0.3);
  color: #ff8080;
}

.side-panel-action-btn.danger:hover {
  background: rgba(220, 53, 69, 0.35);
  color: #ffffff;
}

/* Settings */
.settings-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.settings-label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
}

.settings-toggle-btn {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.settings-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.22);
}

.settings-toggle-btn.danger {
  background: rgba(220, 53, 69, 0.15);
  border-color: rgba(220, 53, 69, 0.3);
  color: #ff8080;
}

.settings-toggle-btn.danger:hover {
  background: rgba(220, 53, 69, 0.35);
  color: #ffffff;
}

/* About */
.about-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.about-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.88rem;
}

.about-row span:first-child {
  color: rgba(255, 255, 255, 0.6);
}

.about-row span:last-child {
  color: #ffffff;
  font-weight: 500;
}

/* Panel backdrop */
.panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 215;
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.panel-backdrop:not([hidden]) {
  opacity: 1;
}

.panel-backdrop[hidden] {
  display: block !important;
  visibility: hidden;
  pointer-events: none;
}

/* Light mode panels */
body:not(.dark) .side-panel {
  background: rgba(255, 255, 255, 0.97) !important;
  border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #1a2a3a !important;
}

body:not(.dark) .side-panel-header h2,
body:not(.dark) .side-panel-list .item-name,
body:not(.dark) .settings-label,
body:not(.dark) .about-row span:last-child {
  color: #1a2a3a !important;
}

body:not(.dark) .side-panel-list li,
body:not(.dark) .settings-row {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

body:not(.dark) .side-panel-close,
body:not(.dark) .settings-toggle-btn {
  background: rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #1a2a3a !important;
}

/* ============================================================
   CLEAR BUTTON: always red, no hover change
   ============================================================ */
.clear-history-btn {
  background: rgba(220, 53, 69, 0.75) !important;
  border: 1px solid rgba(220, 53, 69, 0.9) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.clear-history-btn:hover {
  background: rgba(220, 53, 69, 0.85) !important;
  border-color: rgba(220, 53, 69, 1) !important;
  color: #ffffff !important;
}

/* CLEAR button: always solid red, no hover dependency */
#clear-history-btn,
button.clear-history-btn {
  background: #dc3545 !important;
  border: 1px solid #c82333 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#clear-history-btn:hover,
button.clear-history-btn:hover {
  background: #c82333 !important;
  border-color: #bd2130 !important;
  color: #ffffff !important;
}

/* ============================================================
   FIX: Remove blank space above content on all devices
   ============================================================ */
main {
  margin-top: 56px !important;
  padding-top: 1rem !important;
}

/* The navbar is ~52px tall, so 56px margin is enough */
.app-navbar {
  height: auto !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Remove any extra body padding that creates the gap */
body {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Ensure no hidden elements create space above main */
#splash[hidden],
#sidebar-backdrop:not(.open),
#ptr-indicator {
  height: 0 !important;
  overflow: hidden !important;
}

/* The panels and sidebar should not affect layout flow */
.side-panel,
#sidebar,
#sidebar-backdrop,
.panel-backdrop,
#weather-particles,
#weather-canvas {
  position: fixed !important;
}

/* ============================================================
   FIX: Side panels always fully visible when open
   ============================================================ */
.side-panel:not([hidden]) {
  transform: translateX(0) !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  z-index: 500 !important;
}

.panel-backdrop:not([hidden]) {
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  z-index: 490 !important;
}

/* Dark mode panel: ensure solid background */
body.dark .side-panel,
.side-panel {
  background: #0f172a !important;
  opacity: 1 !important;
}

body:not(.dark) .side-panel {
  background: #ffffff !important;
}

/* ============================================================
   Hide unit toggle and theme toggle from navbar (moved to Settings)
   ============================================================ */
.app-nav-actions #unit-toggle,
.app-nav-actions #theme-toggle {
  display: none !important;
}

/* ============================================================
   Settings toggle buttons: compact, single line
   ============================================================ */
.settings-toggle-btn {
  white-space: nowrap !important;
  padding: 0.4rem 1rem !important;
  font-size: 0.85rem !important;
  min-width: auto !important;
  min-height: 36px !important;
  max-width: 100px !important;
}

/* ============================================================
   GEO TOAST: professional, uses real geo icon
   ============================================================ */
.geo-toast-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  flex-shrink: 0 !important;
  font-size: 0 !important; /* hide any text fallback */
  animation: none !important;
}

.geo-toast-icon svg {
  color: rgba(255, 255, 255, 0.9);
}

/* ============================================================
   SEARCH BAR: remove search icon, stretch on tablet/desktop
   ============================================================ */

/* Hide the search magnifier icon on all devices */
.nav-search-icon,
#search-toggle-btn {
  display: none !important;
}

/* Mobile: search bar takes full available width */
@media (max-width: 767px) {
  .nav-search {
    flex: 1 !important;
    max-width: none !important;
  }

  .nav-search-form {
    width: 100% !important;
  }
}

/* Tablet (768px - 1099px): search stretches wider */
@media (min-width: 768px) and (max-width: 1099px) {
  .nav-search {
    flex: 1 !important;
    max-width: 400px !important;
    width: 400px !important;
  }
}

/* Desktop (1100px+): search stays right-aligned, wider */
@media (min-width: 1100px) {
  .nav-search {
    width: 350px !important;
    max-width: 350px !important;
  }
}

/* ============================================================
   SEARCH BAR: smaller on mobile, right-aligned on tablet
   ============================================================ */

/* Mobile: smaller, don't take full width */
@media (max-width: 767px) {
  .nav-search {
    flex: 0 1 auto !important;
    max-width: 180px !important;
    width: auto !important;
    margin-left: auto !important;
  }

  .nav-search-form {
    height: 34px !important;
    padding: 0 4px 0 10px !important;
  }

  .nav-search-form #city-input {
    font-size: 0.8rem !important;
  }
}

/* Tablet: push to right */
@media (min-width: 768px) and (max-width: 1099px) {
  .nav-search {
    margin-left: auto !important;
    margin-right: 0 !important;
    flex: 0 0 auto !important;
    width: 300px !important;
    max-width: 300px !important;
  }
}

/* Search bar: flush right on mobile and tablet */
@media (max-width: 1099px) {
  .nav-search {
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  .app-navbar {
    padding-right: 10px !important;
  }
}

/* ============================================================
   About panel: social links
   ============================================================ */
.about-socials {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  justify-content: center;
}

.about-social-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.6rem 1.1rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  transition: background 0.2s ease, transform 0.15s ease;
}

.about-social-link:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}

.about-social-link svg {
  flex-shrink: 0;
}

/* Light mode */
body:not(.dark) .about-social-link {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #1a2a3a !important;
}

body:not(.dark) .about-social-link:hover {
  background: rgba(0, 0, 0, 0.1) !important;
}

/* About row icons */
.about-row span:first-child i.ti {
  margin-right: 6px;
  font-size: 1.1rem;
  vertical-align: middle;
  opacity: 0.7;
}

.side-panel-header h2 i.ti {
  margin-right: 6px;
  font-size: 1.1rem;
  vertical-align: middle;
}

/* ============================================================
   FIX: About row icons visible in both themes
   ============================================================ */
.about-row span:first-child i.ti,
.side-panel-header h2 i.ti {
  color: inherit !important;
  opacity: 0.7 !important;
  display: inline-block !important;
  font-size: 1.2rem !important;
}

body:not(.dark) .about-row span:first-child i.ti,
body:not(.dark) .side-panel-header h2 i.ti {
  color: #374151 !important;
}

body.dark .about-row span:first-child i.ti,
body.dark .side-panel-header h2 i.ti {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Make sure the label text next to icons is visible */
body:not(.dark) .about-row span:first-child {
  color: #4a5568 !important;
}

/* ============================================================
   About panel: fix row layout — label left, value right
   ============================================================ */
.about-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 0.75rem 0 !important;
}

.about-row span:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  font-size: 0.85rem !important;
  min-width: 0 !important;
}

.about-row span:last-child {
  text-align: right !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

/* FIX: About row text overlap */
.about-row span:first-child {
  flex-shrink: 0 !important;
  min-width: 90px !important;
}

.about-row span:last-child {
  white-space: normal !important;
  word-break: break-word !important;
  flex: 1 !important;
  text-align: right !important;
}

/* ============================================================
   Show brand logo + text on ALL devices (mobile, tablet, desktop)
   ============================================================ */
.app-brand {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.brand-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 0px !important;
  min-width: 0 !important;
}

.app-logo {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  display: block !important;
}

/* Mobile: smaller text */
@media (max-width: 767px) {
  .brand-name {
    font-size: 13px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .brand-tagline {
    font-size: 8px !important;
    letter-spacing: 1px !important;
  }

  .app-logo {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1099px) {
  .brand-name {
    font-size: 15px !important;
  }

  .brand-tagline {
    font-size: 9px !important;
  }
}

/* ============================================================
   PERFORMANCE: Smooth scrolling + faster card rendering
   ============================================================ */
html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

body {
  -webkit-overflow-scrolling: touch !important;
  overflow-y: auto !important;
  overscroll-behavior-y: none;
}

/* GPU-accelerate all cards for faster paint */
#weather-card,
#aqi-widget,
#tips-widget,
.hour-card,
#forecast > li,
section[aria-label="Hourly forecast"],
section[aria-label="5-day forecast"] {
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Reduce backdrop-filter on mobile (expensive on GPU) */
@media (max-width: 767px) {
  #weather-card,
  #aqi-widget,
  #tips-widget,
  .hour-card,
  #forecast > li,
  .stat-row,
  .aqi-pill,
  .tip-pill {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Smooth horizontal scrolling for hourly strip */
.hourly-strip {
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
  overscroll-behavior-x: contain;
}

/* Remove heavy transitions on mobile for snappier feel */
@media (max-width: 767px) {
  .hour-card,
  #forecast > li,
  .stat-row {
    transition: none !important;
  }

  .hour-card:hover,
  #forecast > li:hover {
    transform: none !important;
  }
}

/* Reduce particle count impact on scroll performance */
#weather-canvas {
  will-change: contents;
  contain: strict;
}

/* ============================================================
   FIX: Scrolling broken on all devices
   ============================================================ */
html, body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100vh !important;
  overscroll-behavior: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

body {
  display: block !important;
  position: relative !important;
}

/* Only lock scroll when sidebar is actually open */
body.sidebar-open {
  overflow: hidden !important;
}

/* Canvas must never block scroll/touch events */
#weather-particles,
#weather-canvas {
  pointer-events: none !important;
  touch-action: none !important;
}

/* Main content must be scrollable */
main {
  position: relative !important;
  overflow: visible !important;
}

/* ============================================================
   DISABLE: Weather animated themes + canvas particles
   Keep only light/dark mode
   ============================================================ */

/* Hide the canvas particles entirely */
#weather-particles,
#weather-canvas {
  display: none !important;
  visibility: hidden !important;
}

/* Remove all weather gradient backgrounds */
body.bg-sunny,
body.bg-night,
body.bg-cloudy,
body.bg-rainy,
body.bg-snowy,
body.bg-stormy {
  background: none !important;
  animation: none !important;
}

/* LIGHT MODE (default): clean soft background */
body:not(.dark) {
  background: linear-gradient(180deg, #e8f4f8 0%, #d4e8f0 50%, #c5dde8 100%) !important;
  animation: none !important;
  background-attachment: fixed !important;
}

/* DARK MODE: clean dark background */
body.dark {
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
  animation: none !important;
  background-attachment: fixed !important;
}

/* ---- DARK MODE: card visibility ---- */
body.dark #weather-card,
body.dark #aqi-widget,
body.dark #tips-widget,
body.dark section[aria-label="Hourly forecast"],
body.dark section[aria-label="5-day forecast"] {
  background: rgba(30, 41, 59, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

body.dark .hour-card,
body.dark #forecast > li {
  background: rgba(51, 65, 85, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark .stat-row {
  background: rgba(51, 65, 85, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark .aqi-pill {
  background: rgba(51, 65, 85, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark .tip-pill {
  background: rgba(51, 65, 85, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark .history-pill {
  background: rgba(51, 65, 85, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #e2e8f0 !important;
}

/* Dark mode text: all clearly visible */
body.dark #weather-card,
body.dark #weather-card *,
body.dark #aqi-widget *,
body.dark #tips-widget *,
body.dark section[aria-label="Hourly forecast"] *,
body.dark section[aria-label="5-day forecast"] * {
  color: #e2e8f0 !important;
  text-shadow: none !important;
}

body.dark .stat-label,
body.dark .aqi-title,
body.dark .aqi-pill-label,
body.dark .aqi-pill-unit,
body.dark .tips-label,
body.dark .hour-time,
body.dark .sun-label,
body.dark .section-title,
body.dark section[aria-label="5-day forecast"] h2 {
  color: #94a3b8 !important;
}

/* Dark mode navbar */
body.dark .app-navbar {
  background: rgba(15, 23, 42, 0.95) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark .brand-name {
  color: #f1f5f9 !important;
}

body.dark .brand-tagline {
  color: #64748b !important;
}

body.dark .nav-search-form {
  background: rgba(51, 65, 85, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark .nav-search-form #city-input {
  color: #f1f5f9 !important;
}

body.dark .nav-search-form #city-input::placeholder {
  color: #64748b !important;
}

body.dark .menu-btn,
body.dark .nav-search-icon,
body.dark .nav-geo-btn {
  background: rgba(51, 65, 85, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #e2e8f0 !important;
}

/* Dark mode footer */
body.dark footer {
  color: #64748b !important;
}

/* ---- FAVORITE BUTTON: always visible ---- */
#favorite-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.4rem !important;
  min-width: 36px !important;
  min-height: 36px !important;
  color: #fbbf24 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#favorite-btn[hidden] {
  display: none !important;
}

body.dark #favorite-btn {
  color: #fbbf24 !important;
}

body:not(.dark) #favorite-btn {
  color: #f59e0b !important;
}