/* carmo consent-gate — MODAAL venster, 20260905.
   Auto-geladen door de /^style/-regel in edify (get_template_part).
   Voorganger: style_carmo_consent_v20260817b.css (dot-hernoemd bij uitrol).

   VERSIENAAM VERPLICHT: Cloudflare cachet css ~24u (HIT) en de purge-stack van
   carmonl is dormant (token ontbreekt). Nooit in-place bewerken -> bij een
   wijziging een NIEUWE bestandsnaam en de oude dot-hernoemen.

   WAT ER NIEUW IS (BRIEFING_COOKIEBANNER_MODAAL.md, 20260905):
   - Van een onderbalk naar een gecentreerd modaal venster met gedimde overlay,
     naar het model van Google's eigen consent-dialoog.
   - Alle drie de knoppen VOLLEDIG IDENTIEK (zelfde vulling/kleur/grootte/rand) —
     geen enkel visueel onderscheid tussen weigeren/opslaan/accepteren.
   - Uitlegregel per categorie (.carmo-cc-hint) blijft, ongewijzigd t.o.v. de
     eerdere hint-proef.

   MOBIEL IS BINDEND — niet wijzigen zonder opnieuw te testen op minstens:
   320x568, 320x480, 360x640, 390x760, 412x915, 667x375 (liggend), 768x1024.
   Bij de vorige ronde viel het Marketing-vinkje op 320px onder de scrollrand
   toen de knoppen gestapeld werden — daarom staan ze hier ALTIJD op één rij
   en scrollen tekst/vinkjes elk binnen hun eigen strook, nooit de knoppenrij. */

#carmo-cc-overlay{
  position:fixed; inset:0; z-index:99990;
  /* 99990, NIET 99999: stylesheet_checkout_confidence.css r.11 geeft
     #carmo-checkout-overlay ook 99999, en deze overlay wordt later in de DOM
     toegevoegd -> bij gelijke z-index zou de banner over het betaal-overlay
     op checkout_confirmation heen liggen. De betaalstap moet altijd winnen. */
  background:rgba(20,20,20,.6);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
}
#carmo-cc{
  background:#fff; color:#222;
  width:100%; max-width:560px; max-height:92vh;
  display:flex; flex-direction:column;
  border-radius:10px; box-shadow:0 12px 48px rgba(0,0,0,.35);
  padding:24px 24px 20px; font:14px/1.55 Arial,Helvetica,sans-serif;
}
#carmo-cc:focus{outline:none}   /* de dialoog krijgt initieel focus, maar toont geen eigen kader */
#carmo-cc .carmo-cc-txt{margin:0 0 16px;flex:0 1 auto;max-height:26vh;
  overflow-y:auto;-webkit-overflow-scrolling:touch}
#carmo-cc .carmo-cc-txt a{color:#d24600;text-decoration:underline}

#carmo-cc .carmo-cc-opts{display:flex;flex-direction:column;gap:14px;
  margin-bottom:18px;flex:0 1 auto;max-height:30vh;
  overflow-y:auto;-webkit-overflow-scrolling:touch}
#carmo-cc .carmo-cc-opts label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
#carmo-cc .carmo-cc-opts input{flex:0 0 auto;margin:3px 0 0;width:18px;height:18px}
#carmo-cc .carmo-cc-lab{display:block;font-weight:600}
/* #5c5c5c op wit = ruim 7:1 contrast, dus ook als kleine tekst leesbaar (WCAG AA). */
#carmo-cc .carmo-cc-hint{display:block;font-size:12px;line-height:1.35;color:#5c5c5c;
  margin-top:3px;font-weight:400}

#carmo-cc .carmo-cc-btns{display:flex;gap:10px;flex:0 0 auto}
/* ALLE DRIE de knoppen identiek: zelfde vulling, kleur, grootte, rand,
   lettertype. Geen kleurverschil tussen weigeren/opslaan/accepteren. */
#carmo-cc .carmo-cc-btn{flex:1 1 0;font:inherit;font-weight:600;min-height:46px;
  padding:10px 10px;cursor:pointer;border:2px solid #ff6600;
  background:#ff6600;color:#fff;border-radius:5px;text-align:center}
#carmo-cc .carmo-cc-btn:hover{background:#d24600;border-color:#d24600}
#carmo-cc .carmo-cc-btn:focus{outline:3px solid #222;outline-offset:2px}

@media(max-width:767px){
  #carmo-cc-overlay{padding:10px}
  #carmo-cc{padding:16px 14px 14px;font-size:13px;line-height:1.45;
    max-height:94vh;border-radius:8px}
  #carmo-cc .carmo-cc-txt{max-height:20vh;margin-bottom:10px}
  #carmo-cc .carmo-cc-opts{max-height:28vh;gap:10px;margin-bottom:12px}
  #carmo-cc .carmo-cc-hint{font-size:11.5px}
  /* Knoppen op ÉÉN rij, nooit gestapeld — dat kostte bij de vorige ronde het
     zichtbare Marketing-vinkje op een 320px-scherm. */
  #carmo-cc .carmo-cc-btns{gap:6px}
  #carmo-cc .carmo-cc-btn{min-height:44px;padding:8px 4px;
    font-size:12.5px;line-height:1.2;border-width:2px}
}

/* Zeer smal (iPhone SE 1e gen en ouder, 320 px). */
@media(max-width:359px){
  #carmo-cc{max-height:96vh;padding:14px 10px 10px}
  #carmo-cc .carmo-cc-txt{max-height:16vh}
  #carmo-cc .carmo-cc-opts{max-height:32vh}
  #carmo-cc .carmo-cc-btn{min-height:42px;padding:6px 2px;font-size:11.5px}
}

/* Landschapsmodus op een telefoon: heel weinig hoogte beschikbaar. */
@media(max-height:450px) and (max-width:900px){
  #carmo-cc-overlay{padding:6px}
  #carmo-cc{max-height:98vh;padding:10px 10px 8px;border-radius:6px}
  #carmo-cc .carmo-cc-txt{max-height:22vh;margin-bottom:6px}
  #carmo-cc .carmo-cc-opts{max-height:30vh;margin-bottom:8px}
  #carmo-cc .carmo-cc-btn{min-height:36px}
}