.weather-widget { display: flex; align-items: center; gap: 14px; min-height: 62px; margin-top: 10px; padding: 11px 16px; border: 1px solid #ffffffd9; border-radius: 13px; background: #ffffffd9; box-shadow: 0 16px 38px var(--shadow); backdrop-filter: blur(14px); }
.weather-icon { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: var(--red-soft); color: var(--red-deep); font-size: 21px; }
.weather-main { min-width: 140px; }
.weather-main strong { display: block; font-size: 18px; line-height: 1.1; }
.weather-main span, .weather-loading, .weather-error { color: var(--muted); font-size: 12px; }
.weather-metrics { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.weather-metric { min-width: 82px; padding: 7px 10px; border-left: 1px solid var(--line); }
.weather-metric small { display: block; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.weather-metric b { display: block; margin-top: 2px; font-size: 12px; }
@media (max-width: 600px) { .weather-widget { flex-wrap: wrap; } .weather-metrics { width: 100%; margin-left: 52px; } }