/* ==========================================================================
   Painel granular de cookies — versao independente.

   O mesmo painel existe dentro do voraxus.css, usado pelas paginas no layout
   novo. Este arquivo serve as paginas legadas (styles.css, consent.css e os
   CSS proprios de cada landing), que nao carregam o voraxus.css e portanto
   nao tem nenhuma regra .vrc-prefs.

   Sem estas regras o painel nao ficaria apenas feio: .vrc-prefs nasce
   visivel, entao o bloco de interruptores apareceria aberto e permanente no
   meio da pagina.

   Todos os tokens vem com valor literal de reserva porque o design system
   legado nao define --surface, --brand, --navy e companhia.
   ========================================================================== */

.vrc-prefs{
  position:fixed; inset:0; z-index:10000;
  display:grid; place-items:center;
  padding:16px;
  background: rgba(10, 14, 42, .62);
  backdrop-filter: blur(3px);
  opacity:0; visibility:hidden;
  transition: opacity .24s ease, visibility .24s;
}
.vrc-prefs.is-open{ opacity:1; visibility:visible }

.vrc-prefs__card{
  width:100%; max-width:560px;
  max-height: min(88dvh, 720px); overflow-y:auto; overscroll-behavior:contain;
  background: var(--surface, #ffffff);
  color: var(--fg, #0d1220);
  border:1px solid var(--line-2, rgba(13,18,32,.14));
  border-radius: var(--r-lg, 18px);
  box-shadow: 0 24px 60px rgba(10,14,42,.28);
  padding: clamp(20px,4vw,28px);
  transform: translateY(14px) scale(.98);
  transition: transform .28s cubic-bezier(.2,.8,.25,1);
}
.vrc-prefs.is-open .vrc-prefs__card{ transform:none }

.vrc-prefs__card h2{ font-size:1.25rem; margin:0 0 .5rem }
.vrc-prefs__intro{
  color: var(--muted, #5f6a80);
  font-size:.93rem; line-height:1.55; margin:0 0 1.3rem;
}

.vrc-cat{
  display:flex; align-items:flex-start; gap:1rem;
  padding:1rem 0; border-top:1px solid var(--line, rgba(13,18,32,.09));
}
.vrc-cat__txt{ flex:1; min-width:0 }
.vrc-cat__txt strong{ display:block; font-size:.99rem; margin-bottom:.2rem }
.vrc-cat__txt span{ font-size:.87rem; color: var(--muted, #5f6a80); line-height:1.5 }
.vrc-cat__fixo{
  font-size:.78rem; font-weight:700; color: var(--muted, #5f6a80);
  white-space:nowrap; padding-top:.35rem;
}

/* Interruptor */
.vrc-switch{ position:relative; flex:none; width:48px; height:28px; margin-top:.15rem }
.vrc-switch input{
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; opacity:0; cursor:pointer; z-index:1;
}
.vrc-switch i{
  position:absolute; inset:0; border-radius:999px;
  background: var(--surface-3, #e6e9f2);
  border:1px solid var(--line-2, rgba(13,18,32,.14));
  transition: background .2s ease, border-color .2s ease;
}
.vrc-switch i::after{
  content:""; position:absolute; top:3px; left:3px;
  width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition: transform .22s cubic-bezier(.2,.8,.25,1);
}
.vrc-switch input:checked + i{
  background: var(--brand, #ff6a00); border-color: var(--brand, #ff6a00);
}
.vrc-switch input:checked + i::after{ transform: translateX(20px) }
.vrc-switch input:focus-visible + i{
  box-shadow:0 0 0 4px var(--ring, rgba(255,106,0,.35));
}

.vrc-prefs__foot{
  display:flex; flex-wrap:wrap; gap:.6rem;
  margin-top:1.4rem; padding-top:1.2rem;
  border-top:1px solid var(--line, rgba(13,18,32,.09));
}
.vrc-prefs__foot .vrs-btn{ flex:1 1 auto; justify-content:center }

/* O botao do rodape do painel usa .vrs-btn, que nem todo CSS legado define
   com aparencia de botao. Estas regras so entram se nada antes tiver
   definido, por isso a especificidade baixa e o escopo restrito ao painel. */
.vrc-prefs__foot .vrs-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.72rem 1.15rem; border:1px solid var(--line-2, rgba(13,18,32,.14));
  border-radius:999px; background: var(--surface, #fff); color: inherit;
  font: inherit; font-weight:600; cursor:pointer; text-decoration:none;
}
.vrc-prefs__foot .vrs-btn--primary{
  background: var(--brand, #ff6a00); border-color: var(--brand, #ff6a00);
  color:#fff;
}

/* ==========================================================================
   Banner de consentimento — mesma observacao do painel acima.
   O styles.css e o consent.css ja trazem estas regras, mas as landings com
   CSS proprio (demo-seguranca, carteira-vacinacao, apresentacao) nao.
   Sem elas o banner nasceria visivel e sem estilo: note o display:none, que
   e o que mantem o banner escondido ate o script.js decidir mostra-lo.
   ========================================================================== */

#vrs-consent.vrc-consent{
  position:fixed; inset:auto 16px 16px 16px; z-index:9999;
  display:none;
  align-items:center; gap:1.1rem;
  max-width:940px; margin-inline:auto;
  padding:1.1rem 1.25rem;
  background: var(--surface, #ffffff);
  color: var(--fg, #0d1220);
  border:1px solid var(--line-2, rgba(13,18,32,.14));
  border-radius: var(--r-lg, 18px);
  box-shadow: 0 18px 44px rgba(10,14,42,.22);
  font-size:.92rem; line-height:1.55;
  animation: vrc-in .4s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes vrc-in{ from{ transform: translateY(14px); opacity:0 } }

#vrs-consent .vrc-txt{ flex:1; min-width:230px; color: var(--fg-soft, #46506a) }
#vrs-consent .vrc-actions{ display:flex; align-items:center; gap:.6rem; flex:none }
#vrs-consent .vrc-btn{
  font: inherit; font-weight:650; font-size:.9rem;
  padding:.65rem 1.1rem;
  border-radius: var(--r-sm, 10px);
  border:1px solid var(--line-2, rgba(13,18,32,.14));
  background: var(--surface-2, #f4f6fb);
  color: var(--fg, #0d1220);
  cursor:pointer; white-space:nowrap;
  transition: background .18s ease, transform .14s ease;
}
#vrs-consent .vrc-btn:hover{
  transform: translateY(-1px);
  background: var(--surface-3, #e6e9f2);
}
#vrs-consent .vrc-btn-primary{
  background: linear-gradient(135deg, var(--brand, #ff6a00), #ff8524);
  border-color:transparent; color:#fff;
  box-shadow: 0 8px 22px rgba(255,106,0,.32);
}
@media (max-width:700px){
  #vrs-consent.vrc-consent{
    flex-direction:column; align-items:stretch; inset:auto 12px 12px 12px;
  }
  #vrs-consent .vrc-actions{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem }
  #vrs-consent .vrc-btn{ width:100%; min-width:0 }
}