/* Cookiemelding en 🍪-icoon (v0.99), voor de app en de sitepagina's; eigen kleuren zodat het overal hetzelfde oogt. */
/* v0.103 (Stefan 15-10): compacter, in de hoek bij het icoon en daaruit opengeklapt, zoals de melding op thiel.nl: klein lettertype, drie
   knoppen even groot naast elkaar */
.cookies{position:fixed;left:14px;bottom:14px;z-index:1000;width:min(360px,calc(100vw - 28px));background:#fff;color:#262a2f;border:1px solid #d1dbe5;box-shadow:0 14px 40px rgba(0,46,84,.26);padding:12px 14px 12px;font:400 12.5px/1.45 'Open Sans',system-ui,sans-serif;transform-origin:left bottom;animation:cookies-open .18s ease-out}
@keyframes cookies-open{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.cookies h2{margin:0 0 3px;font:700 16px/1.2 'Oswald',sans-serif;color:#002E54}
.cookies p{margin:0 0 10px}
.cookies a{color:#0072CE}
.cookies-cat{display:grid;gap:8px;margin:0 0 12px}
.cookies-cat[hidden]{display:none}
.cookies-cat label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.cookies-cat input{width:16px;height:16px;margin:2px 0 0;accent-color:#0072CE;flex:none}
.cookies-cat b{display:block;color:#002E54}
.cookies-cat small{display:block;color:#5f6a74;font-size:12px;line-height:1.4}
.cookies-knoppen{display:flex;gap:6px}
.cookies-knoppen button{flex:1 1 0;min-width:0;font:600 12px/1.15 'Open Sans',sans-serif;min-height:34px;padding:4px 6px;cursor:pointer;border:1px solid #0072CE;background:#fff;color:#0072CE}
.cookies-knoppen .ck-alles,.cookies-knoppen .ck-opslaan{background:#0072CE;color:#fff}
.cookies-knoppen button:hover{background:#EAF3FC}
.cookies-knoppen .ck-alles:hover,.cookies-knoppen .ck-opslaan:hover{background:#00457C;border-color:#00457C}
.cookies-knoppen button[hidden]{display:none}
/* v0.225 (Stefan 25-10): op een telefoon de knoppen onder elkaar over de volle breedte (zoals het voorbeeld van Merwestein), zodat
   "Alleen noodzakelijk" niet hoeft te breken en elke knop een ruim tikvlak heeft */
@media (max-width:480px){.cookies-knoppen{flex-direction:column;gap:8px}.cookies-knoppen button{min-height:42px;font-size:13px}}
/* v0.115 (Stefan 16-10): het icoon plakt linksonder in beeld (position: sticky in de breedte van de inhoud) en stopt vlak boven de voet;
   bij aanwijzen klapt de tekst "Cookie-instellingen" uit, zoals op thiel.nl; op desktop een maat groter. Alleen zolang er geen keuze is. */
.cookie-plek{position:sticky;bottom:14px;z-index:900;width:100%;box-sizing:border-box;max-width:1360px;margin:0 auto;padding:0 var(--rand,40px) 8px;display:flex;pointer-events:none}
.cookie-plek[hidden]{display:none}
.cookie-knop{pointer-events:auto;display:inline-flex;align-items:center;gap:0;height:40px;min-width:40px;padding:0;border-radius:20px;border:1px solid #d1dbe5;background:#fff;box-shadow:0 4px 14px rgba(0,46,84,.18);cursor:pointer;color:#002E54;font:600 12px/1 'Open Sans',system-ui,sans-serif;letter-spacing:.4px;text-transform:uppercase;transition:box-shadow .15s}
.cookie-koek{width:40px;height:40px;display:grid;place-items:center;font-size:20px;line-height:1;flex:none}
.cookie-tekst{max-width:0;overflow:hidden;white-space:nowrap;padding:0;transition:max-width .2s,padding .2s}
.cookie-knop:hover .cookie-tekst,.cookie-knop:focus-visible .cookie-tekst{max-width:200px;padding-right:14px}
.cookie-knop:hover,.cookie-knop:focus-visible{box-shadow:0 6px 18px rgba(0,46,84,.26);outline:2px solid #0072CE;outline-offset:2px}
.cookie-knop[hidden]{display:none}
@media (max-width:639px){.cookie-plek{padding-left:15px;padding-right:15px}.cookie-knop{height:34px;min-width:34px;border-radius:17px}.cookie-koek{width:34px;height:34px;font-size:17px}}
.ck-sluit{position:absolute;top:6px;right:8px;width:26px;height:26px;border:0;background:none;color:#5f6a74;font:400 20px/1 'Open Sans',sans-serif;cursor:pointer;padding:0}
.ck-sluit:hover{color:#002E54}
@media print{.cookies,.cookie-plek{display:none!important}}
@media (prefers-reduced-motion:reduce){.cookie-tekst{transition:none}.cookies{animation:none}}
/* v0.138: koekje en sluitkruis uit het Thiel-iconenpakket (assets/thiel-ui-icons/v1) in plaats van emoji en × */
.cookie-koek .thiel-ui-icon{width:22px;height:22px}
#cookiesTitel .thiel-ui-icon{width:22px;height:22px;vertical-align:-4px;margin-right:2px;color:#0072CE}
.ck-sluit{display:grid;place-items:center}.ck-sluit .thiel-ui-icon{width:18px;height:18px}
@media (max-width:639px){.cookie-koek .thiel-ui-icon{width:19px;height:19px}}
/* v0.177: sluitknop en knoppen op een aanraakscherm minstens 44 px */
@media (pointer:coarse){.ck-sluit{width:44px;height:44px;top:0;right:0}.cookies-knoppen button{min-height:44px}}
/* v0.180: het icoon staat er nu altijd (ook na een keuze, zoals thiel.nl); op een aanraakscherm een tikvlak van 44 px (v0.177) */
@media (pointer:coarse){.cookie-knop{height:44px;min-width:44px;border-radius:22px}.cookie-koek{width:42px;height:42px}}