/* ===========================================================
   WEATHER WIDGET — glass card
   =========================================================== */

#weather-widget{
    position:relative;
    background:
        radial-gradient(120% 80% at 80% 0%, rgba(61,168,255,.14), transparent 55%),
        linear-gradient(160deg, rgba(23,32,48,.92), rgba(10,15,24,.92));
    border:1px solid rgba(120,160,220,.18);
    border-radius:18px;
    padding:22px 18px 18px;
    text-align:center;
    overflow:hidden;
    box-shadow:0 18px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}

#weather-widget h2{
    font-size:11px;letter-spacing:.24em;
    color:var(--color-text-muted);text-transform:uppercase;
    margin:0 0 14px;
}

#weather-content{display:flex;flex-direction:column;align-items:center;gap:6px;}

.weather-icon{
    font-size:46px;line-height:1;margin-bottom:6px;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));
    animation:weather-float 5s ease-in-out infinite;
}
@keyframes weather-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

.weather-temp{
    font-size:56px;font-weight:800;line-height:1;letter-spacing:-.02em;
    background:linear-gradient(180deg,#ffffff 20%,#9fc6ff 75%,#6ea8ff);
    -webkit-background-clip:text;background-clip:text;color:transparent;
}

.weather-city{margin-top:6px;font-size:14px;font-weight:600;color:var(--color-text-secondary);}
.weather-desc{font-size:12px;color:var(--color-text-muted);}
.weather-updated{margin-top:10px;font-size:11px;color:var(--color-text-muted);opacity:.65;min-height:14px;}

/* Метео-метрики: ветер / влажность / давление */
.weather-metrics{
    display:flex;flex-direction:column;gap:5px;
    margin-top:12px;padding-top:12px;width:100%;
    border-top:1px solid rgba(120,160,220,.15);
}
.weather-metrics .wm{
    display:flex;justify-content:space-between;align-items:center;
    font-size:12px;color:var(--color-text-muted);
}
.weather-metrics .wm b{
    color:var(--color-text);font-weight:600;font-size:13px;
}

/* ============ Kp Index (геомагнитная активность) ============ */
.weather-kp {
    margin-top: 8px;
}

.kp-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    margin: 8px 0;
}

.kp-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    padding: 4px 0;
}

.kp-icon {
    font-size: 13px;
}

.kp-label {
    color: rgba(255,255,255,0.7);
    font-weight: 500;
}

.kp-status {
    margin-left: auto;
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Подпись «Геомагнитная активность» */
.kp-caption {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: rgba(255,255,255,.45);
    margin-bottom: 3px;
}
.kp-row { cursor: help; }

/* Селектор города */
.weather-city-select {
    margin-top: 6px;
    width: 100%;
    background: rgba(255,255,255,.06);
    color: #e8eef7;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 12px;
    outline: none;
    cursor: pointer;
}
.weather-city-select:focus { border-color: #4dd8ff; }
.weather-city-select option { background: #141a24; }

/* Строка "Свой город" */
.weather-city-custom {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}
.weather-city-custom input {
    flex: 1;
    min-width: 0;
    background: rgba(255,255,255,.04);
    color: #e8eef7;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11px;
    outline: none;
}
.weather-city-custom input:focus { border-color: #4dd8ff; }
.weather-city-custom button {
    background: rgba(77,216,255,.12);
    border: 1px solid rgba(77,216,255,.3);
    border-radius: 6px;
    color: #4dd8ff;
    cursor: pointer;
    padding: 2px 8px;
    font-size: 11px;
}