/* =========================================
   AUTH PAGES CSS
========================================= */

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

/* =========================================
   ROOT
========================================= */

:root{

--bg:#050816;
--bg2:#0b1120;

--card:#111827;
--card2:#1e293b;

--primary:#2563eb;
--primary2:#3b82f6;

--success:#16a34a;
--danger:#dc2626;

--text:#ffffff;
--muted:#94a3b8;

--border:rgba(255,255,255,.05);

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

}

/* =========================================
   RESET
========================================= */

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

body{

background:
linear-gradient(
135deg,
var(--bg),
var(--bg2)
);

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

padding:20px;

overflow-x:hidden;

color:white;

position:relative;

}

/* =========================================
   BACKGROUND GLOW
========================================= */

body::before{

content:'';

position:absolute;

width:450px;
height:450px;

background:
rgba(37,99,235,.18);

filter:blur(120px);

border-radius:50%;

top:-100px;
left:-100px;

z-index:-1;

}

body::after{

content:'';

position:absolute;

width:420px;
height:420px;

background:
rgba(124,58,237,.18);

filter:blur(120px);

border-radius:50%;

bottom:-120px;
right:-120px;

z-index:-1;

}

/* =========================================
   AUTH CONTAINER
========================================= */

.auth-container{

width:100%;

max-width:460px;

}

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

.auth-card{

background:
rgba(17,24,39,.95);

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

border-radius:32px;

padding:34px;

backdrop-filter:blur(16px);

box-shadow:var(--shadow);

position:relative;

overflow:hidden;

}

/* =========================================
   TOP BORDER
========================================= */

.auth-card::before{

content:'';

position:absolute;

top:0;
left:0;

width:100%;
height:4px;

background:
linear-gradient(
90deg,
var(--primary2),
var(--primary)
);

}

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

.auth-logo{

font-size:42px;

font-weight:800;

text-align:center;

margin-bottom:12px;

background:
linear-gradient(
135deg,
#60a5fa,
#2563eb
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

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

.auth-title{

font-size:32px;

font-weight:800;

text-align:center;

margin-bottom:10px;

}

/* =========================================
   SUBTITLE
========================================= */

.auth-subtitle{

text-align:center;

font-size:14px;

color:var(--muted);

margin-bottom:32px;

line-height:1.6;

}

/* =========================================
   FORM GROUP
========================================= */

.form-group{

margin-bottom:20px;

}

/* =========================================
   LABEL
========================================= */

.form-label{

display:block;

margin-bottom:10px;

font-size:14px;

font-weight:600;

color:#dbeafe;

}

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

.auth-input{

width:100%;

height:58px;

padding:0 18px;

background:#0f172a;

border:
1px solid rgba(255,255,255,.06);

border-radius:18px;

color:white;

font-size:14px;

outline:none;

transition:.25s ease;

}

.auth-input:focus{

border-color:var(--primary);

box-shadow:
0 0 0 4px rgba(37,99,235,.15);

}

/* =========================================
   PASSWORD WRAPPER
========================================= */

.password-wrapper{

position:relative;

}

.password-toggle{

position:absolute;

right:18px;
top:50%;

transform:translateY(-50%);

cursor:pointer;

font-size:14px;

color:var(--muted);

}

/* =========================================
   OPTIONS
========================================= */

.auth-options{

display:flex;

justify-content:space-between;

align-items:center;

gap:14px;

flex-wrap:wrap;

margin-bottom:24px;

}

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

.checkbox-group{

display:flex;

align-items:center;

gap:10px;

font-size:14px;

color:var(--muted);

}

.checkbox-group input{

accent-color:var(--primary);

}

/* =========================================
   FORGOT LINK
========================================= */

.forgot-link{

font-size:14px;

color:#93c5fd;

text-decoration:none;

transition:.2s ease;

}

.forgot-link:hover{

color:white;

}

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

.auth-btn{

width:100%;

height:58px;

border:none;

border-radius:18px;

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

color:white;

font-size:15px;

font-weight:700;

cursor:pointer;

transition:.25s ease;

display:flex;

align-items:center;

justify-content:center;

gap:10px;

}

.auth-btn:hover{

transform:translateY(-2px);

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

}

/* =========================================
   DIVIDER
========================================= */

.auth-divider{

display:flex;

align-items:center;

gap:14px;

margin:26px 0;

color:var(--muted);

font-size:13px;

}

.auth-divider::before,
.auth-divider::after{

content:'';

flex:1;

height:1px;

background:
rgba(255,255,255,.08);

}

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

.social-login{

display:grid;

grid-template-columns:1fr 1fr;

gap:14px;

margin-bottom:26px;

}

.social-btn{

height:54px;

border:none;

border-radius:16px;

background:#1e293b;

color:white;

font-size:14px;

font-weight:600;

cursor:pointer;

transition:.2s ease;

display:flex;

align-items:center;

justify-content:center;

gap:10px;

}

.social-btn:hover{

background:#2563eb;

transform:translateY(-2px);

}

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

.auth-footer{

text-align:center;

font-size:14px;

color:var(--muted);

line-height:1.7;

}

.auth-footer a{

color:#93c5fd;

text-decoration:none;

font-weight:600;

}

.auth-footer a:hover{

color:white;

}

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

.auth-error{

background:
rgba(220,38,38,.15);

border:
1px solid rgba(220,38,38,.25);

color:#fecaca;

padding:14px 16px;

border-radius:16px;

margin-bottom:22px;

font-size:14px;

}

/* =========================================
   SUCCESS
========================================= */

.auth-success{

background:
rgba(22,163,74,.15);

border:
1px solid rgba(22,163,74,.25);

color:#bbf7d0;

padding:14px 16px;

border-radius:16px;

margin-bottom:22px;

font-size:14px;

}

/* =========================================
   LOADER
========================================= */

.auth-loader{

width:22px;
height:22px;

border:
3px solid rgba(255,255,255,.2);

border-top:
3px solid white;

border-radius:50%;

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{
transform:rotate(360deg);
}

}

/* =========================================
   FLOATING ANIMATION
========================================= */

.float{

animation:floating 4s ease-in-out infinite;

}

@keyframes floating{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-8px);
}

100%{
transform:translateY(0px);
}

}

/* =========================================
   FADE IN
========================================= */

.fade-in{

animation:fadeIn .5s ease;

}

@keyframes fadeIn{

from{
opacity:0;
transform:translateY(12px);
}

to{
opacity:1;
transform:translateY(0);
}

}

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

@media(max-width:768px){

.auth-card{

padding:26px;

border-radius:24px;

}

.auth-title{

font-size:28px;

}

.auth-logo{

font-size:36px;

}

.social-login{

grid-template-columns:1fr;

}

}

@media(max-width:500px){

.auth-card{

padding:22px;

}

.auth-title{

font-size:24px;

}

.auth-subtitle{

font-size:13px;

}

.auth-input{

height:54px;

}

.auth-btn{

height:54px;

}

}

/* =========================================
   SCROLLBAR
========================================= */

::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-track{
background:#0f172a;
}

::-webkit-scrollbar-thumb{
background:#2563eb;
border-radius:999px;
}