/* ===== EPICSOLO i18n (1.10.2): taalknop [NL|EN] ===== */
/* De taalknop erft de klassen van de themaknop; deze basis garandeert stijl
   op pagina's waar de knop geïnjecteerd wordt zonder eigen opmaak. */
button[data-lang-toggle]{
  min-height:36px;padding:6px 12px;border-radius:10px;border:1px solid rgba(120,150,190,.4);
  /* 1.10.6: 50% transparant door de knoppenrij heen, zoals de andere knoppen; */
  background:rgba(60,90,140,.18) ;color:inherit;font-weight:800;font-size:13px;letter-spacing:.08em;
  opacity:.5;cursor:pointer;touch-action:manipulation;white-space:nowrap;
}
button[data-lang-toggle]:hover{opacity:1}
button[data-lang-toggle]:hover{background:rgba(60,90,140,.32)}
button[data-lang-toggle].active-en{border-color:rgba(96,165,250,.7);background:rgba(96,165,250,.18)}
html[data-theme="light"] button[data-lang-toggle]{background:#eef2f8;border-color:#c8d3e2;color:#172033}
html[data-theme="light"] button[data-lang-toggle]:hover{background:#e2e9f4}
/* Pagina's zonder header/themaknop: zwevende knop rechtsboven */
.lang-fab{position:fixed;top:12px;right:12px;z-index:10000;box-shadow:0 4px 18px rgba(0,0,0,.25)}
/* 1.10.5 LANG-GATE: NL-voertaal lock — lichtgrijze overlay met rood kruis
   zodat onmiddellijk duidelijk is dat de pagina primair Nederlands is.
   Pas na popup-uitleg + “ik begrijp het”-vinkje + dubbelklik verdwijnt hij. */
/* 1.10.10 GLITCH-FIX: position:relative hier is nodig voor_containing block
   van de ::before/::after-overlay op géénfixed knoppen (header). Maar op de
   zwevende EN/NL-knop (.lang-fab, position:fixed) verbrak deze zelfde regel
   die fixed-positie: de knop zakte onderin de documentflow en drapeerde half
   buiten beeld — het rode ✕-kruis was daarna het enige zichtbare in de hoek
   van de admin-gastweergave. Deze regel herstelt fixed voor die knop. */
.lang-gate-locked{position:relative}
.lang-gate-locked[data-lang-toggle].lang-fab,
.lang-fab.lang-gate-locked{position:fixed!important;top:12px;right:12px}
.lang-gate-locked::before{content:'';position:absolute;inset:0;border-radius:inherit;background:rgba(10,14,22,.28);pointer-events:none}
.lang-gate-locked::after{content:'✕';position:absolute;right:-5px;top:-5px;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;background:#dc2626;color:#fff;font:900 9px/1 sans-serif;box-shadow:0 0 0 2px rgba(220,38,38,.25);pointer-events:none;animation:epicsoloLangCrossPulse 1.6s ease-in-out infinite}
@keyframes epicsoloLangCrossPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
html[data-theme="light"] .lang-gate-locked::before{background:rgba(234,239,255,.22)}

/* 1.10.12 THEMA-FIX VERTAALVENSTER (taalgate-popup): de kaart volgt nu licht/
   donker. Vóór deze fix waren de popup-kleuren hardcoded DONKER, terwijl de
   globale themalaag (epic-theme-hardcoded.css: html:not([data-theme="dark"])
   h2{color:#0f172a!important}) de koppen in lightmode donker forceerde —
   onleesbare donkere koppen op een donkere kaart (zie bugrapport).
   Deze regels zijn id-gescoped (#epicsoloLangGate = (1,0,1)) en !important,
   waardoor ze van de globale h2-/p-/button-regels winnen in beide thema's. */
#epicsoloLangGate{background:rgba(15,23,42,.45)}
html[data-theme="dark"] #epicsoloLangGate{background:rgba(4,8,16,.65)}
#epicsoloLangGate .lang-gate-card{
  width:min(560px,calc(100vw - 32px));padding:26px 28px;border-radius:16px;
  font:14px/1.55 system-ui,sans-serif;
  background:#f8fafc!important;color:#172033!important;
  border:1px solid #d7dee8!important;box-shadow:0 30px 70px rgba(15,23,42,.35)!important;
}
html[data-theme="dark"] #epicsoloLangGate .lang-gate-card{
  background:#111a28!important;color:#eef3ff!important;
  border-color:rgba(255,255,255,.16)!important;box-shadow:0 30px 70px rgba(0,0,0,.5)!important;
}
#epicsoloLangGate .lang-gate-card p{color:inherit!important}
#epicsoloLangGate .lang-gate-card strong{color:inherit!important}
#epicsoloLangGate .lang-gate-title{margin:0 0 6px;font-size:20px;color:inherit!important}
#epicsoloLangGate .lang-gate-title-nl{margin:14px 0 6px}
#epicsoloLangGate .lang-gate-check{display:flex;gap:9px;align-items:center;margin:16px 0 4px;cursor:pointer;color:inherit!important}
#epicsoloLangGate .lang-gate-actions{display:flex;gap:10px;justify-content:space-between;margin-top:16px;flex-wrap:wrap}
#epicsoloLangGate .lang-gate-btn{padding:9px 16px;border-radius:10px;cursor:pointer;font:inherit}
#epicsoloLangGate .lang-gate-btn-close{
  background:#fff!important;color:#172033!important;border:1px solid #cbd5e1!important;
}
#epicsoloLangGate .lang-gate-btn-close:hover{background:#eef2f8!important}
html[data-theme="dark"] #epicsoloLangGate .lang-gate-btn-close{
  background:transparent!important;color:#eef3ff!important;border-color:rgba(255,255,255,.25)!important;
}
html[data-theme="dark"] #epicsoloLangGate .lang-gate-btn-close:hover{background:rgba(255,255,255,.12)!important}
#epicsoloLangGate .lang-gate-btn-go{
  background:#8b5cf6!important;color:#fff!important;border:0!important;font-weight:700;
}
#epicsoloLangGate .lang-gate-btn-go:disabled{cursor:not-allowed;opacity:.65}
#epicsoloLangGate .lang-gate-btn-go:not(:disabled):hover{background:#7c3aed!important}