/*
 * legal-compliance - cookie-consent banner styles.
 * Framework-agnostic; scoped under the <legal-consent-banner> custom element so
 * it does not leak into the host page. Variables let a type override the palette.
 */
legal-consent-banner {
  --legal-consent-bg: #111;
  --legal-consent-fg: #fff;
  --legal-consent-accent: #2563eb;
  --legal-consent-muted: #9ca3af;
}

legal-consent-banner .legal-consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2147483645;
  margin: 0 auto;
  max-width: 720px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 16px 18px;
  background: var(--legal-consent-bg);
  color: var(--legal-consent-fg);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
  font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

legal-consent-banner .legal-consent__body {
  flex: 1 1 320px;
  margin: 0;
}

/* mode="notice": informational bar with a single acknowledgment button. */
legal-consent-banner .legal-consent--notice .legal-consent__body {
  flex: 1 1 260px;
}

legal-consent-banner .legal-consent__link {
  color: var(--legal-consent-fg);
  text-decoration: underline;
}

legal-consent-banner .legal-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

legal-consent-banner .legal-consent__btn {
  border: 0;
  border-radius: 8px;
  padding: 9px 16px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

legal-consent-banner .legal-consent__btn--primary {
  background: var(--legal-consent-accent);
  color: #fff;
}

legal-consent-banner .legal-consent__btn--secondary {
  background: transparent;
  color: var(--legal-consent-fg);
  border: 1px solid var(--legal-consent-muted);
}

legal-consent-banner .legal-consent__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  legal-consent-banner .legal-consent {
    animation: legal-consent-in 0.18s ease-out;
  }
  @keyframes legal-consent-in {
    from { transform: translateY(8px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
}