:root{

--primary:#6366f1;

}



*{

box-sizing:border-box;

font-family:Inter,Arial,sans-serif;

}



body{

margin:0;

min-height:100vh;

background:

linear-gradient(
135deg,
#f8fafc,
#eef2ff
);

display:flex;

align-items:center;

justify-content:center;

}



.customer-auth{

width:100%;

padding:30px;

}



.auth-card{

max-width:450px;

margin:auto;

background:white;

border-radius:30px;

padding:40px;

box-shadow:

0 25px 70px rgba(15,23,42,.12);

border:1px solid #eef2f7;

}



.auth-logo{

text-align:center;

margin-bottom:30px;

}



.logo-icon{

width:80px;

height:80px;

margin:auto;

border-radius:25px;

background:

linear-gradient(
135deg,
var(--primary),
#8b5cf6
);

color:white;

display:flex;

align-items:center;

justify-content:center;

font-size:32px;

}



.auth-logo h1{

font-size:32px;

margin:20px 0 5px;

color:#0f172a;

}



.auth-logo p{

color:#64748b;

}





.form-group{

margin-bottom:20px;

}



.form-group label{

display:block;

font-weight:700;

font-size:14px;

margin-bottom:8px;

color:#334155;

}



.input-box{

height:55px;

border-radius:16px;

border:1px solid #e2e8f0;

display:flex;

align-items:center;

padding:0 18px;

gap:12px;

}



.input-box i{

color:#94a3b8;

}



.input-box input{

border:0;

outline:none;

flex:1;

font-size:15px;

}





.password-eye{

cursor:pointer;

}



.login-options{

display:flex;

justify-content:space-between;

align-items:center;

margin:20px 0;

font-size:14px;

}



.login-options a{

color:var(--primary);

font-weight:700;

text-decoration:none;

}



.remember{

display:flex;

align-items:center;

gap:10px;

cursor:pointer;

}



.remember input{

display:none;

}



.remember span{

width:20px;

height:20px;

border-radius:6px;

border:2px solid #cbd5e1;

}



.remember input:checked + span{

background:var(--primary);

border-color:var(--primary);

}





.login-btn{

width:100%;

height:55px;

border:0;

border-radius:16px;

background:var(--primary);

color:white;

font-size:16px;

font-weight:800;

cursor:pointer;

display:flex;

align-items:center;

justify-content:center;

gap:10px;

}





.divider{

text-align:center;

margin:25px 0;

position:relative;

}



.divider:before{

content:"";

position:absolute;

left:0;

right:0;

top:50%;

height:1px;

background:#e2e8f0;

}



.divider span{

position:relative;

background:white;

padding:0 15px;

color:#94a3b8;

}





.social-login{

display:flex;

flex-direction:column;

gap:12px;

}



.social-login button{

height:50px;

border-radius:15px;

background:white;

border:1px solid #e2e8f0;

font-weight:700;

cursor:pointer;

}



.register-link{

text-align:center;

margin-top:25px;

color:#64748b;

}



.register-link a{

color:var(--primary);

font-weight:800;

text-decoration:none;

}



@media(max-width:500px){


.auth-card{

padding:25px;

}

}