:root {

            --primary: #635BFF;

            --primary-dark: #5148e5;

            --secondary: #9B51E0;

            --purple-light: #f1efff;

            --dark: #17172f;

            --text: #686a7b;

            --muted: #a1a3b1;

            --border: #e8e8f0;

            --white: #ffffff;

            --danger: #ef4444;

            --danger-bg: #fff1f1;

            --success: #16a765;

            --success-bg: #eafaf2;

            --green: #16a765;

        }


        * {

            box-sizing: border-box;

        }


        html,
        body {

            width: 100%;

            min-height: 100%;

            margin: 0;

        }


        body {

            font-family: "Inter", sans-serif;

            color: var(--text);

            background: #f6f6fb;

        }


        a {

            text-decoration: none;

        }


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

        .register-page {

            min-height: 100vh;

            display: flex;

            align-items: stretch;

        }


        /* =====================================================
           LEFT SHOWCASE
        ===================================================== */

        .register-showcase {

            position: relative;

            width: 45%;

            min-height: 100vh;

            overflow: hidden;

            display: flex;

            align-items: center;

            justify-content: center;

            padding: 50px;

            color: white;

            background:
                linear-gradient(
                    135deg,
                    #635BFF 0%,
                    #7656e8 45%,
                    #9B51E0 100%
                );

        }


        .showcase-circle {

            position: absolute;

            border-radius: 50%;

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

        }


        .circle-one {

            width: 500px;

            height: 500px;

            top: -220px;

            left: -220px;

        }


        .circle-two {

            width: 350px;

            height: 350px;

            bottom: -140px;

            right: -120px;

        }


        .circle-three {

            width: 140px;

            height: 140px;

            top: 20%;

            right: 14%;

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

        }


        .showcase-content {

            position: relative;

            z-index: 3;

            width: 100%;

            max-width: 510px;

        }


        .brand {

            display: flex;

            align-items: center;

            gap: 11px;

            color: white;

            font-size: 21px;

            font-weight: 900;

        }


        .brand-icon {

            width: 45px;

            height: 45px;

            display: flex;

            align-items: center;

            justify-content: center;

            color: var(--primary);

            background: white;

            border-radius: 13px;

            box-shadow:
                0 12px 30px rgba(0,0,0,.13);

        }


        .showcase-title {

            margin-top: 75px;

            color: white;

            font-size: 43px;

            line-height: 1.08;

            font-weight: 900;

            letter-spacing: -1.5px;

        }


        .showcase-title span {

            color: #ddd9ff;

        }


        .showcase-text {

            max-width: 460px;

            margin-top: 18px;

            color:
                rgba(255,255,255,.76);

            font-size: 13px;

            line-height: 1.8;

        }


        /* =====================================================
           BENEFITS
        ===================================================== */

        .benefits {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 10px;

            margin-top: 35px;

        }


        .benefit {

            display: flex;

            align-items: center;

            gap: 9px;

            padding: 11px;

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

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

            border-radius: 10px;

        }


        .benefit-icon {

            width: 31px;

            height: 31px;

            flex-shrink: 0;

            display: flex;

            align-items: center;

            justify-content: center;

            color: white;

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

            border-radius: 8px;

        }


        .benefit-text {

            color: rgba(255,255,255,.85);

            font-size: 11px;

            font-weight: 700;

        }


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

        .register-area {

            width: 55%;

            min-height: 100vh;

            display: flex;

            justify-content: center;

            padding: 35px 45px;

            background: white;

            overflow-y: auto;

        }


        .register-container {

            width: 100%;

            max-width: 480px;

        }


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

        .mobile-brand {

            display: none;

        }


        .register-heading {

            color: var(--dark);

            font-size: 27px;

            font-weight: 900;

            letter-spacing: -.7px;

        }


        .register-description {

            margin-top: 7px;

            color: var(--muted);

            font-size: 12px;

            line-height: 1.7;

        }


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

        .custom-alert {

            display: flex;

            align-items: flex-start;

            gap: 8px;

            margin-top: 17px;

            padding: 10px 12px;

            border-radius: 9px;

            font-size: 11px;

            line-height: 1.5;

        }


        .custom-alert.error {

            color: var(--danger);

            background: var(--danger-bg);

        }


        .custom-alert.success {

            color: var(--success);

            background: var(--success-bg);

        }


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

        .register-form {

            margin-top: 20px;

        }


        .form-row {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 11px;

        }


        .form-group {

            margin-bottom: 13px;

        }


        .form-label {

            display: block;

            margin-bottom: 6px;

            color: var(--dark);

            font-size: 11px;

            font-weight: 800;

        }


        .input-wrapper {

            position: relative;

        }


        .input-icon {

            position: absolute;

            top: 50%;

            left: 12px;

            z-index: 2;

            color: #9b9dac;

            font-size: 13px;

            transform: translateY(-50%);

        }


        .form-control {

            height: 44px;

            padding:
                0 39px;

            color: var(--dark);

            background: #fafafe;

            border:
                1px solid var(--border);

            border-radius: 9px;

            box-shadow: none !important;

            font-size: 11px;

        }


        .form-control::placeholder {

            color: #b5b6c1;

        }


        .form-control:focus {

            background: white;

            border-color: var(--primary);

            box-shadow:
                0 0 0 4px rgba(99,91,255,.07) !important;

        }


        .password-toggle {

            position: absolute;

            top: 50%;

            right: 12px;

            padding: 0;

            color: #999ba9;

            background: transparent;

            border: 0;

            transform: translateY(-50%);

        }


        .password-toggle:hover {

            color: var(--primary);

        }


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

        .password-strength {

            margin-top: 7px;

        }


        .strength-bars {

            display: flex;

            gap: 4px;

        }


        .strength-bar {

            flex: 1;

            height: 3px;

            background: #e9e9ef;

            border-radius: 10px;

            transition: .25s ease;

        }


        .strength-text {

            margin-top: 4px;

            color: var(--muted);

            font-size: 10px;

        }


        /* =====================================================
           LOCATION
        ===================================================== */

        .location-box {

            display: flex;

            align-items: center;

            gap: 9px;

            margin-top: 3px;

            padding: 10px;

            background: #f8f7ff;

            border:
                1px solid #ebe9ff;

            border-radius: 9px;

        }


        .location-box-icon {

            width: 30px;

            height: 30px;

            flex-shrink: 0;

            display: flex;

            align-items: center;

            justify-content: center;

            color: var(--primary);

            background: white;

            border-radius: 7px;

        }


        .location-info {

            flex: 1;

        }


        .location-title {

            color: var(--dark);

            font-size: 11px;

            font-weight: 900;

        }


        .location-description {

            margin-top: 2px;

            color: var(--muted);

            font-size: 9.5px;

            line-height: 1.4;

        }


        .location-button {

            padding: 7px 8px;

            color: white;

            background: var(--primary);

            border: 0;

            border-radius: 7px;

            font-size: 11px;

            font-weight: 800;

        }


        .location-button:hover {

            background: var(--primary-dark);

        }


        .location-status {

            margin-top: 5px;

            color: var(--green);

            font-size: 10px;

            font-weight: 700;

        }


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

        .terms-check {

            display: flex;

            align-items: flex-start;

            gap: 7px;

            margin-top: 15px;

            color: var(--text);

            font-size: 10.5px;

            line-height: 1.6;

            cursor: pointer;

        }


        .terms-check input {

            width: 14px;

            height: 14px;

            flex-shrink: 0;

            margin-top: 1px;

            accent-color: var(--primary);

        }


        .terms-check a {

            color: var(--primary);

            font-weight: 800;

        }


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

        .register-button {

            width: 100%;

            height: 47px;

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 8px;

            margin-top: 17px;

            color: white;

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

            border: 0;

            border-radius: 10px;

            font-size: 12px;

            font-weight: 900;

            box-shadow:
                0 11px 25px rgba(99,91,255,.18);

            transition: .2s ease;

        }


        .register-button:hover {

            color: white;

            transform: translateY(-1px);

            box-shadow:
                0 15px 30px rgba(99,91,255,.25);

        }


        .register-button:disabled {

            opacity: .7;

            cursor: not-allowed;

            transform: none;

        }


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

        .divider {

            display: flex;

            align-items: center;

            gap: 10px;

            margin: 19px 0;

            color: #b0b1bc;

            font-size: 10px;

        }


        .divider::before,
        .divider::after {

            content: "";

            flex: 1;

            height: 1px;

            background: var(--border);

        }


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

        .social-buttons {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 8px;

        }


        .social-button {

            height: 42px;

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 6px;

            color: var(--dark);

            background: white;

            border:
                1px solid var(--border);

            border-radius: 9px;

            font-size: 11px;

            font-weight: 800;

        }


        .social-button:hover {

            background: #fafaff;

            border-color: #d8d5ff;

        }


        .google-icon {

            color: #ba0c03;

            font-size: 13px;

        }


        .facebook-icon {

            color: #1877F2;

            font-size: 13px;

        }


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

        .login-text {

            margin-top: 19px;

            color: var(--muted);

            text-align: center;

            font-size: 13px;

        }


        .login-text a {

            color: var(--primary);

            font-weight: 900;

        }


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

        @media(max-width: 767px) {


            body {

                background: white;

            }


            .register-page {

                display: block;

                min-height: 100vh;

            }


            .register-showcase {

                display: none;

            }


            .register-area {

                width: 100%;

                min-height: 100vh;

                display: block;

                padding:
                    22px 18px 30px;

                overflow: visible;

            }


            .register-container {

                max-width: 100%;

            }


            .mobile-brand {

                display: flex;

                align-items: center;

                justify-content: center;

                gap: 8px;

                color: var(--dark);

                font-size: 18px;

                font-weight: 900;

            }


            .mobile-brand-icon {

                width: 37px;

                height: 37px;

                display: flex;

                align-items: center;

                justify-content: center;

                color: white;

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

                border-radius: 11px;

                box-shadow:
                    0 8px 20px rgba(99,91,255,.18);

            }


            .register-heading {

                margin-top: 34px;

                font-size: 24px;

                letter-spacing: -.5px;

            }


            .register-description {

                max-width: 350px;

                font-size: 9.5px;

            }


            .register-form {

                margin-top: 21px;

            }


            .form-row {

                grid-template-columns: 1fr;

                gap: 0;

            }


            .form-group {

                margin-bottom: 14px;

            }


            .form-control {

                height: 50px;

                font-size: 11px;

                border-radius: 11px;

            }


            .form-label {

                font-size: 9.5px;

            }


            .location-box {

                padding: 10px;

            }


            .register-button {

                height: 51px;

                border-radius: 11px;

                font-size: 10.5px;

            }


            .social-button {

                height: 47px;

            }


            .login-text {

                margin-top: 21px;

            }

        }


        @media(max-width: 380px) {


            .register-area {

                padding-left: 15px;

                padding-right: 15px;

            }


            .register-heading {

                margin-top: 29px;

                font-size: 22px;

            }


        }