/* T133: aviso e gerenciador de cookies (web/static/js/consent.js). O mesmo
   arquivo serve .store (tokens --od-*) e .online (tokens do painel): cada
   variavel tenta o token da LP, depois o do painel, depois um valor fixo. */
.ck-banner, .ck-dialog, .ck-manager {
  --ck-bg: var(--od-surface-2, var(--surface, #fff));
  --ck-fg: var(--od-fg-1, var(--text, #0f1b2d));
  --ck-fg-2: var(--od-fg-2, var(--text-2, #5b6673));
  --ck-border: var(--od-border-strong, var(--border-strong, #cbd3cf));
  --ck-accent: var(--od-brand-primary, var(--accent, #0e7a5b));
  --ck-radius: var(--od-radius-md, var(--radius, 12px));
  --ck-gap: var(--od-space-sm, var(--space-3, 12px));
  color: var(--ck-fg);
}
.ck-banner {
  position: fixed; left: var(--ck-gap); right: var(--ck-gap); bottom: var(--ck-gap); z-index: 1000;
  max-width: 760px; margin: 0 auto; padding: 16px 20px;
  background: var(--ck-bg); border: 1px solid var(--ck-border); border-radius: var(--ck-radius);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28); max-height: calc(100vh - 24px); overflow-y: auto;
}
.ck-banner h2, .ck-dialog h2 { margin: 0 0 6px; font-size: 16px; line-height: 1.3; }
.ck-banner p, .ck-dialog p, .ck-manager p { margin: 0 0 var(--ck-gap); color: var(--ck-fg-2); font-size: 14px; line-height: 1.5; }
.ck-banner a, .ck-dialog a { color: var(--ck-fg); text-decoration: underline; }
.ck-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Recusar e Aceitar com o mesmo peso: mesmo estilo, nenhum em destaque. */
.ck-btn {
  min-height: 44px; padding: 10px 16px; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--ck-fg); background: transparent; border: 1px solid var(--ck-border);
  border-radius: 8px; cursor: pointer;
}
.ck-btn:hover { border-color: var(--ck-accent); }
.ck-btn:focus-visible, .ck-manager input:focus-visible { outline: 2px solid var(--ck-accent); outline-offset: 2px; }
.ck-banner .ck-actions .ck-btn { flex: 1 1 160px; }
.ck-status { margin: var(--ck-gap) 0 0 !important; font-weight: 600; color: var(--ck-fg) !important; }
.ck-dialog {
  position: fixed; inset: 0; margin: auto; height: fit-content; box-sizing: border-box; overflow-y: auto;
  width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 20px;
  background: var(--ck-bg); border: 1px solid var(--ck-border); border-radius: var(--ck-radius);
}
.ck-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.ck-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ck-manager fieldset { margin: 0 0 var(--ck-gap); padding: 0; border: 0; }
.ck-manager legend { padding: 0; margin-bottom: 8px; font-weight: 700; font-size: 14px; }
.ck-cat {
  display: grid; grid-template-columns: 24px 1fr; column-gap: 10px; align-items: center;
  padding: 12px 0; border-top: 1px solid var(--ck-border);
}
.ck-cat input { width: 20px; height: 20px; margin: 0; accent-color: var(--ck-accent); }
.ck-cat label { font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.ck-cat p { grid-column: 2; margin: 0 !important; }
.ck-tag { font-size: 12px; font-weight: 500; color: var(--ck-fg-2); }
.ck-current { font-weight: 600; color: var(--ck-fg) !important; }
@media (max-width: 480px) {
  .ck-banner { padding: 14px; }
  .ck-actions .ck-btn { flex: 1 1 100%; }
}