: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;

        }


        * {

            box-sizing: border-box;

        }


        html,
        body {

            width: 100%;

            min-height: 100%;

            margin: 0;

        }


        body {

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

            background: #f6f6fb;

            color: var(--text);

        }


        a {

            text-decoration: none;

        }


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

        .login-page {

            min-height: 100vh;

            display: flex;

            align-items: stretch;

        }


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

        .login-showcase {

            position: relative;

            width: 52%;

            min-height: 100vh;

            overflow: hidden;

            display: flex;

            align-items: center;

            justify-content: center;

            padding: 50px;

            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: 450px;

            height: 450px;

            top: -180px;

            left: -180px;

        }


        .circle-two {

            width: 350px;

            height: 350px;

            bottom: -130px;

            right: -120px;

        }


        .circle-three {

            width: 170px;

            height: 170px;

            top: 18%;

            right: 10%;

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

        }


        .showcase-content {

            position: relative;

            z-index: 2;

            width: 100%;

            max-width: 570px;

            color: white;

        }


        .brand {

            display: flex;

            align-items: center;

            gap: 11px;

            color: white;

            font-size: 22px;

            font-weight: 900;

        }


        .brand-icon {

            width: 46px;

            height: 46px;

            display: flex;

            align-items: center;

            justify-content: center;

            color: var(--primary);

            background: white;

            border-radius: 14px;

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

        }


        .showcase-title {

            margin-top: 75px;

            font-size: 45px;

            line-height: 1.08;

            font-weight: 900;

            letter-spacing: -1.5px;

        }


        .showcase-title span {

            color: #dcd9ff;

        }


        .showcase-text {

            max-width: 480px;

            margin-top: 18px;

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

            font-size: 14px;

            line-height: 1.8;

        }


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

        .location-card {

            display: flex;

            align-items: center;

            gap: 13px;

            width: fit-content;

            margin-top: 35px;

            padding: 12px 15px;

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

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

            border-radius: 13px;

            backdrop-filter: blur(15px);

        }


        .location-icon {

            width: 40px;

            height: 40px;

            display: flex;

            align-items: center;

            justify-content: center;

            color: white;

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

            border-radius: 10px;

        }


        .location-title {

            color: white;

            font-size: 12px;

            font-weight: 800;

        }


        .location-text {

            margin-top: 3px;

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

            font-size: 9px;

        }


        /* =====================================================
           STORE PREVIEW
        ===================================================== */

        .store-preview {

            position: absolute;

            z-index: 3;

            right: 50px;

            bottom: 55px;

            width: 190px;

            padding: 13px;

            color: var(--dark);

            background: white;

            border-radius: 16px;

            box-shadow:
                0 25px 60px rgba(20,10,80,.25);

            transform: rotate(3deg);

        }


        .store-preview-image {

            width: 100%;

            height: 95px;

            object-fit: cover;

            border-radius: 10px;

        }


        .store-preview-name {

            margin-top: 8px;

            font-size: 9px;

            font-weight: 900;

        }


        .store-preview-location {

            margin-top: 4px;

            color: var(--muted);

            font-size: 6px;

        }


        .store-preview-rating {

            display: flex;

            align-items: center;

            gap: 3px;

            margin-top: 7px;

            color: #f59e0b;

            font-size: 7px;

        }


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

        .login-area {

            width: 48%;

            min-height: 100vh;

            display: flex;

            align-items: center;

            justify-content: center;

            padding: 40px;

            background: #ffffff;

        }


        .login-container {

            width: 100%;

            max-width: 420px;

        }


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

        .mobile-brand {

            display: none;

        }


        .login-heading {

            color: var(--dark);

            font-size: 28px;

            font-weight: 900;

            letter-spacing: -.8px;

        }


        .login-description {

            margin-top: 8px;

            color: var(--muted);

            font-size: 12px;

            line-height: 1.7;

        }


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

        .custom-alert {

            display: flex;

            align-items: flex-start;

            gap: 9px;

            margin-top: 20px;

            padding: 11px 12px;

            border-radius: 10px;

            font-size: 10px;

            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
        ===================================================== */

        .login-form {

            margin-top: 27px;

        }


        .form-group {

            margin-bottom: 17px;

        }


        .form-label {

            display: block;

            margin-bottom: 7px;

            color: var(--dark);

            font-size: 12px;

            font-weight: 800;

        }


        .input-wrapper {

            position: relative;

        }


        .input-icon {

            position: absolute;

            left: 13px;

            top: 50%;

            z-index: 2;

            color: #9b9dac;

            font-size: 14px;

            transform: translateY(-50%);

        }


        .form-control {

            height: 48px;

            padding:
                0 43px;

            color: var(--dark);

            background: #fafafe;

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

            border-radius: 11px;

            box-shadow: none !important;

            font-size: 13px;

            transition: .2s ease;

        }


        .form-control::placeholder {

            color: #b5b6c1;

        }


        .form-control:focus {

            background: white;

            border-color: var(--primary);

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

        }


        .password-toggle {

            position: absolute;

            top: 50%;

            right: 13px;

            z-index: 2;

            padding: 0;

            color: #999ba9;

            background: transparent;

            border: 0;

            transform: translateY(-50%);

        }


        .password-toggle:hover {

            color: var(--primary);

        }


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

        .form-options {

            display: flex;

            align-items: center;

            justify-content: space-between;

            margin-top: 4px;

        }


        .remember {

            display: flex;

            align-items: center;

            gap: 7px;

            color: var(--text);

            font-size: 12px;

            cursor: pointer;

        }


        .remember input {

            width: 14px;

            height: 14px;

            accent-color: var(--primary);

        }


        .forgot {

            color: var(--primary);

            font-size: 13px;

            font-weight: 800;

        }


        .forgot:hover {

            color: var(--primary-dark);

        }


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

        .login-button {

            width: 100%;

            height: 49px;

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 8px;

            margin-top: 22px;

            color: white;

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

            border: 0;

            border-radius: 11px;

            font-size: 13px;

            font-weight: 900;

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

            transition: .2s ease;

        }


        .login-button:hover {

            color: white;

            transform: translateY(-1px);

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

        }


        .login-button:active {

            transform: scale(.99);

        }


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

        .divider {

            display: flex;

            align-items: center;

            gap: 12px;

            margin: 23px 0;

            color: #b0b1bc;

            font-size: 11px;

        }


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

            content: "";

            flex: 1;

            height: 1px;

            background: var(--border);

        }


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

        .social-buttons {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 9px;

        }


        .social-button {

            height: 44px;

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 7px;

            color: var(--dark);

            background: white;

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

            border-radius: 10px;

            font-size: 12px;

            font-weight: 800;

            transition: .2s ease;

        }


        .social-button:hover {

            border-color: #d5d3ff;

            background: #fafaff;

        }


        .google-icon {

            color: #b01902;

            font-size: 14px;

        }


        .facebook-icon {

            color: #1877F2;

            font-size: 14px;

        }


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

        .register-text {

            margin-top: 27px;

            color: var(--muted);

            text-align: center;

            font-size: 13px;

        }


        .register-text a {

            color: var(--primary);

            font-weight: 900;

        }


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

        .terms {

            margin-top: 20px;

            color: #aaa;

            text-align: center;

            font-size: 11px;

            line-height: 1.6;

        }


        .terms a {

            color: var(--primary);

        }


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

        @media(max-width: 767px) {


            body {

                background: white;

            }


            .login-page {

                display: block;

                min-height: 100vh;

            }


            .login-showcase {

                display: none;

            }


            .login-area {

                width: 100%;

                min-height: 100vh;

                display: block;

                padding:
                    0 20px 30px;

                background: white;

            }


            .login-container {

                max-width: 100%;

                padding-top: 28px;

            }


            .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: 38px;

                height: 38px;

                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);

            }


            .login-heading {

                margin-top: 48px;

                font-size: 25px;

                text-align: left;

            }


            .login-description {

                max-width: 330px;

                font-size: 10px;

            }


            .login-form {

                margin-top: 25px;

            }


            .form-group {

                margin-bottom: 15px;

            }


            .form-control {

                height: 52px;

                font-size: 12px;

                border-radius: 12px;

            }


            .form-label {

                font-size: 10px;

            }


            .login-button {

                height: 52px;

                border-radius: 12px;

            }


            .social-button {

                height: 48px;

            }


            .register-text {

                margin-top: 25px;

            }


        }


        /* =====================================================
           SMALL PHONES
        ===================================================== */

        @media(max-width: 380px) {


            .login-area {

                padding-left: 16px;

                padding-right: 16px;

            }


            .login-container {

                padding-top: 22px;

            }


            .login-heading {

                margin-top: 38px;

                font-size: 23px;

            }


        }