/* =============================================================================
   Grupo Axia · Certificados Digitais
   cookies.css: o aviso de consentimento e o botão que o reabre.

   Mora em css/ e não em assets/ de propósito. O assets/ é a cópia byte a byte
   do site oficial, e este módulo é implementação deste projeto: colocá-lo lá
   faria parecer que veio de lá. O global.css e o footer.css já reservam o
   nome assets/css/cookies.css na ordem de carga; quando o arquivo oficial
   existir, é ele que entra, e este sai.

   Carrega depois do footer.css e antes do CSS específico de cada página.
   ========================================================================== */

/* ------------------------------- O aviso ---------------------------------
   Card no canto de baixo à esquerda, não faixa de borda a borda: a faixa cobre
   conteúdo em telas baixas e o card não.

   O `left` não é um valor fixo: repete a conta da coluna de conteúdo, para o
   card começar na mesma linha vertical em que o texto da página começa, em
   qualquer largura. É o mesmo cálculo da barra de compra.

   Ele entra deslizando de baixo, e o deslocamento vai em `translate` para
   deixar o `transform` livre.

   `hidden` no HTML é o estado de partida: sem JavaScript o aviso nunca aparece,
   e nada na página depende dele para funcionar.
   ------------------------------------------------------------------------ */
.cc {
  position: fixed;
  left: calc(max(0px, (100% - var(--container)) / 2) + var(--pad));
  bottom: 16px;
  z-index: 70;
  /* 100% e não 100vw: o vw inclui a barra de rolagem, o `left` acima não, e
     as duas contas precisam sair da mesma largura para as folgas da esquerda e
     da direita ficarem iguais. */
  width: calc(100% - var(--pad) * 2);
  max-width: 800px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: 0 18px 44px rgb(3 50 35 / 0.16);
  translate: 0 12px;
  opacity: 0;
  transition:
    opacity 0.32s var(--ease-out-soft),
    translate 0.32s var(--ease-out-soft);
}

.cc[hidden] {
  display: none;
}

.cc.is-visivel {
  translate: 0 0;
  opacity: 1;
}

.cc__icone {
  display: inline-flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--icon-soft);
  color: var(--brand-700);
}

.cc__icone svg {
  width: 22px;
  height: 22px;
}

.cc__texto {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  line-height: 20px;
  font-weight: 300;
  color: var(--ink-muted);
}

.cc__texto a {
  font-weight: 500;
  color: var(--brand-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* `flex: 0 0 auto` para os botões não encolherem quando o texto crescer, e
   `align-items: center` no card para eles ficarem no meio da altura do texto,
   e não presos ao topo ou à base. */
.cc__acoes {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

/* Os dois botões têm a mesma largura, a mesma altura e o mesmo peso de
   propósito: recusar não pode ser mais difícil de achar nem de clicar do que
   aceitar. A largura vem do `min-width`, e não do texto, porque "Recusar" e
   "Aceitar" não têm o mesmo número de letras. */
.cc__btn {
  min-width: 96px;
  padding: 9px 16px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.cc__btn--aceitar {
  border: 1px solid var(--brand-700);
  background: var(--brand-700);
  color: #fff;
}

.cc__btn--recusar {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--brand-850);
}

@media (hover: hover) and (pointer: fine) {
  .cc__btn--aceitar:hover {
    background: var(--brand-800);
    border-color: var(--brand-800);
  }

  .cc__btn--recusar:hover {
    border-color: var(--brand-400);
  }
}

/* Abaixo de 620px o card vira coluna: na mesma linha, o texto sobraria numa
   faixa de duas palavras ao lado dos dois botões. O ícone sai junto, porque
   40px mais o intervalo são 15% de uma tela de 360px gastos em enfeite.
   44px é o alvo de toque mínimo; com o padding sozinho o botão fica em 41. */
@media (max-width: 619px) {
  .cc {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .cc__icone {
    display: none;
  }

  .cc__acoes {
    flex: 0 0 auto;
  }

  .cc__btn {
    flex: 1 1 0;
    min-height: 44px;
  }
}

/* Enquanto o aviso está aberto, o suporte flutuante sai da frente: os dois
   moram no mesmo canto de baixo e se sobreporiam. É o que o comentário do
   support-card.css já previa. */
.cc-aberto .support,
.cc-aberto .axia-sup {
  opacity: 0;
  pointer-events: none;
}

/* ------------------- O botão que reabre o aviso --------------------------
   Fica na coluna Privacidade do rodapé, ao lado do link da política. Ele é um
   <button> de verdade, e não um link: não navega para lugar nenhum, só
   devolve a escolha para a pessoa.
   ------------------------------------------------------------------------ */
.cc-abrir {
  padding: 0;
  font: inherit;
  text-align: left;
  color: inherit;
  transition: color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .cc-abrir:hover {
    color: var(--brand-200);
  }
}