/* ==========================================
   Login Page
========================================== */

.login-page{
    width:100%;
    min-height:100dvh;

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

    padding:20px;

    background:
            linear-gradient(
                    135deg,
                    #edf3ff 0%,
                    #dfe9ff 100%
            );
}


/* ==========================================
   Card
========================================== */

.login-card{

    width:100%;
    max-width:420px;

    background:#fff;

    border-radius:28px;

    padding:35px 28px;

    box-shadow:var(--shadow);

    animation:show .35s ease;

}


/* ==========================================
   Logo
========================================== */

.logo{

    width:90px;
    height:90px;

    margin:0 auto 20px;

    border-radius:50%;

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

    color:#fff;

    font-size:42px;

}


/* ==========================================
   Title
========================================== */

.login-card h1{

    text-align:center;

    color:var(--primary);

    font-size:30px;

    margin-bottom:8px;

}


.subtitle{

    text-align:center;

    color:#777;

    font-size:15px;

    margin-bottom:30px;

}


/* ==========================================
   Form
========================================== */

.form-group{

    margin-bottom:18px;

}


.form-group input{

    width:100%;

    height:56px;

    border-radius:15px;

    background:#f5f7fb;

    border:2px solid transparent;

    padding:0 18px;

    font-size:16px;

    transition:.25s;

}


.form-group input:focus{

    border-color:var(--primary);

    background:#fff;

}


.form-group input::placeholder{

    color:#999;

}


/* ==========================================
   Button
========================================== */

#loginBtn{

    width:100%;

    height:56px;

    border-radius:15px;

    background:var(--primary);

    color:#fff;

    font-size:17px;

    font-weight:bold;

    transition:.25s;

}


#loginBtn:hover{

    background:var(--primary-hover);

}


#loginBtn:active{

    transform:scale(.98);

}


/* ==========================================
   Loading
========================================== */

#loginBtn.loading{

    pointer-events:none;

    opacity:.7;

}


/* ==========================================
   Message
========================================== */

.message{

    display:none;

    margin-top:20px;

    padding:14px;

    border-radius:14px;

    font-size:14px;

    text-align:center;

}


.message.error{

    display:block;

    background:#ffebee;

    color:#c62828;

}


.message.success{

    display:block;

    background:#e8f5e9;

    color:#2e7d32;

}


/* ==========================================
   Animation
========================================== */

@keyframes show{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ==========================================
   Mobile
========================================== */

@media(max-width:480px){

    .login-page{

        padding:15px;

    }

    .login-card{

        border-radius:22px;

        padding:28px 20px;

    }

    .logo{

        width:80px;
        height:80px;

        font-size:36px;

    }

    .login-card h1{

        font-size:26px;

    }

}


/* ==========================================
   Desktop
========================================== */

@media(min-width:992px){

    .login-card{

        max-width:450px;

    }

}