/* =========================================================
   SURYA INSPIRASI SCHOOLS
   CCA REGISTRATION CLOSED
   CELEBRATION V3
   ========================================================= */


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

* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    padding: 0;
}


:root {

    --navy:
        #244873;

    --navy-dark:
        #1b365a;

    --navy-light:
        #eef4fa;

    --pink:
        #cf1f62;

    --pink-light:
        #fff0f5;

    --orange:
        #f5a623;

    --orange-light:
        #fff6e7;

    --green:
        #16a276;

    --green-light:
        #eef9f5;

    --text:
        #244873;

    --text-soft:
        #74869d;

    --line:
        #dfe7ef;

    --line-soft:
        #e9eef4;

    --white:
        #ffffff;
}


/* =========================================================
   BODY
   ========================================================= */

body.closed-body {

    min-height: 100vh;

    overflow-x: hidden;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color:
        var(--text);

    background:

        radial-gradient(
            circle at 5% 8%,
            rgba(207, 31, 98, .09),
            transparent 27%
        ),

        radial-gradient(
            circle at 95% 8%,
            rgba(245, 166, 35, .10),
            transparent 25%
        ),

        radial-gradient(
            circle at 50% 100%,
            rgba(36, 72, 115, .08),
            transparent 30%
        ),

        linear-gradient(
            180deg,
            #fbfcfe 0%,
            #f2f6fa 100%
        );
}


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

.closed-page {

    position: relative;

    width: 100%;

    min-height: 100vh;

    padding:
        24px
        28px
        20px;

    overflow: hidden;
}


.closed-shell {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 1500px;

    margin:
        0
        auto;
}


/* =========================================================
   BACKGROUND ORNAMENT
   ========================================================= */

.closed-background-decoration {

    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 0;
}


.decor {

    position: absolute;

    display: block;

    opacity: .55;

    animation:
        decorFloat
        7s
        ease-in-out
        infinite;
}


.decor-1 {

    width: 16px;

    height: 16px;

    top: 15%;

    left: 5%;

    border-radius: 5px;

    background:
        var(--pink);

    transform:
        rotate(18deg);
}


.decor-2 {

    width: 11px;

    height: 11px;

    top: 25%;

    right: 7%;

    border-radius: 50%;

    background:
        var(--orange);

    animation-delay:
        -1.5s;
}


.decor-3 {

    width: 8px;

    height: 28px;

    top: 50%;

    left: 3%;

    border-radius: 999px;

    background:
        var(--navy);

    transform:
        rotate(36deg);

    animation-delay:
        -3s;
}


.decor-4 {

    width: 14px;

    height: 14px;

    right: 4%;

    bottom: 17%;

    border:
        3px
        solid
        var(--pink);

    border-radius: 50%;

    background:
        transparent;

    animation-delay:
        -2.2s;
}


.decor-5 {

    width: 9px;

    height: 27px;

    top: 11%;

    left: 28%;

    border-radius: 999px;

    background:
        var(--orange);

    transform:
        rotate(55deg);

    animation-delay:
        -4s;
}


.decor-6 {

    width: 13px;

    height: 13px;

    right: 28%;

    bottom: 10%;

    border-radius: 3px;

    background:
        var(--navy);

    transform:
        rotate(25deg);

    animation-delay:
        -1s;
}


.decor-7 {

    width: 7px;

    height: 22px;

    top: 65%;

    right: 2%;

    border-radius: 999px;

    background:
        var(--orange);

    transform:
        rotate(-45deg);

    animation-delay:
        -5s;
}


.decor-8 {

    width: 12px;

    height: 12px;

    bottom: 8%;

    left: 12%;

    border-radius: 50%;

    background:
        var(--pink);

    animation-delay:
        -2.8s;
}


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

.closed-header {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 82px;

    padding:
        15px
        22px;

    overflow: hidden;

    border:
        1px
        solid
        rgba(219, 228, 237, .95);

    border-radius: 22px;

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

    backdrop-filter:
        blur(14px);

    box-shadow:
        0 14px 35px
        rgba(29, 54, 86, .07);

    animation:
        fadeDown
        .65s
        ease-out
        both;
}


.closed-header::before {

    content: "";

    position: absolute;

    top: 0;

    left: 38px;

    right: 38px;

    height: 4px;

    border-radius:
        0
        0
        99px
        99px;

    background:
        linear-gradient(
            90deg,
            var(--navy) 0%,
            var(--navy) 31%,
            var(--pink) 31%,
            var(--pink) 65%,
            var(--orange) 65%,
            var(--orange) 100%
        );

    background-size:
        130%
        100%;

    animation:
        topBarMove
        7s
        ease-in-out
        infinite
        alternate;
}


.closed-header-brand {

    display: flex;

    align-items: center;
}


.closed-header-brand img {

    display: block;

    width: auto;

    height: 45px;

    object-fit: contain;
}


.closed-header-meta {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    min-height: 40px;

    padding:
        0
        16px;

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

    border-radius: 999px;

    background:
        #f9fbfd;
}


.closed-header-dot {

    width: 9px;

    height: 9px;

    border-radius: 50%;

    background:
        var(--orange);

    box-shadow:
        0
        0
        0
        5px
        rgba(245, 166, 35, .14);

    animation:
        dotPulse
        2.4s
        ease-in-out
        infinite;
}


.closed-header-label {

    color:
        #8b9aab;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;
}


.closed-header-meta strong {

    color:
        var(--navy-dark);

    font-size:
        12px;

    font-weight:
        900;
}


/* =========================================================
   MAIN CARD
   ========================================================= */

.closed-card {

    position: relative;

    width: 100%;

    max-width: 1120px;

    margin:
        28px
        auto
        0;

    overflow: hidden;

    border:
        1px
        solid
        rgba(217, 227, 237, .96);

    border-radius:
        30px;

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

    backdrop-filter:
        blur(12px);

    box-shadow:

        0 30px 75px
        rgba(25, 53, 86, .11),

        0 3px 10px
        rgba(25, 53, 86, .03);

    animation:
        cardEntrance
        .78s
        cubic-bezier(
            .22,
            1,
            .36,
            1
        )
        both;
}


.closed-card::before {

    content: "";

    position: absolute;

    z-index: 8;

    top: 0;

    left: 0;

    right: 0;

    height: 6px;

    background:

        linear-gradient(
            90deg,

            var(--pink)
            0%,

            var(--pink)
            32%,

            var(--orange)
            32%,

            var(--orange)
            65%,

            var(--navy)
            65%,

            var(--navy)
            100%
        );
}


/* =========================================================
   CARD BACKGROUND SHAPES
   ========================================================= */

.closed-card-decoration {

    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 0;
}


.card-shape {

    position: absolute;

    display: block;

    border-radius: 50%;
}


.card-shape-1 {

    width: 320px;

    height: 320px;

    top: -185px;

    right: -80px;

    background:

        radial-gradient(
            circle,
            rgba(36, 72, 115, .055),
            transparent 69%
        );

    animation:
        softOrbit
        9s
        ease-in-out
        infinite;
}


.card-shape-2 {

    width: 230px;

    height: 230px;

    bottom: -130px;

    left: -80px;

    background:

        radial-gradient(
            circle,
            rgba(207, 31, 98, .055),
            transparent 68%
        );

    animation:
        softOrbit
        8s
        ease-in-out
        infinite
        reverse;
}


.card-shape-3 {

    width: 170px;

    height: 170px;

    top: 45%;

    left: 48%;

    background:

        radial-gradient(
            circle,
            rgba(245, 166, 35, .045),
            transparent 68%
        );

    animation:
        glowBreath
        6s
        ease-in-out
        infinite;
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.closed-card-content {

    position: relative;

    z-index: 4;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    padding:
        44px
        60px
        38px;
}


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

.closed-status {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 31px;

    margin-bottom:
        20px;

    padding:
        6px
        14px;

    border:
        1px
        solid
        #f0cbd9;

    border-radius:
        999px;

    background:
        rgba(255, 240, 245, .9);

    color:
        var(--pink);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

    box-shadow:
        0 8px 25px
        rgba(207, 31, 98, .08);
}


.closed-status-indicator {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        var(--pink);

    box-shadow:
        0
        0
        0
        5px
        rgba(207, 31, 98, .11);

    animation:
        statusPulse
        2.5s
        ease-in-out
        infinite;
}


/* =========================================================
   LOCK
   ========================================================= */

.closed-lock {

    position: relative;

    display: grid;

    place-items: center;

    width: 82px;

    height: 82px;

    margin-bottom:
        19px;
}


.closed-lock::before {

    content: "";

    position: absolute;

    inset: 1px;

    border-radius:
        27px;

    background:

        linear-gradient(
            145deg,
            #ffeaf2,
            #fff7f9
        );

    box-shadow:
        0 18px 40px
        rgba(207, 31, 98, .10);

    animation:
        lockFloat
        3.5s
        ease-in-out
        infinite;
}


.closed-lock::after {

    content: "";

    position: absolute;

    width: 105px;

    height: 105px;

    border:
        1px
        solid
        rgba(207, 31, 98, .09);

    border-radius:
        32px;

    animation:
        lockAura
        3.5s
        ease-in-out
        infinite;
}


.closed-lock-ring {

    position: relative;

    z-index: 3;

    display: grid;

    place-items: center;

    width: 100%;

    height: 100%;

    color:
        var(--pink);
}


.closed-lock svg {

    width:
        32px !important;

    height:
        32px !important;

    max-width:
        32px !important;

    max-height:
        32px !important;
}


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

.closed-eyebrow {

    margin-bottom:
        9px;

    color:
        var(--pink);

    font-size:
        10.5px;

    font-weight:
        900;

    letter-spacing:
        .19em;

    text-transform:
        uppercase;
}


.closed-title {

    max-width:
        750px;

    margin: 0;

    color:
        var(--navy);

    font-size:

        clamp(
            38px,
            4.1vw,
            58px
        );

    font-weight:
        900;

    line-height:
        1.03;

    letter-spacing:
        -.045em;
}


.closed-title span {

    display: block;

    position: relative;
}


.closed-title span::after {

    content: "";

    display: block;

    width: 72px;

    height: 4px;

    margin:
        19px
        auto
        0;

    border-radius:
        999px;

    background:

        linear-gradient(
            90deg,
            var(--pink),
            var(--orange)
        );
}


.closed-description {

    max-width:
        650px;

    margin:
        18px
        auto
        0;

    color:
        var(--text-soft);

    font-size:
        14px;

    line-height:
        1.78;
}


/* =========================================================
   ALREADY REGISTERED
   ========================================================= */

.closed-message {

    display: flex;

    align-items: flex-start;

    gap: 13px;

    width: 100%;

    max-width:
        720px;

    margin-top:
        25px;

    padding:
        15px
        17px;

    border:
        1px
        solid
        #d8ebe3;

    border-radius:
        17px;

    background:

        linear-gradient(
            180deg,
            #f6fbf8,
            #f1f8f5
        );

    text-align:
        left;

    box-shadow:
        0 10px 25px
        rgba(22, 162, 118, .045);
}


.closed-message-icon {

    display: grid;

    place-items: center;

    flex:
        0
        0
        29px;

    width: 29px;

    height: 29px;

    margin-top:
        1px;

    border-radius: 50%;

    background:
        #dcf3e9;

    color:
        var(--green);
}


.closed-message-icon svg {

    width:
        13px !important;

    height:
        13px !important;
}


.closed-message-copy strong {

    display: block;

    margin-bottom:
        3px;

    color:
        #3c665a;

    font-size:
        12.5px;

    font-weight:
        900;
}


.closed-message-copy p {

    margin: 0;

    color:
        #677f77;

    font-size:
        11.5px;

    line-height:
        1.65;
}


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

.closed-info {

    display: flex;

    align-items: stretch;

    justify-content: center;

    width: 100%;

    max-width:
        720px;

    margin-top:
        23px;

    padding:
        20px
        10px;

    border-top:
        1px
        solid
        var(--line-soft);

    border-bottom:
        1px
        solid
        var(--line-soft);
}


.closed-info-item {

    display: flex;

    flex:
        1;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-width: 0;

    padding:
        0
        20px;
}


.closed-info-label {

    display: block;

    margin-bottom:
        6px;

    color:
        #96a4b5;

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        .11em;

    text-transform:
        uppercase;
}


.closed-info-value {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    color:
        var(--navy);

    font-size:
        14px;

    font-weight:
        900;
}


.closed-info-value.is-closed {

    color:
        var(--pink);
}


.closed-info-value.is-closed span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        var(--pink);

    box-shadow:
        0
        0
        0
        4px
        rgba(207, 31, 98, .09);
}


.closed-info-divider {

    width: 1px;

    min-height:
        40px;

    background:
        var(--line);
}


/* =========================================================
   THANK YOU
   ========================================================= */

.closed-thank-you {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    margin-top:
        20px;
}


.closed-thank-you-line {

    width: 34px;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            #c7d2dd
        );
}


.closed-thank-you-line:last-child {

    transform:
        scaleX(-1);
}


.closed-thank-you p {

    margin: 0;

    color:
        #91a0b0;

    font-size:
        10px;

    font-weight:
        650;
}


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

.closed-footer {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding:
        17px
        0
        4px;

    color:
        #99a7b7;

    font-size:
        9.5px;

    animation:
        fadeUp
        .9s
        ease-out
        both;
}


.closed-footer i {

    display: block;

    width: 3px;

    height: 3px;

    border-radius:
        50%;

    background:
        #b5c0cc;
}


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

@keyframes cardEntrance {

    from {

        opacity: 0;

        transform:
            translateY(22px)
            scale(.985);
    }


    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


@keyframes fadeDown {

    from {

        opacity: 0;

        transform:
            translateY(-12px);
    }


    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes fadeUp {

    from {

        opacity: 0;

        transform:
            translateY(10px);
    }


    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes lockFloat {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(0deg);
    }


    50% {

        transform:
            translateY(-5px)
            rotate(.8deg);
    }
}


@keyframes lockAura {

    0%,
    100% {

        opacity: .3;

        transform:
            scale(.92);
    }


    50% {

        opacity: .75;

        transform:
            scale(1.04);
    }
}


@keyframes statusPulse {

    0%,
    100% {

        box-shadow:
            0
            0
            0
            5px
            rgba(207, 31, 98, .11);
    }


    50% {

        box-shadow:
            0
            0
            0
            9px
            rgba(207, 31, 98, .05);
    }
}


@keyframes dotPulse {

    0%,
    100% {

        box-shadow:
            0
            0
            0
            5px
            rgba(245, 166, 35, .14);
    }


    50% {

        box-shadow:
            0
            0
            0
            9px
            rgba(245, 166, 35, .06);
    }
}


@keyframes decorFloat {

    0%,
    100% {

        translate:
            0
            0;
    }


    50% {

        translate:
            0
            -13px;
    }
}


@keyframes softOrbit {

    0%,
    100% {

        transform:
            translate3d(
                0,
                0,
                0
            );
    }


    50% {

        transform:
            translate3d(
                14px,
                -12px,
                0
            );
    }
}


@keyframes glowBreath {

    0%,
    100% {

        opacity:
            .4;

        transform:
            scale(.95);
    }


    50% {

        opacity:
            1;

        transform:
            scale(1.08);
    }
}


@keyframes topBarMove {

    from {

        background-position:
            0%
            0;
    }


    to {

        background-position:
            100%
            0;
    }
}


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

@media (max-width: 900px) {

    .closed-page {

        padding:
            18px
            16px;
    }


    .closed-card {

        max-width:
            760px;

        margin-top:
            22px;
    }


    .closed-card-content {

        padding:
            40px
            34px
            34px;
    }


    .closed-title {

        font-size:
            43px;
    }

}


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

@media (max-width: 620px) {

    .closed-page {

        padding:
            12px
            11px
            16px;
    }


    .closed-header {

        min-height:
            70px;

        padding:
            12px
            14px;

        border-radius:
            18px;
    }


    .closed-header::before {

        left: 18px;

        right: 18px;
    }


    .closed-header-brand img {

        height:
            36px;
    }


    .closed-header-label {

        display:
            none;
    }


    .closed-header-meta {

        min-height:
            36px;

        padding:
            0
            11px;
    }


    .closed-card {

        margin-top:
            17px;

        border-radius:
            23px;
    }


    .closed-card-content {

        padding:
            32px
            19px
            27px;
    }


    .closed-status {

        margin-bottom:
            18px;

        font-size:
            9px;
    }


    .closed-lock {

        width:
            70px;

        height:
            70px;

        margin-bottom:
            17px;
    }


    .closed-lock::after {

        width:
            88px;

        height:
            88px;

        border-radius:
            27px;
    }


    .closed-lock svg {

        width:
            28px !important;

        height:
            28px !important;
    }


    .closed-eyebrow {

        font-size:
            9px;
    }


    .closed-title {

        font-size:
            34px;

        line-height:
            1.06;
    }


    .closed-title span::after {

        width:
            56px;

        margin-top:
            16px;
    }


    .closed-description {

        margin-top:
            15px;

        font-size:
            12.5px;
    }


    .closed-message {

        margin-top:
            20px;

        padding:
            14px;

        border-radius:
            15px;
    }


    .closed-info {

        display:
            grid;

        grid-template-columns:
            1fr;

        gap: 16px;

        padding:
            18px
            0;
    }


    .closed-info-item {

        padding:
            0;
    }


    .closed-info-divider {

        width:
            45px;

        min-height:
            1px;

        height:
            1px;

        margin:
            0
            auto;
    }


    .closed-thank-you-line {

        width:
            19px;
    }


    .closed-thank-you p {

        font-size:
            9px;
    }


    .closed-footer {

        flex-wrap:
            wrap;

        text-align:
            center;
    }

}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
   ========================================================= */

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

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;
    }

}


/* =========================================================
   WEEKLY CCA SCHEDULE BOARD
   ========================================================= */

.closed-schedule-section {

    position: relative;

    width: 100%;

    max-width: 1280px;

    margin:
        34px
        auto
        0;

    padding:
        42px;

    overflow: hidden;

    border:
        1px
        solid
        rgba(218, 227, 237, .96);

    border-radius:
        30px;

    background:

        radial-gradient(
            circle at 0% 0%,
            rgba(207, 31, 98, .055),
            transparent 26%
        ),

        radial-gradient(
            circle at 100% 0%,
            rgba(245, 166, 35, .065),
            transparent 24%
        ),

        rgba(255, 255, 255, .92);

    box-shadow:

        0 28px 70px
        rgba(27, 54, 90, .09),

        0 4px 16px
        rgba(27, 54, 90, .035);

    backdrop-filter:
        blur(16px);

    animation:
        scheduleSectionEnter
        .75s
        cubic-bezier(.22, 1, .36, 1)
        both;
}


.closed-schedule-section::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 5px;

    background:

        linear-gradient(
            90deg,
            #244873 0%,
            #244873 32%,
            #cf1f62 32%,
            #cf1f62 66%,
            #f5a623 66%,
            #f5a623 100%
        );
}


/* =========================================================
   SCHEDULE INTRO
   ========================================================= */

.closed-schedule-intro {

    position: relative;

    z-index: 2;

    max-width:
        760px;

    margin:
        0
        auto
        38px;

    text-align:
        center;
}


.closed-schedule-kicker {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom:
        10px;

    color:
        #cf1f62;

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;
}


.closed-schedule-kicker-dot {

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        #f5a623;

    box-shadow:
        0 0 0 5px
        rgba(245, 166, 35, .13);

    animation:
        scheduleDotPulse
        2.6s
        ease-in-out
        infinite;
}


.closed-schedule-title {

    margin: 0;

    color:
        #244873;

    font-size:
        clamp(
            31px,
            3.3vw,
            46px
        );

    font-weight:
        900;

    line-height:
        1.08;

    letter-spacing:
        -.035em;
}


.closed-schedule-description {

    max-width:
        620px;

    margin:
        13px
        auto
        0;

    color:
        #7a8ca1;

    font-size:
        13.5px;

    line-height:
        1.75;
}


.closed-schedule-note {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    margin-top:
        17px;

    padding:
        9px
        14px;

    border:
        1px
        solid
        #e4eaf0;

    border-radius:
        999px;

    background:
        rgba(247, 250, 252, .95);

    color:
        #8191a4;

    font-size:
        10.5px;

    line-height:
        1.4;
}


.closed-schedule-note svg {

    flex:
        0
        0
        15px;

    width:
        15px;

    height:
        15px;

    color:
        #244873;
}


/* =========================================================
   DAY BOARD
   ========================================================= */

.closed-day-board {

    --day-accent:
        #244873;

    --day-soft:
        #eef4fa;

    position: relative;

    z-index: 2;

    margin-top:
        25px;

    padding:
        23px;

    border:
        1px
        solid
        #e2e9f0;

    border-radius:
        23px;

    background:
        rgba(250, 252, 254, .78);
}


.closed-day-board:first-of-type {

    margin-top: 0;
}


.closed-day-monday {

    --day-accent:
        #244873;

    --day-soft:
        #edf3f9;
}


.closed-day-tuesday {

    --day-accent:
        #cf1f62;

    --day-soft:
        #fff0f5;
}


.closed-day-wednesday {

    --day-accent:
        #e89518;

    --day-soft:
        #fff6e6;
}


.closed-day-thursday {

    --day-accent:
        #315f8f;

    --day-soft:
        #edf5fc;
}


.closed-day-friday {

    --day-accent:
        #b72b69;

    --day-soft:
        #fdf0f6;
}


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

.closed-day-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom:
        19px;
}


.closed-day-heading {

    display: flex;

    align-items: center;

    gap: 12px;
}


.closed-day-icon {

    display: grid;

    place-items: center;

    width:
        43px;

    height:
        43px;

    border-radius:
        13px;

    color:
        var(--day-accent);

    background:
        var(--day-soft);

    box-shadow:
        inset 0 0 0 1px
        rgba(36, 72, 115, .045);
}


.closed-day-icon svg {

    width:
        20px;

    height:
        20px;
}


.closed-day-eyebrow {

    display: block;

    margin-bottom:
        2px;

    color:
        #98a6b6;

    font-size:
        8.5px;

    font-weight:
        850;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;
}


.closed-day-heading h3 {

    margin: 0;

    color:
        var(--day-accent);

    font-size:
        22px;

    font-weight:
        900;

    line-height:
        1.1;
}


.closed-day-count {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    min-height:
        34px;

    padding:
        0
        13px;

    border:
        1px
        solid
        #e1e7ee;

    border-radius:
        999px;

    background:
        #ffffff;

    color:
        #8797a9;

    font-size:
        9.5px;

    font-weight:
        750;

    text-transform:
        uppercase;

    letter-spacing:
        .06em;
}


.closed-day-count strong {

    color:
        var(--day-accent);

    font-size:
        13px;

    font-weight:
        900;
}


/* =========================================================
   SCHEDULE GRID
   ========================================================= */

.closed-schedule-grid {

    display: grid;

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

    gap:
        14px;
}


/* =========================================================
   SCHEDULE POSTER CARD
   ========================================================= */

.closed-schedule-card {

    position: relative;

    display: flex;

    flex-direction: column;

    min-height:
        205px;

    padding:
        18px;

    overflow: hidden;

    border:
        1px
        solid
        #e1e8ef;

    border-radius:
        18px;

    background:

        linear-gradient(
            145deg,
            #ffffff 0%,
            #fbfcfe 100%
        );

    box-shadow:
        0 9px 25px
        rgba(31, 60, 94, .045);

    transition:

        transform
        .25s
        ease,

        box-shadow
        .25s
        ease,

        border-color
        .25s
        ease;

    animation:
        scheduleCardEnter
        .52s
        cubic-bezier(.22, 1, .36, 1)
        both;

    animation-delay:
        calc(
            var(--schedule-index)
            * 55ms
        );
}


.closed-schedule-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(36, 72, 115, .18);

    box-shadow:
        0 18px 35px
        rgba(31, 60, 94, .09);
}


.closed-schedule-card::before {

    content: "";

    position: absolute;

    width:
        110px;

    height:
        110px;

    right:
        -50px;

    top:
        -50px;

    border-radius:
        50%;

    background:
        var(--day-soft);

    opacity:
        .55;

    transition:
        transform
        .35s
        ease;
}


.closed-schedule-card:hover::before {

    transform:
        scale(1.12);
}


.closed-schedule-card-top {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;
}


.closed-schedule-code {

    display: inline-flex;

    align-items: center;

    min-height:
        24px;

    padding:
        0
        9px;

    border-radius:
        999px;

    background:
        var(--day-soft);

    color:
        var(--day-accent);

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        .11em;
}


.closed-schedule-clock {

    display: grid;

    place-items: center;

    width:
        29px;

    height:
        29px;

    border:
        1px
        solid
        #e3e9ef;

    border-radius:
        9px;

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

    color:
        var(--day-accent);
}


.closed-schedule-clock svg {

    width:
        14px;

    height:
        14px;
}


.closed-schedule-card-name {

    position: relative;

    z-index: 2;

    margin:
        17px
        0
        7px;

    color:
        #203f67;

    font-size:
        17px;

    font-weight:
        900;

    line-height:
        1.23;

    letter-spacing:
        -.018em;
}


.closed-schedule-time {

    position: relative;

    z-index: 2;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 6px;

    color:
        #8393a6;

    font-size:
        10.5px;

    line-height:
        1.5;
}


.closed-schedule-time strong {

    color:
        #536c88;

    font-weight:
        850;
}


.closed-schedule-separator {

    color:
        var(--day-accent);

    opacity:
        .55;
}


/* =========================================================
   ELIGIBLE GRADES
   ========================================================= */

.closed-schedule-grade {

    position: relative;

    z-index: 2;

    margin-top:
        auto;

    padding-top:
        15px;
}


.closed-schedule-grade-label {

    display: block;

    margin-bottom:
        7px;

    color:
        #9aa8b7;

    font-size:
        8px;

    font-weight:
        850;

    letter-spacing:
        .11em;

    text-transform:
        uppercase;
}


.closed-schedule-grade-value {

    display: flex;

    align-items: center;

    gap: 8px;
}


.closed-schedule-grade-icon {

    display: grid;

    place-items: center;

    flex:
        0
        0
        27px;

    width:
        27px;

    height:
        27px;

    border-radius:
        8px;

    background:
        var(--day-soft);

    color:
        var(--day-accent);
}


.closed-schedule-grade-icon svg {

    width:
        14px;

    height:
        14px;
}


.closed-schedule-grade-value strong {

    color:
        #405b78;

    font-size:
        11.5px;

    font-weight:
        850;

    line-height:
        1.45;
}


.closed-schedule-card-accent {

    position: absolute;

    left:
        18px;

    right:
        18px;

    bottom: 0;

    height:
        3px;

    border-radius:
        999px
        999px
        0
        0;

    background:

        linear-gradient(
            90deg,
            var(--day-accent),
            transparent
        );

    opacity:
        .55;

    transform:
        scaleX(.42);

    transform-origin:
        left center;

    transition:
        transform
        .32s
        ease;
}


.closed-schedule-card:hover
.closed-schedule-card-accent {

    transform:
        scaleX(1);
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.closed-schedule-empty {

    padding:
        34px;

    border:
        1px
        dashed
        #d7e0e9;

    border-radius:
        20px;

    text-align:
        center;

    background:
        #fafcfe;
}


.closed-schedule-empty strong {

    display: block;

    margin-bottom:
        5px;

    color:
        #244873;
}


.closed-schedule-empty span {

    color:
        #8998a9;

    font-size:
        12px;
}


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

.closed-schedule-footer-note {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    margin-top:
        30px;
}


.closed-schedule-footer-note span {

    width:
        42px;

    height:
        1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            #cdd7e1
        );
}


.closed-schedule-footer-note span:last-child {

    transform:
        scaleX(-1);
}


.closed-schedule-footer-note p {

    margin: 0;

    color:
        #9aa8b7;

    font-size:
        9.5px;

    font-weight:
        650;
}


/* =========================================================
   SCHEDULE ANIMATIONS
   ========================================================= */

@keyframes scheduleSectionEnter {

    from {

        opacity: 0;

        transform:
            translateY(20px);
    }


    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes scheduleCardEnter {

    from {

        opacity: 0;

        transform:
            translateY(14px);
    }


    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes scheduleDotPulse {

    0%,
    100% {

        box-shadow:
            0 0 0 5px
            rgba(245, 166, 35, .13);
    }


    50% {

        box-shadow:
            0 0 0 9px
            rgba(245, 166, 35, .045);
    }
}


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

@media (max-width: 1020px) {

    .closed-schedule-section {

        padding:
            34px
            28px;
    }


    .closed-schedule-grid {

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

}


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

@media (max-width: 650px) {

    .closed-schedule-section {

        margin-top:
            20px;

        padding:
            29px
            15px
            24px;

        border-radius:
            23px;
    }


    .closed-schedule-intro {

        margin-bottom:
            27px;
    }


    .closed-schedule-title {

        font-size:
            31px;
    }


    .closed-schedule-description {

        font-size:
            12px;
    }


    .closed-schedule-note {

        align-items:
            flex-start;

        border-radius:
            15px;

        text-align:
            left;
    }


    .closed-day-board {

        margin-top:
            17px;

        padding:
            16px;

        border-radius:
            19px;
    }


    .closed-day-header {

        margin-bottom:
            14px;
    }


    .closed-day-icon {

        width:
            38px;

        height:
            38px;
    }


    .closed-day-heading h3 {

        font-size:
            19px;
    }


    .closed-day-count {

        min-height:
            31px;

        padding:
            0
            10px;
    }


    .closed-schedule-grid {

        grid-template-columns:
            1fr;

        gap:
            11px;
    }


    .closed-schedule-card {

        min-height:
            188px;

        padding:
            16px;

        border-radius:
            16px;
    }


    .closed-schedule-card-name {

        font-size:
            16px;
    }


    .closed-schedule-footer-note span {

        width:
            17px;
    }


    .closed-schedule-footer-note p {

        text-align:
            center;

        font-size:
            8.5px;
    }

}


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

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

    .closed-schedule-section,
    .closed-schedule-card,
    .closed-schedule-kicker-dot {

        animation:
            none !important;
    }


    .closed-schedule-card {

        transition:
            none !important;
    }

}


/* =========================================================
   PREMIUM WEEKLY PROGRAMME BOARD V2
   ========================================================= */

.closed-schedule-section {

    max-width:
        1320px;

    margin-top:
        38px;

    padding:
        48px
        46px
        42px;

    border-radius:
        34px;

    background:

        radial-gradient(
            circle at 10% 0%,
            rgba(207, 31, 98, .075),
            transparent 29%
        ),

        radial-gradient(
            circle at 91% 4%,
            rgba(245, 166, 35, .09),
            transparent 27%
        ),

        linear-gradient(
            180deg,
            rgba(255, 255, 255, .98),
            rgba(248, 251, 254, .96)
        );

    box-shadow:
        0 34px 90px rgba(27, 54, 90, .11),
        0 8px 25px rgba(27, 54, 90, .035);
}


/* =========================================================
   INTRO
   ========================================================= */

.closed-schedule-intro {

    max-width:
        800px;

    margin-bottom:
        44px;
}


.closed-schedule-kicker {

    padding:
        8px
        13px;

    margin-bottom:
        15px;

    border:
        1px solid
        rgba(207, 31, 98, .12);

    border-radius:
        999px;

    background:
        rgba(255, 247, 250, .86);

    box-shadow:
        0 6px 18px
        rgba(207, 31, 98, .045);
}


.closed-schedule-title {

    font-size:
        clamp(
            36px,
            3.5vw,
            53px
        );

    letter-spacing:
        -.045em;
}


.closed-schedule-description {

    max-width:
        680px;

    margin-top:
        16px;

    font-size:
        14px;

    line-height:
        1.8;
}


.closed-schedule-note {

    margin-top:
        20px;

    padding:
        10px
        16px;

    background:
        rgba(244, 248, 252, .9);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9);
}


/* =========================================================
   DAY BOARD
   ========================================================= */

.closed-day-board {

    position: relative;

    margin-top:
        30px;

    padding:
        0
        24px
        25px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(218, 227, 237, .96);

    border-radius:
        25px;

    background:

        linear-gradient(
            180deg,
            rgba(255, 255, 255, .96),
            rgba(248, 251, 254, .90)
        );

    box-shadow:
        0 16px 38px
        rgba(31, 60, 94, .055);
}


/* coloured top line */

.closed-day-board::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height:
        5px;

    background:
        linear-gradient(
            90deg,
            var(--day-accent),
            rgba(255, 255, 255, 0)
        );
}


/* subtle corner glow */

.closed-day-board::after {

    content: "";

    position: absolute;

    width:
        220px;

    height:
        220px;

    right:
        -90px;

    top:
        -110px;

    border-radius:
        50%;

    background:
        var(--day-soft);

    opacity:
        .45;

    pointer-events:
        none;
}


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

.closed-day-header {

    position: relative;

    z-index: 2;

    margin:
        0
        -24px
        21px;

    padding:
        25px
        24px
        21px;

    border-bottom:
        1px solid
        rgba(220, 228, 237, .85);

    background:

        linear-gradient(
            90deg,
            var(--day-soft),
            rgba(255, 255, 255, .68)
        );
}


.closed-day-heading {

    gap:
        14px;
}


.closed-day-icon {

    width:
        47px;

    height:
        47px;

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

    border-radius:
        15px;

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

    box-shadow:
        0 8px 20px
        rgba(36, 72, 115, .075);
}


.closed-day-icon svg {

    width:
        21px;

    height:
        21px;
}


.closed-day-eyebrow {

    margin-bottom:
        4px;

    font-size:
        8px;

    letter-spacing:
        .17em;
}


.closed-day-heading h3 {

    font-size:
        25px;

    letter-spacing:
        -.025em;
}


.closed-day-count {

    min-height:
        39px;

    padding:
        0
        15px;

    border-color:
        rgba(255, 255, 255, .95);

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

    box-shadow:
        0 6px 18px
        rgba(31, 60, 94, .055);

    backdrop-filter:
        blur(8px);
}


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

.closed-schedule-grid {

    gap:
        17px;
}


/* =========================================================
   PROGRAMME CARDS
   ========================================================= */

.closed-schedule-card {

    min-height:
        220px;

    padding:
        20px;

    border-color:
        rgba(218, 227, 237, .92);

    border-radius:
        20px;

    background:

        radial-gradient(
            circle at 100% 0%,
            var(--day-soft),
            transparent 32%
        ),

        linear-gradient(
            160deg,
            #ffffff,
            #fbfcfe
        );

    box-shadow:
        0 10px 26px
        rgba(31, 60, 94, .055);
}


.closed-schedule-card:hover {

    transform:
        translateY(-6px);

    border-color:
        var(--day-accent);

    box-shadow:
        0 22px 44px
        rgba(31, 60, 94, .12);
}


/* coloured mini rail */

.closed-schedule-card::after {

    content: "";

    position: absolute;

    top:
        20px;

    bottom:
        20px;

    left: 0;

    width:
        3px;

    border-radius:
        0 999px 999px 0;

    background:
        var(--day-accent);

    opacity:
        .55;
}


/* =========================================================
   CODE + CLOCK
   ========================================================= */

.closed-schedule-code {

    min-height:
        26px;

    padding:
        0
        10px;

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

    background:
        var(--day-soft);

    box-shadow:
        0 4px 12px
        rgba(31, 60, 94, .04);

    font-size:
        8px;
}


.closed-schedule-clock {

    width:
        33px;

    height:
        33px;

    border-radius:
        10px;

    box-shadow:
        0 5px 14px
        rgba(31, 60, 94, .05);
}


/* =========================================================
   CCA NAME
   ========================================================= */

.closed-schedule-card-name {

    margin-top:
        20px;

    margin-bottom:
        8px;

    color:
        #183a65;

    font-size:
        19px;

    line-height:
        1.2;

    letter-spacing:
        -.028em;
}


/* =========================================================
   DAY / TIME
   ========================================================= */

.closed-schedule-time {

    display:
        inline-flex;

    width:
        fit-content;

    margin-top:
        2px;

    padding:
        7px
        10px;

    border-radius:
        10px;

    background:
        rgba(245, 248, 251, .92);

    color:
        #8091a4;

    font-size:
        10.5px;
}


.closed-schedule-time strong {

    color:
        #244873;
}


/* =========================================================
   ELIGIBLE GRADES
   ========================================================= */

.closed-schedule-grade {

    margin-top:
        auto;

    padding-top:
        18px;
}


.closed-schedule-grade-label {

    margin-bottom:
        8px;

    font-size:
        7.5px;

    letter-spacing:
        .15em;
}


.closed-schedule-grade-value {

    width:
        fit-content;

    min-height:
        34px;

    padding:
        3px
        11px
        3px
        4px;

    border:
        1px solid
        rgba(222, 230, 238, .85);

    border-radius:
        11px;

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


.closed-schedule-grade-icon {

    flex-basis:
        29px;

    width:
        29px;

    height:
        29px;

    border-radius:
        9px;
}


.closed-schedule-grade-value strong {

    color:
        #304f72;

    font-size:
        11.5px;
}


/* =========================================================
   BOTTOM ACCENT
   ========================================================= */

.closed-schedule-card-accent {

    left:
        20px;

    right:
        20px;

    height:
        4px;

    opacity:
        .75;
}


/* =========================================================
   DAY SPECIFIC PERSONALITY
   ========================================================= */

.closed-day-monday {

    --day-accent:
        #234b78;

    --day-soft:
        #edf4fb;
}


.closed-day-tuesday {

    --day-accent:
        #c92366;

    --day-soft:
        #fff0f6;
}


.closed-day-wednesday {

    --day-accent:
        #e69a19;

    --day-soft:
        #fff5df;
}


.closed-day-thursday {

    --day-accent:
        #2d678d;

    --day-soft:
        #ecf6fb;
}


.closed-day-friday {

    --day-accent:
        #ad2d72;

    --day-soft:
        #fceef6;
}


/* =========================================================
   HOVER ICON MOTION
   ========================================================= */

.closed-schedule-card:hover
.closed-schedule-clock {

    transform:
        rotate(6deg)
        scale(1.05);
}


.closed-schedule-clock {

    transition:
        transform
        .25s
        ease;
}


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

.closed-schedule-footer-note {

    margin-top:
        37px;
}


.closed-schedule-footer-note p {

    padding:
        0
        5px;

    font-size:
        9px;

    letter-spacing:
        .04em;
}


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

@media (max-width: 1020px) {

    .closed-schedule-section {

        padding:
            39px
            28px
            34px;
    }


    .closed-schedule-card {

        min-height:
            215px;
    }

}


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

@media (max-width: 650px) {

    .closed-schedule-section {

        padding:
            31px
            14px
            25px;

        border-radius:
            24px;
    }


    .closed-schedule-kicker {

        margin-bottom:
            12px;
    }


    .closed-schedule-title {

        font-size:
            30px;
    }


    .closed-day-board {

        padding:
            0
            14px
            15px;

        border-radius:
            20px;
    }


    .closed-day-header {

        margin:
            0
            -14px
            15px;

        padding:
            20px
            14px
            16px;
    }


    .closed-day-heading {

        gap:
            10px;
    }


    .closed-day-icon {

        width:
            40px;

        height:
            40px;

        border-radius:
            12px;
    }


    .closed-day-heading h3 {

        font-size:
            20px;
    }


    .closed-day-count {

        min-height:
            32px;

        padding:
            0
            10px;
    }


    .closed-schedule-card {

        min-height:
            190px;

        padding:
            17px;

        border-radius:
            17px;
    }


    .closed-schedule-card-name {

        margin-top:
            16px;

        font-size:
            17px;
    }


    .closed-schedule-time {

        padding:
            6px
            8px;
    }


    .closed-schedule-grade {

        padding-top:
            14px;
    }

}


/* =========================================================
   CLOSED PAGE - MANUAL REGISTRATION ASSISTANCE
   ========================================================= */

.closed-manual-registration-note {

    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 16px;

    max-width: 760px;

    margin:
        24px
        0
        0;

    padding:
        20px
        22px;

    overflow: hidden;

    border:
        1px solid
        rgba(36, 72, 115, .11);

    border-radius:
        18px;

    background:

        linear-gradient(
            135deg,
            rgba(242, 247, 252, .97),
            rgba(255, 250, 243, .92)
        );

    box-shadow:
        0 12px 30px
        rgba(31, 60, 94, .055);

    animation:
        closedManualNoteEnter
        .7s
        cubic-bezier(.22, 1, .36, 1)
        both;

    animation-delay:
        .18s;
}


.closed-manual-registration-note::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 4px;

    height: 100%;

    background:

        linear-gradient(
            180deg,
            #cf1f62,
            #f5a623
        );
}


.closed-manual-registration-note::after {

    content: "";

    position: absolute;

    width: 150px;

    height: 150px;

    right: -70px;

    top: -80px;

    border-radius: 50%;

    background:
        rgba(245, 166, 35, .075);

    pointer-events: none;
}


.closed-manual-registration-icon {

    position: relative;

    z-index: 2;

    display: grid;

    place-items: center;

    flex:
        0 0 48px;

    width: 48px;

    height: 48px;

    border-radius: 14px;

    color:
        #cf1f62;

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

    box-shadow:
        0 7px 18px
        rgba(31, 60, 94, .07);
}


.closed-manual-registration-icon svg {

    width: 21px;

    height: 21px;
}


.closed-manual-registration-copy {

    position: relative;

    z-index: 2;

    min-width: 0;
}


.closed-manual-registration-label {

    display: block;

    margin-bottom: 5px;

    color:
        #cf1f62;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.closed-manual-registration-copy h3 {

    margin:
        0
        0
        7px;

    color:
        #244873;

    font-size: 16px;

    font-weight: 900;

    line-height: 1.3;

    letter-spacing: -.015em;
}


.closed-manual-registration-copy p {

    margin: 0;

    color:
        #6f8299;

    font-size: 11.5px;

    line-height: 1.75;
}


@keyframes closedManualNoteEnter {

    from {

        opacity: 0;

        transform:
            translateY(12px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


@media (max-width: 650px) {

    .closed-manual-registration-note {

        gap: 12px;

        margin-top: 19px;

        padding:
            17px
            16px;

        border-radius: 16px;
    }


    .closed-manual-registration-icon {

        flex-basis: 42px;

        width: 42px;

        height: 42px;

        border-radius: 12px;
    }


    .closed-manual-registration-copy h3 {

        font-size: 14px;
    }


    .closed-manual-registration-copy p {

        font-size: 10.5px;

        line-height: 1.7;
    }

}