/* ==========================================
   ULTRAKIT WEATHER WIDGET — Premium
   Live OpenWeatherMap Data × 3 Skins × Optional Forecast
   ========================================== */

.ultrakit-wtr-wrapper { width: 100%; max-width: 320px; }

.ultrakit-wtr-card {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    border-radius: 18px;
    padding: 26px;
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.ultrakit-wtr-error { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.5; color: #ffffff; }

.ultrakit-wtr-location { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.ultrakit-wtr-city { font-size: 17px; font-weight: 800; }
.ultrakit-wtr-desc { font-size: 12.5px; opacity: 0.85; }

.ultrakit-wtr-temp-row { display: flex; align-items: center; gap: 6px; }
.ultrakit-wtr-icon { width: 64px; height: 64px; margin-left: -10px; }
.ultrakit-wtr-temp { font-size: 42px; font-weight: 800; line-height: 1; }

.ultrakit-wtr-meta-row { display: flex; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.25); }
.ultrakit-wtr-meta { display: flex; align-items: center; gap: 5px; font-size: 12.5px; opacity: 0.9; }

.ultrakit-wtr-forecast { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.25); }
.ultrakit-wtr-forecast-day { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ultrakit-wtr-forecast-label { font-size: 10.5px; text-transform: uppercase; opacity: 0.8; }
.ultrakit-wtr-forecast-day img { width: 28px; height: 28px; }
.ultrakit-wtr-forecast-temp { font-size: 12px; font-weight: 700; }

/* ---- Skins ---- */
.wtr-skin-2 .ultrakit-wtr-card { background: linear-gradient(135deg, #1a1a2e 0%, #302b63 100%); }

.wtr-skin-3 .ultrakit-wtr-card { background: #ffffff; color: #1a1a2e; box-shadow: 0 4px 22px rgba(0,0,0,0.08); }
.wtr-skin-3 .ultrakit-wtr-desc { color: #888888; opacity: 1; }
.wtr-skin-3 .ultrakit-wtr-meta-row { border-top-color: #eeeeee; }
.wtr-skin-3 .ultrakit-wtr-meta { color: #888888; opacity: 1; }
.wtr-skin-3 .ultrakit-wtr-forecast { border-top-color: #eeeeee; }
.wtr-skin-3 .ultrakit-wtr-forecast-label { color: #999999; opacity: 1; }
.wtr-skin-3 .ultrakit-wtr-error { color: #e74c3c; }

/* ---- Layout: Compact Inline ---- */
.ultrakit-wtr-layout-compact .ultrakit-wtr-card { padding: 14px 18px; display: flex; align-items: center; gap: 12px; }
.ultrakit-wtr-layout-compact .ultrakit-wtr-main { display: flex; align-items: center; gap: 10px; }
.ultrakit-wtr-layout-compact .ultrakit-wtr-location { margin-bottom: 0; }
.ultrakit-wtr-layout-compact .ultrakit-wtr-desc { display: none; }
.ultrakit-wtr-layout-compact .ultrakit-wtr-icon { width: 40px; height: 40px; margin-left: 0; }
.ultrakit-wtr-layout-compact .ultrakit-wtr-temp { font-size: 24px; }
.ultrakit-wtr-layout-compact .ultrakit-wtr-meta-row { display: none; }
.ultrakit-wtr-layout-compact .ultrakit-wtr-forecast { display: none; }

@media (max-width: 360px) {
    .ultrakit-wtr-wrapper { max-width: 100%; }
}