/* Weather */
.weather-main { display:flex; align-items:center; justify-content:center; gap:0.75rem; margin-bottom:1rem; }
@media(min-width:640px){ .weather-main{ gap:1rem; margin-bottom:1.5rem; } }
.weather-icon-glass {
  width:3.5rem; height:3.5rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px) saturate(1.5);
  border:1px solid rgba(255,255,255,0.2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.2);
  font-size:1.5rem;
}
@media(min-width:640px){ .weather-icon-glass{ width:5rem; height:5rem; font-size:2rem; } }
.weather-icon { font-size:2.5rem; line-height:1; }
@media(min-width:640px){ .weather-icon{ font-size:3rem; } }
.weather-temp { font-size:2rem; font-weight:700; color:#fff; white-space: nowrap; }
@media(min-width:640px){ .weather-temp{ font-size:2.5rem; } }
.weather-temp .weather-temp-f,
.weather-temp-f {
  font-size: 50% !important;
  opacity: 0.85;
  vertical-align: middle;
  font-weight: 600;
}
.weather-cond { font-size:0.75rem; color:rgba(255,255,255,0.7); }
@media(min-width:640px){ .weather-cond{ font-size:0.875rem; } }
.weather-cond-badge {
  display: table;
  margin: 0.25rem auto 0;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.weather-temp-f {
  font-size: 50%;
  opacity: 0.85;
  vertical-align: middle;
}
.weather-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; }
@media(min-width:640px){ .weather-grid{ gap:0.75rem; } }
.weather-item {
  display:flex; align-items:center; gap:0.5rem;
  background:rgba(255,255,255,0.05); border-radius:0.75rem; padding:0.5rem;
  font-size:0.875rem; color:rgba(255,255,255,0.8);
}
.weather-item-icon { font-size:1rem; }

/* Weather temp scale */
.weather-scale { margin-top:1rem; }
.weather-temp-label { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.25rem; }
.weather-temp-label .lbl { font-size:0.625rem; color:rgba(255,255,255,0.4); }
.weather-temp-label .val { font-size:0.75rem; font-weight:600; color:#fff; }
.temp-track { position:relative; height:0.5rem; border-radius:9999px; background: linear-gradient(to right, #3b82f6, #22d3ee, #facc15, #f97316, #ef4444); }
.temp-marker { position:absolute; top:50%; transform:translate(-50%,-50%); width:12px; height:16px; background:#fff; border-radius:3px; box-shadow:0 0 6px rgba(0,0,0,0.5); transition:left 0.5s; }

/* Theme light overrides */
body.theme-light .weather-icon-glass {
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
}
body.theme-light .weather-cond { color: rgba(0,0,0,0.7); }
body.theme-light .weather-item { background: rgba(0,0,0,0.06); color: rgba(0,0,0,0.85); }
body.theme-light .weather-temp-label .lbl { color: rgba(0,0,0,0.55); }
body.theme-light .weather-temp-label .val { color: #0f172a; }
body.theme-light .temp-marker { background: #0f172a; box-shadow: 0 0 6px rgba(0,0,0,0.3); }

.weather-minmax { font-size:0.75rem; color:rgba(255,255,255,0.5); margin-top:0.25rem; display:flex; align-items:center; gap:0.375rem; justify-content:center; }
body.theme-light .weather-minmax { color: rgba(0,0,0,0.55); }

.weather-badge { display:inline-flex; align-items:center; justify-content:center; padding:0.125rem 0.5rem; border-radius:9999px; font-size:0.625rem; font-weight:600; text-transform:uppercase; letter-spacing:0.03em; text-align:center; }
.weather-badge-min {
  background: rgba(59, 130, 246, 0.18);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.35);
}
.weather-badge-max {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.35);
}
.weather-sep { opacity:0.4; }

body.theme-light .weather-badge-min { background:rgba(59,130,246,0.12); color:#1d4ed8; border-color:rgba(59,130,246,0.3); }
body.theme-light .weather-badge-max { background:rgba(239,68,68,0.12); color:#b91c1c; border-color:rgba(239,68,68,0.3); }

/* Theme toggle on weather icon */
.theme-toggle { cursor: pointer; transition: transform 0.2s, background 0.2s; }
.theme-toggle:hover { transform: scale(1.1); background: rgba(255,255,255,0.15); }
body.theme-light .theme-toggle:hover { background: rgba(0,0,0,0.08); }