:root {
    --wex-red: #ef4036;
    --wex-red-dark: #d92f2a;
    --wex-ink: #171a2f;
    --wex-purple: #312783;
    --wex-purple-deep: #21185f;
    --wex-blue: #536dfe;
    --wex-soft: #f6f7fc;
    --wex-line: #e8eaf3;
}

body.wex-auth-page {
    min-height: 100vh;
    color: var(--wex-ink);
    background:
        radial-gradient(circle at 7% 10%, rgba(239, 64, 54, .16), transparent 28%),
        radial-gradient(circle at 91% 16%, rgba(83, 109, 254, .18), transparent 31%),
        radial-gradient(circle at 54% 100%, rgba(49, 39, 131, .13), transparent 34%),
        linear-gradient(145deg, #f9faff 0%, #f2f4fb 52%, #f8f5fb 100%);
    background-attachment: fixed;
}

body.wex-auth-page::before,
body.wex-auth-page::after {
    position: fixed;
    z-index: 0;
    width: 240px;
    height: 240px;
    content: "";
    pointer-events: none;
    border: 1px solid rgba(49, 39, 131, .08);
    border-radius: 44px;
    transform: rotate(28deg);
}

body.wex-auth-page::before { top: -115px; right: 9%; }
body.wex-auth-page::after { bottom: -145px; left: 7%; }

.wex-auth-page .auth-page-wrapper {
    position: relative;
    z-index: 1;
    padding: 34px 20px !important;
    background: transparent !important;
}

.wex-auth-page .auth-page-wrapper > .bg-overlay { display: none; }

.wex-auth-page .auth-page-content {
    padding-top: 0 !important;
    overflow: visible !important;
}

.wex-auth-page .auth-page-content > .container { max-width: 1160px; }

.wex-auth-page .wex-auth-card {
    overflow: hidden;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, .88);
    border-radius: 30px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 30px 80px rgba(32, 28, 83, .16), 0 8px 25px rgba(32, 28, 83, .07);
    backdrop-filter: blur(18px);
}

.wex-auth-page .auth-one-bg {
    position: relative;
    min-height: 650px;
    padding: 52px !important;
    background-position: center !important;
    background-size: cover !important;
    isolation: isolate;
}

.wex-auth-page .auth-one-bg::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    background:
        linear-gradient(155deg, rgba(28, 20, 88, .93), rgba(49, 39, 131, .78) 47%, rgba(239, 64, 54, .68)),
        linear-gradient(0deg, rgba(18, 17, 54, .25), transparent 50%);
}

.wex-auth-page .auth-one-bg > .bg-overlay { display: none; }

.wex-auth-page .auth-one-bg .position-relative { z-index: 2; }

.wex-auth-page .wex-auth-logo {
    display: block;
    width: min(265px, 82%);
    max-width: none !important;
    height: auto;
    margin-inline: auto;
    filter: drop-shadow(0 10px 18px rgba(12, 10, 42, .22));
}

.wex-auth-page .auth-one-bg .mt-auto {
    padding: 26px 28px 8px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 24px;
    background: rgba(255, 255, 255, .09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .11);
    backdrop-filter: blur(10px);
}

.wex-auth-page .auth-one-bg .display-4 {
    color: #fff !important;
    opacity: .94;
}

.wex-auth-page .auth-one-bg .carousel-inner {
    min-height: 104px;
    padding-bottom: 14px !important;
    color: rgba(255, 255, 255, .93) !important;
}

.wex-auth-page .auth-one-bg .carousel-item p {
    margin: 0;
    font-size: 17px !important;
    font-weight: 500;
    line-height: 1.65;
}

.wex-auth-page .wex-auth-form-panel {
    display: flex;
    min-height: 650px;
    flex-direction: column;
    justify-content: center;
    padding: 48px 54px !important;
}

.wex-auth-page .wex-auth-form-panel > h5 {
    margin-bottom: 8px;
    color: var(--wex-purple) !important;
    font-size: clamp(25px, 2.5vw, 34px);
    font-weight: 800;
    letter-spacing: -.7px;
}

.wex-auth-page .wex-auth-form-panel > h5 + p {
    margin-bottom: 26px;
    color: #72768a !important;
    font-size: 15px;
}

.wex-auth-page .form-label {
    margin-bottom: 8px;
    color: #30344a;
    font-size: 13px;
    font-weight: 700;
}

.wex-auth-page .form-control,
.wex-auth-page .form-select,
.wex-auth-page .ts-control {
    min-height: 50px;
    border: 1px solid var(--wex-line) !important;
    border-radius: 14px !important;
    background: #f9faff !important;
    color: var(--wex-ink);
    box-shadow: none !important;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease;
}

.wex-auth-page .form-control { padding: 12px 15px; }

.wex-auth-page .form-control:focus,
.wex-auth-page .form-select:focus,
.wex-auth-page .ts-wrapper.focus .ts-control {
    border-color: rgba(83, 109, 254, .65) !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(83, 109, 254, .10) !important;
}

.wex-auth-page .form-control::placeholder { color: #a2a7b7; }

.wex-auth-page .password-addon {
    top: 6px !important;
    right: 6px !important;
    color: #777c91 !important;
}

.wex-auth-page .nav-pills {
    padding: 5px;
    border: 1px solid var(--wex-line);
    border-radius: 15px;
    background: #f5f6fb;
}

.wex-auth-page .nav-pills .nav-link {
    min-height: 42px;
    border-radius: 11px;
    color: #777b8d;
    font-size: 13px;
    font-weight: 700;
}

.wex-auth-page .nav-pills .nav-link.active {
    color: var(--wex-purple);
    background: #fff;
    box-shadow: 0 6px 16px rgba(32, 28, 83, .10);
}

.wex-auth-page .btn-success {
    min-height: 50px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(110deg, var(--wex-red), #f45f4e) !important;
    box-shadow: 0 13px 25px rgba(239, 64, 54, .24);
    font-weight: 750;
    letter-spacing: .15px;
    transition: transform .18s ease, box-shadow .18s ease;
}

.wex-auth-page .btn-success:hover,
.wex-auth-page .btn-success:focus {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(239, 64, 54, .30);
}

.wex-auth-page a { color: var(--wex-purple); }
.wex-auth-page a:hover { color: var(--wex-red-dark); }

.wex-auth-page .form-check-input:checked {
    border-color: var(--wex-purple);
    background-color: var(--wex-purple);
}

.wex-auth-page .alert {
    border: 0;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.5;
}

.wex-auth-page .alert-danger { color: #a6282e; background: #fff0f1; }
.wex-auth-page .alert-success { color: #19704e; background: #eaf9f2; }

.wex-auth-page .auth-step-badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-bottom: 25px;
    padding: 5px;
    border: 1px solid var(--wex-line);
    border-radius: 15px;
    background: #f5f6fb;
}

.wex-auth-page .auth-step-badge {
    padding: 10px 7px;
    border: 0 !important;
    border-radius: 11px;
    background: transparent;
    color: #8d91a1;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
}

.wex-auth-page .auth-step-badge.active {
    color: var(--wex-purple);
    background: #fff;
    box-shadow: 0 5px 14px rgba(32, 28, 83, .10);
}

.wex-auth-page .auth-step-badge.done { color: #25765b; background: #e8f8f1; }

.wex-auth-page .hint-card {
    padding: 14px 16px;
    border: 1px solid #e5e7f1;
    border-radius: 14px;
    background: #f8f9fd;
}

.wex-auth-page .code-box {
    min-height: 62px;
    font-size: 28px;
    letter-spacing: 12px;
}

.wex-auth-page .ts-dropdown {
    overflow: hidden;
    margin-top: 7px;
    border: 1px solid var(--wex-line) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 18px 36px rgba(32, 28, 83, .16) !important;
}

.wex-auth-page .ts-dropdown .active { background: #f2f3ff !important; color: var(--wex-purple); }

.wex-auth-page .wex-auth-card + .mt-4,
.wex-auth-page .wex-auth-card + .mt-4 .text-muted {
    color: #777b8e !important;
    font-size: 12px;
}

.wex-auth-page .wex-auth-card + .mt-4 a { color: var(--wex-purple) !important; text-decoration: none !important; }

.wex-auth-page .wex-auth-footer,
.wex-auth-page .wex-auth-footer p,
.wex-auth-page .wex-auth-footer .text-muted {
    color: #686d80 !important;
}

.wex-auth-page .wex-auth-footer a { color: var(--wex-purple) !important; }

@media (max-width: 991.98px) {
    .wex-auth-page .auth-page-content > .container { max-width: 720px; }
    .wex-auth-page .wex-auth-card { border-radius: 26px; }
    .wex-auth-page .auth-one-bg {
        min-height: 225px;
        padding: 30px 34px !important;
        background-position: center 42% !important;
    }
    .wex-auth-page .auth-one-bg .position-relative { min-height: 165px; }
    .wex-auth-page .auth-one-bg .mt-auto { display: none; }
    .wex-auth-page .wex-auth-logo { width: min(235px, 72%); }
    .wex-auth-page .wex-auth-form-panel { min-height: 0; padding: 38px 40px 42px !important; }
}

@media (max-width: 575.98px) {
    .wex-auth-page .auth-page-wrapper { padding: 14px 10px 24px !important; align-items: flex-start !important; }
    .wex-auth-page .wex-auth-card { border-radius: 22px; box-shadow: 0 20px 50px rgba(32, 28, 83, .13); }
    .wex-auth-page .auth-one-bg { min-height: 150px; padding: 25px 26px !important; border-radius: 0; }
    .wex-auth-page .auth-one-bg .position-relative { min-height: 100px; }
    .wex-auth-page .wex-auth-logo { width: min(210px, 74%); }
    .wex-auth-page .wex-auth-form-panel { padding: 30px 23px 34px !important; }
    .wex-auth-page .wex-auth-form-panel > h5 { font-size: 27px; }
    .wex-auth-page .wex-auth-form-panel > h5 + p { margin-bottom: 22px; }
    .wex-auth-page .auth-step-badge { padding: 9px 4px; font-size: 10px; }
    .wex-auth-page .row.g-2 > .col-5 { width: 43%; }
    .wex-auth-page .row.g-2 > .col-7 { width: 57%; }
    .wex-auth-page .form-text { font-size: 11px; line-height: 1.45; }
    .wex-auth-page .wex-auth-card + .mt-4 { margin-top: 18px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .wex-auth-page *, .wex-auth-page *::before, .wex-auth-page *::after { scroll-behavior: auto !important; transition: none !important; }
}