/* VoucherGratis Patch 032d — Login & Authentication refinement
 * Restores a centered mobile card while keeping P3 compact enterprise polish.
 * Also provides auth-mail related visual consistency hooks only; no transactional auth changes here.
 */

@media (max-width: 639px) {
    html,
    body.vg-body {
        min-height: 100%;
        background: var(--vg-bg, #F6F8FB);
    }

    .vg-auth {
        position: relative;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: max(64px, calc(env(safe-area-inset-top) + 54px)) 16px max(28px, calc(env(safe-area-inset-bottom) + 20px));
        overflow: visible;
        background: var(--vg-bg, #F6F8FB);
    }

    @supports (min-height: 100dvh) {
        .vg-auth {
            min-height: 100dvh;
        }
    }

    .vg032c-auth-card {
        width: min(100%, 420px);
        min-height: 0;
        display: block;
        margin-block: auto;
        border: 1px solid var(--vg-border, #E2E8F0);
        border-radius: 18px;
        background: var(--vg-surface, #FFFFFF);
        box-shadow: 0 18px 46px rgba(15, 23, 42, .10);
        padding: 22px 20px;
    }

    .vg032c-auth-card::before {
        display: block;
        left: 20px;
        right: 20px;
    }

    [data-theme="dark"] .vg032c-auth-card {
        background: var(--vg-surface, #101827);
        border-color: var(--vg-border, #273449);
        box-shadow: 0 20px 50px rgba(0, 0, 0, .30);
    }

    .vg-auth__brand {
        justify-content: center;
        margin-bottom: 20px;
        padding-right: 0;
    }

    .vg-auth__brand .vg-logo--lg {
        width: 154px;
    }

    .vg-auth__header {
        margin-bottom: 20px;
        text-align: center;
    }

    .vg-auth__header p {
        margin-inline: auto;
        max-width: 340px;
    }

    .vg032a-auth-install__copy {
        margin-inline: auto;
        text-align: center;
    }

    .vg-auth__tagline {
        position: static;
        width: 100%;
        margin: 18px auto 0;
        padding: 0 8px;
        text-align: center;
    }
}

/* On short screens, keep the full auth flow scroll-safe rather than clipping a tall card. */
@media (max-width: 639px) and (max-height: 680px) {
    .vg-auth {
        justify-content: flex-start;
        padding-top: max(58px, calc(env(safe-area-inset-top) + 48px));
    }

    .vg032c-auth-card {
        margin-block: 0;
    }
}