/* ============================================================
   Complianz — Custom Styling im ENZ-Abschleppdienst-Look
   ============================================================
   Complianz rendert sein Markup selbst (Plugin-Output), daher lässt sich
   das nicht im Theme-HTML anpassen — nur per CSS überschreiben.

   WICHTIG: Complianz kann die eigenen CSS-Klassen zwischen Plugin-Versionen
   leicht ändern. Falls einzelne Regeln hier nicht greifen: im Browser
   Rechtsklick auf das Banner → "Untersuchen" und die tatsächliche Klasse
   prüfen (meist weiterhin mit "cmplz-" Präfix). Diese Datei deckt den
   Consent-Banner, die Buttons, die Kategorien-/Detailansicht und den
   "Cookie-Einstellungen"-Link ab.

   Hinweis zum Wiederöffnen-Link: Complianz zeigt (anders als manche andere
   Tools) nicht automatisch ein schwebendes Icon an. Damit Besucher ihre
   Einwilligung später ändern können, den Shortcode [cmplz-manage-consent]
   z. B. im Footer oder auf der Datenschutzseite platzieren — die Regel
   weiter unten stylt genau dieses Element.
   ============================================================ */

/* ---------- "Brechstange": alles im Banner-Container pauschal schwarz ----------
   Falls die genauen cmplz-Unterklassen bei euch anders heißen als unten
   angenommen, greift diese Regel trotzdem — sie schwärzt jedes Element
   innerhalb des Consent-Banners, unabhängig vom Klassennamen. Die
   spezifischeren Regeln weiter unten (Gelb-Buttons, weißes Kategorien-
   panel) stehen bewusst danach im Code und gewinnen dadurch wieder dort,
   wo eine andere Farbe gewollt ist. */
#cmplz-cookiebanner-container,
#cmplz-cookiebanner-container *,
.cmplz-cookiebanner,
.cmplz-cookiebanner * {
  background: var(--color-black) !important;
  background-color: var(--color-black) !important;
  background-image: none !important;
}

/* ---------- Consent-Banner ---------- */
/* Complianz steuert Farben teils über eigene CSS-Variablen (--cmplz-*).
   Die überschreiben wir hier zusätzlich zu den direkten Property-Regeln,
   damit auch plugin-interne Styles, die diese Variablen referenzieren,
   auf Schwarz landen — nicht nur der äußere Banner-Container. */
.cmplz-cookiebanner {
  --cmplz-banner-color: var(--color-black);
  --cmplz-body-background-color: var(--color-black);
  --cmplz-header-background-color: var(--color-black);
  background: var(--color-black) !important;
  background-color: var(--color-black) !important;
  border-top: 3px solid var(--color-yellow) !important;
  border-radius: 0 !important;
  font-family: var(--font-body) !important;
  box-shadow: none !important;
}

.cmplz-cookiebanner.cmplz-bottom-center,
.cmplz-cookiebanner.cmplz-bottom,
.cmplz-cookiebanner.cmplz-bottom-left,
.cmplz-cookiebanner.cmplz-bottom-right {
  border-radius: 0 !important;
}

/* Header/Body sind bei Complianz teils eigene Blöcke mit eigenem
   Hintergrund (oft Weiß) — explizit mit-schwärzen, falls der äußere
   Container-Hintergrund dadurch verdeckt wird. */
.cmplz-cookiebanner .cmplz-header,
.cmplz-cookiebanner .cmplz-body,
.cmplz-cookiebanner .cmplz-message-container,
#cmplz-cookiebanner-container .cmplz-cookiebanner {
  background: var(--color-black) !important;
  background-color: var(--color-black) !important;
}

.cmplz-cookiebanner .cmplz-header {
  padding: 1.4rem 1.5rem 0.4rem !important;
}

.cmplz-cookiebanner .cmplz-header .cmplz-title,
.cmplz-cookiebanner .cmplz-title {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
  color: var(--color-white) !important;
  font-size: 1.1rem !important;
}

.cmplz-cookiebanner .cmplz-close {
  color: var(--color-white) !important;
}

.cmplz-cookiebanner .cmplz-body {
  padding: 0.4rem 1.5rem 1.5rem !important;
}

.cmplz-cookiebanner .cmplz-message,
.cmplz-cookiebanner .cmplz-message p {
  font-family: var(--font-body) !important;
  color: #d6d5d1 !important;
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
}

.cmplz-cookiebanner .cmplz-message a,
.cmplz-cookiebanner .cmplz-links a {
  color: var(--color-yellow) !important;
  text-decoration: underline !important;
}

.cmplz-cookiebanner .cmplz-links {
  font-family: var(--font-mono) !important;
  font-size: 0.78rem !important;
}

.cmplz-cookiebanner .cmplz-divider {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* ---------- Buttons (Akzeptieren / Ablehnen / Optionen verwalten) ---------- */
.cmplz-cookiebanner .cmplz-buttons {
  padding: 0 1.5rem 1.5rem !important;
  gap: 0.7rem !important;
}

.cmplz-cookiebanner .cmplz-btn {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  border-radius: 2px !important;
  padding: 0.8em 1.5em !important;
  border: 2px solid var(--color-black) !important;
  text-transform: none !important;
  box-shadow: none !important;
  transition: transform 0.12s ease !important;
}

.cmplz-cookiebanner .cmplz-btn:hover {
  transform: translateY(-2px) !important;
}

/* "Akzeptieren" — wie .btn-primary */
.cmplz-cookiebanner .cmplz-btn.cmplz-accept {
  background: var(--color-yellow) !important;
  color: var(--color-black) !important;
  border-color: var(--color-black) !important;
}

.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover {
  background: var(--color-yellow-dark) !important;
}

/* "Ablehnen" / "Optionen verwalten" — wie .btn-outline auf dunklem Grund */
.cmplz-cookiebanner .cmplz-btn.cmplz-deny,
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,
.cmplz-cookiebanner .cmplz-btn.cmplz-manage-options {
  background: transparent !important;
  color: var(--color-white) !important;
  border-color: var(--color-white) !important;
}

.cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-manage-options:hover {
  background: var(--color-white) !important;
  color: var(--color-black) !important;
}

/* ---------- Kategorien-/Detailansicht ---------- */
.cmplz-cookiebanner .cmplz-categories {
  background: var(--color-white) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.cmplz-category {
  border-bottom: 1px solid var(--color-border, #e4e2da) !important;
}

.cmplz-category .cmplz-category-header {
  padding: 1rem 1.5rem !important;
}

.cmplz-category .cmplz-title,
.cmplz-category-header .cmplz-title {
  font-family: var(--font-mono) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--color-ink, #17171a) !important;
}

.cmplz-category .cmplz-description,
.cmplz-category .cmplz-description p {
  font-family: var(--font-body) !important;
  color: var(--color-gray-700, #3a3a3c) !important;
  font-size: 0.88rem !important;
  padding: 0 1.5rem 1rem !important;
}

/* Toggle-Switches auf Markenfarbe */
.cmplz-category input:checked ~ .cmplz-slider,
.cmplz-category input:checked + .cmplz-slider,
.cmplz-slider.cmplz-checked {
  background-color: var(--color-yellow) !important;
}

.cmplz-slider {
  border-radius: 2px !important;
}

/* ---------- "Cookie-Einstellungen"-Link/Button (Shortcode [cmplz-manage-consent]) ---------- */
.cmplz-manage-consent,
#cmplz-manage-consent-container button,
#cmplz-manage-consent-container a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5em !important;
  font-family: var(--font-mono) !important;
  font-size: 0.78rem !important;
  color: inherit !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
}

.cmplz-manage-consent:hover,
#cmplz-manage-consent-container button:hover,
#cmplz-manage-consent-container a:hover {
  color: var(--color-yellow) !important;
}

/* Schwebendes Icon (zugeklappter Zustand nach getroffener Auswahl) —
   sitzt oft außerhalb von #cmplz-cookiebanner-container als eigenes
   Element, daher hier nochmal explizit auf Schwarz statt Gelb. */
.cmplz-revoke,
.cmplz-revoke *,
.cmplz-revoke-container,
.cmplz-revoke-container *,
#cmplz-revoke-container,
#cmplz-revoke-container * {
  background: var(--color-black) !important;
  background-color: var(--color-black) !important;
}

.cmplz-revoke,
.cmplz-revoke-container,
#cmplz-revoke-container {
  border: 2px solid var(--color-yellow) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}

.cmplz-revoke svg,
.cmplz-revoke svg path,
.cmplz-revoke-container svg,
.cmplz-revoke-container svg path {
  fill: var(--color-yellow) !important;
  color: var(--color-yellow) !important;
}

/* ---------- Mobile: Buttons volle Breite ---------- */
@media (max-width: 640px) {
  .cmplz-cookiebanner .cmplz-buttons {
    flex-direction: column !important;
  }

  .cmplz-cookiebanner .cmplz-btn {
    width: 100% !important;
    text-align: center !important;
  }
}