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

}

}

/* =========================================
   CAPTCHA
========================================= */

.captcha-wrapper{

display:flex;
align-items:center;
gap:10px;

}

.captcha-wrapper img{

width:120px;
height:auto;

border-radius:8px;

background:#fff;

padding:4px;

}

.captcha-wrapper input{

flex:1;

}

.captcha-refresh-btn{

width:44px;
height:44px;

border:none;

border-radius:10px;

background:#ffb300;

cursor:pointer;

font-size:18px;

transition:.3s;

}

.captcha-refresh-btn:hover{

transform:rotate(180deg);

box-shadow:0 8px 20px rgba(255,179,0,.35);

}


/* captcha text field */

.captcha-wrapper input[type=text]{

padding:12px;

}

.login-options{

    text-align:left;

    margin-bottom:18px;

}

.forgot-password{

    color:#f3f3f3;

    text-decoration:none;

    font-weight:600;

}

.forgot-password:hover{

    text-decoration:underline;

}