/* ═══════════════════════════════════════════════════════════════════
   COOKIEMELDING — het kaartje linksonder, op elke pagina.
   Zie includes/cookiemelding.php voor het waarom van de opzet.

   AFSCHERMINGSBLOK. Het thema laadt bootstrap.min.css sitewide, en dat zet
   eigen marges op p en een eigen .btn. Zonder de nullijn hieronder stond de
   tekst in het kaartje scheef. Alles is daarom gescoped op .pmCookie.

   ⚠ ZICHTBAARHEID STAAT HIER NIET IN. Het kaartje krijgt zijn display van een
   inline stijl uit assets/cookiemelding.js. Zet hier geen display-regel op
   .pmCookie zelf: die zou van de inline stijl verliezen én door LiteSpeed's
   "Remove Unused CSS" weggehaald kunnen worden.
   ═══════════════════════════════════════════════════════════════════ */

.pmCookie {
  --groen: #95C11F;
  --groen-donker: #7DA31A;
  --blauw-donker: #0093c9;
  --teal: #1ec98d;
  --tealBlauw: #0aa0e9;
  --inkt: #192a3d;
  --inkt-zacht: #3A4F66;
  --grijs: #64748b;
  --lijn: #e2e8f0;
  --fond: #f8fafc;

  --onder: 22px;              /* afstand tot de onderrand; de regels onderaan rekenen hiermee */

  position: fixed;
  left: var(--onder);
  bottom: var(--onder);
  z-index: 130;               /* boven de schil (120), onder een echte modal */
  width: 344px;
  max-width: calc(100vw - 28px);
  background: #fff;
  border: 1px solid var(--lijn);
  border-radius: 18px;
  box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .35);
  padding: 18px;

  font-family: 'Albert Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  line-height: 1.5;
  box-sizing: border-box;

  /* Beginstand van de animatie. De JS haalt .is-op erbij zodra hij in beeld mag.
     Wordt die class door een optimalisatie weggehaald, dan verschijnt het kaartje
     gewoon zonder animatie — zichtbaar blijft hij, want dat regelt de inline stijl. */
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .28s ease, transform .28s ease;
}
.pmCookie.is-op { opacity: 1; transform: translateY(0); }

.pmCookie *, .pmCookie *::before, .pmCookie *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.pmCookie p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--grijs);
}
.pmCookie a { text-decoration: none; }

.pmCookie__rij {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.pmCookie__ico {
  width: 38px; height: 38px;
  border-radius: 11px;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: #F1F8E3;
  color: var(--groen-donker);
}
.pmCookie__ico svg { display: block; }

.pmCookie__knoppen { display: flex; gap: 9px; align-items: center; }

.pmCookie__ja {
  flex: 1 1 auto;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  border-radius: 999px;
  padding: 11px 22px;
  background: linear-gradient(90deg, var(--teal), var(--tealBlauw));
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(30, 201, 141, .9);
}
.pmCookie__ja:hover { filter: brightness(1.05); }
.pmCookie__ja:focus-visible { outline: 2px solid var(--inkt); outline-offset: 3px; }

.pmCookie__meer {
  flex: 0 0 auto;
  border: 1px solid var(--lijn);
  background: #fff;
  color: var(--inkt-zacht);
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 13.5px;
  white-space: nowrap;
}
.pmCookie__meer:hover { background: var(--fond); color: var(--blauw-donker); }
.pmCookie__meer:focus-visible { outline: 2px solid var(--inkt); outline-offset: 3px; }

/* ══ Mobiel ══
   Een zwevend kaartje van 344px past niet naast een telefoonscherm, en linksonder
   zit precies waar duimen zitten. Daaronder wordt het een strook over de volle
   breedte, met de veilige zone van een iPhone erbij zodat de knoppen niet onder
   de streep voor de homebar vallen. */
@media (max-width: 600px) {
  .pmCookie {
    --onder: 10px;
    left: var(--onder); right: var(--onder);
    width: auto; max-width: none;
    border-radius: 16px;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  }
  .pmCookie__knoppen { gap: 8px; }
  .pmCookie__meer { padding: 10px 15px; }
}

/* ══ Ruimte maken voor de zwevende navigatiebalk ══
   Klanten krijgen onderaan de pil uit klant-nav.css (body.pmKnActief), uitvoerders
   die uit uitvoerder-nav.css (body.pmUnActief). Allebei 76px hoog plus de veilige
   zone van de telefoon; dat staat zo in hun eigen stylesheets. Zonder deze regels
   valt het kaartje er precies overheen, en dat is nu net de plek waar duimen zitten.

   Vanaf 900px verhuizen die werkitems naar de header en verdwijnt de balk, dus
   dan mag het kaartje weer helemaal naar beneden. Zelfde grens als in beide
   nav-stylesheets; verandert die daar, dan hier ook.

   body.pmNavWeg zetten ze zelf zodra de balk verborgen moet zijn (bijvoorbeeld
   met een popup open). Die regel staat als laatste en is specifieker, dus hij wint. */
body.pmKnActief .pmCookie,
body.pmUnActief .pmCookie { bottom: calc(var(--onder) + 76px + env(safe-area-inset-bottom)); }

@media (min-width: 900px) {
  body.pmKnActief .pmCookie,
  body.pmUnActief .pmCookie { bottom: var(--onder); }
}

body.pmNavWeg.pmKnActief .pmCookie,
body.pmNavWeg.pmUnActief .pmCookie { bottom: var(--onder); }

@media (prefers-reduced-motion: reduce) {
  .pmCookie { transition: none; transform: none; }
}