/* Backlog item 7: barra fixa de compra no mobile (resources/views/produtos/detalhe.blade.php).
   So existe abaixo do breakpoint lg (classe `d-lg-none` no HTML cuida disso) -- os botoes de
   compra normais, no fluxo da pagina, ja ficam visiveis no primeiro scroll em telas maiores,
   entao a barra fixa e redundante la.
   position:fixed depende do mesmo ajuste de altura documentado em cores-publico.css (override de
   `html body { height: auto; min-height: 100% }`, que desfaz o `height:100%` que o Vuexy
   vendorizado trava no body) -- sem aquele fix, position:fixed/sticky quebra do mesmo jeito que
   quebrava no header sticky. Nao duplicado aqui, so depende dele (cores-publico.css carrega em
   todas as paginas publicas via layouts/app.blade.php, antes deste arquivo). */
.barra-fixa-compra-mobile {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1020; /* mesmo z-index do .sticky-top do Bootstrap (navbar) -- nao competem entre si
                       porque ficam em pontas opostas da tela, mas ficam acima do conteudo normal
                       e abaixo de modais/offcanvas do Bootstrap (1045+). */
    height: 72px;
    padding: 0 1rem;
    padding-bottom: env(safe-area-inset-bottom, 0px); /* notch/home indicator em iOS */
    background: #fff;
    border-top: 1px solid #dbdade;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
}

/* Reserva de espaco no FIM da pagina, depois do rodape: sem isso, a ultima fatia do rodape
   (partials/footer.blade.php, renderizado por layouts/app.blade.php DEPOIS do conteudo desta
   view) ficaria coberta pela barra fixa ao rolar ate o final -- confirmado com Playwright
   (elementFromPoint + bounding boxes) que a linha "Desenvolvido por..." ficava por baixo da
   barra mesmo com um espacador dentro do conteudo da pagina, porque esse espacador so empurra o
   rodape pra baixo, ele nao impede que os ultimos 72px do DOCUMENTO (que passam a ser o proprio
   rodape) fiquem atras da barra. A solucao e dar folga depois do rodape mesmo, via padding-bottom
   no body -- so nesta pagina (arquivo carregado so aqui) e so no mobile (mesmo breakpoint da
   barra). */
@media (max-width: 991.98px) {
    body {
        padding-bottom: 72px;
    }
}

.barra-fixa-compra-preco {
    min-width: 0; /* permite o texto truncar em vez de empurrar o botao pra fora da tela */
    overflow: hidden;
    white-space: nowrap;
}

.barra-fixa-compra-preco .preco-cartao-riscado {
    font-size: .75rem;
}

.barra-fixa-compra-preco .preco-pix-destaque {
    font-size: .95rem;
}

/* Achado durante verificacao visual (Playwright, item 7): o aviso de cookies
   (partials/cookie-consent.blade.php, #aviso-cookies) tambem usa `.fixed-bottom` do Bootstrap,
   com z-index:1030 -- maior que o da nossa barra (1020) -- entao ficava por cima do botao
   "Comprar agora" ate o visitante aceitar os cookies, tornando o botao inclicavel (confirmado via
   hit-test/elementFromPoint, nao so inspecao visual). Como este CSS so carrega na pagina de
   produto (via @push('head') em detalhe.blade.php), a regra abaixo nao afeta o aviso de cookies
   em nenhuma outra pagina do site -- so aqui, so no mobile (mesmo breakpoint da barra, `d-lg-none`
   = Bootstrap lg = 992px), empurra o aviso pra cima da barra fixa em vez de deixar as duas
   disputarem o mesmo espaco. */
@media (max-width: 991.98px) {
    #aviso-cookies {
        bottom: 72px;
    }
}