/*==================================================
 MAX CMS LOGIN UI
==================================================*/

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

:root{

--primary:#2563eb;
--primary-dark:#1d4ed8;

--dark:#0f172a;
--card:#1e293b;

--white:#ffffff;

--text:#cbd5e1;

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

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

--radius:24px;

}



*{

margin:0;

padding:0;

box-sizing:border-box;

}



html{

font-size:16px;

}



body{

font-family:'Poppins',sans-serif;

background:#0f172a;

color:#fff;

overflow-x:hidden;

}



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

.login-page{

position:relative;

display:flex;

justify-content:center;

align-items:center;

min-height:100vh;

padding:40px 20px;

overflow:hidden;

background:

linear-gradient(

135deg,

#020617,

#0f172a,

#111827

);

}



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

.circle-one,

.circle-two,

.circle-three{

position:absolute;

border-radius:50%;

filter:blur(90px);

opacity:.28;

pointer-events:none;

z-index:1;

}



.circle-one{

width:450px;

height:450px;

background:#2563eb;

top:-180px;

left:-150px;

animation:floatOne 9s infinite ease-in-out;

}



.circle-two{

width:500px;

height:500px;

background:#7c3aed;

right:-180px;

bottom:-200px;

animation:floatTwo 10s infinite ease-in-out;

}



.circle-three{

width:260px;

height:260px;

background:#06b6d4;

left:50%;

top:18%;

transform:translateX(-50%);

animation:floatThree 7s infinite ease-in-out;

}



@keyframes floatOne{

50%{

transform:translateY(40px);

}

}



@keyframes floatTwo{

50%{

transform:translateY(-40px);

}

}



@keyframes floatThree{

50%{

transform:translate(-50%,25px);

}

}



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

.login-container{

position:relative;

z-index:10;

width:100%;

display:flex;

justify-content:center;

align-items:center;

}



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

.login-card{

width:100%;

max-width:470px;

background:

rgba(30,41,59,.82);

backdrop-filter:blur(22px);

-webkit-backdrop-filter:blur(22px);

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

border-radius:var(--radius);

box-shadow:var(--shadow);

padding:45px;

position:relative;

overflow:hidden;

animation:cardFade .7s ease;

}



.login-card::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:70%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.12),

transparent

);

transform:skewX(-25deg);

transition:1s;

}



.login-card:hover::before{

left:170%;

}



@keyframes cardFade{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*==================================================
 BRAND
==================================================*/

.brand{

text-align:center;

margin-bottom:35px;

position:relative;

z-index:2;

}

.brand img{

width:90px;

height:90px;

object-fit:contain;

margin-bottom:18px;

filter:drop-shadow(0 15px 35px rgba(37,99,235,.45));

animation:logoFloat 5s ease-in-out infinite;

}

@keyframes logoFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}

.brand h1{

font-size:38px;

font-weight:800;

letter-spacing:.5px;

margin-bottom:8px;

color:#ffffff;

}

.brand span{

color:var(--primary);

}

.brand p{

font-size:15px;

color:var(--text);

line-height:1.7;

}



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

.error-box{

display:flex;

align-items:center;

gap:12px;

padding:15px 18px;

margin-bottom:25px;

border-radius:16px;

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

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

color:#fecaca;

font-size:14px;

font-weight:500;

}

.error-box i{

font-size:18px;

color:#ef4444;

}



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

.form-group{

margin-bottom:22px;

}

.form-group label{

display:block;

margin-bottom:10px;

font-size:14px;

font-weight:600;

color:#e2e8f0;

}



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

.input-box{

position:relative;

display:flex;

align-items:center;

}

.input-box i:first-child{

position:absolute;

left:18px;

font-size:17px;

color:#94a3b8;

transition:.3s;

pointer-events:none;

}

.input-box input{

width:100%;

height:58px;

padding:0 54px;

border-radius:16px;

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

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

color:#ffffff;

font-size:15px;

font-family:'Poppins',sans-serif;

outline:none;

transition:.35s;

}

.input-box input::placeholder{

color:#94a3b8;

}

.input-box input:focus{

border-color:var(--primary);

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

box-shadow:

0 0 0 4px rgba(37,99,235,.15);

}

.input-box:focus-within i:first-child{

color:var(--primary);

}



/*==================================================
 PASSWORD EYE
==================================================*/

.password-box{

position:relative;

}

.toggle-password{

position:absolute;

right:18px;

top:50%;

transform:translateY(-50%);

background:none;

border:none;

cursor:pointer;

color:#94a3b8;

font-size:17px;

transition:.3s;

}

.toggle-password:hover{

color:var(--primary);

}



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

.login-options{

display:flex;

justify-content:space-between;

align-items:center;

margin:10px 0 28px;

}

.remember{

display:flex;

align-items:center;

gap:8px;

font-size:14px;

color:var(--text);

cursor:pointer;

}

.remember input{

accent-color:var(--primary);

width:16px;

height:16px;

cursor:pointer;

}

.forgot-password{

font-size:14px;

text-decoration:none;

color:#60a5fa;

transition:.3s;

}

.forgot-password:hover{

color:#ffffff;

text-decoration:underline;

}



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

.login-btn{

width:100%;

height:58px;

border:none;

border-radius:16px;

background:linear-gradient(
135deg,
#2563eb,
#3b82f6
);

display:flex;

justify-content:center;

align-items:center;

gap:12px;

font-size:16px;

font-weight:600;

color:#ffffff;

cursor:pointer;

transition:.35s;

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

}

.login-btn:hover{

transform:translateY(-3px);

box-shadow:0 20px 40px rgba(37,99,235,.45);

}

.login-btn:active{

transform:scale(.98);

}

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

.login-footer{

margin-top:32px;

padding-top:20px;

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

text-align:center;

}

.login-footer p{

font-size:13px;

color:#94a3b8;

line-height:1.7;

}



/*==================================================
INPUT ACTIVE EFFECT
==================================================*/

.input-box.active input{

border-color:var(--primary);

box-shadow:

0 0 0 4px rgba(37,99,235,.15);

}

.input-box.active i:first-child{

color:var(--primary);

}



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

.login-btn:disabled{

opacity:.85;

cursor:not-allowed;

transform:none;

}



/*==================================================
AUTOFILL FIX
==================================================*/

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{

-webkit-text-fill-color:#ffffff;

-webkit-box-shadow:
0 0 0 1000px rgba(255,255,255,.05) inset;

transition:background-color 99999s;

}



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

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-track{

background:#0f172a;

}

::-webkit-scrollbar-thumb{

background:#2563eb;

border-radius:50px;

}



/*==================================================
TABLET
==================================================*/

@media(max-width:992px){

.login-card{

max-width:500px;

padding:40px;

}

.brand h1{

font-size:34px;

}

}



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

@media(max-width:768px){

.login-page{

padding:25px 15px;

}

.login-card{

padding:30px 22px;

border-radius:20px;

}

.brand{

margin-bottom:28px;

}

.brand img{

width:70px;

height:70px;

}

.brand h1{

font-size:30px;

}

.brand p{

font-size:13px;

}

.form-group{

margin-bottom:18px;

}

.form-group label{

font-size:13px;

}

.input-box input{

height:52px;

font-size:14px;

padding-left:48px;

padding-right:48px;

}

.input-box i:first-child{

left:16px;

font-size:15px;

}

.toggle-password{

right:16px;

font-size:15px;

}

.login-options{

flex-direction:column;

align-items:flex-start;

gap:14px;

}

.login-btn{

height:52px;

font-size:15px;

}

.login-footer{

margin-top:25px;

}

.login-footer p{

font-size:12px;

}

.circle-one{

width:220px;

height:220px;

top:-100px;

left:-100px;

}

.circle-two{

width:220px;

height:220px;

bottom:-120px;

right:-120px;

}

.circle-three{

display:none;

}

}



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

@media(max-width:420px){

.login-page{

padding:15px;

}

.login-card{

padding:24px 18px;

}

.brand img{

width:60px;

height:60px;

}

.brand h1{

font-size:26px;

}

.brand p{

font-size:12px;

}

.input-box input{

height:48px;

font-size:13px;

}

.login-btn{

height:48px;

font-size:14px;

}

.login-footer p{

font-size:11px;

}

}



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

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.brand,
.error-box,
.form-group,
.login-options,
.login-btn,
.login-footer{

animation:fadeUp .7s ease both;

}

.form-group:nth-child(1){

animation-delay:.1s;

}

.form-group:nth-child(2){

animation-delay:.2s;

}

.login-options{

animation-delay:.3s;

}

.login-btn{

animation-delay:.4s;

}

.login-footer{

animation-delay:.5s;

}