/* ══════════════════════════════════════════════════════════════════════════
   Cookie-Banner Styling — angeglichen an die Linh-Tran-Website
   Dark Theme, Brand-Rot #e63c2f, Inter, Pill-Buttons, Letter-Spacing.
   Override für CookieConsent v3.
   ══════════════════════════════════════════════════════════════════════════ */

#cc-main {
  /* CSS-Variablen, die CookieConsent für sein Theming verwendet */
  --cc-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Banner & Modal Hintergrund */
  --cc-bg: #0e0e0e;
  --cc-primary-color: #ffffff;
  --cc-secondary-color: #d4d4d8;

  /* Buttons */
  --cc-btn-primary-bg: #e63c2f;
  --cc-btn-primary-color: #ffffff;
  --cc-btn-primary-hover-bg: #cc2200;
  --cc-btn-primary-hover-color: #ffffff;

  --cc-btn-secondary-bg: rgba(255, 255, 255, 0.06);
  --cc-btn-secondary-color: #ffffff;
  --cc-btn-secondary-hover-bg: rgba(255, 255, 255, 0.12);
  --cc-btn-secondary-hover-color: #ffffff;
  --cc-btn-secondary-border-color: rgba(255, 255, 255, 0.18);
  --cc-btn-secondary-hover-border-color: rgba(255, 255, 255, 0.3);

  /* Toggle-Switches */
  --cc-toggle-on-bg: #e63c2f;
  --cc-toggle-off-bg: #3f3f46;
  --cc-toggle-on-knob-bg: #ffffff;
  --cc-toggle-off-knob-bg: #ffffff;
  --cc-toggle-readonly-bg: #1f1f1f;
  --cc-toggle-readonly-knob-bg: #71717a;
  --cc-toggle-readonly-knob-icon-color: #1f1f1f;

  /* Border / Trennlinien */
  --cc-separator-border-color: rgba(255, 255, 255, 0.08);
  --cc-cookie-category-block-bg: #161616;
  --cc-cookie-category-block-border: rgba(255, 255, 255, 0.08);
  --cc-cookie-category-block-hover-bg: #1a1a1a;
  --cc-cookie-category-block-hover-border: rgba(230, 60, 47, 0.35);
  --cc-cookie-category-expanded-block-bg: #1a1a1a;

  /* Overlay (Backdrop) */
  --cc-overlay-bg: rgba(10, 10, 10, 0.78);
  --cc-overlay-opacity: 1;

  /* Footer-Links im Banner */
  --cc-footer-bg: #0a0a0a;
  --cc-footer-color: rgba(255, 255, 255, 0.55);
  --cc-footer-border-color: rgba(255, 255, 255, 0.06);
}

/* ── Banner: pill-form Buttons + Letter-Spacing wie .btn-primary ───────── */
#cc-main .cm__btn,
#cc-main .pm__btn {
  border-radius: 9999px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 0.78rem !important;
  padding: 0.7rem 1.5rem !important;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
  border-width: 1px !important;
}
#cc-main .cm__btn--primary:hover,
#cc-main .pm__btn--primary:hover {
  transform: scale(1.03);
  box-shadow: 0 0 0 4px rgba(230, 60, 47, 0.25);
}

/* ── Banner-Container (Box, unten rechts) ────────────────────────────── */
#cc-main .cm {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 1rem !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(230, 60, 47, 0.12) !important;
  max-width: 420px !important;
}
#cc-main .cm__title {
  font-weight: 800 !important;
  font-size: 1.15rem !important;
  letter-spacing: -0.005em !important;
  color: #ffffff !important;
}
#cc-main .cm__desc {
  color: #d4d4d8 !important;
  line-height: 1.6 !important;
  font-size: 0.92rem !important;
}
#cc-main .cm__footer {
  background: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding-top: 0.85rem !important;
  font-size: 0.78rem !important;
}
#cc-main .cm__footer a {
  color: #e63c2f !important;
  text-decoration: none !important;
  margin-right: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
#cc-main .cm__footer a:hover {
  text-decoration: underline !important;
}

/* ── Preferences-Modal ────────────────────────────────────────────────── */
#cc-main .pm {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 1rem !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6) !important;
}
#cc-main .pm__title {
  font-weight: 900 !important;
  font-size: 1.4rem !important;
  letter-spacing: -0.01em !important;
  color: #ffffff !important;
}
#cc-main .pm__section-title {
  font-weight: 700 !important;
  color: #ffffff !important;
  font-size: 0.95rem !important;
}
#cc-main .pm__section-desc {
  color: #a1a1aa !important;
  line-height: 1.65 !important;
  font-size: 0.88rem !important;
}
#cc-main .pm__section--toggle .pm__section-arrow {
  color: #e63c2f !important;
}
#cc-main .pm__badge {
  display: inline-block;
  background: rgba(230, 60, 47, 0.12);
  color: #e63c2f;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.55rem;
  border-radius: 9999px;
  margin-left: 0.5rem;
  vertical-align: middle;
  border: 1px solid rgba(230, 60, 47, 0.3);
}
#cc-main .pm__section a {
  color: #e63c2f !important;
  text-decoration: underline !important;
}

/* ── Cookie-Tabelle ──────────────────────────────────────────────────── */
#cc-main .pm__section-table {
  font-size: 0.82rem !important;
}
#cc-main .pm__section-table th {
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
}
#cc-main .pm__section-table td {
  color: #d4d4d8 !important;
}

/* ── Toggle-Switches: rote Akzentfarbe ────────────────────────────────── */
#cc-main .section__toggle:checked + .toggle__icon {
  background: #e63c2f !important;
}

/* ── Mobile Anpassungen ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  #cc-main .cm {
    max-width: calc(100vw - 1.5rem) !important;
    margin: 0.75rem !important;
  }
  #cc-main .cm__btn,
  #cc-main .pm__btn {
    font-size: 0.72rem !important;
    padding: 0.65rem 1.1rem !important;
  }
  #cc-main .cm__title { font-size: 1rem !important; }
  #cc-main .cm__desc { font-size: 0.85rem !important; }
}