/* =========================
   LOGIN SECTION
========================= */

.login-section{

    min-height: 100vh;

    background:
    linear-gradient(
    135deg,
    #0f172a,
    #1e1b4b,
    #312e81
    );

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 40px;
}



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

.login-card{

    width: 100%;

    max-width: 500px;

    background:
    rgba(255,255,255,0.06);

    border:
    1px solid rgba(255,255,255,0.08);

    border-radius: 28px;

    padding: 50px 40px;

    backdrop-filter: blur(14px);

    box-shadow:
    0 20px 60px rgba(0,0,0,0.4);
}



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

.login-logo{

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 40px;
}


.login-logo img{

    width: 60px;
}


.login-logo h1{

    color: white;

    font-size: 36px;
}



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

.login-header h2{

    color: white;

    font-size: 34px;

    margin-bottom: 15px;
}


.login-header p{

    color: #d1d5db;

    line-height: 1.8;

    margin-bottom: 35px;
}



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

.input-group{

    margin-bottom: 25px;
}


.input-group label{

    display: block;

    color: white;

    margin-bottom: 10px;

    font-size: 15px;
}


.input-group input{

    width: 100%;

    padding: 16px 18px;

    border-radius: 16px;

    border:
    1px solid rgba(255,255,255,0.08);

    background:
    rgba(255,255,255,0.06);

    color: white;

    outline: none;

    font-size: 16px;

    transition: 0.3s;
}


.input-group input:focus{

    border-color: #7c3aed;

    box-shadow:
    0 0 0 3px rgba(124,58,237,0.2);
}



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

.login-btn{

    width: 100%;

    padding: 16px;

    border: none;

    border-radius: 16px;

    background:
    linear-gradient(
    135deg,
    #7c3aed,
    #4f46e5
    );

    color: white;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    transition: 0.3s;

    margin-top: 10px;
}


.login-btn:hover{

    transform: translateY(-3px);

    opacity: 0.95;
}



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

.register-btn{

    width: 100%;

    padding: 16px;

    margin-top: 18px;

    border-radius: 16px;

    border:
    1px solid rgba(255,255,255,0.1);

    background:
    rgba(255,255,255,0.05);

    color: white;

    font-size: 16px;

    font-weight: 500;

    cursor: pointer;

    transition: 0.3s;
}


.register-btn:hover{

    background:
    rgba(255,255,255,0.1);

    transform: translateY(-2px);
}



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

.login-message{

    margin-top: 25px;

    color: #c4b5fd;

    text-align: center;

    line-height: 1.7;

    font-size: 15px;
}



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

@media(max-width:768px){

    .login-card{

        padding: 40px 25px;
    }


    .login-logo h1{

        font-size: 28px;
    }


    .login-header h2{

        font-size: 28px;
    }

}

#confirmPasswordGroup{

    display: none;
}