/*=========================================================
GOOGLE FONT
=========================================================*/

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

background:#EEF2FF;

overflow-x:hidden;

color:#1E293B;

min-height:100vh;

position:relative;

}

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

.bg-gradient{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:

linear-gradient(135deg,#4F46E5 0%,#7C3AED 45%,#06B6D4 100%);

z-index:-5;

}

.blur-circle{

position:fixed;

border-radius:50%;

filter:blur(80px);

opacity:.35;

z-index:-4;

}

.blur-one{

width:300px;
height:300px;

background:#ffffff;

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

}

.blur-two{

width:350px;
height:350px;

background:#38BDF8;

right:-120px;
top:120px;

}

.blur-three{

width:280px;
height:280px;

background:#C084FC;

bottom:-100px;
left:40%;

}

/*=========================================================
FLOATING SHAPES
=========================================================*/

.floating-shape{

position:fixed;

border-radius:24px;

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

backdrop-filter:blur(25px);

animation:float 8s ease-in-out infinite;

z-index:-3;

}

.shape-1{

width:80px;
height:80px;

top:15%;
left:8%;

}

.shape-2{

width:55px;
height:55px;

right:12%;
top:65%;

animation-delay:1.5s;

}

.shape-3{

width:120px;
height:120px;

bottom:10%;
left:20%;

animation-delay:3s;

}

@keyframes float{

0%,100%{

transform:translateY(0px);

}

50%{

transform:translateY(-20px);

}

}

/*=========================================================
PRELOADER
=========================================================*/

#preloader{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:linear-gradient(135deg,#4F46E5,#7C3AED);

display:flex;

justify-content:center;

align-items:center;

z-index:999999;

transition:.5s;

}

.loader-box{

text-align:center;

color:#fff;

}

.loader-logo{

width:90px;

height:90px;

margin:auto;

border-radius:50%;

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

display:flex;

justify-content:center;

align-items:center;

font-size:36px;

backdrop-filter:blur(15px);

animation:pulse 1.6s infinite;

}

.loader-box h4{

margin-top:18px;

font-weight:700;

}

.loader-box p{

opacity:.9;

margin-top:8px;

margin-bottom:20px;

font-size:14px;

}

.loader-line{

width:180px;

height:6px;

border-radius:50px;

overflow:hidden;

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

margin:auto;

}

.loader-line span{

display:block;

height:100%;

width:40%;

background:#fff;

border-radius:50px;

animation:loading 1.2s infinite;

}

@keyframes loading{

0%{

transform:translateX(-100%);

}

100%{

transform:translateX(320%);

}

}

@keyframes pulse{

50%{

transform:scale(1.08);

}

}

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

.register-card{

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

backdrop-filter:blur(30px);

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

border-radius:28px;

padding:40px;

box-shadow:

0 20px 60px rgba(0,0,0,.12);

animation:cardUp .6s ease;

}

@keyframes cardUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

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

.app-logo{

display:flex;

justify-content:center;

margin-bottom:24px;

}

.logo-circle{

width:90px;

height:90px;

border-radius:50%;

background:linear-gradient(135deg,#6366F1,#8B5CF6);

display:flex;

justify-content:center;

align-items:center;

color:#fff;

font-size:38px;

box-shadow:

0 18px 35px rgba(99,102,241,.35);

animation:logoFloat 4s infinite;

}

@keyframes logoFloat{

50%{

transform:translateY(-8px);

}

}

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

.register-title{

font-size:32px;

font-weight:700;

color:#111827;

margin-bottom:8px;

}

.register-subtitle{

font-size:15px;

line-height:1.7;

color:#6B7280;

margin-bottom:30px;

}

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

.form-group-app{

position:relative;

margin-bottom:24px;

}

.form-group-app input{

width:100%;

height:64px;

border:2px solid #E5E7EB;

border-radius:20px;

padding:22px 55px 0 58px;

font-size:15px;

font-weight:500;

background:#fff;

transition:.3s;

outline:none;

}

.form-group-app input:focus{

border-color:#6366F1;

box-shadow:

0 0 0 4px rgba(99,102,241,.12);

}

.form-group-app label{

position:absolute;

left:58px;

top:50%;

transform:translateY(-50%);

background:#fff;

padding:0 6px;

font-size:15px;

color:#94A3B8;

pointer-events:none;

transition:.3s;

}

.form-group-app input:focus+label,

.form-group-app input:not(:placeholder-shown)+label{

top:0;

font-size:12px;

color:#6366F1;

font-weight:600;

}

.input-icon{

position:absolute;

left:20px;

top:50%;

transform:translateY(-50%);

font-size:18px;

color:#94A3B8;

z-index:5;

}

.toggle-password{

position:absolute;

right:14px;

top:50%;

transform:translateY(-50%);

width:42px;

height:42px;

border:none;

border-radius:12px;

background:#F3F4F6;

cursor:pointer;

display:flex;

justify-content:center;

align-items:center;

transition:.3s;

}

.toggle-password:hover{

background:#EEF2FF;

color:#4F46E5;

}
/*=========================================================
SUCCESS ALERT
=========================================================*/

.success-alert{

display:flex;

align-items:flex-start;

gap:15px;

padding:18px;

margin-bottom:24px;

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

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

border-left:5px solid #22C55E;

border-radius:20px;

color:#166534;

font-weight:500;

font-size:14px;

backdrop-filter:blur(12px);

animation:slideDown .5s ease;

}

.success-alert i{

font-size:22px;

color:#22C55E;

margin-top:2px;

}

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

.error-alert{

display:flex;

align-items:flex-start;

gap:15px;

padding:18px;

margin-bottom:24px;

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

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

border-left:5px solid #EF4444;

border-radius:20px;

animation:slideDown .5s ease;

}

.alert-icon{

font-size:22px;

color:#EF4444;

}

.alert-content{

font-size:14px;

font-weight:500;

color:#991B1B;

line-height:1.8;

}

@keyframes slideDown{

from{

opacity:0;

transform:translateY(-15px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*=========================================================
PASSWORD STRENGTH
=========================================================*/

.password-strength{

margin-top:-6px;

margin-bottom:28px;

}

.strength-track{

width:100%;

height:8px;

background:#E5E7EB;

border-radius:30px;

overflow:hidden;

margin-bottom:10px;

}

.strength-fill{

height:100%;

width:0;

border-radius:30px;

background:#EF4444;

transition:.35s ease;

}

.strength-text{

font-size:13px;

font-weight:600;

color:#6B7280;

}

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

.terms-box{

margin-bottom:28px;

}

.custom-checkbox{

display:flex;

align-items:flex-start;

cursor:pointer;

user-select:none;

gap:12px;

font-size:14px;

font-weight:500;

color:#475569;

line-height:1.6;

}

.custom-checkbox input{

display:none;

}

.checkmark{

width:24px;

height:24px;

border:2px solid #CBD5E1;

border-radius:8px;

background:#fff;

display:flex;

align-items:center;

justify-content:center;

flex-shrink:0;

transition:.3s;

margin-top:2px;

}

.custom-checkbox input:checked + .checkmark{

background:linear-gradient(135deg,#6366F1,#8B5CF6);

border-color:#6366F1;

}

.custom-checkbox input:checked + .checkmark::before{

content:"✓";

color:#fff;

font-weight:700;

font-size:14px;

}

.custom-checkbox a{

color:#4F46E5;

font-weight:600;

text-decoration:none;

}

.custom-checkbox a:hover{

text-decoration:underline;

}

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

.register-btn{

width:100%;

height:62px;

border:none;

border-radius:20px;

background:linear-gradient(135deg,#6366F1,#8B5CF6);

color:#fff;

font-size:17px;

font-weight:700;

display:flex;

align-items:center;

justify-content:center;

gap:12px;

cursor:pointer;

transition:.35s;

box-shadow:0 18px 40px rgba(99,102,241,.30);

position:relative;

overflow:hidden;

text-decoration:none;

}

.register-btn:hover{

transform:translateY(-3px);

box-shadow:0 28px 50px rgba(99,102,241,.40);

}

.register-btn:active{

transform:scale(.98);

}

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

.divider{

display:flex;

align-items:center;

margin:32px 0;

color:#94A3B8;

font-size:13px;

font-weight:600;

}

.divider::before,

.divider::after{

content:"";

flex:1;

height:1px;

background:#E2E8F0;

}

.divider span{

padding:0 18px;

}

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

.login-link-btn{

width:100%;

height:60px;

display:flex;

align-items:center;

justify-content:center;

gap:10px;

background:#fff;

border:2px solid #E2E8F0;

border-radius:20px;

font-weight:600;

font-size:15px;

color:#334155;

text-decoration:none;

transition:.35s;

}

.login-link-btn:hover{

background:#F8FAFC;

border-color:#6366F1;

color:#4F46E5;

transform:translateY(-2px);

}

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

.register-footer{

margin-top:28px;

text-align:center;

font-size:13px;

color:#94A3B8;

font-weight:500;

}

.register-footer strong{

color:#4F46E5;

}

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

@media(max-width:768px){

.register-card{

padding:28px 22px;

border-radius:24px;

}

.logo-circle{

width:75px;

height:75px;

font-size:30px;

}

.register-title{

font-size:26px;

}

.register-subtitle{

font-size:14px;

}

.form-group-app input{

height:58px;

padding:20px 52px 0 54px;

font-size:14px;

}

.form-group-app label{

left:54px;

font-size:14px;

}

.input-icon{

left:18px;

font-size:17px;

}

.toggle-password{

width:38px;

height:38px;

right:12px;

}

.register-btn,

.login-link-btn{

height:56px;

font-size:15px;

border-radius:18px;

}

}

@media(max-width:480px){

.register-card{

padding:22px 18px;

}

.register-title{

font-size:22px;

}

.success-alert,

.error-alert{

padding:15px;

font-size:13px;

}

.custom-checkbox{

font-size:13px;

}

.register-footer{

font-size:12px;

}

}