/* Mobile login only. Desktop split layout and the registration page are unchanged. */
.vz-login-status { color: #bac7cc; font-size: 12px; line-height: 1.45; margin: 0; }
.vz-login-status:empty { display: none; }
.vz-login-status:not(:empty) { margin: 10px 0; }
.vz-login-verification { margin-bottom: 16px; max-width: 100%; }
.vz-login-verification iframe { max-width: 100%; }
#login-button:disabled { cursor: wait; opacity: .72; }
.vz-eye-svg { display: none; }
.vz-login-transition {
    position: fixed; inset: 0; z-index: 2147483647;
    width: 100%; min-height: 100%; box-sizing: border-box;
    overflow: hidden; overscroll-behavior: none; touch-action: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 28px; padding: 24px; background: #000; color: #d4d9df;
    font: 500 13px Inter, sans-serif; animation: vz-login-enter .25s ease-out;
}
.vz-login-transition img { width: 190px; max-height: 75px; object-fit: contain; }
.vz-login-transition-bar { width: min(220px, 65vw); height: 4px; border-radius: 4px; overflow: hidden; background: #202027; }
.vz-login-transition-bar::after {
    content: ""; display: block; width: 100%; height: 100%; border-radius: inherit;
    background: linear-gradient(90deg, #8155cf, #c08af4, #90e1d9);
    transform-origin: left; animation: vz-login-progress 4.8s cubic-bezier(.18,.65,.35,1) both;
}
.vz-login-transition p { margin: 0; }
@keyframes vz-login-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes vz-login-progress { from { transform: scaleX(.02); } to { transform: scaleX(1); } }
@media (max-width: 820px) {
    html.vz-login-document,
    html.vz-login-document body.vz-auth-login {
        width: 100%; height: 100%; min-height: 0;
        margin: 0; padding: 0;
        overflow: hidden !important;
        overscroll-behavior: none;
        background: #000 !important;
    }
    body.vz-auth-login {
        position: fixed;
        inset: 0;
        color: #f6f8fa;
    }
    body.vz-auth-login::before {
        content: "";
        position: fixed;
        inset: 0;
        height: 100%;
        height: 100lvh;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(9, 17, 24, .12), rgba(9, 17, 24, .15) 32%, rgba(9, 17, 24, .66)),
            url('../images/auth/vexuspay-mobile-alpine-v1.webp') center 24% / cover no-repeat;
    }
    body.vz-auth-login .vz-auth-shell {
        position: absolute;
        top: var(--vz-login-viewport-top, 0px);
        left: 0; right: 0;
        display: flex;
        flex-direction: column;
        height: 100svh;
        height: var(--vz-login-viewport-height, 100dvh);
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: none;
        -webkit-overflow-scrolling: touch;
        padding: max(22px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom));
        gap: 20px;
        background: transparent;
    }
    body.vz-auth-login .vz-auth-visual {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 52px;
        height: 52px;
        max-height: none;
        padding: 0;
        border: 0;
        background: none;
        flex-shrink: 0;
        overflow: visible;
    }
    body.vz-auth-login .vz-auth-visual::before,
    body.vz-auth-login .vz-auth-visual::after,
    body.vz-auth-login .vz-auth-visual-image,
    body.vz-auth-login .vz-auth-hero-copy,
    body.vz-auth-login .vz-auth-secure-note,
    body.vz-auth-login .vz-auth-back,
    body.vz-auth-login .vz-panel-security,
    body.vz-auth-login .vz-auth-tools { display: none !important; }
    body.vz-auth-login .vz-auth-brand {
        align-self: center;
        position: static;
        padding: 0;
        margin: 0;
        width: auto;
        background: transparent;
        border: 0;
        box-shadow: none;
        filter: drop-shadow(0 2px 10px rgba(0,0,0,.35));
    }
    body.vz-auth-login .vz-auth-brand img { width: 160px; max-height: 52px; object-fit: contain; }
    body.vz-auth-login .vz-auth-panel {
        flex: 1 0 auto;
        display: flex;
        min-height: 0;
        padding: 0;
        background: none;
    }
    body.vz-auth-login .vz-auth-panel-inner {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 0 38px;
    }
    body.vz-auth-login .vz-card {
        width: min(100%, 420px);
        padding: 25px 22px 21px;
        margin: 0;
        border: 1px solid rgba(255,255,255,.2);
        border-radius: 28px;
        background: linear-gradient(140deg, rgba(44,54,59,.76), rgba(17,26,30,.84));
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        box-shadow: 0 20px 55px rgba(0,0,0,.28);
        animation: none;
    }
    body.vz-auth-login .vz-card-header { margin-bottom: 22px; }
    body.vz-auth-login .vz-form-eyebrow { color: #c7d6da; letter-spacing: .04em; font-size: 11px; }
    body.vz-auth-login .vz-title { color: #fff; font-size: 28px; margin: 6px 0 0; letter-spacing: -.8px; }
    body.vz-auth-login .vz-sub { display: none; }
    body.vz-auth-login .vz-field { margin-bottom: 16px; }
    body.vz-auth-login .vz-field-label { color: #e4ebee; font-size: 12px; margin-bottom: 7px; }
    body.vz-auth-login .vz-input {
        min-height: 50px;
        font-size: 16px;
        color: #fff;
        background: rgba(8,17,22,.46);
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 12px;
        box-shadow: none;
    }
    body.vz-auth-login .vz-input::placeholder { color: #aebdc4; font-size: 14px; }
    body.vz-auth-login .vz-input:focus { border-color: #78d7d0; box-shadow: 0 0 0 3px rgba(120,215,208,.12); }
    body.vz-auth-login .field-icon, body.vz-auth-login .vz-eye { color: #bbcdd2; }
    body.vz-auth-login .vz-eye {
        min-width: 44px; min-height: 44px; display: grid; place-items: center;
        background: transparent !important; border: 0 !important; border-radius: 50%;
        box-shadow: none !important; padding: 0; color: #aebfc6;
        transition: color .18s ease, transform .18s ease;
    }
    body.vz-auth-login .vz-eye i { display: none; }
    body.vz-auth-login .vz-eye-svg { display: block; width: 20px; height: 20px; overflow: visible; }
    body.vz-auth-login .vz-eye-svg .eye-slash { stroke-dasharray: 26; stroke-dashoffset: 0; transition: stroke-dashoffset .22s ease, opacity .22s ease; }
    body.vz-auth-login .vz-eye.is-revealed { color: #a1eee3; }
    body.vz-auth-login .vz-eye.is-revealed .eye-slash { stroke-dashoffset: 26; opacity: 0; }
    body.vz-auth-login .vz-eye:hover { color: #e3f4f4; }
    body.vz-auth-login .vz-eye:active { transform: translateY(-50%) scale(.9); }
    body.vz-auth-login .vz-eye:focus-visible { outline: 2px solid #8de1d5; outline-offset: -4px; }
    body.vz-auth-login .vz-row-opts { flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
    body.vz-auth-login .vz-remember label { color: #ced8dc; font-size: 11px; }
    body.vz-auth-login .vz-forgot { font-size: 11px; color: #ced8dc; }
    body.vz-auth-login .vz-forgot span { color: #ced8dc; }
    body.vz-auth-login .btn-vz-primary {
        min-height: 50px;
        border: 0;
        border-radius: 12px;
        background: #8de1d5;
        color: #102c29;
        font-size: 15px;
        font-weight: 700;
        box-shadow: none;
    }
    body.vz-auth-login .btn-vz-primary:hover { background: #a1eee3; transform: none; }
    body.vz-auth-login .vz-footer-text { color: #d0dbe0; font-size: 12px; margin-top: 18px; }
    body.vz-auth-login .vz-footer-text a { color: #a1eee3; }
    body.vz-auth-login .vz-login-verification { margin: 0; overflow: visible; }
    body.vz-auth-login .vz-login-verification:has(iframe[style*="height: 65px"]) { margin-bottom: 12px; }
    body.vz-auth-login .toast-container { max-width: calc(100vw - 24px); right: 12px; top: max(12px, env(safe-area-inset-top)); }
    body.vz-auth-login .modal {
        top: var(--vz-login-viewport-top, 0px);
        height: var(--vz-login-viewport-height, 100dvh);
        bottom: auto;
        overscroll-behavior: none;
    }
    html.vz-login-loading, html.vz-login-loading body.vz-auth-login { background: #000 !important; }
    html.vz-login-loading body.vz-auth-login::before { visibility: hidden; }
    html.vz-login-loading .vz-auth-shell { overflow: hidden; }
    body.vz-auth-login .vz-login-transition {
        padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
    }
}
@media (prefers-reduced-motion: reduce) {
    .vz-login-transition, .vz-login-transition-bar::after { animation: none; }
    body.vz-auth-login .vz-eye, body.vz-auth-login .vz-eye-svg .eye-slash { transition: none; }
}
@media (max-width: 820px) and (max-height: 700px) {
    body.vz-auth-login .vz-auth-shell { padding-top: max(12px, env(safe-area-inset-top)); gap: 12px; }
    body.vz-auth-login .vz-auth-panel-inner { padding-bottom: 0; }
    body.vz-auth-login .vz-card { padding: 20px; border-radius: 24px; }
    body.vz-auth-login .vz-card-header { margin-bottom: 16px; }
    body.vz-auth-login .vz-field { margin-bottom: 13px; }
}