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

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

/*====================================================
  AUTH POPUP
====================================================*/

.auth-popup{
    position:fixed;
    inset:0;
    display:none;
    justify-content:center;
    align-items:center;
    padding:24px;
    z-index:999999;
    overflow-y:auto;
    overflow-x:hidden;
}

/*====================================================
  OVERLAY
====================================================*/

.auth-overlay{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top left,
        rgba(255,193,7,.10),
        transparent 35%),
        radial-gradient(circle at bottom right,
        rgba(255,193,7,.08),
        transparent 30%),
        rgba(7,10,18,.82);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

/*====================================================
  POPUP
====================================================*/

.auth-box{

    position:relative;
    z-index:5;

   width:90%;
max-width:980px;

min-height:620px;
max-height:88vh;

grid-template-columns:42% 58%;

border-radius:22px;

    display:grid;
   

    background:#171b22;


    overflow:hidden;

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

    box-shadow:

        0 40px 100px rgba(0,0,0,.55),

        0 0 0 1px rgba(255,255,255,.04);

    animation:popup .45s ease;
}

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

@keyframes popup{

    from{

        opacity:0;

        transform:translateY(35px) scale(.94);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

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

.close-popup{

    position:absolute;

    top:18px;

    right:18px;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#FFC107;

    color:#111;

    font-size:22px;

    font-weight:700;

    cursor:pointer;

    z-index:1000;

    transition:.35s ease;

    box-shadow:
        0 12px 30px rgba(255,193,7,.35);

}

.close-popup:hover{

    transform:
        rotate(180deg)
        scale(1.06);

    box-shadow:
        0 18px 35px rgba(255,193,7,.45);

}

.close-popup:active{

    transform:scale(.92);

}


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

.auth-left{

    padding:34px 30px;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    background:
        linear-gradient(
            180deg,
            rgba(255,193,7,.04),
            transparent 40%
        );

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

    overflow-y:auto;

     overflow:hidden;

     height:100%;

}

/*====================================================
  LEFT HEADING
====================================================*/

.auth-left h2{

    font-size:26px;

    line-height:1.2;

    color:#fff;

    font-weight:700;

    margin-bottom:12px;

}

.auth-left>p{

    color:#b9bec8;

    font-size:14px;

    line-height:1.6;

    margin-bottom:20px;

}

/*====================================================
  FEATURE LIST
====================================================*/

.auth-left ul{

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:10px;

}

.auth-left ul li{

    display:flex;

    align-items:center;

    gap:12px;

    color:#fff;

    font-size:14px;

    font-weight:500;

    padding:10px 14px;

    border-radius:14px;

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

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

    transition:.35s;

}

.auth-left ul li:hover{

    transform:translateX(6px);

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

    border-color:rgba(255,193,7,.18);

}

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

.auth-right{

    padding:28px 34px;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    background:#171b22;

    overflow-y:auto;

    max-height:88vh;

    height:100%;
    position:relative;
padding-right:72px;

}

.auth-right::-webkit-scrollbar{
    width:6px;
}

.auth-right::-webkit-scrollbar-thumb{
    background:#FFC107;
    border-radius:20px;
}

.auth-right::-webkit-scrollbar-track{
    background:transparent;
}

/*====================================================
  TABS
====================================================*/

.auth-tabs{

    display:flex;

    gap:14px;

    margin-bottom:24px;

}

.tab-btn{

    flex:1;

    height:52px;

    border:none;

    border-radius:14px;

    background:#232933;

    color:#cfd4dc;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.35s;

}

.tab-btn:hover{

    transform:translateY(-2px);

    background:#2d3542;

}

.tab-btn.active{

    background:#FFC107;

    color:#111;

    box-shadow:
        0 12px 28px rgba(255,193,7,.28);

}

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

.form-box{

    display:none;

    animation:fadeForm .35s ease;

}

.form-box.active{

    display:block;

}

@keyframes fadeForm{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/*====================================================
  INPUT GROUP
====================================================*/

.input-group{
    margin-bottom:22px;
}

.input-group label{

    display:block;

    margin-bottom:10px;

    color:#f5f5f5;

    font-size:14px;

    font-weight:600;

    letter-spacing:.2px;

}


.input-box{

    position:relative;

}

.input-box > i{
    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
    color:#FFC107;
    font-size:16px;
    pointer-events:none;
}



.input-box input{

    width:100%;

    height:58px;

    border-radius:16px;

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

    background:#20262f;

    color:#fff;

    font-size:15px;

    padding-left:52px;

    padding-right:52px;

    outline:none;

    transition:.35s;

}

.input-box input::placeholder{

    color:#8d95a3;

    transition:.3s;

}

.input-box input:hover{

    border-color:rgba(255,193,7,.18);

}

.input-box input:focus{

    background:#242b35;

    border-color:#FFC107;

    box-shadow:
        0 0 0 4px rgba(255,193,7,.10);

}

.input-box input:focus::placeholder{

    opacity:.55;

}

.input-box:focus-within i{

    transform:translateY(-50%) scale(1.08);

    color:#ffd54f;

}

/*====================================================
  PASSWORD ICON
====================================================*/

.toggle-password{

    position:absolute;

    right:18px;

    top:50%;

    transform:translateY(-50%);

    color:#9ea6b2;

    cursor:pointer;

    font-size:15px;

    transition:.3s;
     width:20px;
    height:20px;
     z-index:5;
     align-items:center;
    justify-content:center;

}

.toggle-password i{
    pointer-events:none;
}

.toggle-password:hover{

    color:#FFC107;

    transform:translateY(-50%) scale(1.15);

}

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

.success-msg{

    margin-bottom:22px;

    padding:15px 18px;

    border-radius:14px;

    background:rgba(25,135,84,.15);

    color:#6ee7a7;

    border:1px solid rgba(25,135,84,.35);

    font-size:14px;

    line-height:1.6;

}

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

.error-msg{

    margin-bottom:22px;

    padding:15px 18px;

    border-radius:14px;

    background:rgba(220,53,69,.14);

    color:#ffb4bb;

    border:1px solid rgba(220,53,69,.30);

    font-size:14px;

    line-height:1.6;

}

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

.auth-btn{

    width:100%;

    height:58px;

    border:none;

    border-radius:16px;

    background:linear-gradient(135deg,#FFD54F,#FFC107);

    color:#111;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

    letter-spacing:.3px;

    box-shadow:
        0 14px 32px rgba(255,193,7,.22);

}

.auth-btn:hover{

    transform:translateY(-3px);

    box-shadow:
        0 22px 42px rgba(255,193,7,.35);

}

.auth-btn:active{

    transform:scale(.98);

}

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

.right-panel{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    padding:40px;

    background:
        linear-gradient(
            135deg,
            #FFD54F 0%,
            #FFC107 35%,
            #FFB300 100%
        );

}

/* Floating Glow */

.right-panel::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    top:-180px;

    right:-160px;

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

    filter:blur(5px);

}

.right-panel::after{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    border-radius:50%;

    bottom:-120px;

    left:-80px;

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

}

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

.right-content{

    position:relative;

    z-index:10;

    width:100%;

    max-width:340px;

    text-align:center;

}

/*====================================================
  ROCKET
====================================================*/

.rocket{

    width:90px;

    height:90px;

    border-radius:50%;

    background:#fff;

    color:#111;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 auto 30px;

    font-size:34px;

    box-shadow:
        0 20px 45px rgba(0,0,0,.18);

    animation:rocketFloat 3.5s ease-in-out infinite;

}

@keyframes rocketFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

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

.right-content h1{

    color:#111;

    font-size:36px;

    line-height:1.25;

    font-weight:700;

    margin-bottom:18px;

}

/*====================================================
  DESCRIPTION
====================================================*/

.right-content p{

    color:#2b2b2b;

    font-size:15px;

    line-height:1.9;

    margin-bottom:32px;

}

/*====================================================
  FEATURE LIST
====================================================*/

.right-content ul{

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:16px;

}

.right-content ul li{

    display:flex;

    align-items:center;

    padding:14px 18px;

    border-radius:14px;

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

    backdrop-filter:blur(8px);

    color:#111;

    font-weight:600;

    transition:.35s;

}

.right-content ul li:hover{

    transform:translateX(6px);

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

}

.right-content ul li i{

    color:#0f8d3f;

    margin-right:12px;

    font-size:17px;

}

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

.auth-left::-webkit-scrollbar,
.auth-right::-webkit-scrollbar{

    width:6px;

}

.auth-left::-webkit-scrollbar-thumb,
.auth-right::-webkit-scrollbar-thumb{

    background:#FFC107;

    border-radius:20px;

}



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

/* ---------- Large Laptop ---------- */

@media (max-width:1200px){

    .auth-box{

        width:96%;

        min-height:680px;

    }

    .auth-left{

        padding:50px 40px;

    }

    .auth-right{

        padding:50px 40px;

    }

    .right-panel{

        padding:50px 35px;

    }

}


@media (max-width:992px){

    .auth-box{

        max-width:700px;

        grid-template-columns:1fr;

        max-height:88vh;

    }

    .auth-left,
    .right-panel{

        display:none;

    }

    .auth-right{

        padding:28px;

    }

}

@media (max-width:768px){

    .auth-popup{

        padding:16px;

        align-items:flex-start;

    }

    .auth-box{

        width:100%;

        max-width:520px;

        margin:25px auto;

        border-radius:18px;

    }

    .auth-right{

        padding:22px;

    }

    .close-popup{

        width:38px;

        height:38px;

        top:12px;

        right:12px;

    }

}

@media (max-width:576px){

    .auth-popup{

        padding:14px;

        align-items:flex-start;

    }

    .auth-box{

        width:100%;

        margin:20px auto;

        max-height:92vh;

    }

    .auth-right{

        padding:18px;

    }

    .tab-btn{

        height:44px;

        font-size:13px;

    }

    .input-group{

        margin-bottom:14px;

    }

    .input-box input{

        height:48px;

        font-size:13px;

        border-radius:12px;

    }

    .auth-btn{

        height:48px;

        border-radius:12px;

    }

}


/* Desktop & Laptop */

@media (min-width:993px){

    .desktop-hide{
        display:none !important;
    }

    .auth-left{
        overflow:hidden;
    }

    .auth-right{
        max-height:calc(88vh - 2px);
        overflow-y:auto;
    }

}