/**
 * Auth pages — MY Vapp purple brand (customer portal parity)
 */
:root {
    --auth-primary: #782074;
    --auth-primary-dark: #5a1858;
    --auth-primary-bright: #782074;
    --auth-primary-soft: #faf5fb;
    --auth-primary-glow: rgba(120, 32, 116, 0.32);
    --auth-gradient: linear-gradient(180deg, #a74ece 0%, #782074 100%);
    --auth-gradient-hover: linear-gradient(180deg, #a74ece 0%, #5a1858 100%);
    --auth-page-bg: #f8fafc;
    --auth-ink: #1e293b;
    --auth-muted: #64748b;
    --auth-border: rgba(148, 163, 184, 0.24);
    --auth-focus-ring: rgba(120, 32, 116, 0.22);
    --auth-shadow: 0 18px 45px rgba(120, 32, 116, 0.14);
    --auth-shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.custom-login {
    background: var(--auth-page-bg) !important;
}

.custom-left {
    background: linear-gradient(180deg, #f8fafc 0%, #faf5fb 48%, #f3e8f3 100%) !important;
}

.custom-left::before {
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(120, 32, 116, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 60% 70% at 70% 60%, rgba(167, 78, 206, 0.05) 0%, transparent 45%) !important;
}

.custom-left::after {
    background-image:
        linear-gradient(rgba(120, 32, 116, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 32, 116, 0.04) 1px, transparent 1px) !important;
}

.vape-smoke::before {
    background:
        radial-gradient(ellipse 70% 80% at 5% 30%, rgba(120, 32, 116, 0.08) 0%, transparent 65%),
        radial-gradient(ellipse 60% 70% at 85% 60%, rgba(167, 78, 206, 0.06) 0%, transparent 70%) !important;
}

.vape-smoke::after {
    background-image:
        linear-gradient(rgba(167, 78, 206, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(167, 78, 206, 0.04) 1px, transparent 1px) !important;
}

.vape-smoke span:nth-child(1) { background: radial-gradient(circle, rgba(120, 32, 116, 0.1) 0%, transparent 70%) !important; }
.vape-smoke span:nth-child(2) { background: radial-gradient(circle, rgba(167, 78, 206, 0.08) 0%, transparent 70%) !important; }
.vape-smoke span:nth-child(3) { background: radial-gradient(circle, rgba(120, 32, 116, 0.08) 0%, transparent 70%) !important; }
.vape-smoke span:nth-child(4) { background: radial-gradient(circle, rgba(167, 78, 206, 0.1) 0%, transparent 70%) !important; }
.vape-smoke span:nth-child(5) { background: radial-gradient(circle, rgba(120, 32, 116, 0.08) 0%, transparent 70%) !important; }

.custom-right {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}

.custom-right::before {
    background: radial-gradient(ellipse 60% 50% at 80% 50%, rgba(167, 78, 206, 0.06) 0%, transparent 50%) !important;
}

.custom-logo {
    border-color: var(--auth-border) !important;
    box-shadow: var(--auth-shadow-soft) !important;
}

.custom-h1,
.ref-title {
    color: var(--auth-ink) !important;
}

.custom-sub,
.ref-subtitle,
.ref-trust-p,
.ref-links a,
.ref-perk {
    color: var(--auth-muted) !important;
}

.custom-features li,
.ref-field label,
.ref-rem-box label {
    color: #334155 !important;
}

.custom-features li i,
.ref-perk i {
    color: var(--auth-primary-bright) !important;
    background: var(--auth-primary-soft) !important;
}

.custom-cta,
.ref-btn {
    background: var(--auth-gradient) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px var(--auth-primary-glow) !important;
}

.custom-cta:hover,
.ref-btn:hover {
    background: var(--auth-gradient-hover) !important;
    color: #fff !important;
    box-shadow: 0 8px 22px var(--auth-primary-glow) !important;
}

.custom-form-card {
    border-color: var(--auth-border) !important;
    box-shadow: var(--auth-shadow) !important;
}

.custom-form-card:focus-within {
    box-shadow: 0 20px 50px rgba(120, 32, 116, 0.16) !important;
}

.ref-inp-wrap input:focus,
.otp-wrap input:focus {
    border-color: var(--auth-primary-bright) !important;
    box-shadow: 0 0 0 3px var(--auth-focus-ring) !important;
}

.ref-inp-wrap input:focus ~ .ref-ico {
    color: var(--auth-primary-bright) !important;
}

.ref-sw.on {
    background: var(--auth-primary-bright) !important;
}

.ref-links a:hover,
.ref-links .ref-create {
    color: var(--auth-primary-dark) !important;
}

.ref-trust {
    border-top-color: var(--auth-border) !important;
}

.verify-icon-badge {
    background: var(--auth-primary-soft) !important;
    border-color: rgba(120, 32, 116, 0.12) !important;
}

.verify-icon-badge i {
    color: var(--auth-primary-bright) !important;
}

.otp-wrap input.filled {
    border-color: var(--auth-primary-bright) !important;
}

.auth-language-switcher {
    border-color: var(--auth-border) !important;
}

.auth-language-switcher label {
    color: var(--auth-muted) !important;
}

.auth-language-switcher select:focus {
    border-color: var(--auth-primary-bright) !important;
    box-shadow: 0 0 0 2px var(--auth-focus-ring) !important;
}

@media (max-width: 991px) {
    .custom-login {
        background: var(--auth-page-bg) !important;
    }

    .custom-right {
        background:
            radial-gradient(circle at 15% 5%, rgba(120, 32, 116, 0.08), transparent 42%),
            linear-gradient(180deg, #f8fafc 0%, #faf5fb 100%) !important;
    }

    .mobile-brand {
        border-color: var(--auth-border) !important;
        box-shadow: var(--auth-shadow-soft) !important;
    }

    .custom-form-card {
        border-color: var(--auth-border) !important;
        box-shadow: var(--auth-shadow) !important;
    }

    .ref-subtitle {
        color: var(--auth-muted) !important;
    }
}

.page-header-area {
    background: var(--auth-gradient) !important;
}

.login-register-area .card {
    border-color: var(--auth-border) !important;
    box-shadow: var(--auth-shadow-soft) !important;
}

.login-register-area .card-header {
    background: var(--auth-primary-soft) !important;
    color: var(--auth-primary-dark) !important;
    border-bottom-color: var(--auth-border) !important;
}

.login-register-area .btn-primary {
    background: var(--auth-gradient) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 12px var(--auth-primary-glow) !important;
}

.login-register-area .btn-primary:hover {
    background: var(--auth-gradient-hover) !important;
    border-color: transparent !important;
    color: #fff !important;
}

.login-register-area .form-control:focus {
    border-color: var(--auth-primary-bright) !important;
    box-shadow: 0 0 0 0.2rem var(--auth-focus-ring) !important;
}

.login-register-area .btn-link {
    color: var(--auth-primary-bright) !important;
}

.login-register-area .alert-success {
    background: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #047857 !important;
}

.container .card {
    border-color: var(--auth-border) !important;
    box-shadow: var(--auth-shadow-soft) !important;
}

.container .card-header {
    background: var(--auth-primary-soft) !important;
    color: var(--auth-primary-dark) !important;
    border-bottom-color: var(--auth-border) !important;
}

.container .btn-primary {
    background: var(--auth-gradient) !important;
    border-color: transparent !important;
    color: #fff !important;
}

.container .btn-link {
    color: var(--auth-primary-bright) !important;
}

.container .form-control:focus {
    border-color: var(--auth-primary-bright) !important;
    box-shadow: 0 0 0 0.2rem var(--auth-focus-ring) !important;
}