/* Shared login/register shapes. Subdued fields keep the CTA prominent. */

/* Shared modal background: the small, static home texture.
   Its layer stays beneath the existing fields, button and copy. */
.modal-shell[data-modal="login"] .modal-card--login-original,
.modal-shell[data-modal="register"] .modal-card--register,
.modal-shell[data-modal="deposit"] .modal-card--deposit,
.modal-shell[data-modal="deposit-qr"] .modal-card--qr,
.modal-shell[data-modal="withdraw"] .modal-card--withdraw,
.modal-shell[data-modal="demo"] .modal-card--demo,
.modal-shell[data-modal="account"] .modal-card--account {
    isolation: isolate;
    background: linear-gradient(180deg, #1c1d1f 0%, #141517 54%, #0e0f10 100%);
}

.modal-shell[data-modal="login"] .modal-card--login-original::before,
.modal-shell[data-modal="register"] .modal-card--register::before,
.modal-shell[data-modal="deposit"] .modal-card--deposit::before,
.modal-shell[data-modal="deposit-qr"] .modal-card--qr::before,
.modal-shell[data-modal="withdraw"] .modal-card--withdraw::before,
.modal-shell[data-modal="demo"] .modal-card--demo::before,
.modal-shell[data-modal="account"] .modal-card--account::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background: url("branding/nossa-arena-doodles.svg") center top / 288px 192px repeat;
    opacity: 0.039;
}

.modal-shell:is([data-modal="register"], [data-modal="login"]) .modal-card--register {
    --auth-field-surface: #154019;
    border-radius: 32px;
    padding: 24px 22px;
}

.modal-shell:is([data-modal="register"], [data-modal="login"]) .modal-close {
    --modal-close-inset: 12px;
    --modal-close-size: 44px;
    --modal-close-radius: 50%;
    --modal-close-transform: none;
    display: grid;
    place-items: center;
    padding: 0;
    touch-action: manipulation;
}

.modal-shell:is([data-modal="register"], [data-modal="login"]) .modal-close svg {
    width: 20px;
    height: 20px;
}

.modal-shell:is([data-modal="register"], [data-modal="login"]) .modal-brand-lockup--register-original {
    margin: 4px 0 22px;
}

.modal-shell:is([data-modal="register"], [data-modal="login"]) .register-modal-form--original {
    gap: 12px;
}

/* !important overrides the legacy register/login field rules, only here. */
.modal-shell:is([data-modal="register"], [data-modal="login"]) .register-field--original {
    align-items: center !important;
    gap: 12px !important;
    min-height: 58px !important;
    padding: 0 14px !important;
    border-radius: 18px !important;
    background: var(--auth-field-surface) !important;
    border-color: rgba(125, 160, 135, 0.3) !important;
}

.modal-shell:is([data-modal="register"], [data-modal="login"]) .register-field--original:focus-within {
    border-color: rgba(125, 190, 135, 0.65) !important;
    box-shadow: 0 0 0 2px rgba(105, 230, 83, 0.28);
}

/* Autofill must not restore the old, brighter green inside the input. */
.modal-shell:is([data-modal="register"], [data-modal="login"]) .register-field--original input:-webkit-autofill,
.modal-shell:is([data-modal="register"], [data-modal="login"]) .register-field--original input:-webkit-autofill:hover,
.modal-shell:is([data-modal="register"], [data-modal="login"]) .register-field--original input:-webkit-autofill:focus {
    box-shadow: 0 0 0 1000px var(--auth-field-surface) inset !important;
}

.modal-shell:is([data-modal="register"], [data-modal="login"]) .register-field--original .register-field-icon {
    flex: 0 0 22px !important;
    min-height: 0 !important;
    height: auto;
    border-right: 0 !important;
    background: transparent !important;
}

.modal-shell:is([data-modal="register"], [data-modal="login"]) .register-field-icon svg,
.modal-shell:is([data-modal="register"], [data-modal="login"]) .register-field-suffix svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.modal-shell:is([data-modal="register"], [data-modal="login"]) .register-field--original input {
    min-height: 56px !important;
    padding: 0 !important;
    /* At least 16px prevents Safari from zooming the form when typing. */
    font-size: clamp(16px, 4.2vw, 18px) !important;
    font-weight: 700 !important;
    letter-spacing: 0;
}

.modal-shell:is([data-modal="register"], [data-modal="login"]) .register-field-suffix {
    position: static;
    right: auto !important;
    transform: none;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    touch-action: manipulation;
}

.modal-shell:is([data-modal="register"], [data-modal="login"]) .register-password-slash {
    display: none;
}

.modal-shell:is([data-modal="register"], [data-modal="login"]) [aria-pressed="true"] .register-password-slash {
    display: initial;
}

.modal-shell:is([data-modal="register"], [data-modal="login"]) .modal-primary--register-original {
    min-height: 58px;
    border-radius: 16px;
    padding: 12px 18px 16px;
    font-size: 17px;
    letter-spacing: 0.06em;
    box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.18);
    touch-action: manipulation;
}

.modal-shell:is([data-modal="register"], [data-modal="login"]) .modal-primary--register-original:active {
    transform: translateY(2px);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.18);
}

/* Only the signup CTA breathes; transforms do not move the surrounding form. */
.modal-shell[data-modal="register"] .modal-primary--register-original {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    animation: auth-signup-pulse 2.1s ease-in-out infinite;
    transform-origin: center;
}

/* A clipped reflection travels beneath the label, without intercepting taps. */
.modal-shell[data-modal="register"] .modal-primary--register-original::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -40%;
    left: 0;
    width: 42%;
    height: 180%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16) 25%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0.16) 75%, transparent);
    opacity: 0;
    transform: translateX(-150%) skewX(-20deg);
    animation: auth-signup-shine 4.2s ease-in-out infinite;
}

@keyframes auth-signup-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.025); }
}

@keyframes auth-signup-shine {
    0%, 12% { transform: translateX(-150%) skewX(-20deg); opacity: 0; }
    18% { opacity: 1; }
    40% { opacity: 1; }
    48%, 100% { transform: translateX(350%) skewX(-20deg); opacity: 0; }
}

.modal-shell[data-modal="register"] .modal-primary--register-original:is(:active, :focus-visible, :disabled, [aria-busy="true"]) {
    animation: none;
}

.modal-shell[data-modal="register"] .modal-primary--register-original:is(:active, :focus-visible, :disabled, [aria-busy="true"])::after {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .modal-shell[data-modal="register"] .modal-primary--register-original,
    .modal-shell[data-modal="register"] .modal-primary--register-original::after {
        animation: none;
    }
}

.modal-shell:is([data-modal="register"], [data-modal="login"]) .register-terms--original {
    margin: 6px 2px 8px;
    line-height: 1.45;
}

.modal-shell:is([data-modal="register"], [data-modal="login"]) .register-login-copy--original {
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.4;
}

@media (max-width: 520px) {
    .modal-shell:is([data-modal="register"], [data-modal="login"]) .modal-card--register {
        padding: 22px 16px;
        border-radius: 28px;
    }

    .modal-shell:is([data-modal="register"], [data-modal="login"]) .register-field--original {
        min-height: 54px !important;
        gap: 10px !important;
        padding-inline: 12px !important;
        border-radius: 16px !important;
    }

    .modal-shell:is([data-modal="register"], [data-modal="login"]) .register-field--original input {
        min-height: 52px !important;
    }
}

@media (max-width: 520px) and (max-height: 700px) {
    .modal-shell:is([data-modal="register"], [data-modal="login"]) .modal-card--register {
        padding: 16px 14px;
    }

    .modal-shell:is([data-modal="register"], [data-modal="login"]) .modal-brand-lockup--register-original {
        margin: 0 0 14px;
    }

    .modal-shell:is([data-modal="register"], [data-modal="login"]) .modal-brand-lockup--register-original img {
        width: 130px;
        max-width: 48%;
    }

    .modal-shell:is([data-modal="register"], [data-modal="login"]) .register-modal-form--original {
        gap: 10px;
    }

    .modal-shell:is([data-modal="register"], [data-modal="login"]) .register-field--original {
        min-height: 50px !important;
    }

    .modal-shell:is([data-modal="register"], [data-modal="login"]) .register-field--original input {
        min-height: 48px !important;
    }

    .modal-shell:is([data-modal="register"], [data-modal="login"]) .modal-primary--register-original {
        min-height: 52px;
    }

    .modal-shell:is([data-modal="register"], [data-modal="login"]) .register-terms--original {
        margin: 4px 2px;
    }

    .modal-shell:is([data-modal="register"], [data-modal="login"]) .register-login-copy--original {
        margin-top: 10px;
    }
}