/* ==========================================
   GAMEBAZZAR AUTH CSS
   PART 1 - RESET + BACKGROUND SYSTEM
========================================== */


/* ---------- ROOT ---------- */

:root {

    --primary: #8b5cf6;
    --secondary: #00d9ff;
    --dark: #050816;

    --text: #ffffff;
    --muted: #9ca3af;

    --glass: rgba(255,255,255,0.08);
    --border: rgba(255,255,255,0.15);

}



/* ---------- RESET ---------- */


* {

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

}



body {

    min-height:100vh;

    background:

    radial-gradient(
        circle at top left,
        rgba(139,92,246,.25),
        transparent 35%
    ),

    radial-gradient(
        circle at bottom right,
        rgba(0,217,255,.20),
        transparent 35%
    ),

    var(--dark);


    color:var(--text);

    overflow-x:hidden;

}



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


.bg-animation {

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-1;

}



/* ---------- GLOW CIRCLES ---------- */


.circle {

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    opacity:.45;

    animation:moveCircle 12s infinite alternate;

}



.c1 {

    width:300px;

    height:300px;

    background:#8b5cf6;

    top:-100px;

    left:-100px;

}



.c2 {

    width:250px;

    height:250px;

    background:#00d9ff;

    right:-80px;

    top:100px;

    animation-delay:2s;

}



.c3 {

    width:350px;

    height:350px;

    background:#ec4899;

    bottom:-150px;

    left:20%;

    animation-delay:4s;

}



.c4 {

    width:220px;

    height:220px;

    background:#22c55e;

    bottom:50px;

    right:100px;

    animation-delay:6s;

}



@keyframes moveCircle {


    from {

        transform:translate(0,0) scale(1);

    }


    to {

        transform:translate(80px,60px) scale(1.2);

    }


}




/* ---------- GRID EFFECT ---------- */


.grid {


    position:absolute;

    inset:0;


    background-image:

    linear-gradient(
        rgba(255,255,255,.04) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(255,255,255,.04) 1px,
        transparent 1px
    );


    background-size:

    50px 50px;


    mask-image:

    radial-gradient(
        circle,
        black,
        transparent 70%
    );


}



/* ==========================================
   FLOATING PARTICLES
========================================== */


.floating {


    position:absolute;

    width:8px;

    height:8px;

    background:white;

    border-radius:50%;

    opacity:.5;

    animation:floatParticle 8s infinite;

}



.floating1 {

    top:20%;

    left:10%;

}



.floating2 {

    top:70%;

    left:20%;

    animation-delay:2s;

}



.floating3 {

    top:30%;

    right:15%;

    animation-delay:3s;

}



.floating4 {

    bottom:20%;

    right:25%;

    animation-delay:4s;

}



.floating5 {

    top:50%;

    left:50%;

    animation-delay:5s;

}



@keyframes floatParticle {


    0% {

        transform:translateY(0);

    }


    50% {

        transform:translateY(-40px);

    }


    100% {

        transform:translateY(0);

    }


}



/* END PART 1 */
/* ==========================================
   PART 2 - MAIN LAYOUT + LEFT SIDE
========================================== */


/* ---------- MAIN CONTAINER ---------- */


.auth-container {

    width:100%;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:70px;

    padding:40px;

    position:relative;

}



/* ==========================================
   LEFT SIDE
========================================== */


.left-side {

    width:520px;

    animation:leftReveal .8s ease;

}



@keyframes leftReveal {


    from {

        opacity:0;

        transform:translateX(-50px);

    }


    to {

        opacity:1;

        transform:translateX(0);

    }


}



/* ---------- LOGO ---------- */


.logo {

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:35px;

}



.logo i {

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    font-size:30px;

    color:white;


    background:

    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );


    box-shadow:

    0 15px 35px rgba(139,92,246,.4);

}



.logo h1 {

    font-size:42px;

    font-weight:800;

    letter-spacing:.5px;


    background:

    linear-gradient(
        90deg,
        #ffffff,
        var(--secondary)
    );


    -webkit-background-clip:text;

    color:transparent;

}





/* ---------- LEFT HEADING ---------- */


.left-side h2 {


    font-size:42px;

    line-height:1.2;

    font-weight:700;

    margin-bottom:20px;


}



.left-side > p {


    color:var(--muted);

    font-size:16px;

    line-height:1.8;

    max-width:480px;

    margin-bottom:35px;


}



/* ==========================================
   FEATURES
========================================== */


.features {

    display:flex;

    flex-direction:column;

    gap:18px;

}





.feature-card {


    display:flex;

    align-items:center;

    gap:18px;


    padding:18px 20px;


    background:

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



    border:

    1px solid rgba(255,255,255,.12);



    border-radius:20px;


    backdrop-filter:blur(15px);



    transition:.35s ease;


}





.feature-card:hover {


    transform:translateX(10px);


    background:

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



    border-color:

    rgba(0,217,255,.4);



}




.feature-card > i {


    width:50px;

    height:50px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:15px;


    font-size:22px;


    color:white;


    background:

    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );


}





.feature-card h3 {


    font-size:17px;

    margin-bottom:5px;


}




.feature-card p {


    color:var(--muted);

    font-size:13px;

    line-height:1.5;


}



/* ==========================================
   RIGHT SIDE WRAPPER
========================================== */


.right-side {


    width:450px;

    animation:rightReveal .8s ease;

}




@keyframes rightReveal {


    from {

        opacity:0;

        transform:translateX(50px);

    }


    to {

        opacity:1;

        transform:translateX(0);

    }


}



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


.auth-card {


    width:100%;


    padding:40px;


    border-radius:30px;



    background:

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



    border:

    1px solid rgba(255,255,255,.15);



    backdrop-filter:

    blur(25px);



    box-shadow:

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



    position:relative;

    overflow:hidden;


}



.auth-card::before {


    content:"";


    position:absolute;


    width:200px;

    height:200px;


    background:

    var(--secondary);


    filter:blur(120px);


    top:-80px;

    right:-80px;


    opacity:.3;


}



/* ---------- CARD TOP ---------- */


.card-top {


    position:relative;

    z-index:2;

    margin-bottom:30px;


}



.card-top h2 {


    font-size:32px;

    font-weight:700;

    margin-bottom:8px;


}



.card-top p {


    color:var(--muted);

    font-size:14px;


}



/* END PART 2 */
/* ==========================================
   PART 3 - FORM INPUTS + BUTTON SYSTEM
========================================== */


/* ---------- INPUT GROUP ---------- */


.input-group {

    margin-bottom:22px;

    position:relative;

}



.input-group label {


    display:block;

    margin-bottom:9px;


    font-size:14px;

    font-weight:500;


    color:#ffffff;


}



/* ---------- INPUT BOX ---------- */


.input-box {


    position:relative;

    width:100%;


}



.input-box > i {


    position:absolute;


    left:18px;


    top:50%;


    transform:translateY(-50%);



    color:#9ca3af;


    font-size:16px;


    transition:.3s;


}



.input-box input {


    width:100%;


    height:55px;


    padding:

    0 50px;


    border-radius:16px;


    border:

    1px solid rgba(255,255,255,.15);



    background:

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



    color:white;


    outline:none;


    font-size:15px;



    transition:.35s ease;


}



.input-box input::placeholder {


    color:

    rgba(255,255,255,.45);


}




.input-box input:focus {


    border-color:

    var(--secondary);



    background:

    rgba(255,255,255,.1);



    box-shadow:

    0 0 25px rgba(0,217,255,.2);


}



.input-box input:focus + i {


    color:

    var(--secondary);


}



/* ---------- PASSWORD EYE BUTTON ---------- */


.eye-btn {


    position:absolute;


    right:15px;


    top:50%;


    transform:

    translateY(-50%);



    border:none;


    background:none;


    color:#9ca3af;


    cursor:pointer;


    font-size:16px;


    transition:.3s;


}



.eye-btn:hover {


    color:

    var(--secondary);


}





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



.strength {


    width:100%;


    height:6px;


    background:

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



    border-radius:20px;


    overflow:hidden;


    margin-top:12px;


}



#strengthBar {


    width:0%;


    height:100%;


    border-radius:20px;


    background:#ef4444;


    transition:.4s ease;


}




#strengthText {


    display:block;


    margin-top:8px;


    color:

    var(--muted);


    font-size:12px;


}



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



.remember-row {


    margin:20px 0;


}



.checkbox {


    display:flex;


    align-items:flex-start;


    gap:10px;


    color:

    var(--muted);


    font-size:13px;


    cursor:pointer;


}



.checkbox input {


    margin-top:3px;


    width:16px;


    height:16px;


    accent-color:

    var(--primary);


}




.checkbox a {


    color:

    var(--secondary);


    text-decoration:none;


}



.checkbox a:hover {


    text-decoration:underline;


}




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


.signup-btn {


    width:100%;


    height:58px;


    border:none;


    border-radius:18px;


    cursor:pointer;


    color:white;


    font-size:16px;


    font-weight:600;


    display:flex;


    align-items:center;


    justify-content:center;


    gap:12px;



    background:


    linear-gradient(

    135deg,

    var(--primary),

    var(--secondary)

    );



    position:relative;


    overflow:hidden;



    transition:.35s;


}




.signup-btn::before {


    content:"";


    position:absolute;


    top:0;


    left:-100%;


    width:100%;


    height:100%;



    background:

    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.35),

    transparent

    );


    transition:.6s;


}



.signup-btn:hover::before {


    left:100%;


}



.signup-btn:hover {


    transform:

    translateY(-4px);



    box-shadow:

    0 20px 40px rgba(139,92,246,.4);


}



.signup-btn:active {


    transform:scale(.97);


}





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


.divider {


    display:flex;


    align-items:center;


    gap:15px;


    margin:28px 0;


    color:

    var(--muted);


    font-size:13px;


}



.divider::before,

.divider::after {


    content:"";


    height:1px;


    flex:1;


    background:

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


}




.divider span {


    padding:0 5px;


}



/* END PART 3 */
/* ==========================================
   PART 4 - SOCIAL + LOADING + RESPONSIVE
========================================== */


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


.social-login {

    display:flex;

    flex-direction:column;

    gap:14px;

}



.google-btn,
.discord-btn {


    width:100%;


    height:52px;


    border-radius:15px;


    border:

    1px solid rgba(255,255,255,.15);



    background:

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



    color:white;


    font-size:15px;


    font-weight:500;


    cursor:pointer;



    display:flex;


    align-items:center;


    justify-content:center;


    gap:12px;



    transition:.35s ease;


}




.google-btn i {


    color:#ffffff;

    font-size:18px;

}



.discord-btn i {


    color:#7289da;

    font-size:18px;

}





.google-btn:hover {


    background:

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



    transform:

    translateY(-3px);



    box-shadow:

    0 15px 30px rgba(255,255,255,.1);


}





.discord-btn:hover {


    background:

    rgba(114,137,218,.15);



    border-color:

    #7289da;



    transform:

    translateY(-3px);


}





/* ==========================================
   BOTTOM LINK
========================================== */


.bottom-link {


    text-align:center;


    margin-top:25px;


    color:

    var(--muted);


    font-size:14px;


}



.bottom-link a {


    color:

    var(--secondary);


    text-decoration:none;


    font-weight:600;


}



.bottom-link a:hover {


    color:white;


}




/* ==========================================
   LOADING SCREEN
========================================== */


.loading-screen {


    position:fixed;


    inset:0;


    background:

    rgba(5,8,22,.95);



    display:none;


    flex-direction:column;


    align-items:center;


    justify-content:center;


    z-index:999;


    backdrop-filter:blur(15px);


}



.loading-screen h3 {


    margin-top:25px;


    font-size:22px;


}



.loading-screen p {


    color:

    var(--muted);


    margin-top:8px;


}





.loader {


    width:70px;


    height:70px;


    border-radius:50%;


    border:

    6px solid rgba(255,255,255,.15);



    border-top-color:

    var(--secondary);



    animation:

    rotate 1s linear infinite;


}



@keyframes rotate {


    to {

        transform:rotate(360deg);

    }

}



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


.auth-footer {


    position:absolute;


    bottom:20px;


    width:100%;


    text-align:center;


    color:

    var(--muted);


    font-size:13px;


}



.auth-footer strong {


    color:

    var(--secondary);


}




/* ==========================================
   HOVER CARD EFFECT
========================================== */


.auth-card:hover {


    border-color:

    rgba(0,217,255,.35);


}




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


@media(max-width:1100px){


    .auth-container {


        gap:40px;

    }



    .left-side {


        width:450px;

    }



    .left-side h2 {


        font-size:35px;

    }


}





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


@media(max-width:850px){



    body {


        overflow:auto;

    }



    .auth-container {


        flex-direction:column;


        padding:30px 20px;


        gap:40px;


    }



    .left-side {


        width:100%;


        max-width:500px;


        text-align:center;


    }



    .logo {


        justify-content:center;


    }



    .left-side > p {


        margin-left:auto;

        margin-right:auto;


    }



    .feature-card {


        text-align:left;


    }



    .right-side {


        width:100%;


        max-width:450px;


    }



    .auth-footer {


        position:relative;


        margin-top:20px;


    }


}





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


@media(max-width:480px){



    .auth-container {


        padding:20px 15px;


    }




    .auth-card {


        padding:28px 20px;


        border-radius:22px;


    }




    .logo h1 {


        font-size:32px;


    }



    .left-side h2 {


        font-size:28px;


    }




    .card-top h2 {


        font-size:26px;


    }



    .feature-card {


        padding:15px;


    }



    .feature-card > i {


        width:42px;


        height:42px;


        font-size:18px;


    }


}



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


button,
input {


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


}



::selection {


    background:

    var(--primary);


    color:white;


}


/* END AUTH CSS */