/* =====================================================================
   COOKIES — estilo do banner
   Local : C:\xampp\htdocs\venhaparaorio\assets\css\cookies.css
   Server: /public_html/assets/css/cookies.css

   As cores saem das variaveis abaixo. Se o site ja tiver uma paleta
   em :root, troque os valores aqui por var(--sua-cor) e o banner
   passa a acompanhar a identidade automaticamente.
   ===================================================================== */

:root {
  --vpr-ck-fundo:    #FFFFFF;
  --vpr-ck-texto:    #1B2430;
  --vpr-ck-suave:    #5A6675;
  --vpr-ck-borda:    #E2E6EB;
  --vpr-ck-acao:     #1b6fc4;   /* --azul do site */   /* botao principal */
  --vpr-ck-acao-alt: #14538f;   /* --azul-esc do site */
}

#vpr-cookies {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  padding: 14px;
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .3s ease, transform .3s ease;
  font-family: inherit;
}
#vpr-cookies.vpr-ck-visivel { opacity: 1; transform: none; }

.vpr-ck-caixa {
  width: 100%;
  max-width: 60rem;
  background: var(--vpr-ck-fundo);
  color: var(--vpr-ck-texto);
  border: 1px solid var(--vpr-ck-borda);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(12, 22, 36, .22);
  padding: 20px 22px;
}

.vpr-ck-texto h2 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
}
.vpr-ck-texto p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--vpr-ck-suave);
  max-width: 68ch;
}
.vpr-ck-texto a {
  color: var(--vpr-ck-acao);
  text-decoration: underline;
}

/* categorias */
.vpr-ck-detalhes {
  margin-top: 16px;
  border-top: 1px solid var(--vpr-ck-borda);
  padding-top: 14px;
  display: grid;
  gap: 10px;
}
.vpr-ck-cat {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--vpr-ck-suave);
  cursor: pointer;
}
.vpr-ck-cat input {
  margin-top: 3px;
  width: 17px; height: 17px;
  flex-shrink: 0;
  accent-color: var(--vpr-ck-acao);
}
.vpr-ck-cat input:disabled { opacity: .55; cursor: not-allowed; }
.vpr-ck-cat strong {
  display: block;
  color: var(--vpr-ck-texto);
  font-size: .92rem;
  margin-bottom: 2px;
}

/* botoes */
.vpr-ck-botoes {
  margin-top: 16px;
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.vpr-ck-b {
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 8px;
  border: 1px solid var(--vpr-ck-borda);
  background: transparent;
  color: var(--vpr-ck-texto);
  cursor: pointer;
  min-height: 44px;            /* alvo de toque confortavel no celular */
  transition: background .18s, border-color .18s;
}
.vpr-ck-b:hover { background: #F2F5F8; }
.vpr-ck-b:focus-visible { outline: 2px solid var(--vpr-ck-acao); outline-offset: 2px; }

/* Recusar tem o mesmo peso visual que Aceitar — a ANPD exige que
   recusar seja tao facil quanto aceitar. */
.vpr-ck-aceitar,
.vpr-ck-salvar {
  background: var(--vpr-ck-acao);
  border-color: var(--vpr-ck-acao);
  color: #fff;
}
.vpr-ck-aceitar:hover,
.vpr-ck-salvar:hover {
  background: var(--vpr-ck-acao-alt);
  border-color: var(--vpr-ck-acao-alt);
}

@media (max-width: 640px) {
  #vpr-cookies { padding: 10px; }
  .vpr-ck-caixa { padding: 18px 16px; border-radius: 12px; }
  .vpr-ck-botoes { justify-content: stretch; }
  .vpr-ck-b { flex: 1 1 46%; }
  .vpr-ck-aceitar { flex-basis: 100%; order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  #vpr-cookies { transition: none; }
}