/* PlainConsent banner — minimal, unobtrusive, dark-mode aware. */
#pc-consent-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2147483000;
  max-width: 520px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1a1a1a;
  background: #ffffff;
  border: 1px solid #e4e4e7;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

#pc-consent-banner .pc-body { padding: 20px 22px; }
#pc-consent-banner .pc-title { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
#pc-consent-banner .pc-text { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: #52525b; }

#pc-consent-banner .pc-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-bottom: 16px;
}
#pc-consent-banner .pc-cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  min-height: 24px;
  cursor: pointer;
}
/* Neutraal en niet in de accentkleur: een lichte merkkleur zou het vinkje onzichtbaar maken. */
#pc-consent-banner .pc-cat input { accent-color: #3f3f46; width: 18px; height: 18px; margin: 0; }

/* Weigeren en accepteren staan naast elkaar in twee gelijke kolommen. Zo zijn ze
   op elk scherm precies even breed en even hoog, ook als een van de twee labels
   over twee regels loopt. Met een flex-rij die mocht omslaan viel accepteren op
   een telefoon alleen op de tweede regel en werd hij twee keer zo breed als
   weigeren. Opslaan is de bescheiden derde keuze en krijgt de volle breedte
   eronder. */
#pc-consent-banner .pc-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
#pc-consent-banner .pc-btn {
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 600;
  border-radius: 9px;
  border: 1px solid transparent;
  cursor: pointer;
}
#pc-consent-banner .pc-save,
#pc-consent-banner .pc-retry { grid-column: 1 / -1; }
#pc-consent-banner .pc-decline { background: #3f3f46; color: #ffffff; }
/* De rand is het enige dat deze knop als knop aanwijst: hij deelt zijn vlak met
   de banner eromheen. WCAG 1.4.11 vraagt dan 3:1; #71717a haalt 4,83:1.
   Bewust grijs en niet blauw: alleen de accepteerknop draagt de kleur van de
   klant. Een vast blauw ernaast vloekte met elke huisstijl die niet blauw is. */
#pc-consent-banner .pc-save { background: #ffffff; color: #27272a; border-color: #71717a; }
#pc-consent-banner .pc-accept { background: #2563eb; color: #ffffff; }
#pc-consent-banner .pc-policy { color: #27272a; text-decoration: underline; }
#pc-consent-banner .pc-btn:hover { filter: brightness(0.97); }
#pc-consent-banner .pc-btn:focus-visible { outline: 2px solid #18181b; outline-offset: 2px; }

/* Indrukken, volgens het gedeelde bewegingssysteem (design-system/motion.css).
   De waarden staan hier los ingevuld in plaats van als var(--token): deze
   banner draait op de site van een klant en moet zichzelf zijn, zonder
   afhankelijk te worden van een stylesheet van ons.

   PlainConsent zakt minder ver in dan de andere producten (0.98 tegen 0.97).
   Dit is een toestemmingsvraag, geen speelse app: het mag reageren, het mag
   niet stuiteren. */
#pc-consent-banner .pc-btn {
  transition: filter 150ms cubic-bezier(.4, 0, .2, 1), transform 90ms cubic-bezier(0, 0, .2, 1);
}
#pc-consent-banner .pc-btn:active { transform: scale(0.98); }

@media (prefers-reduced-motion: reduce) {
  #pc-consent-banner .pc-btn { transition: none; }
  #pc-consent-banner .pc-btn:active { transform: none; }
}

#pc-consent-banner .pc-decl { margin: 0 0 14px; font-size: 13px; }
#pc-consent-banner .pc-decl summary { cursor: pointer; color: #27272a; font-weight: 600; text-decoration: underline; }
#pc-consent-banner .pc-decl-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
#pc-consent-banner .pc-decl-table th,
#pc-consent-banner .pc-decl-table td { text-align: left; padding: 4px 6px; border-bottom: 1px solid #f0f0f1; }
#pc-consent-banner .pc-decl-table th { color: #71717a; font-weight: 600; }
#pc-consent-banner .pc-decl-cat td { font-weight: 700; color: #3f3f46; padding-top: 9px; }
#pc-consent-banner .pc-decl-max { max-height: 220px; overflow-y: auto; }

@media (prefers-color-scheme: dark) {
  #pc-consent-banner { color: #f4f4f5; background: #18181b; border-color: #3f3f46; }
  #pc-consent-banner .pc-text { color: #a1a1aa; }
  #pc-consent-banner .pc-decline { background: #52525b; color: #ffffff; }
  /* Zelfde verhaal in het donker: de rand wijst de knop aan en #a1a1aa haalt
     6,91:1 tegen het bannervlak. */
  #pc-consent-banner .pc-save { background: #18181b; color: #e4e4e7; border-color: #a1a1aa; }
  #pc-consent-banner .pc-policy { color: #e4e4e7; }
  #pc-consent-banner .pc-decl summary { color: #e4e4e7; }
  #pc-consent-banner .pc-cat input { accent-color: #d4d4d8; }
  #pc-consent-banner .pc-btn:focus-visible { outline-color: #f4f4f5; }
  #pc-consent-banner .pc-decl-table th,
  #pc-consent-banner .pc-decl-table td { border-color: #27272a; }
  /* De kopregels van de verklaring werden in het donker niet overschreven en
     bleven op #71717a staan: 3,67:1 tegen het donkere vlak, onder de 4,5:1 die
     AA voor gewone tekst vraagt. #a1a1aa haalt 6,91:1 en is dezelfde grijstint
     die .pc-text hier al gebruikt. */
  #pc-consent-banner .pc-decl-table th { color: #a1a1aa; }
  #pc-consent-banner .pc-decl-cat td { color: #d4d4d8; }
}

/* De weg terug. Intrekken moet net zo makkelijk zijn als geven (AVG art. 7
   lid 3), dus na een keuze blijft deze knop staan. Bewust klein en grijs: hij
   moet vindbaar zijn, niet om aandacht vragen. De banner staat op
   z-index 2147483000; deze knop eronder, zodat hij nooit over een open banner
   valt (hij wordt daar bovendien verborgen). */
.pc-manage-fab {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 2147482000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  line-height: 1;
  color: #3f3f46;
  background: #ffffff;
  /* Zelfde reden als bij .pc-save: deze knop heeft geen eigen vlak dat hem
     aanwijst, alleen deze rand, dus WCAG 1.4.11 vraagt 3:1. #d4d4d8 haalde
     1,48:1. #8f8f98 haalt 3,21:1 en is de lichtste tint die de lat haalt, want
     hij moet vindbaar zijn en niet om aandacht vragen. */
  border: 1px solid #8f8f98;
  border-radius: 999px;
  padding: 9px 14px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  transition: filter 150ms cubic-bezier(.4, 0, .2, 1), transform 90ms cubic-bezier(0, 0, .2, 1);
}
.pc-manage-fab:hover { filter: brightness(0.97); }
.pc-manage-fab:active { transform: scale(0.98); }
.pc-manage-fab:focus-visible { outline: 2px solid #18181b; outline-offset: 2px; }
.pc-manage-fab[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pc-manage-fab { transition: none; }
  .pc-manage-fab:active { transform: none; }
}