/* Customer login — mobile (≤900px) */

@media (max-width: 900px) {
    body.customer-ui-new.customer-login-new {
        overflow: auto;
    }

    body.customer-ui-new.customer-login-new .customer-auth-panel {
        min-height: 100vh;
        min-height: 100dvh;
        padding:
            max(14px, env(safe-area-inset-top, 0px))
            max(16px, env(safe-area-inset-right, 0px))
            max(36px, calc(env(safe-area-inset-bottom, 0px) + 24px))
            max(16px, env(safe-area-inset-left, 0px));
        border: 0;
        box-shadow: none;
    }

    body.customer-ui-new.customer-login-new .customer-auth-masthead {
        position: sticky;
        top: 0;
        z-index: 40;
        width: min(100%, 560px);
        min-height: 56px;
        margin-inline: auto;
        padding-bottom: 10px;
    }

    body.customer-ui-new.customer-login-new .customer-auth-brand {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
        max-width: calc(100% - 104px);
    }

    body.customer-ui-new.customer-login-new .customer-auth-brand img {
        max-width: min(148px, 40vw);
        max-height: 48px;
        height: auto;
    }

    body.customer-ui-new.customer-login-new .customer-auth-toolbar {
        flex-shrink: 0;
        gap: 8px;
    }

    body.customer-ui-new.customer-login-new .customer-auth-theme-btn {
        width: 42px;
        min-width: 42px;
        height: 42px;
    }

    body.customer-ui-new.customer-login-new .customer-auth-language-button {
        min-width: 72px;
        min-height: 42px;
        padding-inline: 9px;
    }

    body.customer-ui-new.customer-login-new .customer-auth-language-menu {
        position: fixed;
        top: calc(58px + env(safe-area-inset-top, 0px));
        right: 16px;
        left: 16px;
        width: auto;
        max-height: calc(100dvh - 96px);
    }

    body.customer-ui-new.customer-login-new .customer-auth-content {
        width: min(100%, 560px);
        margin: 16px auto 12px;
    }

    body.customer-ui-new.customer-login-new .customer-auth-intro {
        margin-bottom: 16px;
    }

    body.customer-ui-new.customer-login-new .customer-auth-intro h1 {
        font-size: clamp(30px, 8.2vw, 40px);
        line-height: 0.96;
    }

    body.customer-ui-new.customer-login-new .customer-auth-intro p {
        margin-top: 10px;
        font-size: 13px;
        line-height: 1.5;
    }

    body.customer-ui-new.customer-login-new .customer-auth-card {
        padding: 20px 18px;
        backdrop-filter: blur(18px) saturate(1.15);
        -webkit-backdrop-filter: blur(18px) saturate(1.15);
        border-radius: var(--new-radius-lg);
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
    }

    body.customer-ui-new.customer-login-new .customer-auth-submit {
        min-height: 52px;
    }

    body.customer-ui-new.customer-login-new .customer-auth-register {
        margin-top: 18px;
        padding-top: 16px;
        justify-content: center;
        text-align: center;
    }

    body.customer-ui-new.customer-login-new .customer-auth-register-link {
        margin: 2px 0 2px 4px;
    }

    body.customer-ui-new.customer-login-new .customer-auth-footer {
        width: min(100%, 560px);
        margin-inline: auto;
        padding-top: 4px;
    }

    body.customer-ui-new.customer-login-new .customer-auth-footer .classic-auth-footer {
        font-size: 10px;
        line-height: 1.45;
        text-align: center;
    }

    body.customer-ui-new.customer-login-new .customer-auth-footer .new-auth-maker,
    body.customer-ui-new.customer-login-new .classic-login-maker {
        justify-content: center;
        gap: 8px;
        margin-top: 10px;
        padding-top: 12px;
    }

    body.customer-ui-new.customer-login-new .customer-auth-footer .new-auth-maker img,
    body.customer-ui-new.customer-login-new .classic-login-maker img,
    body.customer-ui-new.customer-login-new .customer-auth-footer .new-auth-maker-product img,
    body.customer-ui-new.customer-login-new .customer-auth-footer .new-auth-maker-company img {
        max-width: 88px;
        height: 18px;
        min-height: 18px;
    }

    body.customer-ui-new.customer-login-new .customer-auth-footer .new-auth-maker-company img,
    body.customer-ui-new.customer-login-new .classic-login-maker-company img {
        max-width: 74px;
        height: 16px;
        min-height: 16px;
    }

    body.customer-ui-new.customer-login-new .customer-auth-hero {
        display: none;
    }
}

@media (max-width: 480px) {
    body.customer-ui-new.customer-login-new .customer-auth-intro h1 {
        font-size: clamp(28px, 9vw, 34px);
    }

    body.customer-ui-new.customer-login-new .customer-auth-options {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    body.customer-ui-new.customer-login-new .customer-auth-link {
        align-self: flex-start;
    }

    body.customer-ui-new.customer-login-new .customer-auth-language-code {
        display: none;
    }

    body.customer-ui-new.customer-login-new .customer-auth-language-button {
        min-width: 42px;
        padding-inline: 10px;
    }
}

@media (max-width: 900px) and (max-height: 700px) {
    body.customer-ui-new.customer-login-new .customer-auth-content {
        margin-block: 12px 10px;
    }

    body.customer-ui-new.customer-login-new .customer-auth-intro {
        margin-bottom: 12px;
    }
}

html[data-theme='light'] body.customer-ui-new.customer-login-new .customer-auth-card {
    background: rgba(255, 255, 255, 0.9);
}

/*
 * Narrow CSS viewports (including a 390px device at 200% browser zoom).
 * Keep the login/recovery shell shrinkable without changing the register
 * route's independent composition.
 */
@media (max-width: 900px) {
    body.customer-ui-new.customer-login-new:not(.new-auth-v2--register) {
        min-width: 0;
        overflow-x: auto;
    }

    body.customer-ui-new.customer-login-new:not(.new-auth-v2--register) .customer-auth-shell,
    body.customer-ui-new.customer-login-new:not(.new-auth-v2--register) .customer-auth-panel,
    body.customer-ui-new.customer-login-new:not(.new-auth-v2--register) .customer-auth-masthead,
    body.customer-ui-new.customer-login-new:not(.new-auth-v2--register) .customer-auth-content,
    body.customer-ui-new.customer-login-new:not(.new-auth-v2--register) .customer-auth-footer {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
}

@media (max-width: 360px) {
    body.customer-ui-new.customer-login-new:not(.new-auth-v2--register) .customer-auth-panel {
        padding-inline: 12px;
    }

    body.customer-ui-new.customer-login-new:not(.new-auth-v2--register) .customer-auth-masthead {
        gap: 8px;
    }

    body.customer-ui-new.customer-login-new:not(.new-auth-v2--register) .customer-auth-brand {
        flex: 1 1 0%;
        max-width: calc(100% - 88px);
    }

    body.customer-ui-new.customer-login-new:not(.new-auth-v2--register) .customer-auth-brand img {
        width: auto;
        max-width: 100%;
        max-height: 36px;
    }

    body.customer-ui-new.customer-login-new:not(.new-auth-v2--register) .customer-auth-toolbar {
        gap: 4px;
    }

    body.customer-ui-new.customer-login-new:not(.new-auth-v2--register) .customer-auth-theme-btn {
        width: 36px;
        min-width: 36px;
        height: 36px;
    }

    body.customer-ui-new.customer-login-new:not(.new-auth-v2--register) .customer-auth-language-button {
        width: 40px;
        min-width: 40px;
        height: 36px;
        min-height: 36px;
        gap: 0;
        padding-inline: 0;
    }

    body.customer-ui-new.customer-login-new:not(.new-auth-v2--register) .customer-auth-language-code,
    body.customer-ui-new.customer-login-new:not(.new-auth-v2--register) .customer-auth-language-chevron {
        display: none;
    }

    body.customer-ui-new.customer-login-new:not(.new-auth-v2--register) .customer-auth-language-menu {
        right: 12px;
        left: 12px;
        width: auto;
        min-width: 0;
        max-width: none;
    }

    body.customer-ui-new.customer-login-new:not(.new-auth-v2--register) .customer-auth-content {
        margin-block: 20px 16px;
    }

    body.customer-ui-new.customer-login-new:not(.new-auth-v2--register) .customer-auth-intro h1 {
        font-size: clamp(28px, 10vw, 36px);
    }

    body.customer-ui-new.customer-login-new:not(.new-auth-v2--register) .customer-auth-card {
        max-width: 100%;
        padding: 16px 12px;
    }

    body.customer-ui-new.customer-login-new:not(.new-auth-v2--register) .customer-auth-input {
        grid-template-columns: 18px minmax(0, 1fr) 36px;
        gap: 6px;
        padding-inline: 8px;
    }

    body.customer-ui-new.customer-login-new:not(.new-auth-v2--register) .customer-auth-eye {
        width: 36px;
        min-width: 36px;
        height: 36px;
        min-height: 36px;
    }

    body.customer-ui-new.customer-login-new:not(.new-auth-v2--register) .customer-auth-submit {
        min-height: 48px;
    }

    body.customer-ui-new.customer-login-new:not(.new-auth-v2--register) .customer-auth-register,
    body.customer-ui-new.customer-login-new:not(.new-auth-v2--register) .customer-auth-footer {
        overflow-wrap: anywhere;
    }
}