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

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

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

body{

background:#f6fbff;

overflow-x:hidden;

}

/* ===================================================
   PAGE
=================================================== */

.auth-page{

width:min(1630px,95%);
margin:auto;

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;
border-radius:100px;
padding:45px;

background:
linear-gradient(
135deg,
#edf6ff,
#ffffff,
#eef7ff
);

position:relative;

overflow:hidden;

}

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

.auth-page::before{

content:"";

position:absolute;

width:430px;

height:430px;

background:#bfdbfe;

border-radius:50%;

top:-150px;

left:-120px;

filter:blur(90px);

opacity:.65;

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

}

.auth-page::after{

content:"";

position:absolute;

width:360px;

height:360px;

background:#93c5fd;

border-radius:50%;

bottom:-120px;

right:-100px;

filter:blur(80px);

opacity:.55;

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

}

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

.auth-card{

width:min(1350px,100%);

height:760px;

display:flex;

overflow:hidden;

border-radius:38px;

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

backdrop-filter:blur(24px);

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

box-shadow:

0 30px 70px rgba(37,99,235,.12);

position:relative;

z-index:5;

}

/* ===================================================
   LEFT PANEL
=================================================== */

.left-panel{

width:45%;

padding:65px;

display:flex;

justify-content:center;

align-items:center;

background:

linear-gradient(

145deg,

#2563eb,

#3b82f6,

#60a5fa

);

position:relative;

overflow:hidden;

color:#fff;

}

/* Decorative circles */

.left-panel::before{

content:"";

position:absolute;

width:260px;

height:260px;

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

border-radius:50%;

right:-70px;

top:-70px;

}

.left-panel::after{

content:"";

position:absolute;

width:220px;

height:220px;

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

border-radius:50%;

left:-60px;

bottom:-60px;

}

/* ===================================================
   CONTENT
=================================================== */

.overlay-content{

position:relative;

z-index:2;

max-width:430px;

}

.logo{

font-size:34px;

font-weight:800;

letter-spacing:.5px;

display:block;

margin-bottom:35px;

}

.logo span{

color:#dbeafe;

}

.overlay-content h1{

font-size:54px;

font-weight:800;

line-height:1.15;

margin-bottom:22px;

}

.overlay-content p{

font-size:18px;

line-height:1.8;

opacity:.96;

margin-bottom:42px;

}

/* ===================================================
   RESUME PREVIEW
=================================================== */

.resume-preview{

width:320px;

background:#fff;

padding:24px;

border-radius:24px;

box-shadow:

0 25px 45px rgba(0,0,0,.15);

transform:rotate(-4deg);

transition:.35s;

}

.resume-preview:hover{

transform:

rotate(0deg)

translateY(-8px);

}

.profile{

width:70px;

height:70px;

border-radius:50%;

background:#dbeafe;

margin-bottom:20px;

}

.resume-line{

height:10px;

background:#e5e7eb;

border-radius:30px;

margin-bottom:12px;

}

.resume-line.long{

width:100%;

}

.resume-line.medium{

width:75%;

}

.resume-line.short{

width:45%;

}

.resume-section{

height:60px;

background:#eff6ff;

border-radius:16px;

margin:18px 0;

}



/* ===================================================
   RIGHT PANEL
=================================================== */

.right-panel{

width:55%;

display:flex;

justify-content:center;

align-items:center;

padding:70px;

position:relative;

background:transparent;

overflow:hidden;

}

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

.form-box{

width:100%;

max-width:450px;

transition:.45s ease;

}

.form-box h2{

font-size:42px;

font-weight:800;

color:#0f172a;

margin-bottom:10px;

}

.form-box p{

font-size:16px;

color:#64748b;

margin-bottom:35px;

line-height:1.8;

}

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

.input-box{

width:100%;

height:62px;

display:flex;

align-items:center;

padding:0 20px;

border:2px solid #e2e8f0;

border-radius:18px;

background:#fff;

margin-bottom:22px;

transition:.35s;

}

.input-box:hover{

border-color:#60a5fa;

box-shadow:

0 12px 25px rgba(59,130,246,.10);

}

.input-box:focus-within{

border-color:#2563eb;

box-shadow:

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

}

.input-box svg{

color:#2563eb;

margin-right:14px;

flex-shrink:0;

}

.input-box input{

width:100%;

border:none;

outline:none;

background:transparent;

font-size:16px;

color:#1e293b;

}

.input-box input::placeholder{

color:#94a3b8;

}

/* ===================================================
   FORGOT PASSWORD
=================================================== */

.forgot-password{

display:inline-block;

margin-top:-5px;

margin-bottom:28px;

font-size:15px;

font-weight:600;

color:#2563eb;

cursor:pointer;

transition:.3s;

}

.forgot-password:hover{

color:#1d4ed8;

}

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

.main-btn{

width:100%;

height:58px;

border:none;

border-radius:18px;

background:

linear-gradient(

135deg,

#2563eb,

#3b82f6

);

display:flex;

justify-content:center;

align-items:center;

gap:10px;

color:#fff;

font-size:17px;

font-weight:700;

cursor:pointer;

transition:.35s;

}

.main-btn:hover{

transform:translateY(-3px);

box-shadow:

0 20px 35px rgba(37,99,235,.28);

}

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

.divider{

display:flex;

align-items:center;

margin:28px 0;

}

.divider::before,

.divider::after{

content:"";

flex:1;

height:1px;

background:#dbeafe;

}

.divider span{

padding:0 18px;

font-size:14px;

font-weight:600;

color:#94a3b8;

}

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

.google-btn{

width:100%;

height:58px;

border:2px solid #dbeafe;

background:#fff;

border-radius:18px;

font-size:16px;

font-weight:600;

color:#1e293b;

cursor:pointer;

transition:.35s;

}

.google-btn:hover{

background:#eff6ff;

border-color:#60a5fa;

}

/* ===================================================
   SWITCH TEXT
=================================================== */

.switch-text{

margin-top:28px;

text-align:center;

font-size:15px;

color:#64748b;

}

.switch-text span{

margin-left:6px;

font-weight:700;

color:#2563eb;

cursor:pointer;

transition:.3s;

}

.switch-text span:hover{

text-decoration:underline;

}

/* ===================================================
   FLOATING CARDS
=================================================== */

.floating-card{

position:absolute;

background:#fff;

padding:14px 20px;

border-radius:18px;

font-size:15px;

font-weight:600;

color:#2563eb;

box-shadow:

0 18px 40px rgba(0,0,0,.12);

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

}

.card1{

top:75px;

right:30px;

}

.card2{

bottom:170px;

right:25px;

animation-delay:1.5s;

}

.card3{

bottom:70px;

left:20px;

animation-delay:3s;

}


/* ===================================================
   SHOW / HIDE FORM
=================================================== */

.show{

display:block;

animation:fadeIn .45s ease;

}

.hide{

display:none;

}

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

@media (max-width:1200px){

    .auth-page{
        padding:25px;
    }

    .auth-card{
        flex-direction:column;
        height:auto;
        width:100%;
        max-width:900px;
    }

    .left-panel,
    .right-panel{
        width:100%;
    }

    .left-panel{
        padding:60px 45px;
    }

    .right-panel{
        padding:60px 40px;
    }

    .overlay-content{
        max-width:100%;
        text-align:center;
    }

    .resume-preview{
        margin:35px auto 0;
    }

    .card1{
        right:40px;
        top:40px;
    }

    .card2{
        right:40px;
        bottom:110px;
    }

    .card3{
        left:40px;
        bottom:35px;
    }

}

@media (max-width:768px){

    .auth-page{
        padding:20px;
    }

    .auth-card{
        flex-direction:column;
        width:100%;
        height:auto;
        border-radius:28px;
    }

    .left-panel{
        width:100%;
        padding:45px 25px;
    }

    .right-panel{
        width:100%;
        padding:40px 25px;
    }

    .logo{
        font-size:28px;
    }

    .overlay-content h1{
        font-size:38px;
    }

    .overlay-content p{
        font-size:15px;
    }

    .resume-preview{
        width:260px;
        margin:30px auto;
    }

    .form-box{
        width:100%;
    }

    .floating-card{
        display:none;
    }

}

@media (max-width:500px){

    .auth-page{
        padding:15px;
    }

    .auth-card{
        width:100%;
        border-radius:20px;
    }

    .left-panel{
        padding:35px 20px;
    }

    .right-panel{
        padding:30px 20px;
    }

    .logo{
        font-size:25px;
    }

    .overlay-content h1{
        font-size:31px;
        line-height:1.3;
    }

    .overlay-content p{
        font-size:14px;
    }

    .resume-preview{
        display:none;
    }

    .form-box h2{
        font-size:28px;
    }

    .form-box p{
        font-size:14px;
    }

    .input-box{
        height:52px;
    }

    .main-btn,
    .google-btn{
        width:100%;
        height:52px;
    }

}

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

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0px);

}

}

@keyframes blob1{

0%{

transform:translate(0,0);

}

50%{

transform:translate(35px,25px);

}

100%{

transform:translate(0,0);

}

}

@keyframes blob2{

0%{

transform:translate(0,0);

}

50%{

transform:translate(-30px,-20px);

}

100%{

transform:translate(0,0);

}

}

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

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-thumb{

background:#93c5fd;

border-radius:50px;

}

::-webkit-scrollbar-track{

background:#eff6ff;

}

/* ===================================================
   SELECTION
=================================================== */

::selection{

background:#2563eb;

color:#fff;

}

/* ===================================================
   AUTH FLASH MESSAGE
=================================================== */

.auth-message-wrapper{
    position:fixed;

    top:28px;
    left:50%;

    transform:translateX(-50%);

    width:auto;
    max-width:90%;

    z-index:99999;

    display:flex;
    flex-direction:column;
    align-items:center;

    pointer-events:none;
}


/* ================= MESSAGE ================= */

.auth-message{
    min-width:320px;

    padding:14px 22px;

    border-radius:14px;

    background:#ffffff;

    font-size:14px;
    font-weight:600;

    text-align:center;

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

    animation:
        messageShow .18s ease forwards,
        messageHide .1s ease 0.1s forwards;
}


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

.auth-message.success{

    color:#15803d;

    border-left:5px solid #16a34a;

}


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

.auth-message.error{

    color:#dc2626;

    border-left:5px solid #dc2626;

}


/* ================= SHOW ================= */

@keyframes messageShow{

    from{

        opacity:0;

        transform:translateY(-15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ================= HIDE ================= */

@keyframes messageHide{

    from{

        opacity:1;

        transform:translateY(0);

    }

    to{

        opacity:0;

        transform:translateY(-15px);

        visibility:hidden;

    }

}


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

@media(max-width:600px){

    .auth-message-wrapper{

        top:20px;

        width:92%;

    }

    .auth-message{

        width:100%;

        min-width:0;

        padding:13px 17px;

        font-size:13px;

    }

}