/* App instalável e notificações — banners deslizantes do rodapé (modelo da Escalando).
   .notif-ativar-banner  → convite para ativar o push (js/notificacao-prompt.js)
   .pwa-instalar-banner  → instalar o app / instrução do iPhone (js/pwa.js)
   Incluído pelo _pwaHead.cshtml em todos os layouts; autocontido (não depende do tema). */

.notif-ativar-banner,
.pwa-instalar-banner {
    position: fixed;
    left: 50%;
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    z-index: 1080;
    width: max-content;
    max-width: min(480px, calc(100vw - 1.5rem));
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .9rem 1.1rem;
    border-radius: 14px;
    background: linear-gradient(87deg, #0A3543 0, #144B60 100%);
    color: #fff;
    font-family: inherit;
    box-shadow: 0 16px 40px rgba(10, 30, 49, .3);
    opacity: 0;
    transform: translateX(-50%) translateY(calc(100% + 1.5rem));
    transition: transform .32s ease, opacity .32s ease;
}

.notif-ativar-banner--visivel,
.pwa-instalar-banner--visivel {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.notif-ativar-banner__icone,
.pwa-instalar-banner__icone {
    flex: 0 0 auto;
    display: inline-flex;
    font-size: 1.6rem;
    line-height: 1;
}

.pwa-instalar-banner__icone img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.notif-ativar-banner__texto,
.pwa-instalar-banner__texto {
    flex: 1;
    font-size: .9rem;
    line-height: 1.4;
}

.pwa-instalar-banner__texto .ph {
    vertical-align: -2px;
}

.notif-ativar-banner__acoes,
.pwa-instalar-banner__acoes {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .75rem;
}

.notif-ativar-banner__btn,
.pwa-instalar-banner__btn {
    border: 0;
    border-radius: .5rem;
    padding: .5rem 1.25rem;
    background: #fff;
    color: #0A3543;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s ease;
}

.notif-ativar-banner__btn:hover,
.pwa-instalar-banner__btn:hover { opacity: .9; }

.notif-ativar-banner__btn:disabled { opacity: .6; cursor: default; }

.notif-ativar-banner__fechar,
.pwa-instalar-banner__fechar {
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .75);
    font-size: 1.5rem;
    line-height: 1;
    padding: 0 .25rem;
    cursor: pointer;
}

.notif-ativar-banner__fechar:hover,
.pwa-instalar-banner__fechar:hover { color: #fff; }

@media (max-width: 575.98px) {
    .notif-ativar-banner,
    .pwa-instalar-banner {
        flex-wrap: wrap;
        width: calc(100vw - 1.5rem);
    }

    /* Ícone + texto na primeira linha; botões na linha de baixo, à direita. Sem botão de ação
       (instrução do iPhone), o "fechar" fica na mesma linha do texto. */
    .notif-ativar-banner__texto,
    .pwa-instalar-banner__texto { flex: 1 1 0; min-width: 0; }

    .notif-ativar-banner__acoes,
    .pwa-instalar-banner__acoes:has(.pwa-instalar-banner__btn) {
        flex: 1 0 100%;
        justify-content: flex-end;
    }
}