body { 
    margin: 0; 
    padding: 20px; 
    font-family: sans-serif; 
    background-size: cover; 
    background-position: center; 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    color: #ecf0f1; 
    text-align: center; 
    transition: background 0.8s ease; 
}
.bg-hot { background-image: url('Hot_Background.png'); }
.bg-rain { background-image: url('Rain_Background.png'); }
.bg-cool { background-image: url('Cool_Background.png'); }
.bg-cold { background-image: url('Cold_Background.png'); }
body::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(20, 30, 40, 0.8); z-index: -1; }
.temp-red { color: #e74c3c !important; }
.temp-orange { color: #e67e22 !important; }
.temp-blue { color: #3498db !important; }
.temp-ice { color: #00d2ff !important; font-weight: bold; }
.container { max-width: 950px; margin: auto; padding: 20px; }
.extra-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 20px; }

.metric-card, .card, .chart-box { 
    background: rgba(20, 30, 40, 0.95) !important; 
    padding: 15px; 
    border-radius: 16px !important; 
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    backdrop-filter: blur(8px); 
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

#windy-wrapper { position: relative; margin-bottom: 20px; }
#windy { height: 400px; width: 100%; border-radius: 16px; margin-bottom: 0; }
.map-zoom-controls { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 1000; }
.map-zoom-controls button {
    width: 38px; height: 38px; border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(20, 30, 40, 0.85);
    color: #ecf0f1; font-size: 20px; line-height: 1; font-weight: bold;
    cursor: pointer; backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: background 0.15s ease, transform 0.1s ease;
}
.map-zoom-controls button:hover { background: rgba(20, 30, 40, 1); }
.map-zoom-controls button:active { transform: scale(0.92); }

.main-display {
    background: rgba(20, 30, 40, 0.95);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.status-label { margin: 0 0 4px; color: #bdc3c7; text-transform: uppercase; letter-spacing: 1px; font-size: 0.8em; }
.status-text { font-size: 1.5em; text-transform: capitalize; display: block; }
.status-img-frame {
    max-width: 300px;
    margin: 16px auto 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}
.status-img-frame img { width: 100%; height: auto; display: block; }

#forecast-container { display: flex; gap: 10px; justify-content: center; margin-bottom: 20px; }
#forecast-container > div, #weekly-forecast > div { 
    background: rgba(20, 30, 40, 0.95) !important; 
    padding: 12px; 
    border-radius: 16px !important; 
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

#day-tabs button {
    background: rgba(20, 30, 40, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 8px 14px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
}
#day-tabs button.active-day {
    background: #3b82f6;
    border-color: #3b82f6;
}

/* ================= RESPONSIVE MOBILE FIXES ================= */
@media (max-width: 768px) {
    div[style*="display: flex"] {
        flex-direction: column !important;
    }
    
    .charts-wrapper {
        flex-direction: column !important;
    }
    
    .charts-wrapper .chart-box {
        width: 100% !important;
    }

    .extra-metrics {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}