*=========================================================RESET==========================================================*/ * {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


.weather-page {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: #f2f5f8;

    color: #182230;
    min-height: 100%;

}


button,
input {

    font: inherit;

}


button {

    cursor: pointer;

}


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

:root {

    --primary:
        #0b74b7;

    --primary-dark:
        #086292;

    --primary-soft:
        #edf8ff;

    --white:
        #ffffff;

    --background:
        #f2f5f8;

    --border:
        #dfe5eb;

    --text:
        #182230;

    --muted:
        #667085;

    --success:
        #16a34a;

    --warning:
        #f59e0b;

    --danger:
        #ef4444;

    --shadow:
        0 7px 25px rgba(15, 23, 42, .07);

}


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

.top-header {

    border-top:
        7px solid #303030;

    background:
        #126a94;

    color:
        white;

}


.header-inner {

    max-width:
        1500px;

    min-height:
        100px;

    margin:
        auto;

    padding:
        15px 25px;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        28px;

}


.home-button {

    color:
        white;

    text-decoration:
        none;

    font-size:
        22px;

    padding-top:
        3px;

}


.nav-menu {

    display:
        flex;

    flex:
        1;

    flex-wrap:
        wrap;

    gap:
        28px;

}


.nav-menu a {

    color:
        white;

    text-decoration:
        none;

    font-size:
        14px;

    line-height:
        30px;

}


.nav-menu a:hover {

    opacity:
        .8;

}


.social-list {

    margin-left:
        auto;

    display:
        flex;

    gap:
        10px;

}


.social-button {

    width:
        40px;

    height:
        40px;

    border-radius:
        50%;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    color:
        white;

    text-decoration:
        none;

}


.facebook {

    background:
        #2176df;

}


.twitter {

    background:
        #159ede;

}


.instagram {

    background:
        linear-gradient(135deg,
            #ffd600,
            #ff7a00,
            #ff0169,
            #d300c5);

}


/* =========================================================
           LOCATION SECTION
        ========================================================== */

.location-section {

    background:
        white;

    border-bottom:
        1px solid #e5e9ed;

    padding:
        32px 15px 38px;

}


.location-section-inner {

    max-width:
        1050px;

    margin:
        auto;

    text-align:
        center;

}


.page-title {

    color:
        var(--primary);

    font-size:
        29px;

    margin-bottom:
        7px;

}


.page-description {

    max-width:
        760px;

    margin:
        0 auto 22px;

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.6;

}


/* =========================================================
           WORLDWIDE DROPDOWN
        ========================================================== */

.worldwide-selector {

    display:
        flex;

    gap:
        10px;

    max-width:
        900px;

    margin:
        auto;

}


.worldwide-search {

    position:
        relative;

    flex:
        1;

}


.worldwide-input {

    width:
        100%;

    height:
        54px;

    border:
        1px solid #ccd5de;

    border-radius:
        7px;

    padding:
        0 50px 0 16px;

    font-size:
        15px;

    outline:
        none;

    background:
        white;

}


.worldwide-input:focus {

    border-color:
        var(--primary);

    box-shadow:
        0 0 0 3px rgba(11, 116, 183, .10);

}


.worldwide-search-icon {

    position:
        absolute;

    right:
        17px;

    top:
        18px;

    color:
        #7b8794;

}


/* =========================================================
           DROPDOWN PANEL
        ========================================================== */

.worldwide-dropdown {

    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        59px;

    background:
        white;

    border:
        1px solid #d5dde5;

    border-radius:
        8px;

    box-shadow:
        0 14px 40px rgba(15, 23, 42, .14);

    max-height:
        430px;

    overflow-y:
        auto;

    z-index:
        100000;

    text-align:
        left;

    display:
        none;

}


.dropdown-loader {

    display:
        flex;

    gap:
        10px;

    align-items:
        center;

    padding:
        16px;

    color:
        #667085;

    font-size:
        13px;

}


.location-option {

    display:
        flex;

    gap:
        13px;

    padding:
        13px 15px;

    border-bottom:
        1px solid #edf0f3;

    cursor:
        pointer;

    background:
        white;

}


.location-option:last-child {

    border-bottom:
        none;

}


.location-option:hover {

    background:
        #f4faff;

}


.location-option-icon {

    color:
        var(--primary);

    width:
        25px;

    padding-top:
        3px;

}


.location-option-info {

    flex:
        1;

    min-width:
        0;

}


.location-option-name {

    color:
        #182230;

    font-size:
        14px;

    font-weight:
        700;

    margin-bottom:
        5px;

}


.location-hierarchy {

    font-size:
        12px;

    color:
        #475467;

    line-height:
        1.5;

}


.location-hierarchy span {

    color:
        var(--primary);

    font-weight:
        600;

}


.location-meta {

    margin-top:
        4px;

    color:
        #98a2b3;

    font-size:
        10px;

}


.gps-button {

    min-width:
        165px;

    border:
        none;

    border-radius:
        7px;

    background:
        var(--primary);

    color:
        white;

    font-weight:
        700;

    padding:
        0 20px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        8px;

}


.gps-button:hover {

    background:
        var(--primary-dark);

}


/* =========================================================
           SEARCH HELP
        ========================================================== */

.search-example {

    margin-top:
        12px;

    color:
        #98a2b3;

    font-size:
        11px;

}


.quick-location-list {

    margin-top:
        14px;

    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        7px;

}


.quick-location-button {

    border:
        1px solid #dce4eb;

    background:
        white;

    border-radius:
        20px;

    padding:
        7px 12px;

    color:
        #475467;

    font-size:
        11px;

}


.quick-location-button:hover {

    color:
        var(--primary);

    border-color:
        #a9d5ed;

    background:
        #f2faff;

}


/* =========================================================
           MAIN PAGE
        ========================================================== */

.page-section {

    padding:
        18px 15px 50px;

}


.weather-layout {

    width: 100%;

    max-width:
        1550px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        22% minmax(0, 56%) 22%;

    gap:
        20px;

    align-items:
        start;

}

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

.panel {

    background:
        white;

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

    border-radius:
        8px;

    overflow:
        hidden;

    box-shadow:
        var(--shadow);

}


.panel-heading {

    padding:
        14px 15px;

    background:
        var(--primary);

    color:
        white;

    font-size:
        14px;

    font-weight:
        700;

}


.panel-body {

    padding:
        15px;

}


.section-label {

    margin-bottom:
        9px;

    color:
        var(--primary);

    font-size:
        11px;

    font-weight:
        800;

}


.divider {

    border:
        none;

    border-top:
        1px solid #edf0f3;

    margin:
        16px 0;

}


/* =========================================================
           ABOUT
        ========================================================== */

.about-box {

    border:
        1px solid #e1e7ec;

    border-radius:
        7px;

    background:
        #f7fafc;

    padding:
        12px;

    color:
        #344054;

    font-size:
        12px;

    line-height:
        1.7;

}


/* =========================================================
           MAP
        ========================================================== */

#weatherMap {

    width:
        100%;

    height:
        240px;

    border-radius:
        7px;

    border:
        1px solid #dae1e7;

}


.map-coordinates {

    margin-top:
        8px;

    font-size:
        10px;

    font-weight:
        700;

    color:
        #667085;

    line-height:
        1.5;

}


/* =========================================================
           LOCATION HIERARCHY SIDEBAR
        ========================================================== */

.location-detail-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

}


.location-detail-item {

    border:
        1px solid #e3e8ed;

    border-radius:
        6px;

    padding:
        9px;

}


.location-detail-label {

    color:
        #98a2b3;

    font-size:
        9px;

    text-transform:
        uppercase;

    margin-bottom:
        3px;

}


.location-detail-value {

    color:
        #344054;

    font-size:
        11px;

    font-weight:
        700;

    word-break:
        break-word;

}


/* =========================================================
           CENTER PANEL
        ========================================================== */

.weather-main {

    background:
        white;

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

    border-radius:
        8px;

    box-shadow:
        var(--shadow);

    overflow:
        hidden;

}


.weather-main-heading {

    padding:
        18px;

    color:
        var(--primary);

    font-size:
        18px;

    font-weight:
        800;

    border-bottom:
        1px solid #e6eaee;

}



.weather-layout>.panel,
.weather-layout>.weather-main {

    width: 100%;

    min-width: 0;

}

.weather-main-body {

    padding:
        17px;

}


/* =========================================================
           LOCATION DISPLAY
        ========================================================== */

.selected-location-wrapper {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        15px;

    align-items:
        flex-start;

}


.selected-location-title {

    font-size:
        18px;

    font-weight:
        800;

    color:
        #182230;

}


.selected-location-path {

    margin-top:
        5px;

    color:
        #667085;

    font-size:
        12px;

    line-height:
        1.5;

}


.timezone-text {

    margin-top:
        4px;

    font-size:
        10px;

    color:
        #98a2b3;

}


.live-badge {

    padding:
        6px 10px;

    border-radius:
        20px;

    background:
        #ebf8ff;

    color:
        var(--primary);

    font-size:
        10px;

    font-weight:
        800;

    white-space:
        nowrap;

}


/* =========================================================
           DATE TIME
        ========================================================== */

.date-status-row {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        15px;

    align-items:
        stretch;

}


.date-status-column {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

}


.date-status-column .current-date-card,
.date-status-column .status-card {

    flex:
        1;

}

.current-date-card {

    padding:
        12px;

    border:
        1px solid #d8e4ec;

    border-radius:
        7px;

    background:
        #f4f9fc;

    font-size:
        13px;

    font-weight:
        700;

}


/* =========================================================
           STATUS
        ========================================================== */

.status-card {

    padding:
        11px;

    background:
        #f9fbfc;

    border:
        1px dashed #ced9e2;

    border-radius:
        7px;

    color:
        #475467;

    font-size:
        11px;

}


/* =========================================================
           WEATHER VISUAL CARD
        ========================================================== */

.current-weather-layout {

    display:
        grid;

    grid-template-columns:
        minmax(260px, 1.4fr) minmax(120px, .8fr) minmax(120px, .8fr);

    gap:
        12px;

}


.weather-visual-card {

    grid-row:
        span 3;

    position:
        relative;

    min-height:
        330px;

    overflow:
        hidden;

    border:
        1px solid #dfe6ec;

    border-radius:
        12px;

    background:
        linear-gradient(180deg,
            #dff4ff,
            #f7fcff);

}


.weather-visual-background {

    position:
        absolute;

    inset:
        0;

    overflow:
        hidden;

}


.weather-content {

    position:
        relative;

    z-index:
        20;

    height:
        100%;

    min-height:
        330px;

    padding:
        22px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-end;

    align-items:
        center;

    text-align:
        center;

}


.weather-temperature {

    font-size:
        50px;

    line-height:
        1;

    font-weight:
        900;

    color:
        #111827;

    text-shadow:
        0 1px 1px rgba(255, 255, 255, .6);

}


.weather-condition {

    margin-top:
        9px;

    color:
        #075f96;

    font-size:
        17px;

    font-weight:
        800;

}


.weather-feels {

    margin-top:
        6px;

    color:
        #667085;

    font-size:
        11px;

}

/* =========================================================
   PREMIUM SUN ANIMATION
========================================================= */

.animated-sun {

    position:
        absolute;

    top:
        40px;

    left:
        50%;

    width:
        100px;

    height:
        100px;

    margin-left:
        -50px;

    border-radius:
        50%;

    /* Premium golden sun */
    background:
        radial-gradient(
            circle at 35% 30%,
            #fff9c4 0%,
            #ffe76a 18%,
            #ffc928 48%,
            #f5a623 78%,
            #ed8b18 100%
        );

    /* Layered realistic glow */
    box-shadow:
        0 0 12px rgba(255, 213, 72, .9),
        0 0 28px rgba(255, 193, 7, .7),
        0 0 55px rgba(255, 174, 0, .45),
        0 0 90px rgba(255, 174, 0, .22);

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

    z-index:
        2;

}


/* =========================================================
   SUN RAYS
========================================================= */

.sun-rays {

    position:
        absolute;

    top:
        18px;

    left:
        50%;

    width:
        145px;

    height:
        145px;

    margin-left:
        -72.5px;

    animation:
        sunRotate 18s linear infinite;

    z-index:
        1;

}


.sun-rays span {

    position:
        absolute;

    left:
        69px;

    top:
        0;

    width:
        6px;

    height:
        24px;

    /* Softer premium rays */
    background:
        linear-gradient(
            to bottom,
            rgba(255, 231, 106, .95),
            rgba(255, 194, 37, .65),
            rgba(255, 194, 37, 0)
        );

    border-radius:
        10px;

    transform-origin:
        3px 72px;

    filter:
        drop-shadow(
            0 0 4px rgba(255, 193, 7, .35)
        );

}


/* =========================================================
   RAY POSITIONS
========================================================= */

.sun-rays span:nth-child(1) {
    transform: rotate(0deg);
}

.sun-rays span:nth-child(2) {
    transform: rotate(45deg);
}

.sun-rays span:nth-child(3) {
    transform: rotate(90deg);
}

.sun-rays span:nth-child(4) {
    transform: rotate(135deg);
}

.sun-rays span:nth-child(5) {
    transform: rotate(180deg);
}

.sun-rays span:nth-child(6) {
    transform: rotate(225deg);
}

.sun-rays span:nth-child(7) {
    transform: rotate(270deg);
}

.sun-rays span:nth-child(8) {
    transform: rotate(315deg);
}


/* =========================================================
   SOFT OUTER GLOW
========================================================= */

.animated-sun::before {

    content:
        "";

    position:
        absolute;

    inset:
        -18px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 213, 72, .28) 0%,
            rgba(255, 193, 7, .14) 45%,
            transparent 72%
        );

    filter:
        blur(7px);

    z-index:
        -1;

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

}


/* =========================================================
   SUBTLE INNER HIGHLIGHT
========================================================= */

.animated-sun::after {

    content:
        "";

    position:
        absolute;

    top:
        12px;

    left:
        16px;

    width:
        28px;

    height:
        20px;

    border-radius:
        50%;

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

    filter:
        blur(5px);

}


/* =========================================================
   SUN PULSE
========================================================= */

@keyframes sunPulse {

    0%,
    100% {

        transform:
            scale(1);

    }

    50% {

        transform:
            scale(1.045);

    }

}


/* =========================================================
   OUTER GLOW ANIMATION
========================================================= */

@keyframes sunGlow {

    0%,
    100% {

        opacity:
            .65;

        transform:
            scale(.96);

    }

    50% {

        opacity:
            1;

        transform:
            scale(1.05);

    }

}


/* =========================================================
   RAY ROTATION
========================================================= */

@keyframes sunRotate {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


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

.cloud {

    position:
        absolute;

    width:
        130px;

    height:
        42px;

    background:
        #ffffff;

    border-radius:
        60px;

    filter:
        drop-shadow(0 6px 10px rgba(15, 23, 42, .09));

}


.cloud:before {

    content:
        "";

    position:
        absolute;

    width:
        55px;

    height:
        55px;

    border-radius:
        50%;

    background:
        inherit;

    left:
        18px;

    top:
        -27px;

}


.cloud:after {

    content:
        "";

    position:
        absolute;

    width:
        70px;

    height:
        70px;

    border-radius:
        50%;

    background:
        inherit;

    right:
        13px;

    top:
        -36px;

}


.cloud-one {

    top:
        70px;

    left:
        -150px;

    opacity:
        .95;

    animation:
        cloudMoveOne 13s linear infinite;

}


.cloud-two {

    top:
        120px;

    left:
        -180px;

    transform:
        scale(.75);

    opacity:
        .75;

    animation:
        cloudMoveTwo 17s linear infinite;

}


.cloud-three {

    top:
        50px;

    left:
        -190px;

    transform:
        scale(.58);

    opacity:
        .62;

    animation:
        cloudMoveThree 21s linear infinite;

}


@keyframes cloudMoveOne {

    from {

        left:
            -180px;

    }

    to {

        left:
            calc(100% + 180px);

    }

}


@keyframes cloudMoveTwo {

    from {

        left:
            -220px;

    }

    to {

        left:
            calc(100% + 220px);

    }

}


@keyframes cloudMoveThree {

    from {

        left:
            -250px;

    }

    to {

        left:
            calc(100% + 250px);

    }

}


/* =========================================================
           DARK RAIN CLOUD
        ========================================================== */

.rain-cloud {

    position:
        absolute;

    top:
        63px;

    left:
        50%;

    transform:
        translateX(-50%);

    width:
        165px;

    height:
        55px;

    background:
        #64748b;

    border-radius:
        60px;

    box-shadow:
        0 9px 18px rgba(15, 23, 42, .17);

}


.rain-cloud:before {

    content:
        "";

    position:
        absolute;

    width:
        72px;

    height:
        72px;

    border-radius:
        50%;

    background:
        #64748b;

    left:
        21px;

    top:
        -34px;

}


.rain-cloud:after {

    content:
        "";

    position:
        absolute;

    width:
        90px;

    height:
        90px;

    border-radius:
        50%;

    background:
        #64748b;

    right:
        17px;

    top:
        -47px;

}


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

.rain-container {

    position:
        absolute;

    top:
        122px;

    left:
        50%;

    width:
        170px;

    height:
        125px;

    transform:
        translateX(-50%);

    overflow:
        hidden;

}


.raindrop {

    position:
        absolute;

    width:
        3px;

    height:
        20px;

    background:
        #299bd7;

    border-radius:
        3px;

    transform:
        rotate(12deg);

    animation:
        rainDrop .8s linear infinite;

}


.raindrop:nth-child(1) {

    left:
        10%;

    animation-delay:
        .1s;

}


.raindrop:nth-child(2) {

    left:
        23%;

    animation-delay:
        .4s;

}


.raindrop:nth-child(3) {

    left:
        37%;

    animation-delay:
        .18s;

}


.raindrop:nth-child(4) {

    left:
        50%;

    animation-delay:
        .58s;

}


.raindrop:nth-child(5) {

    left:
        63%;

    animation-delay:
        .28s;

}


.raindrop:nth-child(6) {

    left:
        76%;

    animation-delay:
        .67s;

}


.raindrop:nth-child(7) {

    left:
        88%;

    animation-delay:
        .35s;

}


@keyframes rainDrop {

    0% {

        top:
            -30px;

        opacity:
            0;

    }

    20% {

        opacity:
            1;

    }

    100% {

        top:
            130px;

        opacity:
            .3;

    }

}


/* =========================================================
           THUNDER
        ========================================================== */

.lightning {

    position:
        absolute;

    top:
        125px;

    left:
        51%;

    font-size:
        54px;

    color:
        #ffd600;

    transform:
        translateX(-50%);

    animation:
        lightningFlash 2.4s infinite;

}


@keyframes lightningFlash {

    0%,
    15%,
    18%,
    100% {

        opacity:
            0;

    }

    16%,
    17% {

        opacity:
            1;

    }

}


/* =========================================================
           NIGHT
        ========================================================== */

.night-background {

    background:
        linear-gradient(180deg,
            #12244b,
            #315586) !important;

}


.animated-moon {

    position:
        absolute;

    top:
        45px;

    left:
        50%;

    width:
        94px;

    height:
        94px;

    margin-left:
        -47px;

    border-radius:
        50%;

    background:
        #f8f4dc;

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

}


.animated-moon:after {

    content:
        "";

    position:
        absolute;

    width:
        88px;

    height:
        88px;

    background:
        #1b3764;

    border-radius:
        50%;

    left:
        29px;

    top:
        -9px;

}


.star {

    position:
        absolute;

    width:
        4px;

    height:
        4px;

    border-radius:
        50%;

    background:
        white;

    animation:
        starBlink 1.8s ease-in-out infinite;

}


@keyframes starBlink {

    0%,
    100% {

        opacity:
            .2;

    }

    50% {

        opacity:
            1;

    }

}

/* =========================================================
   WEATHER METRIC CARDS
========================================================= */

.weather-metric {

    border:
        1px solid #dde4ea;

    border-radius:
        9px;

    background:
        white;

    padding:
        15px;

    min-height:
        105px;

}


.weather-metric-heading {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-bottom:
        9px;

}


.weather-metric-label {

    color:
        #667085;

    font-size:
        14px;

    font-weight:
        700;

}


.weather-metric-icon {

    color:
        var(--primary);

    font-size:
        17px;

}


.weather-metric-value {

    font-size:
        23px;

    font-weight:
        800;

    color:
        #182230;

    line-height:
        1.2;

}


.weather-metric-subtitle {

    margin-top:
        5px;

    color:
        #98a2b3;

    font-size:
        11px;

    line-height:
        1.4;

}

/* =========================================================
           CONDITION BANNER
        ========================================================== */

.current-condition-message {

    margin-top:
        13px;

    padding:
        13px;

    border:
        1px solid #cce7f7;

    border-radius:
        8px;

    background:
        #eef9ff;

    display:
        flex;

    gap:
        12px;

    align-items:
        center;

}


.condition-message-icon {

    width:
        44px;

    height:
        44px;

    border-radius:
        50%;

    flex-shrink:
        0;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    background:
        white;

    color:
        var(--primary);

    font-size:
        18px;

}
.condition-message-title {

    display:
        block;

    font-size:
        15px;

    font-weight:
        800;

    color:
        #182230;

}


.condition-message-text {

    display:
        block;

    margin-top:
        4px;

    color:
        #667085;

    font-size:
        12px;

    line-height:
        1.6;

}




/* =========================================================
           DETAILS
        ========================================================== */

.content-section-title {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        12px;

    color:
        var(--primary);

    font-size:
        14px;

    font-weight:
        800;

}


.weather-detail-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4,
            minmax(0, 1fr));

    gap:
        10px;

}


.weather-detail-card {

    border:
        1px solid #e0e6eb;

    border-radius:
        8px;

    padding:
        12px;

    background:
        #fafcfd;

}


.weather-detail-label {

    color:
        #667085;

    font-size:
        9px;

    font-weight:
        800;

    text-transform:
        uppercase;

    margin-bottom:
        7px;

}


.weather-detail-value {

    color:
        #182230;

    font-size:
        16px;

    font-weight:
        800;

}


.weather-detail-note {

    margin-top:
        4px;

    font-size:
        9px;

    color:
        #98a2b3;

}


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

.sun-info-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4,
            1fr);

    gap:
        10px;

}


.sun-info-card {

    border:
        1px solid #f0e2ba;

    border-radius:
        8px;

    padding:
        13px;

    text-align:
        center;

    background:
        #fffaf0;

}


.sun-info-icon {

    font-size:
        27px;

    margin-bottom:
        6px;

}


.sun-info-label {

    color:
        #667085;

    font-size:
        9px;

    font-weight:
        800;

}


.sun-info-value {

    margin-top:
        4px;

    color:
        #182230;

    font-size:
        14px;

    font-weight:
        800;

}


.sun-arc-card {

    padding:
        14px 12px 12px;

    overflow:
        hidden;

    border:
        1px solid #e2e8ee;

    border-radius:
        12px;

    background:
        linear-gradient(180deg, #f8fbfd 0%, #eef3f6 100%);

}


.sun-arc-stage {

    position:
        relative;

    height:
        145px;

}


.sun-arc-stage svg {

    width:
        100%;

    height:
        100%;

    overflow:
        visible;

}


.sun-arc-path {

    fill:
        none;

    stroke:
        #344054;

    stroke-width:
        2;

    stroke-dasharray:
        2 5;

    stroke-linecap:
        round;

    animation:
        sunArcDashes 12s linear infinite;

}


@keyframes sunArcDashes {

    to {
        stroke-dashoffset: -70;
    }

}


.sun-arc-horizon {

    stroke:
        #667085;

    stroke-width:
        1.5;

}


.sun-arc-marker {

    position:
        absolute;

    left:
        10%;

    top:
        83.3333%;

    width:
        30px;

    height:
        30px;

    display:
        grid;

    place-items:
        center;

    color:
        #f59e0b;

    font-size:
        25px;

    filter:
        drop-shadow(0 2px 5px rgba(245, 158, 11, .35));

    transform:
        translate(-50%, -50%);

    transition:
        opacity .4s ease;

    animation:
        sunArcPulse 2.2s ease-in-out infinite;

}


.sun-arc-marker.is-night {

    opacity:
        .55;

}


@keyframes sunArcPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }

}


.sun-arc-times {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        12px;

    margin-top:
        -8px;

}


.sun-arc-time:last-child {

    text-align:
        right;

}


.sun-arc-time span,
.sun-arc-status {

    color:
        #667085;

    font-size:
        9px;

    font-weight:
        700;

    text-transform:
        uppercase;

}


.sun-arc-time strong {

    display:
        block;

    margin-top:
        3px;

    font-size:
        13px;

}


.sun-arc-status {

    margin-top:
        10px;

    text-align:
        center;

    color:
        var(--primary);

}


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

.forecast-scroll {

    overflow-x:
        auto;

    padding-bottom:
        5px;

}


.daily-forecast {

    display:
        grid;

    grid-template-columns:
        repeat(7,
            minmax(120px, 1fr));

    min-width:
        890px;

    gap:
        9px;

}


.daily-weather-card {

    border:
        1px solid #e0e5ea;

    border-radius:
        8px;

    background:
        white;

    padding:
        13px;

    text-align:
        center;

}


.daily-day {

    font-size:
        11px;

    font-weight:
        800;

}


.daily-date {

    margin-top:
        3px;

    color:
        #98a2b3;

    font-size:
        9px;

}


.daily-icon {

    font-size:
        31px;

    margin:
        10px 0;

}


.daily-condition {

    color:
        #667085;

    font-size:
        9px;

    min-height:
        28px;

}


.daily-max {

    font-size:
        16px;

    font-weight:
        800;

    margin-top:
        5px;

}


.daily-min {

    color:
        #667085;

    font-size:
        10px;

}


.daily-rain {

    color:
        var(--primary);

    margin-top:
        7px;

    font-size:
        9px;

}


.daily-temperature-chart {

    min-width:
        890px;

    margin-top:
        14px;

    padding:
        14px 10px 8px;

    border:
        1px solid #e0e5ea;

    border-radius:
        10px;

    background:
        linear-gradient(180deg, #fbfdfe 0%, #f2f6f9 100%);

}


.temperature-chart-legend {

    display:
        flex;

    justify-content:
        center;

    gap:
        24px;

    margin-bottom:
        3px;

    color:
        #667085;

    font-size:
        10px;

    font-weight:
        700;

}


.temperature-chart-legend span::before {

    content:
        "";

    display:
        inline-block;

    width:
        20px;

    height:
        2px;

    margin-right:
        6px;

    vertical-align:
        middle;

    background:
        #f59e0b;

}


.temperature-chart-legend span:last-child::before {

    background:
        #3788d8;

}


.daily-temperature-chart svg {

    display:
        block;

    width:
        100%;

    height:
        245px;

}


.temperature-chart-guide {

    stroke:
        #dfe6ec;

    stroke-width:
        1;

}


.temperature-chart-line {

    fill:
        none;

    stroke-width:
        2.5;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    stroke-dasharray:
        1200;

    stroke-dashoffset:
        1200;

    animation:
        temperatureLineDraw 2.2s ease forwards;

}


.temperature-chart-line.maximum {

    stroke:
        #f59e0b;

}


.temperature-chart-line.minimum {

    stroke:
        #3788d8;

    animation-delay:
        .2s;

}


.temperature-chart-point {

    stroke:
        white;

    stroke-width:
        2;

    opacity:
        0;

    animation:
        temperaturePointShow .35s ease 1.5s forwards;

}


.temperature-chart-label {

    fill:
        #182230;

    font-size:
        13px;

    font-weight:
        700;

    text-anchor:
        middle;

    opacity:
        0;

    animation:
        temperaturePointShow .4s ease 1.65s forwards;

}


@keyframes temperatureLineDraw {

    to {
        stroke-dashoffset: 0;
    }

}


@keyframes temperaturePointShow {

    to {
        opacity: 1;
    }

}


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

.hourly-list {

    display:
        flex;

    gap:
        9px;

    min-width:
        max-content;

}


.hourly-card {

    width:
        108px;

    border:
        1px solid #e0e5ea;

    border-radius:
        8px;

    padding:
        11px;

    text-align:
        center;

}


.hourly-time {

    font-size:
        10px;

    font-weight:
        800;

}


.hourly-icon {

    font-size:
        27px;

    margin:
        9px 0;

}


.hourly-temperature {

    font-size:
        15px;

    font-weight:
        800;

}


.hourly-condition {

    margin-top:
        3px;

    min-height:
        27px;

    font-size:
        9px;

    color:
        #667085;

}


.hourly-rain {

    margin-top:
        6px;

    font-size:
        9px;

    color:
        var(--primary);

}


/* =========================================================
           RIGHT SIDEBAR
        ========================================================== */

.weather-update-list {

    display:
        flex;

    flex-direction:
        column;

}


.weather-update {

    display:
        flex;

    gap:
        8px;

    padding:
        9px 0;

    border-bottom:
        1px solid #edf0f3;

    color:
        #344054;

    font-size:
        11px;

    line-height:
        1.5;

}


.weather-update:last-child {

    border-bottom:
        0;

}


.weather-update i {

    color:
        var(--primary);

    width:
        18px;

    margin-top:
        2px;

}


.weather-alert {

    border:
        1px solid #ffd4d4;

    border-radius:
        8px;

    background:
        #fff5f5;

    color:
        #b42318;

    padding:
        11px;

    font-size:
        10px;

    line-height:
        1.6;

}


.weather-alert strong {

    display:
        block;

    margin-bottom:
        5px;

}


/* =========================================================
           TODAY INFO
        ========================================================== */

.today-summary {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

}


.today-summary-item {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        9px;

    padding:
        8px;

    border:
        1px solid #e4e9ed;

    border-radius:
        6px;

    font-size:
        10px;

}


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

.global-loader {

    display:
        none;

    position:
        fixed;

    inset:
        0;

    z-index:
        999999;

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

    justify-content:
        center;

    align-items:
        center;

}


.global-loader-card {

    background:
        white;

    border-radius:
        10px;

    padding:
        25px 38px;

    box-shadow:
        0 12px 35px rgba(15, 23, 42, .16);

    text-align:
        center;

}


.loader-spinner {

    width:
        43px;

    height:
        43px;

    margin:
        0 auto 12px;

    border:
        4px solid #e2edf4;

    border-top-color:
        var(--primary);

    border-radius:
        50%;

    animation:
        loaderSpin .75s linear infinite;

}


@keyframes loaderSpin {

    to {

        transform:
            rotate(360deg);

    }

}


/* =========================================================
           ERROR
        ========================================================== */

.error-box {

    display:
        none;

    max-width:
        900px;

    margin:
        12px auto 0;

    border:
        1px solid #ffd2d2;

    border-radius:
        6px;

    background:
        #fff5f5;

    color:
        #b42318;

    text-align:
        left;

    padding:
        10px;

    font-size:
        11px;

}


/* =========================================================
           SCROLL BUTTON
        ========================================================== */

.scroll-top {

    position:
        fixed;

    right:
        22px;

    bottom:
        23px;

    width:
        48px;

    height:
        48px;

    border-radius:
        50%;

    border:
        none;

    z-index:
        200;

    background:
        #ff2746;

    color:
        white;

    font-size:
        18px;

    box-shadow:
        0 6px 17px rgba(0, 0, 0, .16);

}





/* =========================================================
   SMALL LAPTOP / LARGE TABLET
   992px - 1200px
========================================================= */

@media (max-width: 1200px) and (min-width: 992px) {

    .page-section {
        padding-left: 15px;
        padding-right: 15px;
    }

    .weather-layout {

        display: grid;

        grid-template-columns:
            24% minmax(0, 52%) 24%;

        gap: 14px;

        width: 100%;

        max-width: 100%;
    }


    /* Keep all 3 cards inside their own columns */

    .weather-layout > .panel,
    .weather-layout > .weather-main {

        width: 100%;

        min-width: 0;
    }


    /* IMPORTANT:
       Weather Updates stays on RIGHT */

    .weather-layout .right-sidebar {

        grid-column: auto;

        width: 100%;

        min-width: 0;
    }


    /* Weather Updates text */

    .weather-update {

        font-size: 12px;

        line-height: 1.5;

        padding: 9px 0;
    }


    .weather-update i {

        flex-shrink: 0;
    }


    /* Today section */

    .today-summary {

        display: flex;

        flex-direction: column;

        gap: 7px;
    }


    .today-summary-item {

        width: 100%;

        font-size: 11px;

        padding: 8px;
    }


    /* Sunrise / Sunset */

    .sun-arc-card {

        width: 100%;

        overflow: hidden;
    }


    /* Weather detail cards */

    .weather-detail-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* Current weather */

    .current-weather-layout {

        grid-template-columns:
            minmax(220px, 1.4fr)
            minmax(100px, .8fr)
            minmax(100px, .8fr);

        gap: 10px;
    }


    .weather-temperature {

        font-size: 45px;
    }

}
/* =========================================================
   TABLET
   768px - 991px
========================================================= */

@media (max-width: 991px) and (min-width: 768px) {

    .page-section {
        padding:
            15px 12px 40px;
    }

    .weather-layout {
        display: grid;

        grid-template-columns:
            1fr;

        gap:
            18px;

        max-width:
            100%;
    }

    /* Center weather card first */
    .weather-layout .weather-main {
        order: 1;
    }

    /* Left weather information */
    .weather-layout > .panel:not(.right-sidebar) {
        order: 2;
    }

    /* Weather updates */
    .weather-layout .right-sidebar {
        order: 3;
    }


    /* -----------------------------------------
       Main weather metrics
    ----------------------------------------- */

    .current-weather-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        gap:
            12px;
    }

    .weather-visual-card {
        grid-column:
            1 / -1;

        grid-row:
            auto;

        min-height:
            320px;
    }


    /* -----------------------------------------
       Details
    ----------------------------------------- */

    .weather-detail-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .sun-info-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* -----------------------------------------
       Header
    ----------------------------------------- */

    .header-inner {
        min-height:
            auto;

        padding:
            12px 18px;

        gap:
            15px;

        flex-wrap:
            wrap;
    }

    .nav-menu {
        gap:
            18px;
    }

    .nav-menu a {
        font-size:
            13px;
    }

    .social-list {
        margin-left:
            auto;
    }


    /* -----------------------------------------
       Location search
    ----------------------------------------- */

    .location-section {
        padding:
            25px 15px 30px;
    }

    .worldwide-selector {
        max-width:
            100%;
    }

}


/* =========================================================
   MOBILE
   576px - 767px
========================================================= */

@media (max-width: 767px) {

    .page-section {
        padding:
            12px 10px 35px;
    }


    /* -----------------------------------------
       Main layout
    ----------------------------------------- */

    .weather-layout {
        display:
            flex;

        flex-direction:
            column;

        gap:
            15px;

        width:
            100%;

        max-width:
            100%;
    }


    .weather-layout > .weather-main {
        order:
            1;

        width:
            100%;
    }


    .weather-layout > .panel:not(.right-sidebar) {
        order:
            2;

        width:
            100%;
    }


    .weather-layout > .right-sidebar {
        order:
            3;

        width:
            100%;
    }


    /* -----------------------------------------
       Main weather card
    ----------------------------------------- */

    .weather-main-heading {
        padding:
            14px;

        font-size:
            16px;
    }

    .weather-main-body {
        padding:
            13px;
    }


    /* -----------------------------------------
       Selected location
    ----------------------------------------- */

    .selected-location-wrapper {
        flex-direction:
            column;

        gap:
            10px;
    }

    .selected-location-title {
        font-size:
            17px;
    }

    .live-badge {
        align-self:
            flex-start;
    }


    /* -----------------------------------------
       Date / status
    ----------------------------------------- */

    .date-status-row {
        grid-template-columns:
            1fr;

        gap:
            10px;
    }


    /* -----------------------------------------
       Current weather
    ----------------------------------------- */

    .current-weather-layout {
        grid-template-columns:
            1fr;

        gap:
            10px;
    }


    .weather-visual-card {
        grid-column:
            auto;

        grid-row:
            auto;

        min-height:
            300px;
    }

    .weather-content {
        min-height:
            300px;

        padding:
            18px;
    }

    .weather-temperature {
        font-size:
            42px;
    }

    .weather-condition {
        font-size:
            15px;
    }


    /* -----------------------------------------
       Weather metric cards
    ----------------------------------------- */

    .weather-metric {
        min-height:
            85px;

        padding:
            11px;
    }


    /* -----------------------------------------
       Details
    ----------------------------------------- */

    .weather-detail-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            8px;
    }


    .weather-detail-card {
        padding:
            10px;
    }


    /* -----------------------------------------
       Sunrise / sunset
    ----------------------------------------- */

    .sun-info-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            8px;
    }


    .sun-info-card {
        padding:
            10px;
    }


    /* -----------------------------------------
       Search
    ----------------------------------------- */

    .location-section {
        padding:
            22px 10px 28px;
    }

    .page-title {
        font-size:
            25px;
    }

    .page-description {
        font-size:
            12px;
    }

    .worldwide-selector {
        flex-direction:
            column;

        width:
            100%;
    }

    .worldwide-input {
        height:
            50px;

        font-size:
            14px;
    }

    .gps-button {
        width:
            100%;

        min-width:
            0;

        min-height:
            50px;
    }


    /* -----------------------------------------
       Quick locations
    ----------------------------------------- */

    .quick-location-list {
        gap:
            6px;
    }

    .quick-location-button {
        padding:
            6px 10px;

        font-size:
            10px;
    }


    /* -----------------------------------------
       Header
    ----------------------------------------- */

    .header-inner {
        min-height:
            auto;

        padding:
            10px 12px;

        gap:
            10px;

        flex-direction:
            column;

        align-items:
            stretch;
    }

    .home-button {
        align-self:
            flex-start;
    }

    .nav-menu {
        width:
            100%;

        display:
            flex;

        flex-wrap:
            wrap;

        gap:
            8px 15px;
    }

    .nav-menu a {
        font-size:
            12px;

        line-height:
            24px;
    }

    .social-list {
        margin-left:
            0;

        justify-content:
            flex-start;
    }

    .social-button {
        width:
            35px;

        height:
            35px;
    }


    /* -----------------------------------------
       Map
    ----------------------------------------- */

    #weatherMap {
        height:
            220px;
    }


    /* -----------------------------------------
       Sun arc
    ----------------------------------------- */

    .sun-arc-stage {
        height:
            125px;
    }


    /* -----------------------------------------
       Scroll button
    ----------------------------------------- */

    .scroll-top {
        width:
            42px;

        height:
            42px;

        right:
            15px;

        bottom:
            18px;
    }

}


/* =========================================================
   SMALL MOBILE
   Below 576px
========================================================= */

@media (max-width: 575px) {

    .page-section {
        padding:
            10px 8px 30px;
    }


    .panel-heading {
        padding:
            12px;

        font-size:
            13px;
    }


    .panel-body {
        padding:
            12px;
    }


    .weather-main-heading {
        font-size:
            15px;

        padding:
            13px;
    }


    .weather-main-body {
        padding:
            11px;
    }


    .page-title {
        font-size:
            22px;
    }


    .page-description {
        font-size:
            11px;

        margin-bottom:
            16px;
    }


    .weather-visual-card {
        min-height:
            270px;
    }


    .weather-content {
        min-height:
            270px;

        padding:
            15px;
    }


    .weather-temperature {
        font-size:
            36px;
    }


    .weather-condition {
        font-size:
            14px;
    }


    .weather-feels {
        font-size:
            10px;
    }


    .weather-detail-grid {
        grid-template-columns:
            1fr;
    }


    .sun-info-grid {
        grid-template-columns:
            1fr 1fr;
    }


    .sun-info-value {
        font-size:
            13px;
    }


    .current-condition-message {
        padding:
            10px;

        gap:
            8px;
    }


    .condition-message-icon {
        width:
            34px;

        height:
            34px;
    }


    /* Horizontal forecast remains scrollable */
    .forecast-scroll {
        overflow-x:
            auto;

        -webkit-overflow-scrolling:
            touch;
    }


    .daily-forecast {
        min-width:
            890px;
    }


    .daily-temperature-chart {
        min-width:
            890px;
    }


    .hourly-list {
        overflow-x:
            auto;

        -webkit-overflow-scrolling:
            touch;

        padding-bottom:
            5px;
    }


    /* Location path should wrap */
    .selected-location-path {
        word-break:
            break-word;
    }


    /* Prevent long text from causing horizontal scroll */
    .weather-layout,
    .weather-main,
    .panel,
    .weather-main-body,
    .panel-body {
        max-width:
            100%;

        overflow-wrap:
            anywhere;
    }

}



@media (max-width: 767px) {

    .weather-metric {
        padding: 13px;
        min-height: 95px;
    }

    .weather-metric-label {
        font-size: 13px;
    }

    .weather-metric-value {
        font-size: 20px;
    }

    .weather-metric-subtitle {
        font-size: 10px;
    }

    .condition-message-title {
        font-size: 14px;
    }

    .condition-message-text {
        font-size: 11px;
    }

}