:root{

    --primary:#215c71;
    --primary-hover:#18495a;

}

body{

    margin:0;

    background:#f6f8fb;

    font-family:"Inter",sans-serif;

}

.login-page{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px 20px;

}

.login-card{

    width:100%;

    max-width:460px;

    background:#fff;

    border-radius:18px;

    padding:45px;

    box-shadow:0 15px 50px rgba(0,0,0,.08);

}

.login-logo{

    width:160px;
    height: 100px;

    display:block;

    margin:0 auto 25px;

}

.login-card h2{

    text-align:center;

    font-family:"Playfair Display",serif;

    font-weight:700;

    margin-bottom:10px;

}

.login-card p{

    text-align:center;

    color:#777;

    margin-bottom:35px;

}

.login-card label{

    font-weight:600;

    margin-bottom:8px;

    display:block;

}

.form-control{

    height:52px;

    border-radius:10px;

    border:1px solid #ddd;

    box-shadow:none!important;

}

.form-control:focus{

    border-color:var(--primary);

}

.password-box{

    position:relative;

}

.password-box input{

    padding-right:55px;

}

.password-box button{

    position:absolute;

    right:15px;

    top:50%;

    transform:translateY(-50%);

    background:none;

    border:none;

    cursor:pointer;

    color:#777;

    font-size:20px;

}

.login-options{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:25px 0 35px;

}

.remember-me{

    display:flex;

    align-items:center;

    gap:8px;

}

.remember-me input{

    width:18px;

    height:18px;

    cursor:pointer;

}

.remember-me label{

    margin:0;

    font-weight:400;

    cursor:pointer;

}

.forgot-box a{
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.forgot-box a:hover{
   
    text-decoration: underline;
}

.forgot-link{

    color:var(--primary);

    text-decoration:none;

}

.forgot-link:hover{

    text-decoration:underline;

}

.login-buttons{

    display:flex;

    gap:15px;

}

.btn-login{

    flex:1;

    height:52px;

    border:none;

    border-radius:10px;

    background:var(--primary);

    color:#fff;

    font-weight:600;

    transition:.3s;

}

.btn-login:hover{

    background:var(--primary-hover);

}

.btn-cancel{

    flex:1;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid #ddd;

    border-radius:10px;

    color:#555;

    text-decoration:none;

    transition:.3s;

}

.btn-cancel:hover{

    background:#f3f3f3;

}

/* ---------login message */
.login-message{

    display:none;

    padding:14px 18px;

    border-radius:8px;

    margin-bottom:20px;

    font-size:15px;

}

.login-message.success{

    background:#e8f7ed;

    color:#1d7d3b;

    border:1px solid #b8e6c4;

}

.login-message.error{

    background:#fdecec;

    color:#c62828;

    border:1px solid #f5b5b5;

}
/* ------forgot password */

.login-footer{

    margin-top:30px;

    text-align:center;

}

.login-footer a{

    color:var(--primary);

    text-decoration:none;

    font-weight:500;

}

.login-footer a:hover{

    text-decoration:underline;

}
@media(max-width:576px){

    .login-card{

        padding:30px 22px;

    }

    .login-options{

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

    }

    .login-buttons{

        flex-direction:column;

    }
    
    .btn-login,
    .btn-cancel{

        padding:12px 0;

    }


}