/* 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.
   - Knopkleur: de briefing vroeg om alle drie IDENTIEK; Kevin heeft dat
     daarna, dezelfde dag en na twee keer op het AP/EDPB-risico gewezen te
     zijn, expliciet herzien naar "Alles accepteren" gevuld oranje en de
     andere twee met oranje rand. Grootte/breedte/volgorde blijven wél gelijk
     (flex:1 1 0 op alle drie) — alleen de kleurvulling wijkt af.
   - 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;overscroll-behavior:contain}
#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;overscroll-behavior:contain}
#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}
/* carmo consent-modaal 20260905, herzien op verzoek van Kevin: "Alles
   accepteren" gevuld oranje, de andere twee met oranje rand. Grootte, breedte
   (flex:1 1 0, alle drie gelijk) en volgorde blijven ONGEWIJZIGD — alleen de
   kleurvulling wijkt af. Zie het commentaar bij btn() in de jscript voor de
   afweging.
   Herzien (nogmaals, zelfde dag): Kevin wil accepteren nóg opvallender, "al
   stond daar een harde blockade op". Bewust NIET fysiek groter gemaakt (dat
   zou de gelijke-breedte doorbreken en is het patroon dat toezichthouders
   wél expliciet afkeuren) — in plaats daarvan vetter/groter lettertype en een
   lichte gloed, binnen dezelfde knopafmeting. */
#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:#fff;color:#d24600;border-radius:5px;text-align:center}
#carmo-cc .carmo-cc-btn:hover{background:#ff6600;color:#fff}
#carmo-cc .carmo-cc-btn:focus{outline:3px solid #222;outline-offset:2px}
#carmo-cc .carmo-cc-btn-accept{background:#ff6600;color:#fff;font-weight:800;
  font-size:1.08em;box-shadow:0 0 0 4px rgba(255,102,0,.25),0 3px 10px rgba(255,102,0,.45)}
#carmo-cc .carmo-cc-btn-accept:hover{box-shadow:0 0 0 4px rgba(210,70,0,.3),0 3px 10px rgba(210,70,0,.5)}
#carmo-cc .carmo-cc-btn-accept:hover{background:#d24600;border-color:#d24600;color:#fff}

@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}
}