/* ── MondoWeather — welcome line + 5-day forecast strip ─────────────────── */

/* ── Welcome line ── */
.hxb-weather-welcome {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: transparent;
    font-size: 1.05rem;
    line-height: 1.45;
    color: #1f2937;
}
.hxb-weather-welcome-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}
.hxb-weather-welcome-text { flex: 1; }
.hxb-weather-welcome-loading { color: #9ca3af; font-size: .9rem; }

/* ── Forecast container ── */
.hxb-weather-forecast {
    background: #fff;
    padding: 16px 0;
}
.hxb-weather-forecast-loading { padding: 20px; color: #9ca3af; }

/* AI-written 1-2 sentence summary */
.hxb-weather-summary {
    padding: 0 4px 16px;
    color: #4b5563;
    font-size: .92rem;
    line-height: 1.5;
}

/* TODAY — full-width row */
.hxb-weather-today {
    padding: 14px 4px 16px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 14px;
}
.hxb-weather-today-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 0 10px;
}
.hxb-weather-today-label {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    text-transform: capitalize;
    flex: 1;
}
.hxb-weather-today-icon {
    width: 48px;
    height: 48px;
}
.hxb-weather-today-temps { display: flex; align-items: baseline; gap: 8px; }
.hxb-weather-today-temp-hi { font-size: 1.4rem; color: #111827; }
.hxb-weather-today-temp-lo { font-size: 1rem; color: #9ca3af; }

/* Hourly scrollable strip */
.hxb-weather-hourly {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 4px 0 6px;
    scrollbar-width: thin;
}
.hxb-weather-hourly::-webkit-scrollbar { height: 4px; }
.hxb-weather-hourly::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 2px; }
.hxb-weather-hour {
    flex: 0 0 56px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.hxb-weather-hour-time { font-size: .78rem; color: #6b7280; font-variant-numeric: tabular-nums; }
.hxb-weather-hour-icon { width: 36px; height: 36px; }
.hxb-weather-hour-temp { font-size: .9rem; font-weight: 600; color: #111827; }
.hxb-weather-hour-rain { font-size: .68rem; color: #2563eb; min-height: 12px; }
.hxb-weather-hour-rain-zero { color: #d1d5db; }

/* ── Days strip (4 columns under today) ── */
.hxb-weather-days {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 0 4px;
}
.hxb-weather-day {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
}
.hxb-weather-day-name {
    font-size: .82rem;
    font-weight: 600;
    color: #374151;
    text-transform: capitalize;
}
.hxb-weather-day-date {
    font-size: .7rem;
    color: #9ca3af;
}
.hxb-weather-day-icon {
    width: 48px;
    height: 48px;
    margin: 4px 0;
}
.hxb-weather-day-temps {
    font-size: .85rem;
    color: #1f2937;
}
.hxb-weather-day-temps strong { font-weight: 700; }
.hxb-weather-day-temps .lo { color: #6b7280; margin-left: 4px; }
.hxb-weather-day-rain {
    font-size: .7rem;
    color: #2563eb;
}

/* ──────────────────────────────────────────────────────────────────────── */
/* Animated weather icons — pure CSS keyframe animations                    */
/* ──────────────────────────────────────────────────────────────────────── */

.hxb-w-icon { display: inline-block; position: relative; width: 100%; height: 100%; }
.hxb-w-icon svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* SUN — rotating rays */
@keyframes hxb-w-spin   { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes hxb-w-pulse  { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.hxb-w-sun-rays   { animation: hxb-w-spin 18s linear infinite; transform-origin: center; transform-box: fill-box; }
.hxb-w-sun-disc   { animation: hxb-w-pulse 3s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }

/* CLOUDS — drifting horizontally */
@keyframes hxb-w-drift-r { 0% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 100% { transform: translateX(-3px); } }
@keyframes hxb-w-drift-l { 0% { transform: translateX(3px); }  50% { transform: translateX(-3px); } 100% { transform: translateX(3px); } }
.hxb-w-cloud   { animation: hxb-w-drift-r 6s ease-in-out infinite; }
.hxb-w-cloud-2 { animation: hxb-w-drift-l 7s ease-in-out infinite; }

/* RAIN drops — falling */
@keyframes hxb-w-fall {
    0%   { transform: translateY(-3px); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: translateY(18px); opacity: 0; }
}
.hxb-w-drop      { animation: hxb-w-fall 1.4s linear infinite; transform-origin: center; }
.hxb-w-drop-2    { animation: hxb-w-fall 1.4s linear infinite; animation-delay: .35s; }
.hxb-w-drop-3    { animation: hxb-w-fall 1.4s linear infinite; animation-delay: .7s; }
.hxb-w-drop-4    { animation: hxb-w-fall 1.4s linear infinite; animation-delay: 1.05s; }

/* SNOW — floating */
@keyframes hxb-w-snow-fall {
    0%   { transform: translate(0, -3px) rotate(0deg); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: translate(2px, 18px) rotate(180deg); opacity: 0; }
}
.hxb-w-flake    { animation: hxb-w-snow-fall 2.2s linear infinite; transform-origin: center; transform-box: fill-box; }
.hxb-w-flake-2  { animation: hxb-w-snow-fall 2.2s linear infinite; animation-delay: .7s; }
.hxb-w-flake-3  { animation: hxb-w-snow-fall 2.2s linear infinite; animation-delay: 1.4s; }

/* LIGHTNING bolt — flashing */
@keyframes hxb-w-flash {
    0%, 90%, 100% { opacity: 0; }
    92%, 96%      { opacity: 1; }
}
.hxb-w-bolt { animation: hxb-w-flash 3s infinite; }

/* FOG bands — drifting */
@keyframes hxb-w-fog-drift { 0% { transform: translateX(-2px); } 50% { transform: translateX(4px); } 100% { transform: translateX(-2px); } }
.hxb-w-fog-line    { animation: hxb-w-fog-drift 4s ease-in-out infinite; }
.hxb-w-fog-line-2  { animation: hxb-w-fog-drift 4s ease-in-out infinite; animation-delay: 1s; }
.hxb-w-fog-line-3  { animation: hxb-w-fog-drift 4s ease-in-out infinite; animation-delay: 2s; }