/* =====================================================================
   Theme: Cobalt Lux — master polish pass op Cobalt (geen redesign)
   Zelfde skelet, zelfde identiteit (vierkante knoppen, mono-microtype,
   cobalt/geel), maar elke schaduw, easing, focus-ring en spacing verfijnd.
   Alles gescoped op html[data-theme="cobalt-lux"]; JS-laag zit in
   /js/themes/cobalt-lux.js en is op dezelfde manier gate-d.
   ===================================================================== */

/* Lux-only elementen zijn onzichtbaar buiten dit theme (defensief, inert) */
.lux-loader{display:none}
.lux-progress{display:none}

/* ---------- 1. Tokens ---------- */
html[data-theme="cobalt-lux"]{
  --bg:#020617; --surface:#0b1734; --surface-2:#101f46;
  --text:#f8fafc; --muted:#93a7c2; --muted-2:#cfdae8;
  --accent:#3b82f6; --accent-2:#79b1fc; --accent-glow:rgba(59,130,246,.32);
  --border:rgba(148,163,184,.13); --border-2:rgba(148,163,184,.24);
  --hero-bg:
    radial-gradient(1100px 620px at 78% 14%, rgba(59,130,246,.16) 0%, transparent 62%),
    radial-gradient(760px 520px at 6% 96%, rgba(37,99,235,.10) 0%, transparent 55%),
    linear-gradient(142deg,#01040f 0%,#071228 42%,#122a63 100%);
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-io:cubic-bezier(.66,0,.34,1);
  --e-pop:cubic-bezier(.3,1.4,.44,1);
  --sh-s:0 1px 2px rgba(1,4,15,.5),0 3px 10px -2px rgba(1,4,15,.35);
  --sh-m:0 2px 5px rgba(1,4,15,.45),0 14px 34px -10px rgba(1,4,15,.55);
  --sh-l:0 4px 12px rgba(1,4,15,.4),0 32px 72px -18px rgba(1,4,15,.65);
  interpolate-size:allow-keywords;
  scroll-behavior:smooth;
  scrollbar-color:#26385f #04081a;
}

/* ---------- 2. Fundament: achtergrond, selectie, scrollbar, focus ---------- */
html[data-theme="cobalt-lux"] body{background:linear-gradient(180deg,#020617 0%,#030a1d 100%)}
html[data-theme="cobalt-lux"] ::selection{background:rgba(59,130,246,.45);color:#fff}
html[data-theme="cobalt-lux"] ::-webkit-scrollbar{width:12px;height:12px}
html[data-theme="cobalt-lux"] ::-webkit-scrollbar-track{background:#04081a}
html[data-theme="cobalt-lux"] ::-webkit-scrollbar-thumb{background:#26385f;border-radius:8px;border:3px solid #04081a}
html[data-theme="cobalt-lux"] ::-webkit-scrollbar-thumb:hover{background:#33497c}
html[data-theme="cobalt-lux"] :is(a,button,select,summary,[tabindex]):focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:2px}
html[data-theme="cobalt-lux"] :is(input,textarea):focus-visible{outline:none}

/* ---------- 3. Typografie ---------- */
html[data-theme="cobalt-lux"] :is(h1,h2,h3,.section-h2){text-wrap:balance}
html[data-theme="cobalt-lux"] .hero h1{letter-spacing:-.034em;line-height:1.03}
html[data-theme="cobalt-lux"] .lede{max-width:760px;color:#c4d3e5;text-wrap:pretty}
html[data-theme="cobalt-lux"] .page-hero .sub{text-wrap:pretty}
html[data-theme="cobalt-lux"] :is(.stat .num,.price,.pv,.calc-input,.qs-row strong,.fin-opt-price strong,.em-num){font-variant-numeric:tabular-nums}
html[data-theme="cobalt-lux"] :is(.section-title,.eyebrow){letter-spacing:.15em}
html[data-theme="cobalt-lux"] :is(.step p,.feature-card p,.pcard .desc,details.faq .a,.safe-card p){text-wrap:pretty}

/* ---------- 4. Header & navigatie ---------- */
html[data-theme="cobalt-lux"] header.site{padding:18px 0;background:rgba(2,6,23,.72);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);border-bottom-color:rgba(148,163,184,.1);transition:padding .4s var(--e-out),background .4s var(--e-out),box-shadow .4s var(--e-out)}
html[data-theme="cobalt-lux"] header.site.lux-scrolled{padding:12px 0;background:rgba(2,6,23,.9);box-shadow:0 1px 0 rgba(148,163,184,.08),0 18px 44px -22px rgba(0,0,0,.65)}
html[data-theme="cobalt-lux"] .menu a{transition:color .3s var(--e-out)}
html[data-theme="cobalt-lux"] .menu a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--accent);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--e-out)}
html[data-theme="cobalt-lux"] .menu a:hover::after,
html[data-theme="cobalt-lux"] .menu a.active::after{transform:scaleX(1)}
html[data-theme="cobalt-lux"] .tel{transition:color .3s var(--e-out)}
html[data-theme="cobalt-lux"] .tel::before{animation:luxPulse 3s var(--e-io) infinite}
html[data-theme="cobalt-lux"] .cta-top{background:linear-gradient(180deg,#ffc233 0%,#f0a800 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 24px -8px rgba(240,168,0,.55);transition:transform .35s var(--e-pop),box-shadow .35s var(--e-out),filter .3s var(--e-out)}
html[data-theme="cobalt-lux"] .cta-top:hover{background:linear-gradient(180deg,#ffd05c 0%,#f7b31c 100%);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 32px -8px rgba(240,168,0,.65)}
html[data-theme="cobalt-lux"] .cta-top:active{transform:translateY(0) scale(.97)}
html[data-theme="cobalt-lux"] #theme-toggle{transition:color .3s,border-color .3s,background .3s,transform .35s var(--e-pop)}
html[data-theme="cobalt-lux"] #theme-toggle:hover{transform:translateY(-1px)}
html[data-theme="cobalt-lux"] #theme-toggle:active{transform:scale(.94)}
/* Locale-chip: van licht restant naar donker glas, passend bij de header */
html[data-theme="cobalt-lux"] .locale-btn{background:rgba(148,163,184,.07);border-color:rgba(148,163,184,.22);color:var(--muted-2);transition:background .3s var(--e-out),border-color .3s,color .3s}
html[data-theme="cobalt-lux"] .locale-btn:hover{background:rgba(148,163,184,.13);border-color:rgba(148,163,184,.38);color:var(--text)}
html[data-theme="cobalt-lux"] .locale-menu{background:rgba(8,15,35,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-color:rgba(148,163,184,.18);box-shadow:var(--sh-l)}
html[data-theme="cobalt-lux"] .locale-menu a{color:var(--muted-2);transition:background .25s var(--e-out),color .25s}
html[data-theme="cobalt-lux"] .locale-menu a:hover{background:rgba(148,163,184,.09);color:var(--text)}
html[data-theme="cobalt-lux"] .locale-menu a.active{background:var(--accent);color:#fff}
html[data-theme="cobalt-lux"] .rating{transition:background .3s var(--e-out),border-color .3s,transform .3s var(--e-out)}
html[data-theme="cobalt-lux"] .rating:hover{transform:translateY(-1px)}
html[data-theme="cobalt-lux"] .crumbs a{transition:color .25s var(--e-out)}

/* Mobiel menu: donker glas i.p.v. wit paneel — consistent met de rest */
@media(max-width:900px){
  html[data-theme="cobalt-lux"] .menu{background:rgba(3,8,24,.97);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);box-shadow:-24px 0 64px rgba(0,0,0,.55);border-left:1px solid rgba(148,163,184,.12)}
  html[data-theme="cobalt-lux"] .menu.open{animation:luxSlide .4s var(--e-out)}
  html[data-theme="cobalt-lux"] .menu a{color:#dce7f6;border-bottom-color:rgba(148,163,184,.1)}
  html[data-theme="cobalt-lux"] .menu a.active{color:var(--accent-2)}
  html[data-theme="cobalt-lux"] .menu a::after{display:none}
  html[data-theme="cobalt-lux"] .mob-overlay{background:rgba(1,4,15,.6);backdrop-filter:blur(3px)}
}

/* ---------- 5. Hero + entree-choreografie ---------- */
html[data-theme="cobalt-lux"] .eyebrow{background:linear-gradient(180deg,rgba(59,130,246,.13),rgba(59,130,246,.05));border-color:rgba(59,130,246,.45)}
html[data-theme="cobalt-lux"] .eyebrow::before{animation:luxPulseBlue 3.2s var(--e-io) infinite}
html[data-theme="cobalt-lux"] .hero-bg-img img{will-change:transform;filter:drop-shadow(0 40px 80px rgba(0,0,0,.65))}
html[data-theme="cobalt-lux"] .stats{border-top-color:rgba(148,163,184,.12)}
html[data-theme="cobalt-lux"] .stat .lbl{color:#8ba0bd}
html[data-theme="cobalt-lux"].lux-boot .hero .eyebrow{animation:luxRise .8s var(--e-out) .06s backwards}
html[data-theme="cobalt-lux"].lux-boot .hero h1{animation:luxRise .85s var(--e-out) .14s backwards}
html[data-theme="cobalt-lux"].lux-boot .hero .lede{animation:luxRise .85s var(--e-out) .24s backwards}
html[data-theme="cobalt-lux"].lux-boot .hero .btns{animation:luxRise .85s var(--e-out) .34s backwards}
html[data-theme="cobalt-lux"].lux-boot .hero :is(.hero-checks,.stats){animation:luxRise .9s var(--e-out) .46s backwards}
html[data-theme="cobalt-lux"].lux-boot .page-hero .crumbs{animation:luxRise .7s var(--e-out) .05s backwards}
html[data-theme="cobalt-lux"].lux-boot .page-hero h1{animation:luxRise .8s var(--e-out) .12s backwards}
html[data-theme="cobalt-lux"].lux-boot .page-hero :is(.sub,.fin-hero-pill,.hero-guarantee){animation:luxRise .8s var(--e-out) .22s backwards}
@media(min-width:1101px){
  html[data-theme="cobalt-lux"].lux-boot .hero-bg-img{animation:luxDrift 1.2s var(--e-out) .3s backwards}
}

/* ---------- 6. Knoppen ---------- */
html[data-theme="cobalt-lux"] .btn{transition:transform .35s var(--e-pop),box-shadow .35s var(--e-out),background .3s var(--e-out),color .3s,border-color .3s,filter .3s}
html[data-theme="cobalt-lux"] .btn:hover{transform:translateY(-2px)}
html[data-theme="cobalt-lux"] .btn:active{transform:translateY(0) scale(.975);transition-duration:.12s}
html[data-theme="cobalt-lux"] .btn-primary{background:linear-gradient(180deg,#4f93f9 0%,#2e6fe8 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(2,6,23,.4),0 10px 28px -8px rgba(59,130,246,.55)}
html[data-theme="cobalt-lux"] .btn-primary:hover{background:linear-gradient(180deg,#61a1ff 0%,#3b7cf2 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 2px 4px rgba(2,6,23,.4),0 16px 40px -10px rgba(59,130,246,.65)}
html[data-theme="cobalt-lux"] .btn-yellow{background:linear-gradient(180deg,#ffc94a 0%,#f0a800 100%);color:#081022;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 28px -8px rgba(240,168,0,.5)}
html[data-theme="cobalt-lux"] .btn-yellow:hover{background:linear-gradient(180deg,#ffd465 0%,#f7b31c 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 16px 38px -10px rgba(240,168,0,.6)}
html[data-theme="cobalt-lux"] .btn-secondary{background:rgba(148,163,184,.06);border-color:rgba(148,163,184,.3)}
html[data-theme="cobalt-lux"] :is(.trust-pop-cta,.qm-fin-yes){transition:background .3s var(--e-out),transform .3s var(--e-pop),box-shadow .3s var(--e-out)}
html[data-theme="cobalt-lux"] :is(.trust-pop-cta,.qm-fin-yes):active{transform:scale(.98)}

/* ---------- 7. Kaarten & oppervlakken ---------- */
html[data-theme="cobalt-lux"] :is(.feature-card,.pcard,.paysafe-card,.safe-card,.safe-step,.trust-badge,.info-card,.form-card,.calc-box,.fin-box,.price-card,.euro-map-wrap){box-shadow:inset 0 1px 0 rgba(255,255,255,.045),var(--sh-s)}
html[data-theme="cobalt-lux"] :is(.feature-card,.pcard){transition:transform .45s var(--e-out),border-color .45s var(--e-out),box-shadow .45s var(--e-out)}
html[data-theme="cobalt-lux"] .feature-card:hover,
html[data-theme="cobalt-lux"] .pcard:hover{transform:translateY(-5px);border-color:rgba(96,165,250,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 6px rgba(1,4,15,.45),0 30px 60px -18px rgba(1,4,15,.7),0 0 0 1px rgba(59,130,246,.28)}
html[data-theme="cobalt-lux"] .pcard .img img{transition:transform .6s var(--e-out)}
html[data-theme="cobalt-lux"] .pcard:hover .img img{transform:scale(1.035)}
html[data-theme="cobalt-lux"] .pcard .arrow{transition:background .3s var(--e-out),border-color .3s,color .3s,transform .35s var(--e-pop)}
html[data-theme="cobalt-lux"] .pcard:hover .arrow{transform:translateX(3px)}
html[data-theme="cobalt-lux"] :is(.paysafe-card,.safe-card){transition:transform .4s var(--e-out),border-color .4s,box-shadow .4s var(--e-out)}
html[data-theme="cobalt-lux"] .paysafe-card:hover{transform:translateX(4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--sh-m)}
html[data-theme="cobalt-lux"] .safe-card:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--sh-m)}
html[data-theme="cobalt-lux"] .step .num{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 16px -6px rgba(59,130,246,.35)}
html[data-theme="cobalt-lux"] .step:not(:last-child)::after{border-top-color:rgba(148,163,184,.2)}
html[data-theme="cobalt-lux"] .specs td{border-bottom-color:rgba(148,163,184,.09)}
html[data-theme="cobalt-lux"] .qsel-card{transition:border-color .3s var(--e-out),background .3s,transform .3s var(--e-out),box-shadow .3s var(--e-out)}
html[data-theme="cobalt-lux"] .qsel-opt input:checked+.qsel-card{box-shadow:0 0 0 1px var(--accent),0 10px 30px -8px rgba(59,130,246,.35)}
html[data-theme="cobalt-lux"] .cust-card-inner{transition:border-color .35s var(--e-out),background .35s,transform .35s var(--e-out),box-shadow .35s var(--e-out)}
html[data-theme="cobalt-lux"] :is(.pg-nav,.rc-nav,.pg-dot,.rc-dot){transition:background .3s var(--e-out),border-color .3s,color .3s,width .3s var(--e-out),transform .3s var(--e-pop)}
html[data-theme="cobalt-lux"] :is(.pg-nav,.rc-nav):hover{transform:translateY(-50%) scale(1.06)}
html[data-theme="cobalt-lux"] .rc-nav:hover{transform:scale(1.06)}
html[data-theme="cobalt-lux"] .review-card{transition:border-color .35s var(--e-out),box-shadow .35s var(--e-out)}
html[data-theme="cobalt-lux"] .review-card:hover{box-shadow:var(--sh-s)}
html[data-theme="cobalt-lux"] .fin-opt{transition:border-color .3s var(--e-out),background .3s,box-shadow .3s var(--e-out)}
html[data-theme="cobalt-lux"] .fin-opt:hover{box-shadow:0 6px 18px -8px rgba(59,130,246,.3)}
html[data-theme="cobalt-lux"] .filter-bar :is(select,.chip){transition:border-color .3s var(--e-out),background .3s,color .3s}

/* ---------- 8. Formulieren ---------- */
html[data-theme="cobalt-lux"] :is(.field,.modal-form .field) :is(input,select,textarea){border-color:rgba(148,163,184,.22);transition:border-color .3s var(--e-out),box-shadow .3s var(--e-out),background .3s var(--e-out)}
html[data-theme="cobalt-lux"] :is(.field,.modal-form .field) :is(input,select,textarea):hover{border-color:rgba(148,163,184,.4)}
html[data-theme="cobalt-lux"] :is(.field,.modal-form .field) :is(input,select,textarea):focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,.17);background:rgba(2,6,23,.75)}
html[data-theme="cobalt-lux"] :is(input,textarea)::placeholder{color:#5e7290}
html[data-theme="cobalt-lux"] input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #0a142e inset;-webkit-text-fill-color:#f8fafc;caret-color:#f8fafc;transition:background-color 99999s}
html[data-theme="cobalt-lux"] .fin-vat input:focus{box-shadow:0 0 0 3px rgba(59,130,246,.17)}
html[data-theme="cobalt-lux"] .qm-other textarea:focus{box-shadow:0 0 0 3px rgba(240,168,0,.15)}

/* ---------- 9. Modal & popups ---------- */
html[data-theme="cobalt-lux"] dialog.modal::backdrop{background:rgba(1,4,15,.72);backdrop-filter:blur(10px)}
html[data-theme="cobalt-lux"] dialog.modal[open]{animation:luxModal .5s var(--e-out)}
html[data-theme="cobalt-lux"] .modal-form{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 40px 100px -20px rgba(0,0,0,.7),0 0 0 1px rgba(59,130,246,.35)}
html[data-theme="cobalt-lux"] .trust-pop{transition:opacity .35s var(--e-out)}
html[data-theme="cobalt-lux"] .trust-pop-card{transition:transform .45s var(--e-out);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--sh-l)}

/* ---------- 10. FAQ & accordeons (vloeiend open/dicht in moderne browsers) ---------- */
html[data-theme="cobalt-lux"] details.faq::details-content{block-size:0;overflow:clip;transition:block-size .45s var(--e-out),content-visibility .45s allow-discrete}
html[data-theme="cobalt-lux"] details.faq[open]::details-content{block-size:auto}
html[data-theme="cobalt-lux"] details.faq{transition:border-color .35s var(--e-out),box-shadow .35s var(--e-out)}
html[data-theme="cobalt-lux"] details.faq[open]{box-shadow:var(--sh-s),0 0 0 1px rgba(59,130,246,.15)}
html[data-theme="cobalt-lux"] details.faq summary::after{transition:transform .35s var(--e-pop),color .3s}
html[data-theme="cobalt-lux"] details.mods summary{transition:color .3s var(--e-out),border-color .3s,background .3s,transform .35s var(--e-pop)}
html[data-theme="cobalt-lux"] details.mods summary:hover{transform:translateY(-1px)}
html[data-theme="cobalt-lux"] .reviews-toggle summary{transition:background .3s var(--e-out)}

/* ---------- 11. Footer ---------- */
html[data-theme="cobalt-lux"] footer.site{background:linear-gradient(180deg,#020617 0%,#01040f 100%);border-top-color:rgba(148,163,184,.1)}
html[data-theme="cobalt-lux"] .foot-col a{transition:color .3s var(--e-out),transform .3s var(--e-out)}
html[data-theme="cobalt-lux"] .foot-col a:hover{transform:translateX(3px)}
html[data-theme="cobalt-lux"] .foot-branches a{transition:color .3s var(--e-out),border-color .3s,background .3s}

/* ---------- 12. Preloader, scroll-progress & reveals (JS voegt markup/klassen toe) ---------- */
html[data-theme="cobalt-lux"] .lux-loader{display:flex;position:fixed;inset:0;z-index:9999;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:#020617;transition:opacity .5s var(--e-io),visibility .5s}
html[data-theme="cobalt-lux"] .lux-loader.out{opacity:0;visibility:hidden}
html[data-theme="cobalt-lux"] .lux-loader .mark{font-family:'Plus Jakarta Sans',Inter,system-ui,sans-serif;font-weight:800;font-size:30px;letter-spacing:-.02em;color:#f8fafc;animation:luxRise .7s var(--e-out) .05s backwards}
html[data-theme="cobalt-lux"] .lux-loader .mark span{color:var(--accent)}
html[data-theme="cobalt-lux"] .lux-loader .bar{width:150px;height:2px;background:rgba(148,163,184,.16);overflow:hidden;animation:luxRise .7s var(--e-out) .15s backwards}
html[data-theme="cobalt-lux"] .lux-loader .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#8bb8ff 70%,var(--msc-2));transform-origin:left;animation:luxLoad 1.1s var(--e-io) forwards}
html[data-theme="cobalt-lux"] .lux-progress{display:block;position:fixed;top:0;left:0;width:100%;height:2px;z-index:701;background:linear-gradient(90deg,var(--accent) 0%,#8bb8ff 55%,var(--msc-2) 100%);box-shadow:0 0 10px rgba(59,130,246,.45);transform:scaleX(0);transform-origin:left;pointer-events:none}
html[data-theme="cobalt-lux"] .lux-reveal{opacity:0;transform:translateY(18px)}
html[data-theme="cobalt-lux"] .lux-reveal.lux-in{opacity:1;transform:none;transition:opacity .8s var(--e-out) var(--lux-d,0s),transform .8s var(--e-out) var(--lux-d,0s)}

/* ---------- 13. Keyframes ---------- */
@keyframes luxRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes luxDrift{from{opacity:0;transform:translateY(-50%) translateX(44px)}to{opacity:.95;transform:translateY(-50%) translateX(0)}}
@keyframes luxSlide{from{transform:translateX(28px);opacity:0}to{transform:none;opacity:1}}
@keyframes luxModal{from{opacity:0;transform:translate(-50%,-47%) scale(.965)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes luxLoad{0%{transform:scaleX(0)}55%{transform:scaleX(.68)}100%{transform:scaleX(1)}}
@keyframes luxPulse{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.45)}50%{box-shadow:0 0 0 6px rgba(16,185,129,0)}}
@keyframes luxPulseBlue{0%,100%{box-shadow:0 0 0 0 rgba(121,177,252,.5)}50%{box-shadow:0 0 0 6px rgba(121,177,252,0)}}

/* ---------- 14. Reduced motion: alles direct, niets beweegt ---------- */
@media (prefers-reduced-motion:reduce){
  html[data-theme="cobalt-lux"]{scroll-behavior:auto}
  html[data-theme="cobalt-lux"] *,
  html[data-theme="cobalt-lux"] *::before,
  html[data-theme="cobalt-lux"] *::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html[data-theme="cobalt-lux"] .lux-reveal{opacity:1;transform:none}
  html[data-theme="cobalt-lux"] .lux-loader{display:none}
}