/* ===================================
SOCIALELITE SIGNUP
index.css
=================================== */

:root{

--primary:#3b82f6;

--secondary:#2563eb;

--background:#08101b;

--surface:#101827;

--card:#111c2d;

--border:#233149;

--text:#ffffff;

--gray:#a8b3c7;

--success:#22c55e;

--danger:#ef4444;

--radius:18px;

--shadow:0 20px 60px rgba(0,0,0,.35);

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

background:var(--background);

color:var(--text);

min-height:100vh;

display:flex;

flex-direction:column;

}

a{

text-decoration:none;

color:inherit;

}

button,

input{

font-family:inherit;

outline:none;

}

.signup-page{

flex:1;

display:flex;

align-items:center;

justify-content:center;

padding:60px 20px;

}

.signup-card{

width:100%;

max-width:560px;

background:var(--card);

border:1px solid var(--border);

border-radius:24px;

padding:45px;

box-shadow:var(--shadow);

animation:fadeUp .6s ease;

}

.logo-area{

text-align:center;

margin-bottom:35px;

}

.logo-area h1{

font-size:2rem;

font-weight:800;

color:var(--primary);

}

.logo-area p{

margin-top:10px;

color:var(--gray);

}

.heading{

text-align:center;

margin-bottom:35px;

}

.heading h2{

font-size:2rem;

margin-bottom:10px;

}

.heading p{

color:var(--gray);

line-height:1.6;

}

.form-group{

margin-bottom:22px;

display:flex;

flex-direction:column;

}

.form-group label{

margin-bottom:10px;

font-weight:600;

}

.form-group label span{

font-weight:400;

font-size:.9rem;

color:var(--gray);

}

.form-group input{

width:100%;

height:56px;

padding:0 18px;

background:var(--surface);

border:1px solid var(--border);

border-radius:14px;

color:var(--text);

font-size:15px;

transition:.3s;

}

.form-group input:focus{

border-color:var(--primary);

box-shadow:0 0 0 4px rgba(59,130,246,.18);

}

.password-box{

display:flex;

align-items:center;

background:var(--surface);

border:1px solid var(--border);

border-radius:14px;

overflow:hidden;

}

.password-box input{

border:none;

background:transparent;

flex:1;

}

.password-box button{

width:80px;

height:56px;

border:none;

background:transparent;

color:var(--primary);

cursor:pointer;

font-weight:600;

}

.password-box button:hover{

background:rgba(59,130,246,.08);

}

.strength{

margin-top:12px;

width:100%;

height:8px;

background:#1d2a40;

border-radius:999px;

overflow:hidden;

}

#strengthBar{

width:0%;

height:100%;

background:var(--danger);

transition:.35s;

}

#strengthText{

margin-top:8px;

display:block;

font-size:.85rem;

color:var(--gray);

}
/* ==========================
CHECKBOX
========================== */

.checkbox-group{

margin:28px 0;

}

.checkbox-group label{

display:flex;

align-items:flex-start;

gap:12px;

cursor:pointer;

line-height:1.7;

color:var(--gray);

}

.checkbox-group input{

width:18px;

height:18px;

margin-top:3px;

accent-color:var(--primary);

}

.checkbox-group a{

color:var(--primary);

font-weight:600;

}

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

.primary-btn{

width:100%;

height:58px;

border:none;

border-radius:14px;

background:linear-gradient(135deg,var(--primary),var(--secondary));

color:#fff;

font-size:16px;

font-weight:700;

cursor:pointer;

transition:.3s;

}

.primary-btn:hover{

transform:translateY(-3px);

box-shadow:0 12px 30px rgba(37,99,235,.35);

}

.primary-btn:disabled{

opacity:.65;

cursor:not-allowed;

transform:none;

}

/* ==========================
LOGIN LINK
========================== */

.login-link{

margin-top:30px;

text-align:center;

color:var(--gray);

}

.login-link a{

color:var(--primary);

font-weight:700;

}

/* ==========================
OTP CARD
========================== */

.otp-card{

margin-top:40px;

padding-top:35px;

border-top:1px solid var(--border);

animation:fadeUp .5s ease;

}

.hidden{

display:none;

}

.otp-card h3{

text-align:center;

margin-bottom:15px;

}

.otp-card p{

text-align:center;

color:var(--gray);

margin-bottom:25px;

line-height:1.6;

}

.otp-inputs{

display:flex;

justify-content:space-between;

gap:10px;

margin-bottom:25px;

}

.otp-input{

width:58px;

height:58px;

border-radius:14px;

border:1px solid var(--border);

background:var(--surface);

color:#fff;

font-size:24px;

font-weight:700;

text-align:center;

transition:.3s;

}

.otp-input:focus{

border-color:var(--primary);

box-shadow:0 0 0 4px rgba(59,130,246,.18);

}

.resend-text{

margin-top:20px;

text-align:center;

}

#resendOtp{

background:none;

border:none;

color:var(--primary);

cursor:pointer;

font-weight:700;

font-size:15px;

}

#resendOtp:hover{

text-decoration:underline;

}

/* ==========================
ALERTS
========================== */

.alert{

margin-top:25px;

padding:16px 18px;

border-radius:14px;

font-weight:600;

animation:fadeUp .4s ease;

}

.success{

background:rgba(34,197,94,.12);

border:1px solid rgba(34,197,94,.35);

color:var(--success);

}

.error{

background:rgba(239,68,68,.12);

border:1px solid rgba(239,68,68,.35);

color:var(--danger);

}
/* ==========================
LOADING OVERLAY
========================== */

.loading-overlay{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(8,16,27,.92);

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

z-index:9999;

}

.loader{

width:60px;

height:60px;

border:5px solid rgba(255,255,255,.15);

border-top:5px solid var(--primary);

border-radius:50%;

animation:spin 1s linear infinite;

margin-bottom:20px;

}

.loading-overlay p{

color:#fff;

font-size:16px;

font-weight:600;

}

/* ==========================
TOAST
========================== */

.toast{

position:fixed;

bottom:30px;

right:30px;

padding:16px 24px;

background:#101827;

border:1px solid var(--border);

border-left:4px solid var(--primary);

border-radius:14px;

box-shadow:var(--shadow);

font-weight:600;

z-index:9998;

animation:fadeUp .35s ease;

}

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

.signup-footer{

padding:30px 20px;

text-align:center;

border-top:1px solid rgba(255,255,255,.05);

}

.signup-footer p{

color:var(--gray);

margin-bottom:15px;

}

.footer-links{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.footer-links a{

color:var(--gray);

transition:.3s;

}

.footer-links a:hover{

color:var(--primary);

}

/* ==========================
ANIMATIONS
========================== */

@keyframes spin{

0%{

transform:rotate(0deg);

}

100%{

transform:rotate(360deg);

}

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* ==========================
RESPONSIVE
========================== */

@media(max-width:768px){

.signup-page{

padding:30px 15px;

}

.signup-card{

padding:30px 22px;

border-radius:18px;

}

.heading h2{

font-size:1.7rem;

}

.logo-area h1{

font-size:1.8rem;

}

.otp-inputs{

gap:8px;

}

.otp-input{

width:45px;

height:50px;

font-size:20px;

}

.footer-links{

gap:12px;

font-size:14px;

}

.toast{

left:15px;

right:15px;

bottom:20px;

}

}

@media(max-width:480px){

.otp-input{

width:40px;

height:46px;

font-size:18px;

}

.primary-btn{

height:54px;

font-size:15px;

}

.form-group input{

height:52px;

}

.password-box button{

width:70px;

height:52px;

}

   }