/*!
 * Mappier — estilos do banner/modal de consentimento (CMP).
 * Alinhado ao tema navy/azul da marca; usa var(--token, fallback) para
 * funcionar em qualquer página (index, obrigado, páginas legais).
 */

/* Banner ancorado no canto inferior direito; NÃO bloqueia a página
   (pointer-events só no card) e NÃO esmaece o fundo. */
.mpc-root {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 1.25rem;
  pointer-events: none;
  font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.mpc-root[hidden] { display: none; }

/* Esmaecimento do fundo DESATIVADO — para reativar, troque por
   inset:0 + background rgba + backdrop-filter (e o pointer-events do root). */
.mpc-overlay { display: none; }

.mpc-dialog {
  position: relative;
  width: 100%;
  max-width: 420px;
  min-width: 0;
  box-sizing: border-box;
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  pointer-events: auto;
  background: var(--surface-raised, #131D2E);
  background-image: linear-gradient(180deg, rgba(13, 153, 255, 0.06), transparent 38%);
  border: 1px solid var(--border-strong, rgba(14, 111, 184, 0.35));
  border-radius: 18px;
  padding: 1.6rem 1.6rem 1.4rem;
  box-shadow:
    0 0 0 1px rgba(13, 153, 255, 0.08),
    0 24px 70px rgba(0, 0, 0, 0.55),
    0 0 60px rgba(13, 153, 255, 0.12);
  color: var(--text-primary, #E8ECF1);
  animation: mpc-rise 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.mpc-title {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.55rem;
}
.mpc-text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-secondary, #7A8BA0);
  margin: 0 0 0.9rem;
}

.mpc-links {
  font-size: 0.82rem;
  margin: 0 0 1.15rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.mpc-links a {
  color: var(--brand-glow, #0D99FF);
  text-decoration: none;
  font-weight: 500;
}
.mpc-links a:hover { text-decoration: underline; }
.mpc-dot { color: var(--text-dim, #4A5568); }

/* ---------- Ações / botões (Recusar e Aceitar com peso visual equivalente) ---------- */
.mpc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  justify-content: flex-end;
}
.mpc-btn {
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 10px;
  padding: 0.72rem 1.15rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, color 0.2s ease;
}
.mpc-btn:active { transform: translateY(1px); }
.mpc-btn:focus-visible { outline: 2px solid var(--brand-glow, #0D99FF); outline-offset: 2px; }

.mpc-btn-primary {
  background: var(--brand-glow, #0D99FF);
  color: #04121f;
  flex: 1 1 auto;
}
.mpc-btn-primary:hover { background: #36abff; }

.mpc-btn-neutral {
  background: rgba(122, 139, 160, 0.10);
  border-color: var(--border-strong, rgba(14, 111, 184, 0.35));
  color: var(--text-primary, #E8ECF1);
  flex: 1 1 auto;
}
.mpc-btn-neutral:hover { border-color: var(--brand-glow, #0D99FF); background: rgba(122, 139, 160, 0.16); }

.mpc-link-btn {
  background: none;
  border: none;
  color: var(--text-secondary, #7A8BA0);
  padding: 0.72rem 0.4rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mpc-link-btn:hover { color: var(--text-primary, #E8ECF1); }

/* ---------- Detalhes ---------- */
.mpc-dhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}
.mpc-close {
  background: none;
  border: none;
  color: var(--text-secondary, #7A8BA0);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 8px;
}
.mpc-close:hover { color: var(--text-primary, #E8ECF1); background: rgba(122, 139, 160, 0.12); }

.mpc-cats { margin: 0.6rem 0 0.4rem; }
.mpc-cat {
  border-top: 1px solid var(--border, rgba(14, 111, 184, 0.15));
  padding: 0.85rem 0;
}
.mpc-cat:first-child { border-top: none; }
.mpc-cat-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.mpc-cat-name {
  font-weight: 600;
  font-size: 0.95rem;
}
.mpc-badge {
  margin-left: auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-glow, #0D99FF);
  background: rgba(13, 153, 255, 0.12);
  border: 1px solid rgba(13, 153, 255, 0.25);
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
}
.mpc-cat-desc {
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--text-secondary, #7A8BA0);
  margin: 0.5rem 0 0;
  padding-left: 3.2rem;
}

/* ---------- Switch ---------- */
.mpc-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex: 0 0 auto;
}
.mpc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.mpc-slider {
  position: absolute;
  inset: 0;
  background: rgba(122, 139, 160, 0.28);
  border-radius: 999px;
  transition: background 0.2s ease;
}
.mpc-slider::before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
}
.mpc-switch input:checked + .mpc-slider { background: var(--brand-glow, #0D99FF); }
.mpc-switch input:checked + .mpc-slider::before { transform: translateX(18px); }
.mpc-switch input:disabled + .mpc-slider { opacity: 0.6; cursor: not-allowed; }
.mpc-switch input:focus-visible + .mpc-slider { box-shadow: 0 0 0 2px var(--brand-glow, #0D99FF); }

/* ---------- Sobre ---------- */
.mpc-about {
  margin: 0.6rem 0 1.1rem;
  border-top: 1px solid var(--border, rgba(14, 111, 184, 0.15));
  padding-top: 0.85rem;
}
.mpc-about summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  list-style: none;
}
.mpc-about summary::-webkit-details-marker { display: none; }
.mpc-about summary::after { content: " +"; color: var(--text-dim, #4A5568); }
.mpc-about[open] summary::after { content: " –"; }
.mpc-about p {
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--text-secondary, #7A8BA0);
  margin: 0.6rem 0 0;
}

/* ---------- Link "Gerenciar cookies" no rodapé ---------- */
.mpc-manage {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}
.mpc-manage:hover { color: var(--brand-glow, #0D99FF); }

/* Integração com o rodapé legal do site (links de política + gerenciar) */
.footer-legal a,
.footer-legal .mpc-manage {
  color: var(--text-secondary, #7A8BA0);
  text-decoration: none;
  font: inherit;
  letter-spacing: inherit;
}
.footer-legal a:hover,
.footer-legal .mpc-manage:hover { color: var(--brand-glow, #0D99FF); }

@keyframes mpc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mpc-rise { from { opacity: 0; transform: translateY(16px) scale(0.985); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  /* Telas pequenas: ancorado ao fundo da tela, ocupando a largura */
  .mpc-root { align-items: flex-end; justify-content: center; padding: 1rem; }
  .mpc-dialog { max-width: 100%; max-height: 88vh; }
  .mpc-actions .mpc-btn-primary,
  .mpc-actions .mpc-btn-neutral { flex: 1 1 100%; }
  .mpc-cat-desc { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mpc-overlay, .mpc-dialog { animation: none; }
}