/* V6.2.4 — LOGIN NO PWA IGUAL AO LOGIN DO NAVEGADOR
   Este arquivo só altera a tela de login quando o app está instalado. */

@media (display-mode: standalone), (display-mode: fullscreen) {

    html{
        height:100%!important;
        min-height:100%!important;
    }

    body.page-login{
        width:100%!important;
        height:100dvh!important;
        min-height:100dvh!important;
        max-height:100dvh!important;
        margin:0!important;
        padding:0!important;
        overflow:hidden!important;

        display:flex!important;
        flex-direction:column!important;

        background:#f5f5f8!important;
    }

    /* Topo igual ao acesso pelo navegador */
    body.page-login > .app-header{
        position:relative!important;
        top:auto!important;
        flex:0 0 auto!important;
        width:100%!important;
    }

    /* Não existe menu inferior para visitante na tela de login. */
    body.page-login > .bottom-nav{
        display:none!important;
    }

    /* Espaço entre topo e rodapé. O card permanece centralizado. */
    body.page-login > .raffle-auth-page{
        flex:1 1 0!important;
        width:100%!important;
        min-height:0!important;
        height:auto!important;
        max-height:none!important;

        margin:0!important;
        padding:8px 10px!important;

        display:grid!important;
        place-items:center!important;
        align-content:center!important;

        overflow:hidden!important;
    }

    body.page-login .raffle-auth-card{
        width:min(100%,500px)!important;
        max-height:100%!important;

        margin:auto!important;
        align-self:center!important;
        justify-self:center!important;

        overflow:hidden!important;
    }

    /* Apenas telas excepcionalmente baixas podem ajustar o conteúdo interno,
       sem mover topo ou rodapé. */
    body.page-login .raffle-auth-form{
        max-height:100%!important;
        overflow:auto!important;
        scrollbar-width:none!important;
    }

    body.page-login .raffle-auth-form::-webkit-scrollbar{
        width:0!important;
        height:0!important;
        display:none!important;
    }

    /* A V6.2.2 usa o rodapé v621.
       No PWA ele deve continuar visível na tela de login,
       já que esta página não possui o menu inferior fixo. */
    body.page-login > .mz-footer-v621{
        display:block!important;
        visibility:visible!important;
        opacity:1!important;

        flex:0 0 auto!important;
        width:100%!important;

        margin:0!important;
    }
}

@media (display-mode: standalone) and (max-width:700px),
       (display-mode: fullscreen) and (max-width:700px) {

    body.page-login > .raffle-auth-page{
        padding:7px 8px!important;
    }

    body.page-login .raffle-auth-card{
        width:min(100%,460px)!important;
    }
}

/* Fallback usado pelo app.js de versões anteriores para iOS/standalone. */
html.pwa-standalone body.page-login,
body.page-login.pwa-standalone{
    width:100%!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
}

html.pwa-standalone body.page-login > .app-header,
body.page-login.pwa-standalone > .app-header{
    position:relative!important;
    flex:0 0 auto!important;
}

html.pwa-standalone body.page-login > .raffle-auth-page,
body.page-login.pwa-standalone > .raffle-auth-page{
    flex:1 1 0!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:8px!important;
    display:grid!important;
    place-items:center!important;
    overflow:hidden!important;
}

html.pwa-standalone body.page-login > .mz-footer-v621,
body.page-login.pwa-standalone > .mz-footer-v621{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    flex:0 0 auto!important;
    margin:0!important;
}