/* ==========================================================================
   Banner de consentimento (cap. 15)

   Aceitar e Recusar têm o MESMO estilo, tamanho e posição. Nenhum dos dois é
   laranja: destacar uma das escolhas seria empurrar a pessoa para ela, e o
   cap. 12 chama isso pelo nome — botão de recusa menor, cinza ou escondido é
   dark pattern.
   ========================================================================== */

.ipe-consent {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 80;
  padding: var(--e-4) var(--gutter);
  padding-block-end: calc(var(--e-4) + env(safe-area-inset-bottom));
  background: var(--cor-superficie);
  border-block-start: 1px solid var(--cor-borda);
  box-shadow: var(--sombra-elevada);
}

.ipe-consent__caixa {
  max-width: var(--container);
  margin-inline: auto;
}

.ipe-consent__titulo {
  font-weight: var(--peso-forte);
}

.ipe-consent__texto {
  margin-block-start: var(--e-2);
  font-size: 0.875rem;
  color: var(--cor-texto-2);
}

.ipe-consent__acoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-3);
  margin-block-start: var(--e-4);
}

.ipe-consent__acoes .ipe-botao {
  width: 100%;
}

.ipe-consent__rodape {
  margin-block-start: var(--e-3);
  font-size: 0.875rem;
}

.ipe-consent__rodape a {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-min);
}

/* Nada mais fica fixo no rodapé enquanto a decisão está pendente: o banner é
   a única camada. A classe vem do servidor (inc/setup.php). */
.ipe-consent-pendente .ipe-barra-acao {
  display: none;
}

.ipe-consent-pendente .ipe-lista__acoes {
  position: static;
  margin-inline: 0;
  padding-inline: 0;
  border-block-start: 0;
  box-shadow: none;
}

@media (min-width: 768px) {
  .ipe-consent__caixa {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--e-4) var(--e-12);
  }

  .ipe-consent__acoes {
    grid-row: span 2;
    grid-template-columns: auto auto;
    margin-block-start: 0;
  }

  .ipe-consent__rodape {
    grid-column: 1;
  }
}