/**
 * Alericos · Banner e painel de cookies (A.5.3 PR-1)
 *
 * A regra que este arquivo existe para cumprir: RECUSAR NÃO PODE SER MAIS DIFÍCIL
 * QUE ACEITAR. "Aceitar todos" e "Recusar opcionais" usam a MESMA classe
 * (.alx-ck-btn), dentro do mesmo .alx-ck-par, em colunas de largura igual. Não há
 * regra que diferencie os dois por cor, tamanho, peso ou ordem de foco — e não
 * pode passar a haver: um teste compara o estilo calculado dos dois botões.
 *
 * O banner é escondido por padrão e só aparece com html.alx-ck-pedir, que o leitor
 * inline do wp_head põe antes da primeira pintura. Assim ele não pisca para quem já
 * escolheu, e o markup continua igual para todos (a página anônima vem do cache).
 */

:root {
  --alx-ck-fundo-a: #001219;
  --alx-ck-fundo-b: #023047;
  --alx-ck-texto: #E9ECEF;
  --alx-ck-acento: #8ECAE6;   /* 7,74:1 sobre o fundo */
  --alx-ck-escuro: #001219;   /* texto do botão: 10,67:1 sobre o acento */
  --alx-ck-foco: #FFB703;
  --alx-consent-h: 0px;
}

/* ---------------------------------------------------------- banner */

#alx-consent-banner {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  /* Acima da barra de abas: o JS corrige medindo .alx-footer-menu de verdade. */
  bottom: var(--alx-footer-menu-h, 0px);
  z-index: 9995;
  background: linear-gradient(var(--alx-ck-fundo-a), var(--alx-ck-fundo-b));
  color: var(--alx-ck-texto);
  border-top: 1px solid rgba(33, 158, 188, .35);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, .4);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  max-height: 60vh;
  max-height: 60svh;
}

html.alx-ck-pedir #alx-consent-banner { display: block; }
/* Modal aberto por cima: o banner sai da frente, sem perder a escolha. */
#alx-consent-banner[hidden] { display: none !important; }
html.alx-ck-app #alx-consent-banner { display: none !important; }

#alx-consent-banner .alx-ck-box {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: inherit;
}

#alx-consent-banner .alx-ck-titulo {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
  color: #fff;
}

/* Só o texto rola; os botões ficam sempre visíveis na faixa de baixo. */
#alx-consent-banner .alx-ck-texto {
  overflow: auto;
  font-size: 15px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
#alx-consent-banner .alx-ck-texto p { margin: 0 0 8px; }
#alx-consent-banner .alx-ck-texto p:last-child { margin-bottom: 0; }

#alx-consent-banner a,
.alx-ck-painel a {
  color: var(--alx-ck-acento);
  text-decoration: underline;
}

/* ---------------------------------------------------- botões (iguais) */

.alx-ck-acoes,
.alx-ck-painel-rodape {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
}

.alx-ck-par {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* colunas iguais: nenhum dos dois é o principal */
  gap: 8px;
}

.alx-ck-btn {
  min-height: 44px;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  background: var(--alx-ck-acento);
  color: var(--alx-ck-escuro);
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  width: 100%;
}
/* Sem troca de cor no hover: hover que muda só um dos dois cria peso diferente. */
.alx-ck-btn[disabled] { opacity: .6; cursor: default; }
.alx-ck-btn-largo { grid-column: 1 / -1; }

.alx-ck-btn-texto {
  min-height: 44px;
  width: 100%;
  background: none;
  border: none;
  color: var(--alx-ck-acento);
  text-decoration: underline;
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
}

.alx-ck-btn:focus-visible,
.alx-ck-btn-texto:focus-visible,
.alx-ck-switch:focus-visible,
.alx-ck-fechar:focus-visible,
#alx-consent-banner a:focus-visible {
  outline: 3px solid var(--alx-ck-foco);
  outline-offset: 2px;
}

@media (max-width: 359px) {
  .alx-ck-par { grid-template-columns: 1fr; }
}
@media (min-width: 768px) {
  #alx-consent-banner .alx-ck-acoes { flex-direction: row; align-items: center; }
  #alx-consent-banner .alx-ck-par { flex: 1 1 auto; max-width: 420px; }
  #alx-consent-banner .alx-ck-btn-texto { width: auto; flex: 0 0 auto; }
}

/* ------------------------------------------------- aviso do leitor de tela */

.alx-ck-aviso {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(16px + var(--alx-consent-h, 0px) + var(--alx-footer-menu-h, 0px));
  z-index: 9996;
  background: var(--alx-ck-fundo-b);
  color: var(--alx-ck-texto);
  border: 1px solid var(--alx-ck-acento);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.9rem;
  display: none;
}
.alx-ck-aviso.alx-ck-aviso-visivel { display: block; }

/* ---------------------------------------------------------- espaçador */

#alx-consent-espaco { height: 0; }
html { scroll-padding-bottom: calc(var(--alx-consent-h, 0px) + var(--alx-footer-menu-h, 0px)); }

/* ------------------------------------------------------------- painel */

.alx-ck-painel {
  border: none;
  border-radius: 12px;
  padding: 0;
  max-width: 560px;
  width: calc(100% - 32px);
  max-height: 85vh;
  background: linear-gradient(var(--alx-ck-fundo-a), var(--alx-ck-fundo-b));
  color: var(--alx-ck-texto);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.alx-ck-painel::backdrop { background: rgba(0, 0, 0, .6); }

.alx-ck-painel-form {
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}
.alx-ck-painel-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid rgba(142, 202, 230, .25);
}
.alx-ck-painel-topo h2 { margin: 0; font-size: 1.05rem; color: #fff; }
.alx-ck-fechar {
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  color: var(--alx-ck-texto);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.alx-ck-painel-corpo {
  padding: 16px;
  overflow: auto;
  font-size: 15px;
  line-height: 1.45;
}
.alx-ck-painel-corpo p { margin: 0 0 10px; }
.alx-ck-painel-corpo h3,
.alx-ck-painel-corpo h4 { margin: 0; font-size: 0.98rem; color: #fff; }
.alx-ck-grupo { margin: 18px 0 8px !important; }
.alx-ck-cat { margin-bottom: 16px; }
.alx-ck-cat-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  min-height: 44px;
}
.alx-ck-sempre { font-weight: 600; color: var(--alx-ck-acento); }
.alx-ck-painel-rodape {
  padding: 16px;
  border-top: 1px solid rgba(142, 202, 230, .25);
}

/* -------------------------------------------------------- interruptor */

.alx-ck-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 4px;
  background: none;
  border: none;
  color: inherit;
  font-family: inherit;
  font-size: 0.92rem;
  cursor: pointer;
}
.alx-ck-switch-trilho {
  width: 46px;
  height: 26px;
  border-radius: 13px;
  background: #4b5b63;
  border: 1px solid rgba(233, 236, 239, .5);
  position: relative;
  flex: 0 0 auto;
}
.alx-ck-switch-bola {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #E9ECEF;
  transition: left .15s;
}
.alx-ck-switch[aria-checked="true"] .alx-ck-switch-trilho { background: var(--alx-ck-acento); }
.alx-ck-switch[aria-checked="true"] .alx-ck-switch-bola { left: 23px; background: var(--alx-ck-escuro); }
/* O estado também está escrito ("Ligado"/"Desligado"): cor não é o único sinal. */
.alx-ck-switch-estado { min-width: 5.5em; text-align: left; }

.alx-ck-idade {
  color: var(--alx-ck-acento);
  font-size: 0.88rem;
}

@media (max-width: 600px) {
  .alx-ck-painel {
    width: 100%;
    max-width: none;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
    margin: 0;
  }
  .alx-ck-painel-form { max-height: 100%; height: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .alx-ck-switch-bola { transition: none; }
}