/* ===============================
   RESET
================================ */

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

/* ===============================
   ROOT VARIABLES
================================ */

:root{

    --primary-color:#16a34a;
    --primary-dark:#15803d;

    --text-color:#111827;

    --gray-color:#6b7280;

    --border-color:#d1d5db;

    --danger:#dc2626;

}

/* ===============================
   BODY
================================ */

body{

    font-family:Arial, Helvetica, sans-serif;

    background:rgb(5,43,5);

}

/* ===============================
   AUTH PAGE
================================ */

.auth-page{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px 20px;

}

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

.auth-card{

    width:100%;

    max-width:480px;

    background:#fff;

    border-radius:18px;

    padding:40px;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

}

/* ===============================
   LOGO
================================ */

.auth-logo{

    display:flex;

    justify-content:center;

    margin-bottom:30px;

}

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    color:var(--text-color);

}

.logo-icon{

    width:50px;

    height:50px;

    border-radius:50%;

    background:var(--primary-color);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:bold;

    font-size:1.4rem;

}

.logo h1{

    font-size:1.8rem;

}

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

.auth-header{

    text-align:center;

    margin-bottom:35px;

}

.auth-header h2{

    font-size:2rem;

    margin-bottom:10px;

}

.auth-header p{

    color:var(--gray-color);

    line-height:1.6;

}

/* ===============================
   FORM
================================ */

#login-form{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.form-group{

    display:flex;

    flex-direction:column;

}

.form-group label{

    margin-bottom:8px;

    font-weight:600;

}

.form-group input{

    width:100%;

    padding:14px 16px;

    border:1px solid var(--border-color);

    border-radius:10px;

    font-size:1rem;

    outline:none;

    transition:.3s;

}

.form-group input:focus{

    border-color:var(--primary-color);

    box-shadow:0 0 0 3px rgba(22,163,74,.15);

}

/* ===============================
   PASSWORD
================================ */

.password-group{

    position:relative;

}

.password-group input{

    padding-right:50px;

}

.toggle-password{

    position:absolute;

    top:50%;

    right:15px;

    transform:translateY(-50%);

    border:none;

    background:none;

    cursor:pointer;

    color:#6b7280;

}

/* ===============================
   ERROR MESSAGE
================================ */

.error-message{

    color:var(--danger);

    font-size:.85rem;

    margin-top:6px;

    min-height:18px;

}

input.error{

    border-color:var(--danger);

}

input.success{

    border-color:var(--primary-color);

}

/* ===============================
   LOGIN OPTIONS
================================ */

.login-options{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:-10px;

}

.remember-me{

    display:flex;

    align-items:center;

    gap:8px;

    cursor:pointer;

    font-size:.95rem;

}

.forgot-password{

    color:var(--primary-color);

    text-decoration:none;

    font-weight:600;

}

.forgot-password:hover{

    text-decoration:underline;

}

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

.auth-btn{

    width:220px;

    margin:20px auto 0;

    display:block;

    padding:14px;

    border:none;

    border-radius:10px;

    background:var(--primary-color);

    color:#fff;

    font-size:1rem;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.auth-btn:hover{

    background:var(--primary-dark);

}

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

.auth-footer{

    text-align:center;

    margin-top:30px;

}

.auth-footer p{

    color:var(--gray-color);

}

.auth-footer a{

    color:var(--primary-color);

    text-decoration:none;

    font-weight:600;

}

.auth-footer a:hover{

    text-decoration:underline;

}

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

@media(max-width:600px){

    .auth-card{

        padding:30px 20px;

    }

    .login-options{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;

    }

    .auth-btn{

        width:100%;

    }

}

.login-message {
    min-height: 22px;
    margin-bottom: 14px;

    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
}

.login-message.error {
    color: #d53939;
}

.login-message.success {
    color: #138a4b;
}

.auth-btn:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}



/* ===============================
   FORGOT PASSWORD LINK
================================ */

.forgot-password-link {
    width: 100%;
    text-align: right;
    margin-top: 8px;
    margin-bottom: 18px;
}

.forgot-password-link a {
    color: #16a34a;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

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