#lgpd-cookies-root *,
#lgpd-cookies-root *::before,
#lgpd-cookies-root *::after { box-sizing: border-box; }

#lgpd-cookies-root,
.lgpd-preview-stage {
  --lgpd-primary: #c62828;
  --lgpd-bg: #1c1c1e;
  --lgpd-fg: #f5f5f7;
  --lgpd-btn-text: #ffffff;
  --lgpd-border: rgba(255,255,255,0.12);
  --lgpd-muted: #9aa0a6;
  --lgpd-radius: 14px;
  --lgpd-box-width: 380px;
  --lgpd-fs: 1;
  font-family: 'Oxygen', system-ui, -apple-system, Arial, sans-serif;
}

/* Texto secundario adaptado automaticamente ao fundo/texto escolhidos. */
@supports (color: color-mix(in srgb, #000, #fff)) {
  #lgpd-cookies-root,
  .lgpd-preview-stage {
    --lgpd-muted: color-mix(in srgb, var(--lgpd-fg) 66%, var(--lgpd-bg));
  }
}

/* ---------- Banner ---------- */
.lgpd-banner {
  position: fixed;
  z-index: 999999;
  background: var(--lgpd-bg);
  color: var(--lgpd-fg);
  box-shadow: 0 8px 30px rgba(0,0,0,0.28);
  display: flex;
  gap: 18px;
  align-items: center;
  animation: lgpd-in .3s ease;
}

/* Barras (largura total) */
.lgpd-banner[data-pos="bottom"],
.lgpd-banner[data-pos="top"] {
  left: 0;
  right: 0;
  padding: 18px clamp(16px, 4vw, 48px);
}
.lgpd-banner[data-pos="bottom"] { bottom: 0; border-top: 3px solid var(--lgpd-primary); }
.lgpd-banner[data-pos="top"]    { top: 0;    border-bottom: 3px solid var(--lgpd-primary); box-shadow: 0 8px 30px rgba(0,0,0,0.22); }

/* Caixas (cantos) */
.lgpd-banner[data-pos^="box"] {
  max-width: var(--lgpd-box-width);
  flex-direction: column;
  align-items: stretch;
  padding: 20px;
  border-radius: var(--lgpd-radius);
  border: 1px solid var(--lgpd-border);
  border-top: 3px solid var(--lgpd-primary);
}
.lgpd-banner[data-pos="box-br"] { right: 18px; bottom: 18px; }
.lgpd-banner[data-pos="box-bl"] { left: 18px;  bottom: 18px; }
.lgpd-banner[data-pos="box-tr"] { right: 18px; top: 18px; }
.lgpd-banner[data-pos="box-tl"] { left: 18px;  top: 18px; }

.lgpd-content { flex: 1; }

.lgpd-title {
  margin: 0 0 6px;
  font-size: calc(16px * var(--lgpd-fs));
  font-weight: 700;
  color: var(--lgpd-fg);
}

.lgpd-text {
  margin: 0;
  font-size: calc(13.5px * var(--lgpd-fs));
  line-height: 1.5;
  color: var(--lgpd-muted);
}

.lgpd-policy {
  color: var(--lgpd-primary);
  text-decoration: underline;
  font-weight: 600;
  white-space: nowrap;
}

.lgpd-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.lgpd-banner[data-pos^="box"] .lgpd-actions { margin-top: 14px; }

/* ---------- Botoes ---------- */
.lgpd-btn {
  font: inherit;
  font-size: calc(13.5px * var(--lgpd-fs));
  font-weight: 700;
  padding: 10px 16px;
  border-radius: calc(var(--lgpd-radius) * 0.7);
  border: 1px solid var(--lgpd-border);
  cursor: pointer;
  transition: transform .08s ease, filter .2s ease, background .2s ease;
  white-space: nowrap;
}
.lgpd-btn:active { transform: scale(.96); }

.lgpd-btn-primary {
  background: var(--lgpd-primary);
  color: var(--lgpd-btn-text);
  border-color: var(--lgpd-primary);
}
.lgpd-btn-primary:hover { filter: brightness(1.08); }

.lgpd-btn-ghost { background: transparent; color: var(--lgpd-fg); }
.lgpd-btn-ghost:hover { background: var(--lgpd-border); }

.lgpd-btn:focus-visible { outline: 2px solid var(--lgpd-primary); outline-offset: 2px; }

/* ---------- Painel ---------- */
.lgpd-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: lgpd-fade .2s ease;
}

.lgpd-panel {
  background: var(--lgpd-bg);
  color: var(--lgpd-fg);
  width: 100%;
  max-width: 520px;
  max-height: 86vh;
  overflow-y: auto;
  border-radius: var(--lgpd-radius);
  border-top: 3px solid var(--lgpd-primary);
  padding: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  animation: lgpd-in .25s ease;
}

.lgpd-cats { margin: 14px 0; }

.lgpd-cat-row {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--lgpd-border);
  cursor: pointer;
}
.lgpd-cat-row:first-child { border-top: none; }

.lgpd-cat-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--lgpd-primary);
  cursor: pointer;
  flex-shrink: 0;
}
.lgpd-cat-row input:disabled { cursor: default; }

.lgpd-cat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc(14.5px * var(--lgpd-fs));
}

.lgpd-always {
  font-size: calc(11px * var(--lgpd-fs));
  font-weight: 700;
  color: var(--lgpd-primary);
  background: var(--lgpd-border);
  padding: 2px 8px;
  border-radius: 20px;
}

.lgpd-cat-desc {
  display: block;
  margin-top: 4px;
  font-size: calc(12.5px * var(--lgpd-fs));
  line-height: 1.45;
  color: var(--lgpd-muted);
}

.lgpd-panel .lgpd-actions { justify-content: flex-end; }

/* ---------- Botao flutuante ---------- */
.lgpd-float {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 999998;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--lgpd-border);
  background: var(--lgpd-bg);
  color: var(--lgpd-fg);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease;
}
.lgpd-float:hover { transform: scale(1.08); }
.lgpd-float:focus-visible { outline: 2px solid var(--lgpd-primary); outline-offset: 2px; }

.lgpd-link-button {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

@keyframes lgpd-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lgpd-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Responsivo ---------- */
@media (max-width: 720px) {
  .lgpd-banner[data-pos="bottom"],
  .lgpd-banner[data-pos="top"] { flex-direction: column; align-items: stretch; }
  .lgpd-banner[data-pos="bottom"] .lgpd-actions,
  .lgpd-banner[data-pos="top"] .lgpd-actions { margin-top: 14px; }
  .lgpd-actions { flex-direction: column; }
  .lgpd-btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .lgpd-banner, .lgpd-panel, .lgpd-overlay { animation: none; }
}