/* Public authentication pages. */
.khl-auth-shell,
.khl-auth-site {
    min-height: 100%;
}

@media (max-width: 600px) {
    .khl-auth-shell {
        background: #f8fafc;
    }

    .login-page,
    .auth-page {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding: max(24px, env(safe-area-inset-top)) 14px max(24px, env(safe-area-inset-bottom)) !important;
        align-items: flex-start !important;
        overflow-x: hidden;
    }

    .khangland-login-wrapper,
    .auth-card {
        max-width: 100% !important;
        margin: auto 0;
        padding: 22px 18px !important;
        border-radius: 14px !important;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important;
    }

    .login-page input,
    .auth-page input,
    .login-page button,
    .auth-page button {
        min-height: 46px;
        font-size: 16px !important;
    }

    .auth-tabs {
        margin-bottom: 20px !important;
    }

    .auth-tabs .auth-tab {
        padding: 10px 6px !important;
        font-size: 14px !important;
        line-height: 1.3;
    }

    .auth-phone-row {
        flex-direction: column;
    }

    .auth-phone-row input {
        width: 100%;
    }

    .auth-phone-row button {
        width: 100%;
        white-space: normal !important;
    }

    .auth-form-links {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        text-align: center;
    }

    #auth-otp-modal {
        height: 100dvh !important;
        padding: 14px;
        box-sizing: border-box;
    }

    .auth-otp-dialog {
        max-height: calc(100dvh - 28px);
        padding: 22px 16px !important;
        overflow-y: auto;
        box-sizing: border-box;
    }

    .auth-otp-inputs {
        width: 100%;
        gap: 6px !important;
    }

    .auth-otp-inputs .modal-otp-box {
        width: auto !important;
        min-width: 0;
        max-width: 44px;
        height: 48px !important;
        flex: 1 1 0;
        padding: 0;
    }
}

@media (max-width: 360px) {
    .khangland-login-wrapper,
    .auth-card {
        padding: 20px 14px !important;
    }

    .auth-otp-inputs {
        gap: 4px !important;
    }
}