.authentication-wrapper {
    display: flex;
    flex-basis: 100%;
    min-height: 100vh;
    width: 100%
}

.authentication-wrapper .authentication-inner {
    width: 100%
}

.authentication-wrapper.authentication-basic {
    align-items: center;
    justify-content: center
}

.authentication-wrapper .auth-cover-illustration {
    z-index: 1;
    max-inline-size: 38rem
}

.authentication-wrapper .authentication-image-object-left {
    position: absolute;
    bottom: 6%;
    inset-inline-start: 4%
}

.authentication-wrapper .authentication-image-object-right {
    position: absolute;
    bottom: 7%;
    inset-inline-end: 4%
}

.authentication-wrapper .authentication-image {
    z-index: -1;
    inline-size: 100%;
    position: absolute;
    inset-inline-start: 0;
    bottom: 0
}

.authentication-wrapper .authentication-image-model {
    width: 768px
}

.authentication-wrapper.authentication-cover {
    align-items: flex-start
}

.authentication-wrapper.authentication-cover .authentication-inner {
    min-height: 100vh;
    position: relative
}

html:not([dir=rtl]) .authentication-wrapper.authentication-cover .authentication-image {
    inset-inline-start: unset
}

.authentication-wrapper.authentication-cover .authentication-image-tree {
    position: absolute;
    bottom: 4rem;
    left: 3rem
}

.authentication-wrapper.authentication-basic .authentication-inner {
    max-width: 460px
}

.authentication-wrapper .auth-input-wrapper .auth-input {
    max-width: 50px;
    padding-left: .4rem;
    padding-right: .4rem;
    font-size: 150%
}

@media(max-width: 575.98px) {
    .authentication-wrapper .auth-input-wrapper .auth-input {
        font-size: 1.125rem
    }
}

@media(max-width: 1199.98px) {
    .authentication-cover .authentication-image-model {
        position: relative;
        width: 575px;
        top: 1rem
    }
}

#twoStepsForm .fv-plugins-bootstrap5-row-invalid .form-control {
    border-width: 2px;
    border-color: #ff4c51
}

@media(max-width: 575.98px) {
    .numeral-mask-wrapper .numeral-mask {
        padding: 0 !important
    }
    .numeral-mask:not(:focus) {
        margin-inline: 1px !important
    }
    .numeral-mask:focus {
        margin-inline: auto !important
    }
}

.light-style .authentication-wrapper .authentication-bg {
    background-color: #fff
}

.dark-style .authentication-wrapper .authentication-bg {
    background-color: #312d4b
}

[dir=rtl] .authentication-image-tree {
    right: 3rem;
    left: auto
}

/* PayVST fantasy login theme — visual overrides only */
body:has(#formAuthentication) {
    min-height: 100vh;
    margin: 0;
    color: #142c4a;
    background:
        radial-gradient(circle at 14% 16%, rgba(255, 92, 184, .34), transparent 24rem),
        radial-gradient(circle at 86% 18%, rgba(80, 203, 255, .4), transparent 26rem),
        radial-gradient(circle at 68% 86%, rgba(111, 84, 255, .28), transparent 28rem),
        linear-gradient(135deg, #f7fbff 0%, #e9f8ff 38%, #f7edff 70%, #fff2f8 100%) !important;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow-x: hidden;
}

body:has(#formAuthentication)::before,
body:has(#formAuthentication)::after {
    content: "";
    position: fixed;
    z-index: 0;
    width: 26rem;
    height: 26rem;
    pointer-events: none;
    opacity: .76;
    filter: drop-shadow(0 22px 35px rgba(35, 80, 145, .16));
}

body:has(#formAuthentication)::before {
    top: -7rem;
    left: -6rem;
    border-radius: 48% 52% 48% 52% / 70% 70% 30% 30%;
    transform: rotate(-28deg);
    background:
        radial-gradient(ellipse at 52% 31%, #091b69 0 5%, #28bbff 6% 10%, #16ccad 11% 16%, #f2c75c 17% 20%, transparent 21%),
        repeating-linear-gradient(100deg, transparent 0 12px, rgba(20, 105, 158, .18) 13px 15px),
        linear-gradient(155deg, rgba(77, 221, 206, .38), rgba(82, 104, 239, .2) 55%, transparent 72%);
}

body:has(#formAuthentication)::after {
    right: -8rem;
    bottom: -9rem;
    border-radius: 70% 30% 65% 35%;
    transform: rotate(24deg);
    background:
        radial-gradient(ellipse at 45% 30%, #2f176e 0 5%, #f65dc3 6% 11%, #52cfff 12% 17%, #f4cb68 18% 21%, transparent 22%),
        repeating-linear-gradient(80deg, transparent 0 13px, rgba(109, 61, 171, .16) 14px 16px),
        linear-gradient(145deg, rgba(255, 112, 190, .32), rgba(75, 205, 245, .24) 58%, transparent 76%);
}

body:has(#formAuthentication) > div[style],
body:has(#formAuthentication) .authentication-wrapper,
body:has(#formAuthentication) .authentication-inner {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    background: transparent !important;
}

body:has(#formAuthentication) .authentication-inner {
    padding: 28px !important;
}

body:has(#formAuthentication) .authentication-bg {
    width: min(100%, 470px);
    flex: 0 1 470px;
    padding: 34px 42px !important;
    border: 1px solid rgba(255, 255, 255, .86);
    border-radius: 30px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(246,250,255,.75)) !important;
    box-shadow:
        0 30px 80px rgba(39, 75, 135, .20),
        inset 0 1px 0 #fff,
        0 0 0 1px rgba(105, 175, 255, .10);
    backdrop-filter: blur(22px) saturate(135%);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
}

body:has(#formAuthentication) .authentication-bg::before {
    content: "SECURE PAYMENT PORTAL";
    position: absolute;
    top: 18px;
    right: 22px;
    padding: 7px 11px;
    border: 1px solid rgba(50, 161, 194, .22);
    border-radius: 999px;
    color: #157a91;
    background: rgba(224, 255, 251, .72);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
}

body:has(#formAuthentication) .authentication-bg .w-px-400 {
    width: 100% !important;
    max-width: 400px;
    padding-top: 14px !important;
}

body:has(#formAuthentication) .authentication-bg img[alt="Logo"] {
    max-width: 164px !important;
    margin-top: 22px !important;
    filter: drop-shadow(0 8px 18px rgba(29, 116, 169, .16));
}

body:has(#formAuthentication) h4 {
    margin-top: 14px;
    color: #152b54;
    font-size: clamp(1.65rem, 4vw, 2.15rem);
    font-weight: 750;
    letter-spacing: -.045em;
}

body:has(#formAuthentication) h4 + p {
    color: #61738d;
}

body:has(#formAuthentication) .form-label {
    margin-bottom: 8px;
    color: #294562;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .035em;
}

body:has(#formAuthentication) .form-control,
body:has(#formAuthentication) .input-group-text {
    min-height: 52px;
    border-color: rgba(75, 137, 188, .22);
    background: rgba(247, 252, 255, .86);
    color: #153554;
    box-shadow: inset 0 1px 2px rgba(44, 79, 117, .04);
}

body:has(#formAuthentication) .form-control {
    border-radius: 14px;
}

body:has(#formAuthentication) .input-group .form-control {
    border-radius: 14px 0 0 14px;
}

body:has(#formAuthentication) .input-group-text {
    border-radius: 0 14px 14px 0;
    color: #49799d;
}

body:has(#formAuthentication) .form-control:focus {
    border-color: #43bddd;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(67, 189, 221, .14), 0 10px 24px rgba(60, 131, 189, .08);
}

body:has(#formAuthentication) a {
    color: #346bc4;
    font-weight: 650;
    text-decoration: none;
}

body:has(#formAuthentication) a:hover {
    color: #b33597;
}

body:has(#formAuthentication) #loginButton {
    min-height: 54px;
    border: 0;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(100deg, #246fd1 0%, #22b9d2 45%, #9861e9 78%, #ee66b2 100%);
    box-shadow: 0 14px 28px rgba(54, 107, 196, .27);
    font-weight: 750;
    letter-spacing: .025em;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

body:has(#formAuthentication) #loginButton:not(:disabled):hover {
    transform: translateY(-2px);
    filter: saturate(112%);
    box-shadow: 0 18px 34px rgba(103, 75, 190, .32);
}

body:has(#formAuthentication) .divider::before,
body:has(#formAuthentication) .divider::after {
    border-color: rgba(73, 136, 184, .16);
}

body:has(#formAuthentication) .divider-text {
    color: #7890a5;
    background: transparent;
}

body:has(#formAuthentication) .g-recaptcha {
    overflow: hidden;
    border-radius: 12px;
}

body:has(#formAuthentication) > button.position-fixed {
    z-index: 3;
    margin: 18px !important;
    border: 1px solid rgba(255,255,255,.75);
    border-radius: 999px;
    color: #174d62;
    background: rgba(237, 255, 254, .86);
    box-shadow: 0 12px 28px rgba(27, 94, 133, .16);
    backdrop-filter: blur(14px);
}

@media (max-width: 575.98px) {
    body:has(#formAuthentication) .authentication-inner {
        padding: 14px !important;
    }

    body:has(#formAuthentication) .authentication-bg {
        padding: 26px 22px 30px !important;
        border-radius: 24px !important;
    }

    body:has(#formAuthentication) .authentication-bg::before {
        position: static;
        display: inline-flex;
        margin-bottom: 4px;
    }

    body:has(#formAuthentication) .authentication-bg img[alt="Logo"] {
        margin-top: 12px !important;
    }

    body:has(#formAuthentication) > button.position-fixed {
        position: static !important;
        display: table !important;
        margin: 0 auto 18px !important;
    }
}