/* =========================================
   REGISTER PAGE - BLACK + PURPLE THEME
========================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Inter", sans-serif;
    min-height: 100vh;
    color: #fff;
font-size: 14px;
    background: #050509;
}


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

.register-page {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 15px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(124, 58, 237, .18),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(192, 38, 211, .15),
            transparent 30%
        ),
        #050509;
}


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

.glow {
    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    filter: blur(180px);

    pointer-events: none;
}

.glow-1 {
    background: #7c3aed;

    top: -250px;
    left: -200px;

    opacity: .15;

    animation:
        glowAnimation1 9s ease-in-out infinite alternate;
}

.glow-2 {
    background: #c026d3;

    right: -250px;
    bottom: -250px;

    opacity: .12;

    animation:
        glowAnimation2 11s ease-in-out infinite alternate;
}


@keyframes glowAnimation1 {

    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(200px, 150px);
    }

}


@keyframes glowAnimation2 {

    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(-180px, -130px);
    }

}


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

.particles {
    position: absolute;
    inset: 0;

    pointer-events: none;
}

.particles span {
    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #a855f7;

    box-shadow:
        0 0 15px #a855f7;

    opacity: 0;

    animation:
        particleAnimation 10s linear infinite;
}


.particles span:nth-child(1) {
    left: 8%;
    top: 90%;
}

.particles span:nth-child(2) {
    left: 20%;
    top: 80%;
    animation-delay: 2s;
}

.particles span:nth-child(3) {
    left: 35%;
    top: 95%;
    animation-delay: 4s;
}

.particles span:nth-child(4) {
    left: 50%;
    top: 85%;
    animation-delay: 1s;
}

.particles span:nth-child(5) {
    left: 65%;
    top: 90%;
    animation-delay: 3s;
}

.particles span:nth-child(6) {
    left: 80%;
    top: 80%;
    animation-delay: 5s;
}

.particles span:nth-child(7) {
    left: 92%;
    top: 90%;
    animation-delay: 2s;
}


@keyframes particleAnimation {

    0% {
        transform:
            translateY(0)
            scale(1);

        opacity: 0;
    }

    20% {
        opacity: .8;
    }

    80% {
        opacity: .8;
    }

    100% {
        transform:
            translateY(-700px)
            scale(.2);

        opacity: 0;
    }

}


/* =========================================
   WRAPPER
========================================= */

.register-wrapper {
    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 1100px;

    animation:
        pageEnter 1s ease forwards;
}


@keyframes pageEnter {

    from {
        opacity: 0;

        transform:
            translateY(40px)
            scale(.97);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


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

.register-card {
    display: flex;

    overflow: hidden;

    border-radius: 30px;

    background:
        rgba(14, 14, 22, .85);

    border:
        1px solid
        rgba(168, 85, 247, .25);

    box-shadow:
        0 30px 100px
        rgba(0, 0, 0, .75),

        0 0 80px
        rgba(124, 58, 237, .08);

    backdrop-filter:
        blur(25px);

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


/* =========================================
   LEFT SECTION
========================================= */

.register-left {
    width: 40%;

    position: relative;

    padding: 55px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(91, 33, 182, .34),
            rgba(10, 10, 16, .9)
        );
}


.register-left::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    border:
        1px solid
        rgba(168, 85, 247, .18);

    top: -210px;
    left: -210px;

    animation:
        rotateCircle 15s linear infinite;
}


.register-left::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    border:
        1px solid
        rgba(192, 38, 211, .15);

    right: -150px;
    bottom: -150px;

    animation:
        rotateCircle 20s linear infinite reverse;
}


@keyframes rotateCircle {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


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

.logo {
    position: relative;

    z-index: 2;

    margin-bottom: 45px;
}


.logo img {
    max-width: 180px;

    max-height: 70px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 20px
            rgba(168, 85, 247, .45)
        );
}


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

.left-content {
    position: relative;

    z-index: 2;
}


.badge {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        8px 14px;

    border-radius: 50px;

    color: #c084fc;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    background:
        rgba(168, 85, 247, .10);

    border:
        1px solid
        rgba(168, 85, 247, .20);

    margin-bottom: 20px;
}


.left-content h1 {
    font-size: 38px;

    line-height: 1.18;

    font-weight: 800;

    margin-bottom: 18px;

    background:
        linear-gradient(
            90deg,
            #fff,
            #d8b4fe,
            #a855f7
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;
}


.gradient-text {
    background:
        linear-gradient(
            90deg,
            #a855f7,
            #d946ef
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;
}


.left-content p {
    color: #aaa6b8;

    font-size: 13px;

    line-height: 1.8;

    margin-bottom: 30px;
}


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

.feature {
    display: flex;

    align-items: center;

    margin-bottom: 16px;

    color: #d3cedd;

    font-size: 12px;
}


.feature-icon {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-right: 12px;

    border-radius: 11px;

    color: #c084fc;

    background:
        rgba(168, 85, 247, .10);

    border:
        1px solid
        rgba(168, 85, 247, .20);

    transition: .3s;
}


.feature:hover .feature-icon {
    transform:
        translateY(-3px);

    background:
        rgba(168, 85, 247, .18);

    box-shadow:
        0 8px 25px
        rgba(168, 85, 247, .18);
}


/* =========================================
   RIGHT SECTION
========================================= */

.register-right {
    width: 60%;

    padding: 45px 55px;

    background:
        rgba(5, 5, 9, .68);
}


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

.register-heading {
    text-align: center;

    margin-bottom: 28px;
}


.register-heading h2 {
    font-size: 28px;

    font-weight: 800;

    margin-bottom: 7px;
}


.register-heading p {
    color: #85808f;

    font-size: 13px;

    margin: 0;
}


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

.input-group-custom {
    margin-bottom: 17px;
}


.input-group-custom label {
    display: block;

    color: #c8c3d1;

    font-size: 12px;

    font-weight: 600;

    margin-bottom: 7px;
}


.input-box {
    position: relative;
}


.input-icon {
    position: absolute;

    left: 15px;

    top: 50%;

    transform:
        translateY(-50%);

    color: #9b5de5;

    font-size: 15px;

    z-index: 2;
}


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

.form-control-custom {
    width: 100%;

    height: 48px;

    padding:
        0 43px;

    color: #fff;

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

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

    border-radius: 12px;

    outline: none;

    font-size: 13px;

    transition: .3s;
}


.form-control-custom::placeholder {
    color: #625e6a;
}


.form-control-custom:focus {
    color: #fff;

    background:
        rgba(139, 92, 246, .06);

    border-color:
        #8b5cf6;

    box-shadow:
        0 0 0 3px
        rgba(139, 92, 246, .08),

        0 0 22px
        rgba(139, 92, 246, .12);
}


/* =========================================
   PASSWORD TOGGLE
========================================= */

.password-toggle {
    position: absolute;

    right: 15px;

    top: 50%;

    transform:
        translateY(-50%);

    color: #6f6a78;

    cursor: pointer;

    transition: .3s;
}


.password-toggle:hover {
    color: #c084fc;
}


/* =========================================
   TERMS
========================================= */

.terms {
    display: flex;

    align-items: center;

    gap: 8px;

    margin:
        3px 0 20px;

    color: #85808e;

    font-size: 12px;
}


.terms input {
    width: 16px;
    height: 16px;

    accent-color: #8b5cf6;

    cursor: pointer;
}


.terms a {
    color: #b16cff;

    text-decoration: none;

    font-weight: 600;
}


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

.register-btn {
    width: 100%;

    height: 52px;

    border: 0;

    border-radius: 13px;

    color: #fff;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            #7c3aed,
            #a855f7,
            #c026d3
        );

    box-shadow:
        0 12px 30px
        rgba(139, 92, 246, .25);

    transition: .3s;
}


.register-btn::before {
    content: "";

    position: absolute;

    width: 100%;
    height: 100%;

    left: -100%;
    top: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.25),
            transparent
        );

    transition: .6s;
}


.register-btn:hover::before {
    left: 100%;
}


.register-btn:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 18px 40px
        rgba(139, 92, 246, .38);
}


.register-btn:active {
    transform:
        scale(.98);
}


.register-btn i {
    margin-left: 7px;
}


/* =========================================
   LOGIN LINK
========================================= */

.login-link {
    text-align: center;

    color: #6e6977;

    font-size: 13px;

    margin-top: 20px;

    margin-bottom: 0;
}


.login-link a {
    color: #b16cff;

    font-weight: 700;

    text-decoration: none;
}


.login-link a:hover {
    color: #d8b4fe;
}


/* =========================================
   SECURITY TEXT
========================================= */

.security {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 6px;

    color: #504b57;

    font-size: 12px;

    margin-top: 15px;
}


.security i {
    color: #8b5cf6;
}


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

@media (max-width: 991px) {

    .register-wrapper {
        max-width: 650px;
    }

    .register-left {
        display: none;
    }

    .register-right {
        width: 100%;

        padding:
            45px 50px;
    }

}


@media (max-width: 576px) {

    .register-page {
        padding: 15px 10px;
    }

    .register-card {
        border-radius: 22px;
    }

    .register-right {
        padding:
            35px 20px;
    }

    .register-heading h2 {
        font-size: 24px;
    }

    .form-control-custom {
        height: 50px;
    }

}