/* =============================================================================
   ADRFB Aviso de Cookies :: aviso.css
   O aviso e a janela de preferências. Funciona sem Bootstrap; com ele, cada
   variável abaixo pega a do tema (var(--bs-x, reserva) usa a reserva se --bs-x
   não existir). O tema sobrescreve qualquer --adrfb-ck-* em :root.
   ========================================================================== */

:root {
  --adrfb-ck-cor: var(--bs-primary, #2563eb);
  --adrfb-ck-cor-texto: #ffffff;                       /* texto sobre a cor do botão */
  --adrfb-ck-fundo: var(--bs-tertiary-bg, #ffffff);         /* um tom acima da página, para destacar no escuro */
  --adrfb-ck-superficie: rgba(128, 128, 128, .12);          /* véu translúcido: serve no claro e no escuro */
  --adrfb-ck-texto: var(--bs-body-color, #1f2937);
  --adrfb-ck-suave: var(--bs-secondary-color, #4b5563);
  --adrfb-ck-link: var(--bs-link-color, var(--adrfb-ck-cor));
  --adrfb-ck-fonte: var(--bs-body-font-family, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  --adrfb-ck-raio: var(--bs-border-radius-lg, .75rem);
  --adrfb-ck-raio-botao: var(--bs-border-radius, .5rem);
  --adrfb-ck-sombra: 0 0 0 1px rgba(128, 128, 128, .2), 0 18px 50px -12px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .15);
  --adrfb-ck-chave-desligada: #9ca3af;
}


/* -----------------------------------------------------------------------------
   Aviso: cartão no canto de baixo (largura toda no celular)
   -------------------------------------------------------------------------- */
.adrfb-ck-aviso {
  position: fixed;
  z-index: 99990;
  right: .75rem;
  bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
  left: .75rem;
  padding: 1.25rem;
  border-radius: var(--adrfb-ck-raio);
  background: var(--adrfb-ck-fundo);
  color: var(--adrfb-ck-texto);
  font-family: var(--adrfb-ck-fonte);
  font-size: .9375rem;
  line-height: 1.5;
  box-shadow: var(--adrfb-ck-sombra);
  animation: adrfb-ck-sobe .35s ease-out both;
}

@media (min-width: 640px) {
  .adrfb-ck-aviso {
    right: auto;
    left: 1.5rem;
    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    max-width: 26rem;
    padding: 1.5rem;
  }
}

/* [hidden] vence o display das classes sem !important */
.adrfb-ck-aviso[hidden],
.adrfb-ck-janela__id[hidden] {
  display: none;
}

@keyframes adrfb-ck-sobe {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
}

.adrfb-ck-aviso__titulo,
.adrfb-ck-janela__titulo {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .5rem;
  color: inherit;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
}

.adrfb-ck-icone {
  flex-shrink: 0;
  width: 1.35em;
  height: 1.35em;
  fill: none;
  stroke: var(--adrfb-ck-icone, var(--adrfb-ck-cor));
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.adrfb-ck-aviso__texto {
  margin: 0 0 1rem;
  color: var(--adrfb-ck-suave);
}

.adrfb-ck-aviso a,
.adrfb-ck-janela a {
  color: var(--adrfb-ck-link);
  text-decoration: underline;
  text-underline-offset: .15em;
}


/* -----------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */
.adrfb-ck-botoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.adrfb-ck-botao {
  flex: 1 1 auto;
  min-height: 2.75rem;
  margin: 0;
  padding: .5rem 1.1rem;
  border: 0;
  border-radius: var(--adrfb-ck-raio-botao);
  background: var(--adrfb-ck-cor);
  color: var(--adrfb-ck-cor-texto);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}

.adrfb-ck-botao:hover {
  filter: brightness(1.08);
}

.adrfb-ck-botao:active {
  transform: translateY(1px);
}

/* Contorno por sombra interna: mesma altura e o mesmo peso do botão cheio */
.adrfb-ck-botao--contorno {
  background: transparent;
  color: var(--adrfb-ck-texto);
  box-shadow: inset 0 0 0 2px var(--adrfb-ck-cor);
}

.adrfb-ck-link,
.adrfb-ck-reabrir {
  margin: 0;
  padding: .25rem 0;
  border: 0;
  background: none;
  color: var(--adrfb-ck-link);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: .15em;
  cursor: pointer;
}

.adrfb-ck-link {
  flex-basis: 100%;
  text-align: center;
  font-size: .875rem;
}

.adrfb-ck-botao:focus-visible,
.adrfb-ck-link:focus-visible,
.adrfb-ck-reabrir:focus-visible,
.adrfb-ck-fechar:focus-visible,
.adrfb-ck-chave:focus-visible {
  outline: 3px solid var(--adrfb-ck-cor);
  outline-offset: 2px;
}


/* -----------------------------------------------------------------------------
   Janela de preferências (<dialog>)
   -------------------------------------------------------------------------- */
.adrfb-ck-janela {
  width: min(36rem, calc(100% - 1.5rem));
  max-height: calc(100% - 2rem);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--adrfb-ck-raio);
  background: var(--adrfb-ck-fundo);
  color: var(--adrfb-ck-texto);
  font-family: var(--adrfb-ck-fonte);
  font-size: .9375rem;
  line-height: 1.5;
  box-shadow: var(--adrfb-ck-sombra);
}

.adrfb-ck-janela::backdrop {
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(3px);
}

.adrfb-ck-janela[open] {
  animation: adrfb-ck-aparece .25s ease-out both;
}

@keyframes adrfb-ck-aparece {
  from {
    opacity: 0;
    transform: scale(.97);
  }
}

.adrfb-ck-janela form {
  margin: 0;
  padding: 1.5rem;
}

.adrfb-ck-janela__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.adrfb-ck-fechar {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  margin: -.35rem -.35rem 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--adrfb-ck-suave);
  cursor: pointer;
}

.adrfb-ck-fechar:hover {
  background: var(--adrfb-ck-superficie);
}

.adrfb-ck-fechar svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.adrfb-ck-janela__intro {
  margin: 0 0 1rem;
  color: var(--adrfb-ck-suave);
}

.adrfb-ck-categorias {
  display: grid;
  gap: .5rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.adrfb-ck-categoria {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1rem;
  border-radius: var(--adrfb-ck-raio-botao);
  background: var(--adrfb-ck-superficie);
}

.adrfb-ck-categoria strong {
  display: block;
}

.adrfb-ck-categoria span {
  display: block;
  margin-top: .15rem;
  color: var(--adrfb-ck-suave);
  font-size: .875rem;
}

.adrfb-ck-categoria label {
  cursor: pointer;
}

/* Interruptor: o próprio checkbox desenhado, sem biblioteca */
.adrfb-ck-chave {
  position: relative;
  flex-shrink: 0;
  width: 2.75rem;
  height: 1.5rem;
  margin: 0;
  border-radius: 999px;
  background: var(--adrfb-ck-chave-desligada);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background-color .2s ease;
}

.adrfb-ck-chave::before {
  content: "";
  position: absolute;
  top: .1875rem;
  left: .1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .2s ease;
}

.adrfb-ck-chave:checked {
  background: var(--adrfb-ck-cor);
}

.adrfb-ck-chave:checked::before {
  transform: translateX(1.25rem);
}

.adrfb-ck-chave:disabled {
  cursor: not-allowed;
  opacity: .6;
}

.adrfb-ck-janela__id {
  margin: 1rem 0 0;
  color: var(--adrfb-ck-suave);
  font-size: .75rem;
  text-align: center;
}

@media (min-width: 640px) {
  .adrfb-ck-botoes--janela .adrfb-ck-botao {
    flex: 0 1 auto;
  }

  .adrfb-ck-botoes--janela {
    justify-content: flex-end;
  }
}


/* Quem pediu menos movimento ao sistema */
@media (prefers-reduced-motion: reduce) {
  .adrfb-ck-aviso,
  .adrfb-ck-janela[open],
  .adrfb-ck-chave,
  .adrfb-ck-chave::before,
  .adrfb-ck-botao {
    animation: none;
    transition: none;
  }
}


/* -----------------------------------------------------------------------------
   Capa de vídeo e mapa (inc/capas.php)
   A proporção vem do PHP em --adrfb-ck-proporcao: a capa ocupa o mesmo espaço do
   iframe, então a página não pula quando ele entra (CLS zero).
   -------------------------------------------------------------------------- */
.adrfb-ck-capa {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: var(--adrfb-ck-proporcao, 16 / 9);
  overflow: hidden;
  border-radius: var(--adrfb-ck-raio-botao);
  background: #111827;
  color: #ffffff;
  font-family: var(--adrfb-ck-fonte);
  isolation: isolate;
}

/* Bloco de incorporação do WordPress: o invólucro já reserva a altura */
.wp-has-aspect-ratio .adrfb-ck-capa {
  position: absolute;
  inset: 0;
  height: 100%;
  aspect-ratio: auto;
}

.adrfb-ck-capa--mapa {
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .08) 0 2px, transparent 3px) 0 0 / 28px 28px,
    linear-gradient(135deg, #1f2937, #0f172a);
}

.adrfb-ck-capa__imagem {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Véu escuro: o texto em cima da capa precisa de contraste */
.adrfb-ck-capa::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .25) 60%, rgba(0, 0, 0, .35));
}

.adrfb-ck-capa__conteudo {
  display: grid;
  justify-items: center;
  gap: .75rem;
  max-width: 32rem;
  padding: 1rem;
  text-align: center;
}

.adrfb-ck-capa__botao {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 3rem;
  padding: .6rem 1.4rem;
  border: 0;
  border-radius: 999px;
  background: var(--adrfb-ck-cor);
  color: var(--adrfb-ck-cor-texto);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}

.adrfb-ck-capa__botao:hover {
  filter: brightness(1.08);
  transform: scale(1.03);
}

/* Vídeo: play redondo e grande, como todo mundo reconhece */
.adrfb-ck-capa__play {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--adrfb-ck-cor);
  color: var(--adrfb-ck-cor-texto);
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .6);
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease;
}

.adrfb-ck-capa__play:hover {
  filter: brightness(1.08);
  transform: scale(1.08);
}

.adrfb-ck-capa__play svg {
  width: 1.9rem;
  height: 1.9rem;
  margin-left: .2rem;   /* o triângulo parece descentralizado no centro exato */
  fill: currentColor;
}

.adrfb-ck-capa__titulo {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}

.adrfb-ck-capa__botao svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.adrfb-ck-capa--mapa .adrfb-ck-capa__botao svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.adrfb-ck-capa__aviso {
  display: none;   /* no celular a capa é baixa: só o botão */
  margin: 0;
  color: rgba(255, 255, 255, .85);
  font-size: .8125rem;
  line-height: 1.5;
}

.adrfb-ck-capa__sempre {
  padding: 0;
  border: 0;
  background: none;
  color: #ffffff;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .15em;
  cursor: pointer;
}

.adrfb-ck-capa__botao:focus-visible,
.adrfb-ck-capa__play:focus-visible,
.adrfb-ck-capa__sempre:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

@media (min-width: 480px) {
  .adrfb-ck-capa__aviso {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .adrfb-ck-capa__botao,
  .adrfb-ck-capa__play {
    transition: none;
  }
}
