/* ============================================================================
   cookies.css — banner de autorização de cookies
   ----------------------------------------------------------------------------
   Faixa presa ao rodapé da janela, na mesma linguagem das caixas escuras do
   site (#111 sobre #080808, borda a 10% de branco, raio de 14px) — é a mesma
   receita do card do consultor da obrigado.html.

   NÃO é modal: não escurece a página nem prende o foco. O conteúdo continua
   legível e navegável sem decidir nada, que é o comportamento correto para um
   aviso de cookies — bloquear a leitura para forçar o aceite é dark pattern.

   Os dois botões têm o MESMO peso visual. "Recusar" escondido ou apagado é
   justamente o que a LGPD e as autoridades europeias tratam como consentimento
   viciado.

   ARMADILHA DO BUILD (mesma do form.css): o preflight do Tailwind zera
   padding, margin, border e background de button com especificidade (4,0,1).
   Toda regra dessas propriedades aqui precisa de !important.
   ========================================================================== */

.ck-banner {
  position: fixed;
  z-index: 60;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 720px;
  margin: 0 auto !important;
  padding: 16px 18px !important;
  border-radius: 14px;
  border: 1px solid var(--card-borda) !important;
  background: var(--card-bg);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  animation: ck-entra 0.28s ease both;
}

/* display:none próprio: sem isto o display:flex acima venceria o [hidden] e o
   banner continuaria na tela depois da decisão. */
.ck-banner[hidden] {
  display: none;
}

@keyframes ck-entra {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ck-banner {
    animation: none;
  }
}

.ck-banner__txt {
  margin: 0 !important;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.55) !important;
}

.ck-banner__link {
  color: #ffffff !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ck-banner__acoes {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ck-btn {
  border-radius: 12px !important;
  padding: 9px 18px !important;
  border: 1px solid transparent !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ck-btn--cheio {
  background-color: #ffffff !important;
  color: #080808 !important;
}

.ck-btn--cheio:hover {
  background-color: rgba(255, 255, 255, 0.88) !important;
}

.ck-btn--vazio {
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.ck-btn--vazio:hover {
  border-color: rgba(255, 255, 255, 0.4) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Em telas estreitas o texto e os botões empilham; os botões dividem a linha
   em duas metades iguais — de novo, mesmo peso para as duas opções. */
@media (max-width: 639px) {
  .ck-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .ck-banner__acoes {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .ck-btn {
    width: 100%;
  }
}