/* ==========================================================================
   IP-Based Weather — horizontal starry forecast bar
   ========================================================================== */

.ip-weather-widget {
    --ipw-fg: #f4f6fb;
    --ipw-muted: #9aa4bd;
    --ipw-border: rgba(255, 255, 255, 0.08);

    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 48px);
    width: 100%;
    box-sizing: border-box;
    padding: 14px clamp(16px, 2vw, 40px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    color: var(--ipw-fg);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    border-radius: 8px;

    /* Deep night sky + scattered stars (pure CSS, no external assets). */
    background-color: #0a0e1f;
    background-image:
        radial-gradient(1.4px 1.4px at 12% 30%, #ffffff, transparent),
        radial-gradient(1.4px 1.4px at 22% 72%, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(1px 1px at 35% 20%, rgba(255, 255, 255, 0.75), transparent),
        radial-gradient(1.6px 1.6px at 48% 60%, #ffffff, transparent),
        radial-gradient(1px 1px at 58% 33%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1.3px 1.3px at 66% 78%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1px 1px at 74% 18%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1.5px 1.5px at 83% 55%, #ffffff, transparent),
        radial-gradient(1px 1px at 91% 28%, rgba(255, 255, 255, 0.75), transparent),
        radial-gradient(1.2px 1.2px at 96% 80%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 6% 85%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 42% 88%, rgba(255, 255, 255, 0.6), transparent),
        linear-gradient(180deg, #10152b 0%, #070a17 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.ip-weather-widget::-webkit-scrollbar { height: 0; }

/* --- Current block (location + now) -------------------------------------- */

.ip-weather-widget .ipw-now {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.5vw, 34px);
    flex: 0 0 auto;
}

.ip-weather-widget .ipw-place {
    font-size: clamp(18px, 2.4vw, 26px);
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.ip-weather-widget .ipw-now-icon {
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1;
}

.ip-weather-widget .ipw-now-temp {
    font-size: clamp(20px, 2.6vw, 30px);
    font-weight: 800;
    white-space: nowrap;
}

/* --- 7-day strip --------------------------------------------------------- */

.ip-weather-widget .ipw-days {
    display: flex;
    align-items: stretch;
    gap: clamp(14px, 2.4vw, 40px);
    flex: 1 1 auto;
    justify-content: space-between;
    margin-left: auto;
}

.ip-weather-widget .ipw-day {
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    gap: 5px;
    min-width: 48px;
    flex: 0 0 auto;
}

.ip-weather-widget .ipw-dow {
    font-size: 13px;
    font-weight: 700;
    color: var(--ipw-fg);
}

.ip-weather-widget .ipw-day-icon {
    font-size: 24px;
    line-height: 1;
    margin: 1px 0;
}

.ip-weather-widget .ipw-hi {
    font-size: 14px;
    font-weight: 700;
    color: var(--ipw-fg);
}

.ip-weather-widget .ipw-lo {
    font-size: 13px;
    color: var(--ipw-muted);
}

/* --- States -------------------------------------------------------------- */

.ip-weather-widget .ip-weather-loading,
.ip-weather-widget .ipw-error {
    margin: 0;
    padding: 6px 2px;
    font-size: 14px;
}

.ip-weather-widget .ipw-error { color: #fca5a5; }
.ip-weather-widget .ip-weather-loading { color: var(--ipw-muted); }

/* Stack gracefully on very small screens (otherwise it scrolls). */
@media (max-width: 600px) {
    .ip-weather-widget {
        gap: 14px;
    }
    .ip-weather-widget .ipw-days {
        gap: 16px;
    }
}