.tv-weather {

    position: relative;

    overflow: hidden;

    margin-bottom: 18px;

    padding: 0;

    border:
        1px solid
        rgba(
            19,
            168,
            255,
            0.55
        );

    border-radius: 18px;

    background:

        radial-gradient(
            circle at 10% 0%,
            rgba(
                23,
                145,
                224,
                0.24
            ),
            transparent 34%
        ),

        radial-gradient(
            circle at 95% 100%,
            rgba(
                14,
                92,
                145,
                0.20
            ),
            transparent 35%
        ),

        linear-gradient(
            125deg,
            #071a2b,
            #061421 58%,
            #071825
        );

    box-shadow:
        0 12px 38px
        rgba(
            0,
            0,
            0,
            0.22
        );

}


.tv-weather::before {

    content: "";

    position: absolute;

    top: -170px;
    right: -110px;

    width: 330px;
    height: 330px;

    border-radius: 50%;

    border:
        1px solid
        rgba(
            72,
            193,
            255,
            0.09
        );

    pointer-events: none;

}


.tv-top {

    display: grid;

    grid-template-columns:
        minmax(
            330px,
            0.9fr
        )
        minmax(
            520px,
            1.45fr
        );

    min-height: 208px;

}


.tv-current {

    display: grid;

    grid-template-columns:
        92px
        minmax(
            0,
            1fr
        );

    gap: 18px;

    align-items: center;

    padding:
        24px 28px;

    border-right:
        1px solid
        rgba(
            110,
            173,
            212,
            0.15
        );

}


.tv-icon {

    width: 88px;
    height: 88px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(
            75,
            184,
            249,
            0.25
        );

    border-radius: 24px;

    background:
        rgba(
            5,
            23,
            37,
            0.55
        );

    font-size: 48px;

    box-shadow:

        inset
        0 0 24px
        rgba(
            24,
            163,
            245,
            0.06
        ),

        0 9px 25px
        rgba(
            0,
            0,
            0,
            0.18
        );

}


.tv-kicker {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 6px;

    color: #83bddd;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.3px;

    text-transform: uppercase;

}


.tv-live-dot {

    width: 7px;
    height: 7px;

    display: inline-block;

    border-radius: 50%;

    background: #32e47a;

    box-shadow:
        0 0 10px
        rgba(
            50,
            228,
            122,
            0.75
        );

}


.tv-temp-line {

    display: flex;

    align-items: flex-end;

    gap: 13px;

}


.tv-temp {

    color: white;

    font-size: 46px;

    font-weight: 650;

    letter-spacing: -2px;

    line-height: 1;

}


.tv-condition {

    padding-bottom: 5px;

    color: #d7e8f3;

    font-size: 17px;

    font-weight: 600;

}


.tv-current-text {

    max-width: 560px;

    margin-top: 10px;

    color: #96afc0;

    font-size: 12px;

    line-height: 1.5;

}


.tv-quick {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 14px;

}


.tv-quick-item {

    padding:
        6px 9px;

    border:
        1px solid
        rgba(
            108,
            160,
            193,
            0.14
        );

    border-radius: 8px;

    background:
        rgba(
            1,
            10,
            17,
            0.18
        );

    color: #aac0ce;

    font-size: 10px;

}


.tv-hours-area {

    position: relative;

    z-index: 2;

    padding:
        21px 24px 18px;

}


.tv-hours-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 14px;

}


.tv-hours-title {

    color: #e7f3fa;

    font-size: 13px;

    font-weight: 650;

}


.tv-updated {

    color: #68879b;

    font-size: 10px;

}


.tv-hours {

    display: grid;

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

    gap: 9px;

}


.tv-hour {

    min-width: 0;

    padding:
        13px 12px;

    border:
        1px solid
        rgba(
            84,
            145,
            184,
            0.16
        );

    border-radius: 12px;

    background:
        rgba(
            4,
            18,
            29,
            0.50
        );

}


.tv-hour-time {

    color: #7e9daf;

    font-size: 10px;

}


.tv-hour-main {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 8px;

}


.tv-hour-icon {

    font-size: 26px;

}


.tv-hour-temp {

    color: white;

    font-size: 20px;

    font-weight: 650;

}


.tv-hour-rain {

    margin-top: 9px;

    color: #43bdfd;

    font-size: 10px;

}


.tv-lower {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1fr auto;

    align-items: center;

    gap: 20px;

    padding:
        14px 20px;

    border-top:
        1px solid
        rgba(
            91,
            154,
            194,
            0.16
        );

    background:
        rgba(
            1,
            9,
            15,
            0.20
        );

}


.tv-trend {

    display: flex;

    align-items: flex-start;

    gap: 12px;

}


.tv-trend-icon {

    min-width: 32px;
    height: 32px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background:
        rgba(
            19,
            168,
            255,
            0.09
        );

    font-size: 17px;

}


.tv-trend-label {

    color: #5ebff5;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.7px;

    text-transform: uppercase;

}


.tv-trend-text {

    margin-top: 3px;

    color: #cfdee7;

    font-size: 12px;

    line-height: 1.45;

}


.tv-actions {

    display: flex;

    align-items: center;

    gap: 8px;

}


.tv-button {

    height: 38px;

    padding:
        0 14px;

    border:
        1px solid
        #147dba;

    border-radius: 10px;

    background:

        linear-gradient(
            180deg,
            #0876b8,
            #07517f
        );

    color: white;

    cursor: pointer;

    font-size: 11px;

    font-weight: 600;

}


.tv-button:hover {

    background:

        linear-gradient(
            180deg,
            #0b94de,
            #08689e
        );

}


.tv-button.secondary {

    border-color:
        rgba(
            111,
            158,
            186,
            0.22
        );

    background:
        rgba(
            6,
            24,
            37,
            0.60
        );

    color: #9db7c7;

}


.tv-audio-status {

    min-width: 105px;

    color: #6f91a5;

    font-size: 9px;

    text-align: right;

}


.tv-demo {

    display: inline-flex;

    align-items: center;

    margin-left: 5px;

    padding:
        2px 6px;

    border:
        1px solid
        rgba(
            255,
            174,
            48,
            0.35
        );

    border-radius: 7px;

    color: #ffbd57;

    font-size: 8px;

    letter-spacing: 0.5px;

}


@media (
    max-width: 1250px
) {

    .tv-top {

        grid-template-columns:
            1fr;

    }


    .tv-current {

        border-right: 0;

        border-bottom:
            1px solid
            rgba(
                110,
                173,
                212,
                0.15
            );

    }

}


@media (
    max-width: 760px
) {

    .tv-current {

        grid-template-columns:
            70px
            1fr;

        padding:
            20px 17px;

    }


    .tv-icon {

        width: 66px;
        height: 66px;

        border-radius: 18px;

        font-size: 36px;

    }


    .tv-temp {

        font-size: 37px;

    }


    .tv-condition {

        font-size: 14px;

    }


    .tv-hours-area {

        padding:
            18px 15px;

    }


    .tv-hours {

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

    }


    .tv-lower {

        grid-template-columns:
            1fr;

    }


    .tv-actions {

        flex-wrap: wrap;

    }


    .tv-audio-status {

        text-align: left;

    }

}