/* =========================================
   PAGE WRAPPER
========================================= */

.login-page{

min-height:80vh;
display:flex;
justify-content:center;
align-items:center;
padding:40px 20px;

}


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

.login-card{

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

background:rgba(255,255,255,0.12);
backdrop-filter:blur(15px);

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

padding:45px;

border-radius:24px;

box-shadow:0 15px 40px rgba(0,0,0,0.20);

}





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

.login-header{

text-align:center;
margin-bottom:35px;

}

.login-header h2{

font-size:32px;
margin-bottom:10px;

color:#ffffff;

}

.login-header p{

color:rgba(255,255,255,0.75);

font-size:15px;

}


/* =========================================
   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;

color:#ffffff;

}


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

.form-group input{

width:100%;

padding:14px 18px;

border:none;

outline:none;

border-radius:12px;

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

font-size:15px;

color:#111827;

}


.form-group input:focus{

box-shadow:0 0 0 3px rgba(255,179,0,0.4);

}


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

.login-btn{

width:100%;

padding:15px;

border:none;

border-radius:12px;

background:#ffb300;

color:#111827;

font-size:16px;

font-weight:700;

cursor:pointer;

transition:0.3s;

}

.login-btn:hover{

transform:translateY(-3px);

box-shadow:0 10px 25px rgba(255,179,0,0.4);

}


/* =========================================
   ERROR BOX
========================================= */

.error-box{

background:#fee2e2;

color:#b91c1c;

padding:14px;

border-radius:10px;

font-size:14px;

font-weight:600;

}




/* =========================================
   MOBILE
========================================= */

@media(max-width:768px){

.login-card{

padding:30px;

}



.login-header h2{

font-size:26px;

}

}