/* ==========================================
   ONLINE REGISTRATION CLOSED
========================================== */

.walkin-notice{

    position:fixed;
    inset:0;

    display:none;

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

    z-index:99990;

    overflow:hidden;

    background:
        radial-gradient(circle at top,
            rgba(170,235,61,.18),
            rgba(0,0,0,.65)),
        rgba(4,32,10,.75);

    backdrop-filter:
        blur(18px);

    animation:
        overlayFade .45s ease;
}

/* Floating glowing background */

.walkin-notice::before{

    content:"";

    position:absolute;

    width:650px;
    height:650px;

    border-radius:50%;

    background:
        radial-gradient(circle,
            rgba(167,233,47,.18),
            transparent 70%);

    animation:
        pulseGlow 6s ease infinite;

    filter:blur(35px);

}

.walkin-card{

    position:relative;

    width:560px;

    max-width:92%;

    padding:55px 45px;

    text-align:center;

    border-radius:34px;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.14),
            rgba(255,255,255,.08)
        );

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

    backdrop-filter:
        blur(30px);

    box-shadow:

        0 35px 90px rgba(0,0,0,.40),

        0 0 0 1px rgba(167,233,47,.08),

        0 0 80px rgba(167,233,47,.08);

    animation:
        walkinPopup .65s cubic-bezier(.18,.89,.32,1.28);

}

/* animated top glow */

.walkin-card::before{

    content:"";

    position:absolute;

    left:-20%;
    top:-120px;

    width:140%;
    height:180px;

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

    transform:rotate(-6deg);

    animation:
        shineMove 6s linear infinite;

}

/* logo */

.walkin-icon{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:25px;

}

.walkin-icon img{

    width:110px;

    height:110px;

    object-fit:contain;

    filter:

        drop-shadow(
            0 12px 25px rgba(167,233,47,.18));

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

}

/* heading */

.walkin-card h2{

    color:#fff;

    font-size:44px;

    line-height:1.1;

    font-weight:800;

    margin-bottom:20px;

    letter-spacing:-1px;

}

/* description */

.walkin-card p{

    color:

        rgba(255,255,255,.82);

    font-size:18px;

    line-height:1.8;

    margin-bottom:28px;

}

/* message box */

.walkin-message{

    padding:20px 24px;

    border-radius:22px;

    background:

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

    border:

        1px solid rgba(255,255,255,.08);

    color:#fff;

    font-size:17px;

    line-height:1.9;

    backdrop-filter:blur(12px);

}

/* Walk-In badge */

.walkin-message span{

    display:inline-flex;

    align-items:center;

    padding:7px 18px;

    margin:0 6px;

    border-radius:999px;

    background:

        linear-gradient(
            135deg,
            #A7E92F,
            #7CCB27);

    color:#124800;

    font-weight:700;

    box-shadow:

        0 0 20px rgba(167,233,47,.35);

}

/* footer */

.walkin-date{

    margin-top:30px;

    color:

        rgba(255,255,255,.70);

    font-size:15px;

    letter-spacing:.3px;

}

/* ===============================
   Animations
================================ */

@keyframes walkinPopup{

    0%{

        opacity:0;

        transform:
            translateY(60px)
            scale(.92);

    }

    70%{

        transform:
            translateY(-6px)
            scale(1.01);

    }

    100%{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}

@keyframes overlayFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes pulseGlow{

    0%,100%{

        transform:
            scale(1);

    }

    50%{

        transform:
            scale(1.12);

    }

}

@keyframes logoFloat{

    0%,100%{

        transform:
            translateY(0);

    }

    50%{

        transform:
            translateY(-8px);

    }

}

@keyframes shineMove{

    from{

        transform:
            translateX(-120%)
            rotate(-6deg);

    }

    to{

        transform:
            translateX(120%)
            rotate(-6deg);

    }

}

/* Mobile */

@media(max-width:768px){

    .walkin-card{

        padding:40px 28px;

        border-radius:28px;

    }

    .walkin-icon img{

        width:90px;
        height:90px;

    }

    .walkin-card h2{

        font-size:34px;

    }

    .walkin-card p{

        font-size:16px;

    }

    .walkin-message{

        font-size:15px;

        line-height:1.8;

    }

}