/* O'Clock Tags — consentimento
   ─────────────────────────────────────────────────────────────────────────────
   Sem cores próprias: tudo remapeado dos tokens do tema, com fallback. A mesma
   folha serve as duas marcas — é daqui que vem o banner da Nusa sair com cantos
   a zero sem uma linha a dizê-lo, porque o --r dela é 0.

   O --oct-brand é injectado em linha pelo PHP: as duas marcas divergem aí, e só
   aí. Ver o filtro `oclock_tags_brand_color`. */

.octags {
  --oct-brand:  var(--c-brand, #0E434E);          /* substituído em linha */
  --oct-text:   var(--c-text, #072B33);
  --oct-muted:  var(--c-text-muted, #3A565B);
  --oct-light:  var(--c-text-light, #556B70);
  --oct-line:   var(--c-border, #EBE5D9);
  --oct-linem:  var(--c-border-mid, #D7CFBE);
  --oct-white:  var(--c-white, #fff);
  --oct-radius: var(--r-lg, 18px);
  --oct-pill:   var(--r-pill, 999px);
  --oct-font:   var(--font-main, -apple-system, BlinkMacSystemFont, sans-serif);

  position: fixed;
  inset: auto auto 24px 24px;
  z-index: 99990;
  font-family: var(--oct-font);
  color: var(--oct-text);
  text-align: left;
}
.octags[hidden] { display: none; }

/* A sombra vive no invólucro. O recorte que revela o cartão também a cortaria. */
.octags__wrap {
  border-radius: var(--oct-radius);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .13);
  opacity: 0;
}
.octags__wrap[hidden] { display: none; }
.octags__wrap.is-in { opacity: 1; }

.octags__card,
.octags__panel {
  background: var(--oct-white);
  border: 1px solid var(--oct-line);
  border-radius: var(--oct-radius);
  overflow: hidden;
}

/* ── banner ─────────────────────────────────────────────────────────────── */

.octags__card { width: 660px; max-width: 100%; display: flex; flex-direction: column; }
.octags__img  { flex: 0 0 148px; overflow: hidden; background: var(--c-bg-alt, #E6E0D3); }
.octags__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.octags__body { padding: 26px 28px; }

.octags__title { font-family: var(--font-display, inherit); font-size: 21px; line-height: 1.2;
                 letter-spacing: -.02em; margin: 0 0 9px; color: var(--oct-text); }
.octags__text  { font-size: 13.5px; line-height: 1.6; color: var(--oct-muted); margin: 0 0 20px; }
.octags__text a { color: var(--oct-brand); }

.octags__row    { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.octags__spacer { flex: 1 1 auto; }

/* Escolha detalhada: ligacao, nao botao, acima das duas decisoes — ver o
   comentario em inc/consent.php. Sublinhado so no rato: a cor da marca, a seta
   e a posicao ja dizem que e clicavel. */
.octags__choose {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0;
  background: none;
  border: 0;
  font: 600 13px/1.3 var(--oct-font);
  letter-spacing: .02em;
  color: var(--oct-brand);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.octags__choose:hover { text-decoration: underline; text-underline-offset: 3px; }
.octags__choose:focus-visible { outline: 2px solid var(--oct-brand); outline-offset: 2px; }

.octags__btn {
  flex: 0 0 auto;
  font: 600 13px/1 var(--oct-font);
  letter-spacing: .02em;
  padding: 13px 26px;
  border-radius: var(--oct-pill);
  border: 1px solid var(--oct-brand);
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.octags__btn--fill { background: var(--oct-brand); color: var(--oct-white); }
.octags__btn--out  { background: var(--oct-white); color: var(--oct-brand); }
/* Depois das outras duas, nunca antes: empatam em especificidade e ganha a
   última do ficheiro. Já mordeu quatro vezes neste projecto. */
.octags__btn--ghost { background: var(--oct-white); color: var(--oct-muted);
                      border-color: var(--oct-linem); text-decoration: none; }
.octags__btn:focus-visible { outline: 2px solid var(--oct-brand); outline-offset: 2px; }

/* ── painel de preferências ─────────────────────────────────────────────── */

.octags__panel { width: 430px; max-width: 100%; }
.octags__phead { padding: 20px 24px 15px; border-bottom: 1px solid var(--oct-line);
                 display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.octags__phead .octags__title { font-size: 17px; margin: 0; }
/* `contain`: quando a lista chega ao topo ou ao fundo, o movimento para aqui em
   vez de passar para a pagina por tras (encadeamento de scroll). Vale para a
   roda do rato e para o dedo, e actua mesmo no instante em que o painel abre,
   antes de a pagina ficar travada. */
.octags__pbody { padding: 5px 24px 8px; max-height: 58vh; overflow-y: auto; overscroll-behavior: contain; }
.octags__panel { overscroll-behavior: contain; }
.octags__pfoot { padding: 16px 24px 22px; border-top: 1px solid var(--oct-line);
                 background: var(--c-surface, #F7F4EC); }
.octags__pfoot .octags__btn { flex: 1 1 0; padding: 13px 14px; }

.octags__x { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--oct-line);
             background: var(--oct-white); color: var(--oct-muted); font-size: 16px; line-height: 1;
             cursor: pointer; flex: 0 0 auto; }
.octags__x:focus-visible { outline: 2px solid var(--oct-brand); outline-offset: 2px; }

.octags__cat { padding: 16px 0; border-bottom: 1px solid var(--oct-line);
               display: flex; gap: 14px; align-items: flex-start; }
.octags__cat:last-child { border-bottom: 0; }
.octags__catinfo { flex: 1 1 auto; min-width: 0; }
/* Era um <h4> ate Set/2026 — ver o comentario em inc/consent.php. Os valores sao
   os mesmos; o `display:block` repoe o que a etiqueta de titulo dava de origem, e
   a classe ganha a regra generica `.octags__cat p` por especificidade. */
.octags__cat .octags__catname { display: block; font: 600 13.5px/1.3 var(--oct-font); margin: 0 0 4px; color: var(--oct-text); }
.octags__cat p  { font-size: 12px; line-height: 1.55; color: var(--oct-muted); margin: 0; }
.octags__ck { font-size: 10.5px; color: var(--oct-light); margin-top: 6px; display: block;
              word-break: break-word; font-family: ui-monospace, Menlo, Consolas, monospace; }

.octags__locked { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
                  color: var(--oct-light); flex: 0 0 auto; margin-top: 6px; white-space: nowrap; }

.octags__sw { width: 40px; height: 23px; border-radius: var(--oct-pill); border: 0;
              background: var(--oct-linem); position: relative; flex: 0 0 auto; margin-top: 2px;
              cursor: pointer; transition: background-color .18s ease; }
.octags__sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px;
                     border-radius: 50%; background: var(--oct-white); transition: transform .18s ease; }
.octags__sw[aria-checked="true"] { background: var(--oct-brand); }
.octags__sw[aria-checked="true"]::after { transform: translateX(17px); }
.octags__sw:focus-visible { outline: 2px solid var(--oct-brand); outline-offset: 2px; }

/* ── entrada ────────────────────────────────────────────────────────────── */
/* O cartão NÃO cresce: fica no tamanho final desde o primeiro fotograma e é
   revelado por um recorte que abre do centro. Duas razões, e nenhuma estética:
     · os botões nunca se mexem, e um clique rápido não muda de alvo a meio —
       num banner de consentimento, quem tenta recusar não pode acabar a aceitar;
     · nada muda de tamanho, logo o browser não refaz o layout em cada fotograma.
       `clip-path` e `opacity` são baratos; animar altura não é. */

@keyframes octags-reveal {
  from { clip-path: inset(50% 0 50% 0); }
  to   { clip-path: inset(0); }
}
@keyframes octags-settle {
  from { transform: scale(1.1); }
  to   { transform: none; }
}

.octags__wrap.is-in { transition: opacity .9s cubic-bezier(.16, 1, .3, 1); }
.octags__wrap.is-in .octags__card,
.octags__wrap.is-in .octags__panel { animation: octags-reveal .9s cubic-bezier(.16, 1, .3, 1) both; }
.octags__wrap.is-in .octags__img img { animation: octags-settle 1.5s cubic-bezier(.16, 1, .3, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .octags__wrap { transition: none; }
  .octags__wrap.is-in .octags__card,
  .octags__wrap.is-in .octags__panel,
  .octags__wrap.is-in .octags__img img { animation: none; }
}

/* ── mobile ─────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .octags { inset: auto 16px 16px 16px; }
  .octags__card { width: 100%; }
  .octags__img  { flex-basis: 118px; }
  .octags__body { padding: 22px; }
  .octags__title { font-size: 18px; }
  /* Os dois com a MESMA altura — um deles tinha um padding mais apertado e
     ficava visivelmente mais baixo do que o outro. */
  .octags__row { flex-direction: column; gap: 8px; }
  .octags__choose { margin-bottom: 12px; }
  .octags__btn { width: 100%; padding: 13px 14px; }
  .octags__spacer { display: none; }
  .octags__panel { width: 100%; }
  .octags__pbody { max-height: 50vh; }
}