/*==================================
        CREPE STATION ADMIN
==================================*/

@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;
    font-family:'Poppins',sans-serif;
    -webkit-tap-highlight-color:transparent;
}

body{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:
    linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),
    url("../images/background.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    background-attachment:fixed;

    overflow:hidden;

}

.login-container{

    width:100%;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

}

.login-card{

    width:100%;

    max-width:430px;

    padding:45px 35px;

    text-align:center;

    border-radius:30px;

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

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

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

    box-shadow:0 20px 50px rgba(0,0,0,.45);

}

.logo-box{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:20px;

}

.logo-box img{

    width:170px;

    filter:drop-shadow(0 5px 15px rgba(0,0,0,.4));

}

.login-card h1{

    color:#F2C230;

    font-size:34px;

    font-weight:700;

    margin-bottom:8px;

}

.admin-title{

    color:#eeeeee;

    font-size:17px;

    margin-bottom:35px;

    letter-spacing:1px;

}

/*=========================
        INPUTS
=========================*/

.input-box{

    width:100%;

    height:60px;

    display:flex;

    align-items:center;

    padding:0 18px;

    margin-bottom:20px;

    border-radius:18px;

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

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

    backdrop-filter:blur(12px);

    transition:.3s;

}

.input-box:focus-within{

    border-color:#F2C230;

    box-shadow:0 0 15px rgba(242,194,48,.35);

}

.input-box i{

    color:#F2C230;

    font-size:20px;

    margin-right:15px;

}

.input-box input{

    width:100%;

    background:transparent;

    border:none;

    outline:none;

    color:#fff;

    font-size:16px;

}

.input-box input::placeholder{

    color:#d9d9d9;

}
/*=========================
        LOGIN BUTTON
=========================*/

.login-btn{

    width:100%;

    height:58px;

    border:none;

    border-radius:18px;

    background:linear-gradient(135deg,#F2C230,#D9A404);

    color:#111;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

    box-shadow:0 10px 25px rgba(242,194,48,.35);

}

.login-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(242,194,48,.45);

}

.login-btn:active{

    transform:scale(.98);

}

#error-message{

    margin-top:18px;

    color:#ff6666;

    font-size:15px;

    min-height:22px;

    font-weight:500;

}


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

@media(max-width:768px){

    .login-card{

        max-width:100%;

        padding:35px 25px;

        border-radius:25px;

    }

    .logo-box img{

        width:145px;

    }

    .login-card h1{

        font-size:28px;

    }

    .admin-title{

        font-size:15px;

    }

}

@media(max-width:480px){

    body{

        padding:15px;

    }

    .login-card{

        padding:30px 20px;

        border-radius:22px;

    }

    .logo-box img{

        width:120px;

    }

    .login-card h1{

        font-size:24px;

    }

    .admin-title{

        font-size:14px;

        margin-bottom:25px;

    }

    .input-box{

        height:55px;

    }

    .login-btn{

        height:55px;

        font-size:16px;

    }

}


/*=========================
        SCROLL BAR
=========================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:#F2C230;

    border-radius:20px;

}


/*=========================
        REMOVE OUTLINE
=========================*/

button,
input{

    outline:none;

}

button:focus,
input:focus{

    outline:none;

}


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

.login-card{

    animation:fadeUp .8s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}