/* ═══════════════════════════════════════════════════════════════
   appbar.css — barra inferior de download, no estilo das navbars
   flutuantes do iOS.

   Compartilhada entre /sondar/ e /fds/: nenhuma regra aqui pode
   depender de classe específica de uma das duas páginas. O markup é
   montado por /assets/appbar.js, que escolhe a loja pelo aparelho.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* Altura da barra (60px) mais o respiro que ela guarda até o fim
       da tela — é o que o corpo da página precisa reservar embaixo. */
    --appbar-altura: 84px;
}

/* A barra vale onde o header não tem os botões de loja: até 900px,
   nas duas páginas. O mesmo número está em appbar.js. */
@media (max-width: 900px) {

    /* Espaço para a barra não cobrir o fim da página. */
    body.tem-appbar {
        padding-bottom: calc(var(--appbar-altura) + env(safe-area-inset-bottom, 0px));
    }

    /* E para não cobrir o que recebe foco: quem navega por teclado
       ficava com o campo ou o link escondido atrás da barra. */
    html:has(> body.tem-appbar) {
        scroll-padding-bottom: calc(var(--appbar-altura) + 8px + env(safe-area-inset-bottom, 0px));
    }
}

.appbar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 18px;
    /* O resto do site é 8px. Numa barra de 60px de altura o 8px cravado
       lê quase quadrado, então 12px é o ponto que mantém cara de barra
       sem destoar do vocabulário das outras superfícies. */
    border-radius: 12px;
    background: var(--primary-color, #522FCB);
    box-shadow: 0 8px 24px rgba(15, 15, 15, .28);
    font-family: var(--font-family, 'Lato', sans-serif);
    /* Entra depois que a página assenta, para não competir com o
       carregamento nem empurrar nada durante a primeira pintura. */
    transform: translate3d(0, calc(100% + 16px), 0);
    opacity: 0;
    transition: transform 420ms cubic-bezier(.2, .8, .2, 1),
        opacity 420ms cubic-bezier(.2, .8, .2, 1);
}

@media (max-width: 900px) {
    .appbar {
        display: flex;
    }
}

/* Em tela mais larga que um celular em pé, a barra de ponta a ponta
   vira uma faixa esticada. Ela fica do tamanho de celular, centrada. */
@media (min-width: 481px) and (max-width: 900px) {
    .appbar {
        max-width: 456px;
        margin: 0 auto;
    }
}

.appbar.appbar-visivel {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

.appbar-texto {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}

.appbar-lojas {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* A imagem da loja já é o botão inteiro, com fundo e contorno
   próprios. Qualquer fundo aqui vira uma moldura branca em volta. */
.appbar-btn {
    display: inline-flex;
    align-items: center;
    /* Sem fundo, o alvo de toque precisa vir da própria altura: 44px
       de área com a imagem de 34px centralizada dentro. */
    min-height: 44px;
    transition: transform 160ms cubic-bezier(.2, .8, .2, 1);
}

.appbar-btn:active {
    transform: scale(.96);
}

.appbar-img {
    height: 34px;
    width: auto;
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .appbar {
        transition-duration: .01ms;
    }
}