/* Banner de cookies próprio — ver includes/components/banner-cookies.php
   Layout "faixa fina, empilhada" (Opção B, aprovada 10/09/2026): no celular a
   barra do WhatsApp ocupa a largura toda do rodapé, então este banner sobe e
   fica ACIMA dela em vez de cobri-la. No desktop, o círculo do WhatsApp fica
   isolado no canto (20px+60px), então o banner só precisa não avançar sobre
   essa faixa — sem precisar subir. Por isso nenhum dos dois nunca escondem
   um ao outro: não sobra script para coordenar quem aparece por cima. */
.cc-banner{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:2147483000;
  max-width:460px;
  background:#00565C;color:#fff;
  border-radius:12px;
  box-shadow:0 10px 34px rgba(0,0,0,.28);
  padding:12px 14px;
  font-family:inherit;
  opacity:0;transform:translateY(12px);
  transition:opacity .25s ease,transform .25s ease;
  pointer-events:none;
}
.cc-banner.cc-ver{opacity:1;transform:none;pointer-events:auto}
.cc-caixa{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cc-texto{margin:0;font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.92);flex:1 1 180px;min-width:0}
.cc-texto a{display:inline;color:#fff;text-decoration:underline}
.cc-botoes{display:flex;gap:8px;flex:0 0 auto}
.cc-btn{
  border:none;border-radius:8px;padding:7px 12px;
  font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:opacity .15s;
}
.cc-btn:hover{opacity:.88}
.cc-rejeitar{background:rgba(255,255,255,.14);color:#fff}
.cc-aceitar{background:#25D366;color:#00302f}

/* Desktop: o círculo do WhatsApp vive em right:20px, 60px de diâmetro — o
   banner para 30px antes disso (110px de folga) para nunca encostar nele. */
@media(min-width:641px){
  .cc-banner{right:110px}
}

/* Celular: a barra do WhatsApp vira uma faixa horizontal em bottom:16px,
   56px de altura (topo em ~72px). O banner sobe para bottom:82px — 10px de
   respiro acima dela — e vira uma faixa fina, com texto e botões empilhados. */
@media(max-width:640px){
  .cc-banner{left:12px;right:12px;bottom:82px;max-width:none;padding:10px 12px}
  .cc-caixa{flex-direction:column;align-items:stretch;gap:8px}
  /* flex-basis é largura em row (desktop) mas vira ALTURA em column — sem
     resetar aqui, os 180px do desktop esticavam o texto verticalmente. */
  .cc-texto{font-size:12px;flex:1 1 auto}
  .cc-botoes{justify-content:stretch}
  .cc-btn{flex:1;padding:8px 10px}
}