/* BASAK_PATCH_064 — login screen responsive hardening. */
html, body { max-width: 100%; }
body { min-height: 100dvh; overflow-x: hidden; }
.login-pref-switches button,
.submit,
.field input { touch-action: manipulation; }

@media (max-width: 980px) {
    body {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        padding-top: calc(58px + env(safe-area-inset-top, 0px));
    }

    .login-pref-switches {
        position: fixed !important;
        z-index: 50 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        min-height: calc(58px + env(safe-area-inset-top, 0px));
        padding: calc(9px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 9px max(12px, env(safe-area-inset-left, 0px)) !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        background: rgba(247,245,240,.96) !important;
        border-bottom: 1px solid #e0dbd3;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .login-lang-switch,
    .login-currency-switch {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: stretch !important;
    }
    .login-lang-switch button,
    .login-currency-switch button {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        height: 34px !important;
        padding-inline: 4px !important;
    }

    .side {
        min-height: 190px !important;
        padding: 30px max(22px, env(safe-area-inset-right, 0px)) 28px max(22px, env(safe-area-inset-left, 0px)) !important;
    }
    .side > div { width: min(560px, 100%) !important; }
    .logo-shell { width: 64px !important; min-width: 64px !important; height: 86px !important; border-radius: 16px !important; }
    .login-logo { width: 50px !important; height: 73px !important; }
    .wordmark { gap: 16px !important; }
    .wordmark-copy strong { font-size: clamp(34px, 8vw, 52px) !important; line-height: .94 !important; }
    .wordmark-copy small { margin-top: 9px !important; font-size: 9px !important; letter-spacing: .42em !important; }
    .side p { max-width: 520px !important; margin-top: 14px !important; font-size: 14px !important; line-height: 1.5 !important; }

    .auth-wrap {
        width: 100% !important;
        min-width: 0 !important;
        padding: 32px max(22px, env(safe-area-inset-right, 0px)) calc(34px + env(safe-area-inset-bottom, 0px)) max(22px, env(safe-area-inset-left, 0px)) !important;
        place-items: start center !important;
    }
    .auth-card { width: min(460px, 100%) !important; min-width: 0 !important; }
    .back { margin-bottom: 24px !important; }
    .auth-card h1 { font-size: clamp(34px, 9vw, 44px) !important; line-height: 1 !important; }
    .muted { line-height: 1.5 !important; }

    .field input {
        width: 100% !important;
        min-width: 0 !important;
        height: 50px !important;
        font-size: 16px !important;
    }
    .submit { min-height: 50px !important; }
}

@media (max-width: 520px) {
    body { padding-top: calc(56px + env(safe-area-inset-top, 0px)); }
    .login-pref-switches {
        min-height: calc(56px + env(safe-area-inset-top, 0px));
        padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
        gap: 6px !important;
    }
    .login-lang-switch,
    .login-currency-switch { padding: 3px !important; border-radius: 9px !important; }
    .login-lang-switch button,
    .login-currency-switch button { height: 32px !important; font-size: 9px !important; }

    .side { min-height: 145px !important; padding: 22px 18px !important; }
    .logo-shell { width: 50px !important; min-width: 50px !important; height: 68px !important; border-radius: 13px !important; }
    .login-logo { width: 40px !important; height: 58px !important; }
    .wordmark { gap: 12px !important; }
    .wordmark-copy strong { font-size: clamp(27px, 9vw, 36px) !important; }
    .wordmark-copy small { margin-top: 7px !important; font-size: 7px !important; letter-spacing: .36em !important; }
    .side p { display: none !important; }

    .auth-wrap {
        padding: 25px max(16px, env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)) !important;
    }
    .back { margin-bottom: 20px !important; }
    .eyebrow { font-size: 10px !important; }
    .auth-card h1 { margin: 8px 0 !important; }
    .field { margin-top: 15px !important; }
    .error, .alert { overflow-wrap: anywhere; }
}

@media (max-width: 360px) {
    .login-pref-switches { grid-template-columns: 1fr 1fr !important; }
    .login-lang-switch button,
    .login-currency-switch button { padding-inline: 2px !important; font-size: 8.5px !important; }
    .side { min-height: 128px !important; }
    .wordmark-copy strong { font-size: 25px !important; }
    .auth-wrap { padding-inline: 13px !important; }
}

@media (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
    body { grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr) !important; grid-template-rows: 1fr !important; }
    .side { min-height: 100% !important; padding: 24px !important; }
    .side p { display: none !important; }
    .wordmark { align-items: center !important; }
    .wordmark-copy strong { font-size: 30px !important; }
    .auth-wrap { height: calc(100dvh - 58px - env(safe-area-inset-top, 0px)); overflow-y: auto; padding: 20px 24px 24px !important; }
    .back { margin-bottom: 14px !important; }
    .field { margin-top: 12px !important; }
}