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

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

body {
    font-family: 'Poppins',sans-serif;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at top,#1d2435 0%,#090909 45%,#000 100%);
    overflow: hidden;
    position: relative;
}

    /*==============================
      Animated Background
==============================*/

    body::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(rgba(255,215,0,.04) 1px,transparent 1px), linear-gradient(90deg,rgba(255,215,0,.04) 1px,transparent 1px);
        background-size: 60px 60px;
        animation: gridMove 18s linear infinite;
    }

    body::after {
        content: "";
        position: absolute;
        width: 650px;
        height: 650px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255,215,0,.18), transparent 70%);
        top: -250px;
        right: -150px;
        animation: rotateGlow 15s linear infinite;
    }

/*@keyframes gridMove {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(60px);
    }
}

@keyframes rotateGlow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}*/

/*==============================
      LOGIN CARD
==============================*/

.login-card {
    width: 450px;
    background: rgba(12,12,18,.88);
    backdrop-filter: blur(20px);
    border-radius: 28px;
    border: 1px solid rgba(255,215,0,.18);
    padding: 45px;
    position: relative;
    overflow: hidden;
    z-index: 5;
    box-shadow: 0 0 40px rgba(255,196,0,.12), inset 0 0 35px rgba(255,215,0,.04);
}

    /* animated border */

    .login-card::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 1px;
        border-radius: 28px;
/*        background: linear-gradient( 130deg, transparent, rgba(255,215,0,.6), transparent, rgba(255,215,0,.4));
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);*/
        -webkit-mask-composite: xor;
        pointer-events: none;
    }

    /* glow */

    .login-card::after {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        background: radial-gradient(circle, rgba(255,215,0,.18), transparent);
        top: -100px;
        right: -60px;
        animation: pulse 6s infinite;
    }

/*@keyframes pulse {

    0% {
        transform: scale(.8);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(.8);
    }
}*/

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

.card-head {
    text-align: center;
    margin-bottom: 35px;
}

.card-logo {
    width: 130px;
    margin-bottom: 0;
}

.live-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 18px;
    border-radius: 50px;
    background: rgba(255,215,0,.08);
    color: #FFD54F;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid rgba(255,215,0,.25);
}

.dot {
    width: 10px;
    height: 10px;
    background: #00ff80;
    border-radius: 50%;
    animation: blink 1s infinite;
}

@keyframes blink {

    50% {
        opacity: .3;
    }
}

.card-head h2 {
    margin-top: 0px;
    color: #FFD54F;
    font-size: 30px;
    font-weight: 700;
}

.card-head p {
    color: #9fa4b5;
    margin-top: 12px;
    line-height: 28px;
    font-size: 15px;
}

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

.form-control {
    height: 60px;
    background: #11151d;
    border: 1px solid #2f3542;
    border-radius: 18px;
    color: #fff;
    font-size: 15px;
    transition: .35s;
    width: 100%;
    padding: 10px;
}

    .form-control::placeholder {
        color: #6b7280;
    }

    .form-control:focus {
        background: #11151d;
        color: #fff;
        border-color: #FFD54F;
        box-shadow: 0 0 0 4px rgba(255,215,0,.12), 0 0 20px rgba(255,215,0,.15);
    }

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

.btn-login {
    margin-top: 22px;
    width: 100%;
    height: 60px;
    cursor:pointer;
    border: none;
    border-radius: 18px;
    background: linear-gradient( 90deg, #FFD54F, #F4B400);
    color: #111;
    font-size: 17px;
    font-weight: 700;
    transition: .35s;
    letter-spacing: .5px;
}

    .btn-login:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 30px rgba(255,215,0,.35);
    }

.btn-arr {
    transition: .3s;
}

.btn-login:hover .btn-arr {
    padding-left: 10px;
}

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

.status-dot {
    margin-top: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 22px;
    border-radius: 40px;
    background: rgba(0,255,136,.08);
    color: #2bff95;
    border: 1px solid rgba(0,255,136,.18);
    font-size: 13px;
    font-weight: 600;
}

    .status-dot::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #00ff80;
        margin-right: 10px;
        animation: blink 1s infinite;
    }

/*==============================
      DIVIDER
==============================*/

.card-divider {
    margin: 35px 0 20px;
    height: 1px;
    background: linear-gradient( 90deg, transparent, rgba(255,215,0,.35), transparent);
}

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

.card-foot {
    text-align: center;
}

    .card-foot p {
        color: #a7adbb;
        font-size: 14px;
    }

.signup-btn {
    color: #FFD54F;
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
}

    .signup-btn:hover {
        color: #fff;
        text-shadow: 0 0 15px gold;
    }

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

@media(max-width:600px) {

    .login-card {
        width: 90%;
        padding: 15px 20px;
        margin: 0 auto;
    }

    .card-head h2 {
        font-size: 20px;
        margin-bottom: 0;
    }

    .card-head p {
        color: #d8d9da;
        margin-top: 0;
        line-height: 24px;
        font-size: 13px;
    }

    .card-head {
        margin-bottom: 20px;
    }

    .form-control {
        height: 55px;
        padding: 10px 15px;
    }

    .btn-login {
        margin-top: 15px;
        height: 55px;
    }

    .status-dot {
        margin-top: 20px;
    }

    .card-divider {
        margin: 20px 0 20px;
    }

    .card-foot p {
        color: #a7adbb;
        font-size: 13px;
    }

    .login-card::after {
        width: 150px;
        height: 150px;
    }

    .card-logo {
        width: 90px;
    }

}

.text-center{
    text-align:center;
}

/*======================================
    Premium Danger Alert
======================================*/

.alert-danger {
    background: rgba(220, 53, 69, 0.12);
    border: 1px solid rgba(255, 77, 77, 0.35);
    color: #ff8b8b;
    border-radius: 14px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 500;
    backdrop-filter: blur(12px);
    box-shadow: 0 0 20px rgba(255, 77, 77, 0.12);
    display: flex;
    align-items: center;
    gap: 10px;
}

    .alert-danger::before {
        content: "⚠";
        font-size: 18px;
        color: #ff4d4d;
        flex-shrink: 0;
    }

    .alert-danger a {
        color: #ffc4c4;
        font-weight: 600;
        text-decoration: underline;
    }

    .alert-danger .btn-close {
        filter: invert(1);
        opacity: 0.8;
    }

        .alert-danger .btn-close:hover {
            opacity: 1;
        }