/* ================= AUTH WRAPPER ================= */

.auth-wrapper{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#eef2ff,#f6f8ff);
padding:40px 20px;
font-family:'Poppins',sans-serif;
}


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

.auth-card{
width:100%;
max-width:950px;
display:grid;
grid-template-columns:1fr 1fr;
background:#fff;
border-radius:18px;
overflow:hidden;
box-shadow:0 15px 40px rgba(0,0,0,0.08);
}


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

.auth-form{
padding:50px 45px;
display:flex;
flex-direction:column;
justify-content:center;
}


.auth-form h2{
font-size:28px;
font-weight:600;
color:#0a4bd9;
margin-bottom:10px;
}


.auth-sub{
font-size:14px;
color:#777;
margin-bottom:25px;
}


/* ================= INPUT ================= */

.auth-form input,
.auth-form textarea{

width:100%;
padding:13px;
border-radius:8px;
border:1px solid #ddd;
font-size:14px;
margin-bottom:14px;
transition:0.25s;
outline:none;

}


.auth-form textarea{
resize:none;
height:80px;
}


.auth-form input:focus,
.auth-form textarea:focus{

border-color:#0a4bd9;
box-shadow:0 0 0 2px rgba(10,75,217,0.1);

}


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

.auth-form button{

background:#0a4bd9;
color:#fff;
border:none;
padding:14px;
border-radius:8px;
font-size:15px;
font-weight:500;
cursor:pointer;
transition:0.25s;

}

.auth-form button:hover{

background:#083bb3;

}


/* ================= LINKS ================= */

.auth-link{

margin-top:15px;
font-size:14px;
text-align:center;

}

.auth-link a{

color:#0a4bd9;
font-weight:500;
text-decoration:none;

}

.auth-link a:hover{

text-decoration:underline;

}


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

.auth-error{

background:#ffe8e8;
color:#c0392b;
padding:10px;
border-radius:6px;
font-size:14px;
margin-bottom:15px;

}


/* ================= IMAGE SIDE ================= */

.auth-image{

background:linear-gradient(135deg,#6c63ff,#4f7cff);
display:flex;
align-items:center;
justify-content:center;
padding:30px;

}


.auth-image img{

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

}



/* IMAGE TEXT */

.auth-image{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
padding:30px;
color:#fff;
}

.auth-image img{
max-width:370px;
margin-bottom:20px;
}

.auth-image-text h3{
font-size:20px;
margin-bottom:8px;
font-weight:600;
}

.auth-image-text p{
font-size:14px;
opacity:0.9;
line-height:1.5;
}

/* LOGIN BUTTON ROW */

.login-row{
display:flex;
align-items:center;
justify-content:space-between;
margin-top:5px;
margin-bottom:10px;
}


/* FORGOT PASSWORD */

.forgot-link{
font-size:14px;
color:#0a4bd9;
text-decoration:none;
}

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


/* CREATE ACCOUNT CENTER */

.auth-link{
text-align:center;
margin-top:15px;
font-size:14px;
}

/* ================= FOR SIGNUP REVERSE ================= */

.auth-card.reverse{
grid-template-columns:1fr 1fr;
}


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

@media(max-width:900px){

.auth-card{
grid-template-columns:1fr;
}

/* image on top */

.auth-image{
display:flex;
order:-1;
padding:35px 20px;
}

.auth-image img{
max-width:260px;
}

/* form */

.auth-form{
padding:35px 25px;
}

.auth-form h2{
font-size:24px;
text-align:center;
}

.auth-sub{
text-align:center;
}

.login-row{
flex-direction:column;
gap:10px;
align-items:stretch;
}

.forgot-link{
text-align:center;
}

}

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

@media(max-width:480px){

.auth-wrapper{

padding:20px 10px;

}

.auth-form{

padding:30px 20px;

}

.auth-form input,
.auth-form textarea{

padding:12px;

}

.auth-form button{

padding:12px;

}

}

/* ================= SIGNUP MOBILE FIX ================= */

@media(max-width:900px){

/* signup page image top */

.auth-card.reverse{
display:flex;
flex-direction:column;
}

/* image first */

.auth-card.reverse .auth-image{
order:-1;
display:flex;
padding:30px 20px;
}

.auth-card.reverse .auth-image img{
max-width:240px;
}

/* form */

.auth-card.reverse .auth-form{
padding:30px 22px;
}

}