/* ================= GOOGLE FONT ================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ================= RESET ================= */
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

/* ================= BODY ================= */
body{

min-height:100vh;

display:flex;
justify-content:center;
align-items:center;

padding:20px;

background:#f4fff7;

}

/* ================= AUTH BOX ================= */

.auth-box{

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

background:#ffffff;

padding:38px 30px;

border-radius:24px;

border:1px solid #e5f5ea;

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

}

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

.logo{
text-align:center;
margin-bottom:15px;
}

.logo img{
width:130px;
}

/* ================= TITLE ================= */

.auth-title{

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

}

.auth-title h2{

font-size:30px;
font-weight:700;

color:#0f172a;

margin-bottom:6px;

}

.auth-title p{

font-size:14px;

color:#64748b;

}

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

.msg{

padding:14px;

border-radius:14px;

margin-bottom:18px;

font-size:14px;
font-weight:500;

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

}

/* ERROR */

.error{

background:#fff1f2;

border:1px solid #fecdd3;

color:#dc2626;

}

/* SUCCESS */

.success{

background:#f0fdf4;

border:1px solid #bbf7d0;

color:#16a34a;

}

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

.input-group{
margin-bottom:18px;
}

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

.input-box{

display:flex;
align-items:center;

padding:0 14px;

background:#f8fafc;

border:1px solid #dbe5dd;

border-radius:16px;

transition:.3s;

}

/* FOCUS */

.input-box:focus-within{

border-color:#22c55e;

background:#ffffff;

box-shadow:
0 0 0 4px rgba(34,197,94,0.10);

}

/* ICON */

.input-box i{

font-size:18px;

margin-right:10px;

color:#22c55e;

}

/* INPUT */

.input-box input{

width:100%;

padding:15px 0;

border:none;
outline:none;

background:transparent;

font-size:14px;

color:#0f172a;

}

.input-box input::placeholder{
color:#94a3b8;
}

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

.captcha-box{

background:#f0fdf4;

border:1px solid #bbf7d0;

padding:14px;

border-radius:16px;

margin-bottom:16px;

text-align:center;

font-size:18px;
font-weight:700;

color:#15803d;

}

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

.auth-btn{

width:100%;

padding:15px;

border:none;
border-radius:16px;

background:#22c55e;

color:#fff;

font-size:15px;
font-weight:600;

cursor:pointer;

transition:.3s;

box-shadow:
0 8px 20px rgba(34,197,94,0.20);

}

/* HOVER */

.auth-btn:hover{

background:#16a34a;

transform:translateY(-2px);

}

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

.links{

display:flex;
justify-content:space-between;

margin-top:18px;

gap:10px;

flex-wrap:wrap;

}

/* LINK */

.links a{

font-size:13px;

color:#16a34a;

text-decoration:none;

font-weight:500;

transition:.3s;

}

.links a:hover{
color:#15803d;
}

/* ================= SOCIAL ================= */

.social{

margin-top:28px;

display:flex;
justify-content:center;
gap:14px;

flex-wrap:wrap;

}

/* SOCIAL BUTTON */

.social a{

width:42px;
height:42px;

display:flex;
align-items:center;
justify-content:center;

border-radius:50%;

background:#f0fdf4;

border:1px solid #dcfce7;

color:#16a34a;

font-size:18px;

text-decoration:none;

transition:.3s;

}

/* HOVER */

.social a:hover{

background:#22c55e;

color:#fff;

}

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

.footer{

margin-top:24px;

text-align:center;

font-size:13px;

color:#64748b;

}

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

@media(max-width:500px){

.auth-box{

padding:28px 20px;

border-radius:20px;

}

.auth-title h2{
font-size:25px;
}

.links{
justify-content:center;
text-align:center;
}

}

/* ================= ROLE SELECT ================= */

.role-box{
margin-bottom:15px;
}

.role-box select{
width:100%;
padding:12px 14px;
border:1px solid #c8e6c9;
border-radius:12px;
background:#fff;
font-size:14px;
color:#2e7d32;
outline:none;
cursor:pointer;
transition:.3s;
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
}

/* focus */
.role-box select:focus{
border-color:#00c853;
box-shadow:0 0 0 3px rgba(0,200,83,0.15);
}

/* dropdown arrow custom */
.role-box{
position:relative;
}

.role-box::after{
content:"▼";
position:absolute;
right:14px;
top:50%;
transform:translateY(-50%);
color:#2e7d32;
font-size:12px;
pointer-events:none;
}

/* hover */
.role-box select:hover{
border-color:#00c853;
}