/**
 * Cookie-Banner von 99bugs: Gestaltung.
 * Wird NACH cb99-base.css geladen und passt das Banner an 99bugs.de an.
 * Keine Schrift wird geladen (die Seitenschrift wird geerbt), keine externen URLs.
 *
 * Optional einstellbar (:root-Variablen aus den Plugin-Einstellungen):
 *   --cb99-bg, --cb99-text, --cb99-accent, --cb99-accent-text, --cb99-link
 * Rückfall: WordPress-Theme-Variablen, danach feste Werte der Seite.
 * Die Fläche des Banners heißt --cb99-surface (--cb99-bg ist die Plugin-Einstellung).
 */

#cb99-main {
  color-scheme: light;

  /* Schrift und Form */
  --cb99-modal-border-radius: 6px;
  --cb99-btn-border-radius: 4px;
  --cb99-pm-toggle-border-radius: 4em;

  /* Flächen und Text */
  --cb99-surface: var(--cb99-bg, var(--wp--preset--color--weiss, #fff));
  --cb99-primary-color: var(--cb99-text, var(--wp--preset--color--tinte, #12262A));
  --cb99-secondary-color: var(--cb99-text, var(--wp--preset--color--tinte, #12262A));
  --cb99-link-color: var(--cb99-link, var(--cb99-accent, var(--wp--preset--color--petrol, #0B4F5A)));
  --cb99-separator-border-color: color-mix(in srgb, var(--cb99-primary-color) 18%, transparent);
  --cb99-overlay-bg: rgba(10, 46, 52, .65);

  /* Buttons: alle gleich, auch "Alle ablehnen" und "Einstellungen" */
  --cb99-btn-primary-bg: var(--cb99-accent, var(--wp--preset--color--petrol, #0B4F5A));
  --cb99-btn-primary-color: var(--cb99-accent-text, var(--wp--preset--color--weiss, #fff));
  --cb99-btn-primary-border-color: var(--cb99-btn-primary-bg);
  --cb99-btn-primary-hover-bg: color-mix(in srgb, var(--cb99-btn-primary-bg) 78%, #000);
  --cb99-btn-primary-hover-color: var(--cb99-btn-primary-color);
  --cb99-btn-primary-hover-border-color: var(--cb99-btn-primary-hover-bg);
  --cb99-btn-secondary-bg: var(--cb99-btn-primary-bg);
  --cb99-btn-secondary-color: var(--cb99-btn-primary-color);
  --cb99-btn-secondary-border-color: var(--cb99-btn-primary-border-color);
  --cb99-btn-secondary-hover-bg: var(--cb99-btn-primary-hover-bg);
  --cb99-btn-secondary-hover-color: var(--cb99-btn-primary-hover-color);
  --cb99-btn-secondary-hover-border-color: var(--cb99-btn-primary-hover-border-color);

  /* Schalter */
  --cb99-toggle-on-bg: var(--cb99-btn-primary-bg);
  --cb99-toggle-off-bg: color-mix(in srgb, var(--cb99-primary-color) 62%, var(--cb99-surface));
  --cb99-toggle-on-knob-bg: var(--cb99-surface);
  --cb99-toggle-off-knob-bg: var(--cb99-surface);
  --cb99-toggle-readonly-bg: color-mix(in srgb, var(--cb99-btn-primary-bg) 55%, var(--cb99-surface));
  --cb99-toggle-readonly-knob-bg: var(--cb99-surface);
  --cb99-toggle-readonly-knob-icon-color: var(--cb99-toggle-readonly-bg);

  /* Kategorien */
  --cb99-cookie-category-block-bg: var(--wp--preset--color--hellgrau, #F4F6F5);
  --cb99-cookie-category-block-border: color-mix(in srgb, var(--cb99-primary-color) 18%, transparent);
  --cb99-cookie-category-block-hover-bg: var(--cb99-cookie-category-block-bg);
  --cb99-cookie-category-block-hover-border: var(--cb99-btn-primary-bg);
  --cb99-cookie-category-expanded-block-bg: var(--cb99-cookie-category-block-bg);
  --cb99-cookie-category-expanded-block-hover-bg: var(--cb99-cookie-category-block-bg);

  /* Fußzeile (hellgrauer Streifen) */
  --cb99-footer-bg: var(--wp--preset--color--hellgrau, #F4F6F5);
  --cb99-footer-color: var(--cb99-primary-color);
  --cb99-footer-border-color: var(--cb99-separator-border-color);

  /* Schrift der Seite (15px, Zeilenhöhe 1,65) übernehmen */
  font-size: inherit;
  line-height: 1.5;
}

#cb99-main *,
#cb99-main button,
#cb99-main input {
  font-family: inherit;
}

/* Erster Dialog: mittig, Inhalt zentriert */
#cb99-main .cb99-cm {
  width: min(28rem, calc(100vw - 2rem));
  max-width: none;
  max-height: calc(100vh - 2rem);
}

#cb99-main .cb99-cm__body {
  min-height: 0;
}

#cb99-main .cb99-cm__title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  padding-top: 1.4rem;
}

#cb99-main .cb99-cm__desc {
  font-size: .9rem;
  line-height: 1.6;
  max-height: 40vh;
  overflow-y: auto;
}

#cb99-main .cb99-cm__title + .cb99-cm__desc {
  margin-top: .9rem;
}

/* Drei gleich breite, gleich hohe Buttons untereinander */
#cb99-main .cb99-cm__btns {
  gap: .5rem;
  padding: 1rem 1.3rem 1.3rem;
  border-top: 0;
}

#cb99-main .cb99-cm__btn-group {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0;
}

#cb99-main .cb99-cm__btn-group + .cb99-cm__btn-group,
#cb99-main .cb99-cm__btn + .cb99-cm__btn {
  margin: 0;
}

#cb99-main .cb99-cm__btn,
#cb99-main .cb99-pm__btn {
  width: 100%;
  min-height: 44px;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
}

/* Fußzeile: zentrierte Links */
#cb99-main .cb99-cm__footer {
  padding: .5rem 0;
}

#cb99-main .cb99-cm__links {
  padding-top: 0;
  padding-bottom: 0;
}

#cb99-main .cb99-cm__link-group {
  justify-content: center;
  font-size: .85rem;
  gap: 1.5rem;
}

#cb99-main .cb99-cm__link-group > * + * {
  margin-left: 0;
}

#cb99-main .cb99-cm__link-group a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Links: Farbe der Seite, unterstrichen */
#cb99-main a {
  color: var(--cb99-link-color);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: .15em;
}

#cb99-main a:hover {
  color: color-mix(in srgb, var(--cb99-link-color) 78%, #000);
}

/* Fokus: 3px Dunkelpetrol, Abstand 3px (auf Petrol-Buttons mit weißem Innenring sichtbar) */
#cb99-main a:focus-visible,
#cb99-main button:focus-visible,
#cb99-main input:focus-visible ~ .cb99-toggle__icon,
#cb99-main .cb99-section__toggle:focus-visible ~ .cb99-toggle__icon {
  outline: 3px solid var(--wp--preset--color--dunkelpetrol, #0A2E34);
  outline-offset: 3px;
}

#cb99-main .cb99-cm__btn:focus-visible,
#cb99-main .cb99-pm__btn:focus-visible,
#cb99-main .cb99-pm__close-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--cb99-surface);
}

/* Zweiter Dialog: Einstellungen */
#cb99-main .cb99-pm__header {
  padding: 1rem 1.4rem;
}

#cb99-main .cb99-pm__title {
  font-size: 1.1rem;
  font-weight: 700;
}

#cb99-main .cb99-pm__close-btn {
  width: 44px;
  height: 44px;
}

#cb99-main .cb99-pm__section-title {
  font-size: .95rem;
  font-weight: 600;
}

#cb99-main .cb99-pm__section-desc,
#cb99-main .cb99-pm__section-desc-wrapper {
  font-size: .9rem;
}

#cb99-main .cb99-pm__footer {
  flex-wrap: wrap;
  gap: .5rem;
}

#cb99-main .cb99-pm__btn-group {
  flex: 1 1 auto;
  gap: .5rem;
}

#cb99-main .cb99-pm__btn,
#cb99-main .cb99-pm__btn + .cb99-pm__btn,
#cb99-main .cb99-pm__btn-group + .cb99-pm__btn-group {
  margin-left: 0;
}

#cb99-main .cb99-pm__btn {
  flex: auto;
  min-width: 0;
}

/* Dekoratives Cookie-Bild oben im ersten Dialog (nur Zierde, nicht fokussierbar) */
#cb99-main .cb99-cookie {
  display: block;
  width: 56px;
  height: 56px;
  margin: 1.25rem auto -.5rem;
  pointer-events: none;
}

/* Krümel nach der Wahl: Container deckt die Dialogfläche ab (Maße per Skript), liegt fest über der Seite, ohne Klicks abzufangen */
.cb99-crumbs {
  position: fixed;
  overflow: visible;
  z-index: 2147483647;
  pointer-events: none;
}

.cb99-crumb {
  position: absolute;
  left: var(--cb99-fx, 50%);
  top: var(--cb99-fy, 50%);
  width: calc(var(--cb99-size, 8px) * 1.4);
  height: calc(var(--cb99-size, 8px) * 1.4);
  margin: calc(var(--cb99-size, 8px) * -0.7) 0 0 calc(var(--cb99-size, 8px) * -0.7);
  /* eckige, unregelmäßige Bröckchen statt runder Punkte */
  clip-path: polygon(10% 25%, 55% 0, 95% 30%, 80% 85%, 35% 100%, 0 65%);
  background: #F2B705;
  opacity: 0;
  animation: cb99-crumble 1000ms ease-in var(--cb99-delay, 0ms) both;
}

.cb99-crumb:nth-child(3n+1) {
  clip-path: polygon(0 40%, 45% 0, 100% 20%, 85% 70%, 50% 100%, 15% 90%);
}

.cb99-crumb:nth-child(3n+2) {
  clip-path: polygon(20% 0, 100% 35%, 70% 100%, 25% 80%, 0 30%);
  width: calc(var(--cb99-size, 8px) * 0.9);
}

.cb99-crumb:nth-child(5n) {
  clip-path: polygon(30% 0, 90% 15%, 100% 75%, 45% 100%, 0 55%);
}

/* Farben des Banners: Gelb, Dunkelpetrol, Petrol, helles Grau (clip-path schneidet einen Rand ab) */
.cb99-crumb--0 {
  background: #F2B705;
}

.cb99-crumb--1 {
  background: #0A2E34;
}

.cb99-crumb--2 {
  background: #0B4F5A;
}

.cb99-crumb--3 {
  background: #DCE6E8;
}

@keyframes cb99-crumble {
  from {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
  }
  to {
    opacity: 0;
    transform: translate(var(--cb99-dx, 0px), var(--cb99-dy, 80px)) rotate(var(--cb99-rot, 90deg));
  }
}

/* Keine Bewegung bei reduzierter Bewegung */
@media (prefers-reduced-motion: reduce) {
  .cb99-crumbs {
    display: none;
  }

  #cb99-main,
  #cb99-main *,
  #cb99-main *::before,
  #cb99-main *::after {
    animation: none !important;
    transition: none !important;
  }
}