/**
 * GDPR Consent Module — Styles
 *
 * Reusable, framework-agnostic consent banner + preferences panel.
 * All selectors namespaced with .gdpr- to avoid conflicts.
 *
 * REQUIRES: baseline design tokens from app.css (--space-*, --text-*,
 * --color-*, --ring-*, --motion-duration). If loading standalone
 * (without app.css), the hosting page must define these tokens.
 *
 * Spacing: baseline 4px scale (--space-1 through --space-8)
 * Typography: baseline system font stack + type scale
 * Contrast: WCAG 2.2 AA — inherits from baseline light/dark mode
 */

/* ------------------------------------------------------------------ */
/*  Shared                                                             */
/* ------------------------------------------------------------------ */

.gdpr-banner,
.gdpr-panel {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--text-base, 1rem);
  line-height: 1.5;
  color: var(--color-text, #222);
  box-sizing: border-box;
}

.gdpr-banner *,
.gdpr-panel * {
  box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/*  Banner                                                             */
/* ------------------------------------------------------------------ */

.gdpr-banner {
  position: fixed;
  z-index: 99998;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding: var(--space-4, 1rem);
  pointer-events: none;
  animation: gdpr-slide-up 0.35s ease-out;
}

.gdpr-banner--bottom { bottom: 0; }
.gdpr-banner--top { top: 0; animation-name: gdpr-slide-down; }

.gdpr-banner__card {
  width: 100%;
  max-width: 45rem;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, #d8dde3);
  border-radius: 0.5rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  padding: var(--space-6, 1.5rem);
  pointer-events: auto;
}

.gdpr-banner__title {
  margin: 0 0 var(--space-2, 0.5rem) 0;
  font-size: var(--text-lg, 1.125rem);
  font-weight: 600;
}

.gdpr-banner__text {
  margin: 0 0 var(--space-4, 1rem) 0;
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-muted, #5a5a5a);
}

.gdpr-banner__text a { color: var(--color-brand, #4a6fa5); text-decoration: underline; }
.gdpr-banner__text a:hover { color: var(--color-brand-hover, #3a578a); }

.gdpr-banner__gpc-notice {
  margin: 0 0 var(--space-3, 0.75rem) 0;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-muted, #5a5a5a);
  background: var(--color-bg-alt, #f5f5f7);
  border-radius: 0.5rem;
  border-left: 3px solid var(--color-brand, #4a6fa5);
}

.gdpr-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 0.75rem);
  align-items: center;
}

/* ------------------------------------------------------------------ */
/*  Buttons                                                            */
/* ------------------------------------------------------------------ */

.gdpr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2, 0.5rem) var(--space-5, 1.25rem);
  font-family: inherit;
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
  line-height: 1.5;
  border-radius: 0.5rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--motion-duration, 150ms) ease, border-color var(--motion-duration, 150ms) ease;
  min-height: 2.5rem;
  text-decoration: none;
}

.gdpr-btn:focus-visible {
  outline: var(--ring-width, 3px) solid var(--ring-color, var(--color-brand, #4a6fa5));
  outline-offset: var(--ring-offset, 2px);
}

/* Primary — Accept and Reject use this (equal weight) */
.gdpr-btn--primary {
  background: var(--color-brand, #4a6fa5);
  color: var(--color-on-brand, #fff);
  border-color: var(--color-brand, #4a6fa5);
}

.gdpr-btn--primary:hover {
  background: var(--color-brand-hover, #3a578a);
  border-color: var(--color-brand-hover, #3a578a);
}

/* Secondary — same visual weight, different color */
.gdpr-btn--secondary {
  background: var(--color-bg-alt, #f5f5f7);
  color: var(--color-text, #222);
  border-color: var(--color-border, #d8dde3);
}

.gdpr-btn--secondary:hover {
  background: var(--color-bg-hover, #f0f4fa);
}

/* Link-style for Customize */
.gdpr-btn--link {
  background: transparent;
  color: var(--color-brand, #4a6fa5);
  border: none;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  text-decoration: underline;
  font-weight: 500;
}

.gdpr-btn--link:hover { color: var(--color-brand-hover, #3a578a); }

/* ------------------------------------------------------------------ */
/*  Preferences Panel                                                  */
/* ------------------------------------------------------------------ */

.gdpr-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  padding: var(--space-4, 1rem);
  animation: gdpr-fade-in 0.2s ease-out;
}

.gdpr-panel {
  width: 100%;
  max-width: 36rem;
  max-height: 90vh;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, #d8dde3);
  border-radius: 0.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.gdpr-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
  border-bottom: 1px solid var(--color-border, #d8dde3);
}

.gdpr-panel__title {
  margin: 0;
  font-size: var(--text-xl, 1.25rem);
  font-weight: 600;
}

.gdpr-panel__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: transparent;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  color: var(--color-text-muted, #5a5a5a);
  font-size: var(--text-lg, 1.125rem);
  line-height: 1;
  transition: background-color var(--motion-duration, 150ms) ease;
}

.gdpr-panel__close:hover { background: var(--color-bg-alt, #f5f5f7); color: var(--color-text, #222); }
.gdpr-panel__close:focus-visible { outline: var(--ring-width, 3px) solid var(--ring-color, var(--color-brand)); outline-offset: var(--ring-offset, 2px); }

.gdpr-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
}

.gdpr-panel__intro {
  margin: 0 0 var(--space-5, 1.25rem) 0;
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-muted, #5a5a5a);
}

.gdpr-panel__intro a { color: var(--color-brand, #4a6fa5); text-decoration: underline; }
.gdpr-panel__intro a:hover { color: var(--color-brand-hover, #3a578a); }

/* Category rows */
.gdpr-category {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4, 1rem);
  padding: var(--space-4, 1rem) 0;
  border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
}

.gdpr-category:last-child { border-bottom: none; }

.gdpr-category__info { flex: 1; min-width: 0; }
.gdpr-category__label { display: block; font-size: var(--text-base, 1rem); font-weight: 600; margin-bottom: var(--space-1, 0.25rem); }
.gdpr-category__desc { font-size: var(--text-sm, 0.875rem); color: var(--color-text-muted, #5a5a5a); margin: 0; }

.gdpr-category__always-active {
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-brand, #4a6fa5);
  font-weight: 600;
  white-space: nowrap;
  padding-top: var(--space-1, 0.25rem);
}

/* CSS-only toggle switch */
.gdpr-toggle { position: relative; flex-shrink: 0; width: 3rem; height: 1.5rem; }
.gdpr-toggle__input { position: absolute; opacity: 0; width: 0; height: 0; }

.gdpr-toggle__slider {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-border, #d8dde3);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: background-color var(--motion-duration, 150ms) ease;
  position: relative;
}

.gdpr-toggle__slider::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--color-bg, #ffffff);
  border-radius: 50%;
  transition: transform var(--motion-duration, 150ms) ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.gdpr-toggle__input:checked + .gdpr-toggle__slider { background: var(--color-brand, #4a6fa5); }
.gdpr-toggle__input:checked + .gdpr-toggle__slider::after { transform: translateX(1.5rem); }
.gdpr-toggle__input:focus-visible + .gdpr-toggle__slider { outline: var(--ring-width, 3px) solid var(--ring-color, var(--color-brand)); outline-offset: var(--ring-offset, 2px); }

.gdpr-toggle__input:disabled + .gdpr-toggle__slider { background: var(--color-bg-alt, #f5f5f7); cursor: not-allowed; opacity: 0.7; }
.gdpr-toggle__input:disabled:checked + .gdpr-toggle__slider { background: var(--color-bg-alt, #f5f5f7); }
.gdpr-toggle__input:disabled + .gdpr-toggle__slider::after { background: var(--color-text-subtle, #6e6e6e); }

/* Panel footer */
.gdpr-panel__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
  border-top: 1px solid var(--color-border-subtle, #e5e7eb);
}

/* ------------------------------------------------------------------ */
/*  Footer link                                                        */
/* ------------------------------------------------------------------ */

.gdpr-footer-link {
  display: inline-block;
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-brand, #4a6fa5);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font-family: inherit;
}

.gdpr-footer-link:hover { color: var(--color-brand-hover, #3a578a); }
.gdpr-footer-link:focus-visible { outline: var(--ring-width, 3px) solid var(--ring-color, var(--color-brand)); outline-offset: var(--ring-offset, 2px); }

/* ------------------------------------------------------------------ */
/*  Animations                                                         */
/* ------------------------------------------------------------------ */

@keyframes gdpr-slide-up {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes gdpr-slide-down {
  from { opacity: 0; transform: translateY(-1rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes gdpr-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Respect prefers-reduced-motion (baseline handles --motion-duration) */
@media (prefers-reduced-motion: reduce) {
  .gdpr-banner, .gdpr-overlay { animation: none; }
  .gdpr-toggle__slider, .gdpr-toggle__slider::after, .gdpr-btn { transition: none; }
}

/* Respect prefers-contrast */
@media (prefers-contrast: more) {
  .gdpr-btn--primary { border-color: var(--color-text, #000); }
  .gdpr-btn--secondary { border-color: var(--color-text, #000); }
  .gdpr-toggle__slider { border: 2px solid var(--color-text, #000); }
}

/* ------------------------------------------------------------------ */
/*  Responsive                                                         */
/* ------------------------------------------------------------------ */

@media (max-width: 480px) {
  .gdpr-banner { padding: var(--space-2, 0.5rem); }
  .gdpr-banner__card { padding: var(--space-4, 1rem); }
  .gdpr-banner__actions { flex-direction: column; align-items: stretch; }
  .gdpr-banner__actions .gdpr-btn { width: 100%; }

  .gdpr-overlay { padding: var(--space-2, 0.5rem); align-items: flex-end; }
  .gdpr-panel { max-height: 85vh; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .gdpr-panel__header, .gdpr-panel__body, .gdpr-panel__footer { padding-left: var(--space-4, 1rem); padding-right: var(--space-4, 1rem); }
  .gdpr-panel__footer { flex-direction: column; }
  .gdpr-panel__footer .gdpr-btn { width: 100%; }
}

/* ------------------------------------------------------------------ */
/*  Utilities                                                          */
/* ------------------------------------------------------------------ */

.gdpr-hidden { display: none !important; }

.gdpr-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}