/* ==========================================================================
   BARRA FIXA DE AÇÃO NO CELULAR (tarefa #21)

   Dois botões colados no fundo da tela: [WhatsApp] e [Ver preços]. Ela
   entra depois que o visitante rola a primeira dobra e sai quando o
   teclado abre.

   Marcação: parts/barra-celular.php
   Lógica:   inc/barra-celular.php
   Script:   assets/js/barra-celular.js

   Onde ela NÃO aparece: na página de hotel, onde a barra do rodapé é a
   pílula de reserva (parts/reserva-pilula.php), que já traz o WhatsApp e
   o "Reservar" na mesma faixa.

   As cores saem dos tokens do tema (style.min.css); os fallbacks existem
   porque a barra também é impressa em páginas que não carregam a folha
   antiga. O verde é o mesmo do botão flutuante (#008749), para os dois
   serem lidos como o mesmo botão em larguras diferentes.
   ========================================================================== */

.qs-bc {
  --qs-bc-verde: #008749;
  --qs-bc-ouro:  var(--yellow, #FBB343);
  --qs-bc-navy:  var(--darkblue, #00457A);

  display: none;
  box-sizing: border-box;
  font-family: 'Montserrat', Arial, sans-serif;
}
.qs-bc *, .qs-bc *::before, .qs-bc *::after { box-sizing: border-box; }

@media (max-width: 680px) {

  .qs-bc {
    position: fixed;
    right: 0; bottom: 0; left: 0;
    display: flex; align-items: center; gap: 8px;
    height: 56px;
    padding: 8px 12px;
    /* o respiro da barra de gestos do iPhone entra por fora dos 56 px */
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid #E2E6EA;
    box-shadow: 0 -2px 14px rgba(0, 0, 0, .12);

    /* mesma altura do botão flutuante que ela substitui: acima da barra
       de reserva (8000) e abaixo do banner de cookies (1000010) */
    z-index: 1000000;

    /* fora da tela até a primeira dobra (assets/js/barra-celular.js) */
    transform: translateY(100%);
    transition: transform .22s ease;
  }

  .qs-bc.is-vista { transform: none; }

  /* O conteúdo não pode terminar embaixo da barra. O espaço é reservado
     desde a carga, e não quando ela aparece: aparecer no meio da rolagem
     não pode empurrar a página que o visitante está lendo. */
  body.qs-tem-barra-cel { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }

  /* O banner de cookies mora no mesmo canto e precisa dos seus botões
     alcançáveis: enquanto a escolha está pendente, a barra não entra. */
  .qs-consent-pendente .qs-bc,
  .qs-consent-pedido   .qs-bc { display: none; }

  /* Painel do WhatsApp aberto: no celular ele abre colado no fundo da
     tela e a barra ficaria por baixo dele, sem serventia nenhuma. */
  .qs-wa-aberto .qs-bc { transform: translateY(100%); }

  /* Teclado aberto: a barra cobriria o campo que está sendo preenchido.
     Quem liga a classe é o visualViewport (assets/js/barra-celular.js) —
     e ela vale também para a faixa fixa da página de hotel. */
  .qs-teclado .qs-bc { transform: translateY(100%); }
  .qs-teclado .reserva-sticky-wrap.qs-fixed { transform: translateY(100%); }
  .reserva-sticky-wrap.qs-fixed { transition: transform .22s ease; }

  /* O painel do botão de WhatsApp se ancora no #qs-whatsapp, que segue no
     lugar de sempre: com a barra em cena ele sobe para não ficar por
     baixo dela. */
  .qs-barra-vista .qs-wa { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }

  .qs-bc-bt {
    flex: 1 1 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-width: 0; height: 40px; padding: 0 12px;
    border: 0; border-radius: 22px;
    font: 700 14px 'Montserrat', Arial, sans-serif;
    text-decoration: none; cursor: pointer;
    -webkit-appearance: none; appearance: none;
  }
  .qs-bc-bt:active { transform: scale(.97); }
  .qs-bc-bt:focus-visible { outline: 3px solid var(--qs-bc-navy); outline-offset: 2px; }

  .qs-bc-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .qs-bc-wa { background: var(--qs-bc-verde); color: #fff; }
  .qs-bc-wa:hover, .qs-bc-wa:focus { color: #fff; }
  .qs-bc-wa-icone { flex: none; width: 19px; height: 19px; }

  .qs-bc-reservar { background: var(--qs-bc-ouro); color: var(--qs-bc-navy); }
  .qs-bc-reservar:hover, .qs-bc-reservar:focus { color: var(--qs-bc-navy); }

  /* De 360 px para cima os dois rótulos cabem lado a lado (164 px cada).
     Abaixo disso o WhatsApp cede a palavra, porque o ícone dele já diz o
     que é — e "Ver preços" não tem ícone que o substitua. */
  @media (max-width: 339px) {
    .qs-bc-wa { flex: none; width: 52px; padding: 0; }
    .qs-bc-wa .qs-bc-texto {
      position: absolute; width: 1px; height: 1px;
      margin: -1px; padding: 0; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .qs-bc { transition: none; }
}