/* =====================================
   WEATHER INTELLIGENCE PRO
   PART 1 - FOUNDATION
===================================== */

/* =========================
   GOOGLE FONT
========================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* =========================
   ROOT VARIABLES
========================= */

:root{

    --primary:#4facfe;
    --secondary:#00f2fe;

    --glass-bg:rgba(255,255,255,0.08);
    --glass-border:rgba(255,255,255,0.15);

    --text:#ffffff;
    --text-dark:#111827;

    --card-radius:24px;

    --shadow:
    0 10px 40px rgba(0,0,0,.25);

    --transition:.35s ease;

}

/* =========================
   CSS RESET
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    min-height:100vh;

    color:var(--text);

    background:
    linear-gradient(
        135deg,
        #07111f,
        #0f172a
    );

    overflow-x:hidden;

    transition:
    background .8s ease,
    color .4s ease;

    position:relative;

}

/* =========================
   CUSTOM SCROLLBAR
========================= */

::-webkit-scrollbar{
    width:10px;
    height:10px;
}

::-webkit-scrollbar-track{
    background:#0f172a;
}

::-webkit-scrollbar-thumb{
    background:#4facfe;
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#00f2fe;
}

/* =========================
   CONTAINER
========================= */

.container{

    width:min(1400px,95%);

    margin:auto;

    padding:25px;

}

/* =========================
   GLOBAL HEADINGS
========================= */

h1,h2,h3,h4{

    font-weight:700;
    line-height:1.3;

}

h1{

    font-size:clamp(
        2rem,
        5vw,
        3.5rem
    );

}

h2{

    margin:35px 0 20px;

    font-size:1.6rem;

}

p{

    line-height:1.8;

}

/* =========================
   LINKS
========================= */

a{

    color:inherit;

    text-decoration:none;

}

/* =========================
   UTILITY CLASSES
========================= */

.hidden{
    display:none !important;
}

.center{
    display:flex;
    justify-content:center;
    align-items:center;
}

/* =========================
   GLASSMORPHISM CARD
========================= */

.glass{

    background:
    var(--glass-bg);

    backdrop-filter:
    blur(18px);

    -webkit-backdrop-filter:
    blur(18px);

    border:
    1px solid
    var(--glass-border);

    border-radius:
    var(--card-radius);

    box-shadow:
    var(--shadow);

}

/* =========================
   GENERIC SECTION STYLE
========================= */

section{

    margin-bottom:30px;

}

/* =========================
   WEATHER ANIMATION LAYER
========================= */

#weatherAnimation{

    position:fixed;

    inset:0;

    pointer-events:none;

    overflow:hidden;

    z-index:-1;

}

/* =========================
   LOADER
========================= */

.loader{

    width:55px;
    height:55px;

    border-radius:50%;

    border:5px solid
    rgba(255,255,255,.3);

    border-top-color:#fff;

    animation:
    spin 1s linear infinite;

    margin:20px auto;

}

@keyframes spin{

    to{

        transform:
        rotate(360deg);

    }

}

/* =========================
   FOOTER
========================= */

footer{

    margin-top:50px;

    text-align:center;

    padding:30px;

    opacity:.8;

}

/* =====================================
   WEATHER THEMES
===================================== */

/* SUNNY */

.sunny{

    background:
    linear-gradient(
        135deg,
        #f6d365,
        #fda085
    );

}

/* CLOUDY */

.cloudy{

    background:
    linear-gradient(
        135deg,
        #667eea,
        #764ba2
    );

}

/* RAINY */

.rainy{

    background:
    linear-gradient(
        135deg,
        #2c3e50,
        #4ca1af
    );

}

/* STORMY */

.stormy{

    background:
    linear-gradient(
        135deg,
        #141e30,
        #243b55
    );

}

/* SNOWY */

.snowy{

    background:
    linear-gradient(
        135deg,
        #d7d2cc,
        #304352
    );

}

/* FOGGY */

.foggy{

    background:
    linear-gradient(
        135deg,
        #757f9a,
        #d7dde8
    );

}

/* NIGHT */

.night{

    background:
    linear-gradient(
        135deg,
        #0f2027,
        #203a43,
        #2c5364
    );

}

/* =====================================
   LIGHT MODE
===================================== */

.light-mode{

    background:
    linear-gradient(
        135deg,
        #f8fafc,
        #e2e8f0
    );

    color:
    var(--text-dark);

}

.light-mode .glass{

    background:
    rgba(255,255,255,.7);

    border:
    1px solid
    rgba(255,255,255,.6);

}

.light-mode input{

    color:
    var(--text-dark);

}

.light-mode button{

    color:
    var(--text-dark);

}

/* =====================================
   FLOAT ANIMATION
===================================== */

@keyframes float{

    0%{
        transform:
        translateY(0);
    }

    50%{
        transform:
        translateY(-10px);
    }

    100%{
        transform:
        translateY(0);
    }

}

/* =====================================
   FADE IN
===================================== */

@keyframes fadeIn{

    from{

        opacity:0;

        transform:
        translateY(15px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}

.fade-in{

    animation:
    fadeIn .6s ease;

}

/* =====================================
   PART 2 - HERO SECTION & CONTROLS
===================================== */

/* =========================
   HERO SECTION
========================= */

.hero{

    background:
    rgba(255,255,255,.08);

    backdrop-filter:
    blur(20px);

    -webkit-backdrop-filter:
    blur(20px);

    border:
    1px solid
    rgba(255,255,255,.15);

    border-radius:
    30px;

    padding:
    35px;

    box-shadow:
    0 15px 40px rgba(0,0,0,.25);

    animation:
    fadeIn .8s ease;

}

/* =========================
   TOP BAR
========================= */

.top-bar{

    display:flex;

    justify-content:
    space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

/* =========================
   APP TITLE
========================= */

.top-bar h1{

    display:flex;

    align-items:center;

    gap:12px;

    font-weight:800;

}

.top-bar h1 i{

    color:#ffd43b;

    animation:
    float 3s ease-in-out infinite;

}

/* =========================
   WELCOME TEXT
========================= */

#welcomeText{

    margin-top:15px;

    opacity:.9;

    max-width:700px;

    font-size:1rem;

}

/* =========================
   CONTROLS WRAPPER
========================= */

.controls{

    display:flex;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

}

/* =========================
   LANGUAGE SELECTOR
========================= */

#languageSelector{

    min-width:170px;

    padding:
    12px 16px;

    border:none;

    border-radius:15px;

    background:
    rgba(255,255,255,.12);

    color:#fff;

    backdrop-filter:
    blur(10px);

    cursor:pointer;

    transition:
    var(--transition);

}

#languageSelector:hover{

    background:
    rgba(255,255,255,.18);

}

#languageSelector option{

    background:#0f172a;

    color:white;

}

/* =========================
   THEME BUTTON
========================= */

#themeBtn{

    width:50px;

    height:50px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    background:
    linear-gradient(
        135deg,
        #4facfe,
        #00f2fe
    );

    color:white;

    font-size:1.1rem;

    transition:
    var(--transition);

    display:flex;

    justify-content:center;

    align-items:center;

}

#themeBtn:hover{

    transform:
    translateY(-4px)
    rotate(15deg);

    box-shadow:
    0 8px 20px
    rgba(79,172,254,.4);

}

/* =========================
   SEARCH BOX
========================= */

.search-box{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:25px;

    position:relative;

}

/* =========================
   SEARCH INPUT
========================= */

#locationInput{

    flex:1;

    padding:
    18px 22px;

    border:none;

    border-radius:20px;

    background:
    rgba(255,255,255,.12);

    color:white;

    font-size:1rem;

    outline:none;

    transition:
    var(--transition);

    backdrop-filter:
    blur(10px);

}

#locationInput::placeholder{

    color:
    rgba(255,255,255,.7);

}

#locationInput:focus{

    background:
    rgba(255,255,255,.18);

    box-shadow:
    0 0 0 3px
    rgba(79,172,254,.35);

}

/* =========================
   SEARCH BUTTON
========================= */

#searchBtn{

    width:60px;

    height:60px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    background:
    linear-gradient(
        135deg,
        #4facfe,
        #00f2fe
    );

    color:white;

    font-size:1.2rem;

    transition:
    var(--transition);

}

#searchBtn:hover{

    transform:
    translateY(-4px);

    box-shadow:
    0 10px 20px
    rgba(79,172,254,.4);

}

/* =========================
   LOCATION BUTTON
========================= */

#locationBtn{

    width:60px;

    height:60px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    background:
    linear-gradient(
        135deg,
        #43e97b,
        #38f9d7
    );

    color:white;

    font-size:1.2rem;

    transition:
    var(--transition);

}

#locationBtn:hover{

    transform:
    translateY(-4px);

    box-shadow:
    0 10px 20px
    rgba(67,233,123,.35);

}

/* =========================
   SEARCH SUGGESTIONS
========================= */

#suggestions{

    margin-top:12px;

    position:relative;

    z-index:1000;

}

/* Suggestion Item */

.suggestion-item{

    padding:
    14px 18px;

    margin-bottom:6px;

    border-radius:14px;

    background:
    rgba(255,255,255,.1);

    backdrop-filter:
    blur(12px);

    cursor:pointer;

    transition:
    var(--transition);

    animation:
    fadeIn .3s ease;

}

.suggestion-item:hover{

    background:
    rgba(255,255,255,.2);

    transform:
    translateX(6px);

}

/* =========================
   LIGHT MODE OVERRIDES
========================= */

.light-mode #locationInput{

    background:
    rgba(255,255,255,.85);

    color:#111827;

}

.light-mode #locationInput::placeholder{

    color:#6b7280;

}

.light-mode #languageSelector{

    background:
    rgba(255,255,255,.85);

    color:#111827;

}

.light-mode .suggestion-item{

    background:
    rgba(255,255,255,.8);

    color:#111827;

}

/* =========================
   MOBILE RESPONSIVE
========================= */

@media(max-width:768px){

    .hero{

        padding:25px;

    }

    .top-bar{

        flex-direction:column;

        align-items:flex-start;

    }

    .controls{

        width:100%;

    }

    #languageSelector{

        width:100%;

    }

    .search-box{

        flex-wrap:wrap;

    }

    #locationInput{

        width:100%;

    }

    #searchBtn,
    #locationBtn{

        flex:1;

    }

}

/* =========================
   EXTRA SMALL DEVICES
========================= */

@media(max-width:480px){

    .top-bar h1{

        font-size:1.8rem;

    }

    #welcomeText{

        font-size:.9rem;

    }

}


/* =====================================
   PART 3 - CURRENT WEATHER & METRICS
===================================== */

/* =========================
   CURRENT WEATHER CARD
========================= */

.current-weather-card{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    padding:35px;

    margin-top:30px;

    background:
    rgba(255,255,255,.08);

    backdrop-filter:
    blur(20px);

    -webkit-backdrop-filter:
    blur(20px);

    border:
    1px solid
    rgba(255,255,255,.15);

    border-radius:30px;

    box-shadow:
    0 15px 40px rgba(0,0,0,.25);

    animation:
    fadeIn .8s ease;

}

/* =========================
   LEFT SIDE
========================= */

.weather-left{

    flex:1;

}

#cityName{

    font-size:2rem;

    font-weight:700;

}

#dateTime{

    margin-top:8px;

    opacity:.8;

}

#temperature{

    font-size:5rem;

    font-weight:800;

    margin-top:15px;

    line-height:1;

    background:
    linear-gradient(
        135deg,
        #ffffff,
        #dbeafe
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:
    transparent;

}

#description{

    margin-top:15px;

    font-size:1.2rem;

    opacity:.9;

}

/* =========================
   WEATHER ICON
========================= */

.weather-right{

    display:flex;

    justify-content:center;

    align-items:center;

}

.weather-icon{

    font-size:8rem;

    animation:
    float 4s ease-in-out infinite;

    filter:
    drop-shadow(
        0 0 20px rgba(255,255,255,.3)
    );

}

/* Sunny */

.wi-day-sunny{

    color:#FFD93D;

}

/* Rain */

.wi-rain{

    color:#4FC3F7;

}

/* Thunder */

.wi-thunderstorm{

    color:#FFD54F;

}

/* Snow */

.wi-snow{

    color:#E3F2FD;

}

/* Cloud */

.wi-cloud{

    color:#CFD8DC;

}

/* =========================
   METRICS GRID
========================= */

.metrics-grid{

    display:grid;

    grid-template-columns:
    repeat(
        auto-fit,
        minmax(220px,1fr)
    );

    gap:20px;

    margin-top:25px;

}

/* =========================
   METRIC CARD
========================= */

.metric{

    background:
    rgba(255,255,255,.08);

    backdrop-filter:
    blur(16px);

    border:
    1px solid
    rgba(255,255,255,.15);

    border-radius:24px;

    padding:25px;

    text-align:center;

    transition:
    all .35s ease;

    cursor:pointer;

    position:relative;

    overflow:hidden;

}

/* Hover Effect */

.metric:hover{

    transform:
    translateY(-8px);

    box-shadow:
    0 20px 40px
    rgba(0,0,0,.25);

}

/* Glow Background */

.metric::before{

    content:"";

    position:absolute;

    width:200px;

    height:200px;

    background:
    radial-gradient(
        rgba(255,255,255,.15),
        transparent
    );

    top:-100px;

    right:-100px;

}

/* Icon */

.metric i{

    font-size:2rem;

    margin-bottom:12px;

    color:#4facfe;

}

/* Title */

.metric h3{

    font-size:1rem;

    margin-bottom:10px;

}

/* Value */

.metric p{

    font-size:1.2rem;

    font-weight:600;

}

/* =========================
   AIR QUALITY GRID
========================= */

#airQualityGrid{

    display:grid;

    grid-template-columns:
    repeat(
        auto-fit,
        minmax(200px,1fr)
    );

    gap:20px;

    margin-top:25px;

}

/* AQI CARD */

.aq-card{

    background:
    rgba(255,255,255,.08);

    backdrop-filter:
    blur(16px);

    border:
    1px solid
    rgba(255,255,255,.15);

    border-radius:24px;

    padding:25px;

    text-align:center;

    transition:
    .35s ease;

}

/* Hover */

.aq-card:hover{

    transform:
    translateY(-8px);

}

/* AQI VALUE */

.aq-card p{

    font-size:2rem;

    font-weight:700;

    margin-top:10px;

}

/* AQI LEVELS */

.aqi-good{

    color:#00E676;

}

.aqi-moderate{

    color:#FFEB3B;

}

.aqi-unhealthy{

    color:#FF9800;

}

.aqi-very-unhealthy{

    color:#F44336;

}

.aqi-hazardous{

    color:#9C27B0;

}

/* =========================
   WEATHER SUMMARY CARD
========================= */

.summary-card{

    background:
    rgba(255,255,255,.08);

    backdrop-filter:
    blur(16px);

    border:
    1px solid
    rgba(255,255,255,.15);

    border-radius:24px;

    padding:25px;

    margin-top:20px;

    line-height:2;

    font-size:1rem;

    animation:
    fadeIn .8s ease;

}

/* =========================
   LIGHT MODE SUPPORT
========================= */

.light-mode .current-weather-card,
.light-mode .metric,
.light-mode .aq-card,
.light-mode .summary-card{

    background:
    rgba(255,255,255,.85);

    color:#111827;

    border:
    1px solid
    rgba(255,255,255,.7);

}

.light-mode #temperature{

    background:
    linear-gradient(
        135deg,
        #111827,
        #4b5563
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:
    transparent;

}

/* =========================
   TABLET
========================= */

@media(max-width:992px){

    .current-weather-card{

        flex-direction:column;

        text-align:center;

    }

    .weather-icon{

        font-size:6rem;

    }

}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

    #temperature{

        font-size:4rem;

    }

    .metrics-grid{

        grid-template-columns:
        repeat(
            auto-fit,
            minmax(160px,1fr)
        );

    }

    #airQualityGrid{

        grid-template-columns:
        repeat(
            auto-fit,
            minmax(160px,1fr)
        );

    }

}

/* =========================
   SMALL DEVICES
========================= */

@media(max-width:480px){

    .current-weather-card{

        padding:25px;

    }

    #cityName{

        font-size:1.5rem;

    }

    #temperature{

        font-size:3.5rem;

    }

    .weather-icon{

        font-size:5rem;

    }

}


/* =====================================
   PART 4 - FORECAST SECTIONS
===================================== */

/* =========================
   SECTION HEADINGS
========================= */

section h2{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:20px;

    font-size:1.6rem;

    font-weight:700;

}

/* =========================
   HOURLY FORECAST
========================= */

.hourly-container{

    display:flex;

    gap:18px;

    overflow-x:auto;

    padding:10px 5px 20px;

    scroll-behavior:smooth;

}

/* Hide scrollbar */

.hourly-container::-webkit-scrollbar{

    height:8px;

}

.hourly-container::-webkit-scrollbar-thumb{

    border-radius:20px;

}

/* =========================
   HOURLY CARD
========================= */

.hour-card{

    min-width:160px;

    background:
    rgba(255,255,255,.08);

    backdrop-filter:
    blur(18px);

    border:
    1px solid rgba(255,255,255,.15);

    border-radius:24px;

    padding:20px;

    text-align:center;

    transition:.35s ease;

    position:relative;

    overflow:hidden;

}

/* Glow effect */

.hour-card::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    background:
    radial-gradient(
        rgba(255,255,255,.12),
        transparent
    );

    top:-80px;

    right:-80px;

}

/* Hover */

.hour-card:hover{

    transform:
    translateY(-8px);

    box-shadow:
    0 15px 35px rgba(0,0,0,.25);

}

/* Time */

.hour-card .hour-time{

    font-size:.95rem;

    opacity:.8;

    margin-bottom:10px;

}

/* Weather Icon */

.hour-card .forecast-icon{

    font-size:2.8rem;

    margin:12px 0;

}

/* Temperature */

.hour-card .forecast-temp{

    font-size:1.5rem;

    font-weight:700;

    margin-bottom:10px;

}

/* Extra Details */

.hour-card .forecast-detail{

    margin-top:8px;

    font-size:.9rem;

    opacity:.85;

}

/* =========================
   ICON COLOURS
========================= */

.icon-sunny{

    color:#FFD93D;

}

.icon-cloudy{

    color:#CFD8DC;

}

.icon-rain{

    color:#4FC3F7;

}

.icon-storm{

    color:#FFD54F;

}

.icon-snow{

    color:#E3F2FD;

}

.icon-fog{

    color:#B0BEC5;

}

/* =========================
   WEEKLY FORECAST
========================= */

.weekly-container{

    display:grid;

    grid-template-columns:
    repeat(
        auto-fit,
        minmax(220px,1fr)
    );

    gap:20px;

}

/* =========================
   DAY CARD
========================= */

.day-card{

    background:
    rgba(255,255,255,.08);

    backdrop-filter:
    blur(18px);

    border:
    1px solid rgba(255,255,255,.15);

    border-radius:24px;

    padding:25px;

    transition:.35s ease;

    position:relative;

    overflow:hidden;

}

/* Hover */

.day-card:hover{

    transform:
    translateY(-8px);

    box-shadow:
    0 15px 35px rgba(0,0,0,.25);

}

/* Decorative Glow */

.day-card::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    background:
    radial-gradient(
        rgba(255,255,255,.12),
        transparent
    );

    top:-100px;

    right:-100px;

}

/* Day Name */

.day-name{

    font-size:1.2rem;

    font-weight:700;

    margin-bottom:15px;

}

/* Weekly Icon */

.day-icon{

    font-size:3rem;

    margin-bottom:15px;

}

/* Max Temp */

.max-temp{

    font-size:1.5rem;

    font-weight:700;

    color:#FFD93D;

}

/* Min Temp */

.min-temp{

    font-size:1rem;

    opacity:.8;

    margin-bottom:15px;

}

/* Rain Probability */

.rain-chance{

    margin-top:12px;

    font-size:.95rem;

}

/* Wind */

.wind-speed{

    margin-top:8px;

    font-size:.95rem;

}

/* =========================
   WEATHER COLOUR THEMES
========================= */

.day-sunny{

    border-left:
    5px solid #FFD93D;

}

.day-cloudy{

    border-left:
    5px solid #CFD8DC;

}

.day-rainy{

    border-left:
    5px solid #4FC3F7;

}

.day-stormy{

    border-left:
    5px solid #FFD54F;

}

.day-snowy{

    border-left:
    5px solid #E3F2FD;

}

.day-foggy{

    border-left:
    5px solid #B0BEC5;

}

/* =========================
   FORECAST BADGES
========================= */

.forecast-badge{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:6px 12px;

    border-radius:30px;

    background:
    rgba(255,255,255,.12);

    font-size:.85rem;

    margin-top:10px;

}

/* =========================
   LIGHT MODE
========================= */

.light-mode .hour-card,
.light-mode .day-card{

    background:
    rgba(255,255,255,.85);

    color:#111827;

    border:
    1px solid rgba(255,255,255,.7);

}

/* =========================
   TABLET
========================= */

@media(max-width:992px){

    .weekly-container{

        grid-template-columns:
        repeat(
            auto-fit,
            minmax(180px,1fr)
        );

    }

}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

    .hour-card{

        min-width:140px;

    }

    .forecast-icon{

        font-size:2.3rem;

    }

    .weekly-container{

        grid-template-columns:1fr;

    }

}

/* =========================
   EXTRA SMALL DEVICES
========================= */

@media(max-width:480px){

    .hour-card{

        min-width:130px;

        padding:15px;

    }

    .day-card{

        padding:20px;

    }

}


/* =====================================
   PART 5 - CHARTS & ANALYTICS
===================================== */

/* =========================
   CHART SECTIONS
========================= */

.chart-section{

    margin-top:30px;

}

.chart-section h2{

    margin-bottom:20px;

}

/* =========================
   CHART CONTAINER
========================= */

.chart-container{

    position:relative;

    width:100%;

    min-height:420px;

    padding:25px;

    border-radius:28px;

    background:
    rgba(255,255,255,.08);

    backdrop-filter:
    blur(20px);

    -webkit-backdrop-filter:
    blur(20px);

    border:
    1px solid
    rgba(255,255,255,.15);

    box-shadow:
    0 15px 40px
    rgba(0,0,0,.2);

    transition:.35s ease;

}

.chart-container:hover{

    transform:
    translateY(-5px);

}

/* =========================
   CHART CANVAS
========================= */

.chart-container canvas{

    width:100% !important;

    height:350px !important;

}

/* =========================
   ANALYTICS DASHBOARD
========================= */

.analytics-grid{

    display:grid;

    grid-template-columns:
    repeat(
        auto-fit,
        minmax(260px,1fr)
    );

    gap:22px;

    margin-top:30px;

}

/* =========================
   ANALYTICS CARD
========================= */

.analytics-card{

    position:relative;

    overflow:hidden;

    padding:25px;

    border-radius:25px;

    background:
    rgba(255,255,255,.08);

    backdrop-filter:
    blur(20px);

    border:
    1px solid
    rgba(255,255,255,.15);

    transition:.35s ease;

}

.analytics-card:hover{

    transform:
    translateY(-8px);

    box-shadow:
    0 20px 40px
    rgba(0,0,0,.25);

}

/* =========================
   CARD ICON
========================= */

.analytics-card i{

    font-size:2rem;

    margin-bottom:15px;

}

/* =========================
   VALUE
========================= */

.analytics-value{

    font-size:2.3rem;

    font-weight:800;

    margin-bottom:8px;

}

/* =========================
   LABEL
========================= */

.analytics-label{

    opacity:.8;

    font-size:.95rem;

}

/* =========================
   CHANGE INDICATOR
========================= */

.analytics-change{

    margin-top:10px;

    display:inline-flex;

    align-items:center;

    gap:6px;

    font-size:.9rem;

    padding:6px 12px;

    border-radius:20px;

}

.analytics-up{

    background:
    rgba(34,197,94,.15);

    color:#22c55e;

}

.analytics-down{

    background:
    rgba(239,68,68,.15);

    color:#ef4444;

}

/* =========================
   TEMPERATURE CARD
========================= */

.temp-card{

    border-left:
    5px solid #f59e0b;

}

.temp-card i{

    color:#f59e0b;

}

/* =========================
   RAIN CARD
========================= */

.rain-card{

    border-left:
    5px solid #38bdf8;

}

.rain-card i{

    color:#38bdf8;

}

/* =========================
   WIND CARD
========================= */

.wind-card{

    border-left:
    5px solid #06b6d4;

}

.wind-card i{

    color:#06b6d4;

}

/* =========================
   HUMIDITY CARD
========================= */

.humidity-card{

    border-left:
    5px solid #8b5cf6;

}

.humidity-card i{

    color:#8b5cf6;

}

/* =========================
   UV CARD
========================= */

.uv-card{

    border-left:
    5px solid #ef4444;

}

.uv-card i{

    color:#ef4444;

}

/* =========================
   AQI CARD
========================= */

.aqi-analytics-card{

    border-left:
    5px solid #10b981;

}

.aqi-analytics-card i{

    color:#10b981;

}

/* =========================
   CHART HEADER
========================= */

.chart-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

    flex-wrap:wrap;

    gap:15px;

}

/* =========================
   CHART FILTERS
========================= */

.chart-filters{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

}

.chart-filter{

    border:none;

    cursor:pointer;

    padding:10px 18px;

    border-radius:20px;

    color:white;

    background:
    rgba(255,255,255,.12);

    transition:.3s ease;

}

.chart-filter:hover{

    background:
    rgba(255,255,255,.2);

}

.chart-filter.active{

    background:
    linear-gradient(
        135deg,
        #4facfe,
        #00f2fe
    );

}

/* =========================
   CHART LEGEND
========================= */

.custom-legend{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:20px;

}

.legend-item{

    display:flex;

    align-items:center;

    gap:8px;

}

.legend-color{

    width:14px;

    height:14px;

    border-radius:50%;

}

/* =========================
   INSIGHT PANEL
========================= */

.insight-panel{

    margin-top:25px;

    padding:20px;

    border-radius:22px;

    background:
    rgba(255,255,255,.08);

    border:
    1px solid
    rgba(255,255,255,.15);

}

.insight-panel h3{

    margin-bottom:10px;

}

.insight-panel p{

    opacity:.9;

    line-height:1.8;

}

/* =========================
   LIGHT MODE
========================= */

.light-mode .chart-container,
.light-mode .analytics-card,
.light-mode .insight-panel{

    background:
    rgba(255,255,255,.85);

    color:#111827;

    border:
    1px solid
    rgba(255,255,255,.7);

}

.light-mode .chart-filter{

    color:#111827;

}

/* =========================
   TABLET
========================= */

@media(max-width:992px){

    .chart-container{

        min-height:350px;

    }

    .analytics-grid{

        grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px,1fr)
        );

    }

}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

    .chart-container{

        padding:18px;

    }

    .chart-container canvas{

        height:280px !important;

    }

    .analytics-value{

        font-size:1.8rem;

    }

    .chart-header{

        flex-direction:column;

        align-items:flex-start;

    }

}

/* =========================
   SMALL PHONES
========================= */

@media(max-width:480px){

    .chart-container{

        min-height:300px;

    }

    .chart-container canvas{

        height:240px !important;

    }

    .analytics-card{

        padding:18px;

    }

}


/* =====================================
   PART 7 - WEATHER ANIMATIONS
===================================== */

/* =========================
   FLOATING CLOUDS
========================= */

.cloud{

    position:absolute;

    background:
    rgba(255,255,255,.25);

    border-radius:100px;

    filter:blur(2px);

    animation:
    cloudMove linear infinite;

}

.cloud::before,
.cloud::after{

    content:"";

    position:absolute;

    background:inherit;

    border-radius:50%;

}

.cloud::before{

    width:60px;
    height:60px;

    top:-30px;
    left:20px;

}

.cloud::after{

    width:80px;
    height:80px;

    top:-40px;
    right:20px;

}

@keyframes cloudMove{

    from{
        transform:
        translateX(-300px);
    }

    to{
        transform:
        translateX(120vw);
    }

}

/* =========================
   RAIN EFFECT
========================= */

.rain-drop{

    position:absolute;

    width:2px;

    height:20px;

    background:
    linear-gradient(
        transparent,
        rgba(255,255,255,.9)
    );

    animation:
    rainFall linear infinite;

}

@keyframes rainFall{

    0%{

        transform:
        translateY(-100px);

        opacity:0;

    }

    10%{

        opacity:1;

    }

    100%{

        transform:
        translateY(120vh);

        opacity:0;

    }

}

/* =========================
   HEAVY RAIN
========================= */

.heavy-rain .rain-drop{

    height:35px;

    width:3px;

}

/* =========================
   SNOW EFFECT
========================= */

.snowflake{

    position:absolute;

    color:white;

    user-select:none;

    animation:
    snowfall linear infinite;

}

@keyframes snowfall{

    0%{

        transform:
        translateY(-50px)
        translateX(0);

        opacity:0;

    }

    10%{

        opacity:1;

    }

    100%{

        transform:
        translateY(120vh)
        translateX(80px);

        opacity:0;

    }

}

/* =========================
   LIGHTNING EFFECT
========================= */

.lightning{

    position:fixed;

    inset:0;

    background:white;

    opacity:0;

    pointer-events:none;

    z-index:999;

}

.lightning.flash{

    animation:
    lightningFlash .5s ease;

}

@keyframes lightningFlash{

    0%{
        opacity:0;
    }

    10%{
        opacity:.8;
    }

    20%{
        opacity:0;
    }

    30%{
        opacity:.6;
    }

    100%{
        opacity:0;
    }

}

/* =========================
   FOG EFFECT
========================= */

.fog-layer{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        transparent,
        rgba(255,255,255,.08),
        transparent
    );

    filter:blur(20px);

    animation:
    fogMove 25s linear infinite;

}

@keyframes fogMove{

    0%{

        transform:
        translateX(-20%);

    }

    100%{

        transform:
        translateX(120%);

    }

}

/* =========================
   SUN GLOW
========================= */

.sun-glow{

    position:absolute;

    width:300px;

    height:300px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(255,223,0,.5),
        rgba(255,223,0,.15),
        transparent
    );

    filter:blur(30px);

    animation:
    sunPulse 6s ease-in-out infinite;

}

@keyframes sunPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.15);

    }

    100%{

        transform:scale(1);

    }

}

/* =========================
   STARS
========================= */

.star{

    position:absolute;

    width:3px;

    height:3px;

    background:white;

    border-radius:50%;

    animation:
    twinkle 3s infinite;

}

@keyframes twinkle{

    0%{

        opacity:.2;

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:.2;

    }

}

/* =========================
   MOON GLOW
========================= */

.moon-glow{

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(255,255,255,.45),
        transparent
    );

    filter:blur(20px);

    animation:
    moonPulse 8s infinite;

}

@keyframes moonPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.1);

    }

    100%{

        transform:scale(1);

    }

}

/* =========================
   RAINBOW
========================= */

.rainbow{

    position:absolute;

    width:500px;

    height:250px;

    border-radius:
    500px 500px 0 0;

    border-top:
    12px solid red;

    opacity:.3;

    animation:
    rainbowAppear 5s ease;

}

@keyframes rainbowAppear{

    from{

        opacity:0;

    }

    to{

        opacity:.3;

    }

}

/* =========================
   WEATHER BACKGROUNDS
========================= */

/* SUNNY */

.weather-sunny{

    background:
    linear-gradient(
        135deg,
        #f6d365,
        #fda085
    );

}

/* CLOUDY */

.weather-cloudy{

    background:
    linear-gradient(
        135deg,
        #667eea,
        #764ba2
    );

}

/* RAINY */

.weather-rainy{

    background:
    linear-gradient(
        135deg,
        #2c3e50,
        #4ca1af
    );

}

/* STORMY */

.weather-stormy{

    background:
    linear-gradient(
        135deg,
        #141e30,
        #243b55
    );

}

/* SNOWY */

.weather-snowy{

    background:
    linear-gradient(
        135deg,
        #d7d2cc,
        #304352
    );

}

/* FOGGY */

.weather-foggy{

    background:
    linear-gradient(
        135deg,
        #757f9a,
        #d7dde8
    );

}

/* NIGHT */

.weather-night{

    background:
    linear-gradient(
        135deg,
        #0f2027,
        #203a43,
        #2c5364
    );

}

/* =========================
   WEATHER TRANSITION
========================= */

body{

    transition:
    background 1s ease,
    color .5s ease;

}

/* =========================
   ANIMATION PERFORMANCE
========================= */

.cloud,
.rain-drop,
.snowflake,
.star{

    will-change:
    transform;

}

/* =========================
   MOBILE OPTIMIZATION
========================= */

@media(max-width:768px){

    .sun-glow{

        width:180px;
        height:180px;

    }

    .moon-glow{

        width:150px;
        height:150px;

    }

    .rainbow{

        width:250px;
        height:125px;

    }

}

/* =========================
   REDUCED MOTION SUPPORT
========================= */

@media(prefers-reduced-motion: reduce){

    *{

        animation:none !important;

        transition:none !important;

    }

}


/* =====================================
   PART 8 - RESPONSIVE & FINAL POLISH
===================================== */

/* =========================
   LARGE DESKTOPS
========================= */

@media(min-width:1600px){

    .container{

        max-width:1600px;

    }

    .current-weather-card{

        padding:50px;

    }

    #temperature{

        font-size:7rem;

    }

    .weather-icon{

        font-size:10rem;

    }

}

/* =========================
   DESKTOP DASHBOARD
========================= */

@media(min-width:1200px){

    .dashboard-layout{

        display:grid;

        grid-template-columns:
        2fr 1fr;

        gap:25px;

    }

}

/* =========================
   TABLET LANDSCAPE
========================= */

@media(max-width:1024px){

    .container{

        width:97%;

        padding:20px;

    }

    .current-weather-card{

        gap:20px;

    }

}

/* =========================
   TABLET PORTRAIT
========================= */

@media(max-width:900px){

    h1{

        font-size:2.4rem;

    }

    h2{

        font-size:1.4rem;

    }

    .metrics-grid,
    .analytics-grid{

        gap:15px;

    }

}

/* =========================
   MOBILE DEVICES
========================= */

@media(max-width:768px){

    .container{

        padding:15px;

    }

    .hero{

        padding:20px;

    }

    .current-weather-card{

        padding:20px;

    }

    #temperature{

        font-size:3.5rem;

    }

    .weather-icon{

        font-size:4.5rem;

    }

    .metric,
    .aq-card,
    .analytics-card{

        padding:18px;

    }

}

/* =========================
   SMALL PHONES
========================= */

@media(max-width:480px){

    .container{

        width:100%;

        padding:10px;

    }

    .hero{

        border-radius:20px;

    }

    h1{

        font-size:1.8rem;

    }

    h2{

        font-size:1.2rem;

    }

    #temperature{

        font-size:3rem;

    }

    .weather-icon{

        font-size:4rem;

    }

    .metric i,
    .analytics-card i{

        font-size:1.5rem;

    }

    .analytics-value{

        font-size:1.5rem;

    }

}

/* =========================
   ULTRA SMALL DEVICES
========================= */

@media(max-width:360px){

    h1{

        font-size:1.5rem;

    }

    #temperature{

        font-size:2.5rem;

    }

}

/* =========================
   LANDSCAPE PHONES
========================= */

@media(max-height:500px)
and (orientation:landscape){

    .hero{

        padding:15px;

    }

    section{

        margin-bottom:20px;

    }

}

/* =========================
   TOUCH IMPROVEMENTS
========================= */

button,
.metric,
.day-card,
.hour-card,
.advice-card{

    -webkit-tap-highlight-color:
    transparent;

}

/* =========================
   ACCESSIBILITY FOCUS
========================= */

button:focus,
input:focus,
select:focus{

    outline:none;

    box-shadow:
    0 0 0 3px
    rgba(79,172,254,.4);

}

/* =========================
   SCREEN READER HELPERS
========================= */

.sr-only{

    position:absolute;

    width:1px;

    height:1px;

    padding:0;

    margin:-1px;

    overflow:hidden;

    clip:
    rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}

/* =========================
   HOVER EFFECTS
========================= */

.metric,
.day-card,
.hour-card,
.advice-card,
.analytics-card,
.aq-card{

    transition:
    transform .3s ease,
    box-shadow .3s ease,
    background .3s ease;

}

/* =========================
   PREMIUM GLOW
========================= */

.glow{

    box-shadow:
    0 0 20px
    rgba(79,172,254,.4);

}

/* =========================
   PREMIUM SECTION DIVIDER
========================= */

.section-divider{

    width:100%;

    height:1px;

    margin:40px 0;

    background:
    linear-gradient(
        to right,
        transparent,
        rgba(255,255,255,.2),
        transparent
    );

}

/* =========================
   BADGES
========================= */

.badge{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:8px 14px;

    border-radius:25px;

    font-size:.85rem;

    font-weight:600;

}

/* =========================
   GLASS BUTTON
========================= */

.glass-btn{

    border:none;

    cursor:pointer;

    padding:12px 18px;

    border-radius:15px;

    background:
    rgba(255,255,255,.1);

    color:white;

    backdrop-filter:
    blur(12px);

    transition:.3s ease;

}

.glass-btn:hover{

    transform:
    translateY(-3px);

    background:
    rgba(255,255,255,.18);

}

/* =========================
   LOADING SHIMMER
========================= */

.shimmer{

    position:relative;

    overflow:hidden;

}

.shimmer::after{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.15),
        transparent
    );

    animation:
    shimmer 1.8s infinite;

}

@keyframes shimmer{

    to{

        left:100%;

    }

}

/* =========================
   PRINT MODE
========================= */

@media print{

    body{

        background:white;

        color:black;

    }

    #weatherAnimation,
    #themeBtn,
    #searchBtn,
    #locationBtn{

        display:none;

    }

    .hero,
    .metric,
    .day-card,
    .hour-card{

        border:
        1px solid #ccc;

        box-shadow:none;

    }

}

/* =========================
   FINAL GLASS EFFECT
========================= */

.hero,
.current-weather-card,
.metric,
.day-card,
.hour-card,
.aq-card,
.analytics-card,
.advice-card,
.summary-card,
.chart-container{

    backdrop-filter:
    blur(18px);

    -webkit-backdrop-filter:
    blur(18px);

}

/* =====================================
   END OF PREMIUM STYLE.CSS
===================================== */