/**
 * Cookie-Banner (CookieYes / Cookie Law Info Plugin)
 * Überschreibt das Standard-Blau-Design des Plugins mit den shop&food
 * Design-Tokens (Bitter/Mona Sans, Creme/Rot/Schwarz, Pill-Buttons).
 * Die Plugin-Inline-Styles haben hohe Spezifität → !important nötig.
 */

.cky-consent-container .cky-consent-bar,
.cky-modal,
.cky-preference-center {
  background-color: var(--color-cream) !important;
  border-color: var(--color-black) !important;
  font-family: var(--font-body) !important;
  border-radius: var(--radius-md) !important;
}

.cky-notice .cky-title,
.cky-preference-header .cky-preference-title {
  font-family: var(--font-display) !important;
  font-weight: var(--weight-extrabold) !important;
  color: var(--color-text) !important;
}

.cky-notice-des,
.cky-notice-des p,
.cky-notice-group,
.cky-preference-content-wrapper,
.cky-accordion-header-des,
.cky-audit-table {
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
}

.cky-notice-des a.cky-policy,
.cky-notice-des button.cky-policy,
.cky-preference-content-wrapper .cky-show-desc-btn {
  color: var(--color-red) !important;
  border-color: var(--color-red) !important;
}

.cky-accordion-header .cky-accordion-btn {
  color: var(--color-text) !important;
  font-family: var(--font-display) !important;
}

.cky-accordion-header .cky-always-active {
  color: var(--color-green) !important;
}

/* Buttons – wie restliche Pill-Buttons der Seite */
.cky-btn {
  font-family: var(--font-body) !important;
  border-radius: var(--radius-pill) !important;
  padding: 10px 24px !important;
  font-weight: var(--weight-regular) !important;
  text-transform: none !important;
  margin: 0 var(--space-3) var(--space-3) 0 !important;
}

.cky-notice-btn-wrapper {
  gap: var(--space-3) !important;
}

/* Verlauf am Ende der scrollbaren Kategorien-Liste (Cookie-Einstellungen
   anpassen) – Creme statt Standard-Weiss, damit er zum Panel passt */
.cky-footer-shadow {
  background: linear-gradient(rgba(255, 251, 187, 0), var(--color-cream)) !important;
}

.cky-btn-accept {
  background-color: var(--color-red) !important;
  color: var(--color-cream) !important;
  border-color: var(--color-red) !important;
}
.cky-btn-accept:hover {
  opacity: 1 !important;
  background-color: #d40003 !important;
}

.cky-btn-customize,
.cky-btn-reject,
.cky-btn-preferences {
  background-color: transparent !important;
  color: var(--color-text) !important;
  border: var(--border-btn) solid var(--color-black) !important;
}
.cky-btn-customize:hover,
.cky-btn-reject:hover,
.cky-btn-preferences:hover {
  opacity: 1 !important;
  background-color: var(--color-black) !important;
  color: var(--color-cream) !important;
}

.cky-switch input[type="checkbox"]:checked {
  background: var(--color-green) !important;
}

/* ─── Revisit-Button: gleich gross + gleicher Style wie a11y-toggle ── */

.cky-btn-revisit-wrapper {
  /* Position: unten links – Accessibility-Toggle ist unten rechts */
  bottom: var(--a11y-bottom, 24px) !important;
  left: var(--a11y-right, 24px) !important;
  right: auto !important;
  top: auto !important;

  width: var(--a11y-btn-size, 68px) !important;
  height: var(--a11y-btn-size, 68px) !important;
  border-radius: 50% !important;
  background-color: var(--color-black) !important;
  border: 2px solid var(--color-cream) !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: background-color 0.22s ease, transform 0.22s ease, border-color 0.22s ease !important;
}

.cky-btn-revisit-wrapper:hover {
  background-color: var(--color-red) !important;
  border-color: var(--color-red) !important;
  transform: scale(1.1) !important;
}

/* Innerer Button: transparent, damit die Wrapper-Rund-Form wirkt */
.cky-btn-revisit-wrapper .cky-btn-revisit {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  cursor: pointer !important;
}

/* Icon cream einfärben – SVG via currentColor, IMG via filter */
.cky-btn-revisit-wrapper,
.cky-btn-revisit-wrapper .cky-btn-revisit {
  color: var(--color-cream, #FFFBBB) !important;
}

.cky-btn-revisit-wrapper svg,
.cky-btn-revisit-wrapper .cky-btn-revisit svg {
  width: 26px !important;
  height: 26px !important;
  fill: var(--color-cream, #FFFBBB) !important;
  stroke: var(--color-cream, #FFFBBB) !important;
  color: var(--color-cream, #FFFBBB) !important;
}

/* CookieYes rendert das Icon als <img> mit fill="white" auf allen Pfaden.
   sepia(1)+saturate(5) färbt Weiss → Cream (#FFFBBB) ohne zu invertieren. */
.cky-btn-revisit-wrapper img {
  width: 32px !important;
  height: 32px !important;
  filter: url(#saf-cream) !important;
}

/* ─── Tooltip «Cookie-Einstellungen»: schwarz ─────────────── */
/* CookieYes rendert das Fähnchen via ::before auf dem Wrapper.
   Beide möglichen Pfeil-Richtungen (rechts/links) werden abgedeckt,
   damit unabhängig von der Plugin-Position-Einstellung die Farbe stimmt. */

[data-cky-tag="revisit-consent"]::before,
.cky-btn-revisit-wrapper::before {
  background-color: var(--color-black) !important;
  color: var(--color-cream, #FFFBBB) !important;
  font-family: var(--font-body, 'Mona Sans', Arial, sans-serif) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  padding: 7px 14px !important;
  border-radius: 6px !important;
}

/* Pfeil (::after) – deckt beide Richtungen ab */
[data-cky-tag="revisit-consent"]::after,
.cky-btn-revisit-wrapper::after {
  border-right-color: var(--color-black) !important;
  border-left-color: var(--color-black) !important;
}

.cky-overlay {
  background: var(--color-black) !important;
}