/* ===========================================================
   DebiCare — gated downloads (lead magnets)
   Herbruikbaar: elk element met [data-download] opent de modal.
   Themabewust via --green/--green-d (blauw thema overschrijft).
   =========================================================== */

/* ---- hulpmiddelen-sectie ---- */
.dl-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:760px){.dl-grid{grid-template-columns:1fr}}
.dl-card{display:flex;flex-direction:column;background:var(--paper);border:2px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.22s}
.dl-card:hover{transform:translateY(-6px);border-color:transparent;box-shadow:0 26px 46px -24px rgba(54,65,60,.34)}
.dl-cover{position:relative;height:206px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(140deg,var(--green-l),var(--green-d))}
.dl-cover.peach{background:linear-gradient(140deg,#f6a877,var(--peach-d))}
.dl-cover .deco{position:absolute;border-radius:50%;pointer-events:none}
.dl-cover .deco.a{width:180px;height:180px;border:2px solid rgba(255,255,255,.14);top:-70px;right:-40px}
.dl-cover .deco.b{width:120px;height:120px;background:rgba(244,193,82,.2);bottom:-50px;left:-30px}
/* mini-document mock */
.dl-doc{position:relative;z-index:2;width:170px;background:#fff;border-radius:10px;padding:18px 16px;box-shadow:0 20px 38px -16px rgba(0,0,0,.45);transform:rotate(-3deg)}
.dl-doc .dt{font-family:'Fredoka',sans-serif;font-weight:600;font-size:13.5px;line-height:1.12;color:var(--ink);margin-bottom:10px}
.dl-doc .ln{height:6px;border-radius:3px;background:#e7ded0;margin-bottom:6px}
.dl-doc .ln.s{width:62%}
.dl-doc .cols{display:flex;gap:5px;margin-top:11px}
.dl-doc .cols span{flex:1;height:32px;border-radius:5px}
.dl-doc .tbl{margin-top:11px;display:grid;grid-template-columns:1fr 38px;gap:5px}
.dl-doc .tbl i{height:9px;border-radius:3px;background:#ede4d4;display:block}
.dl-doc .tbl i.h{background:var(--green)}
.dl-doc .euro{position:absolute;right:-12px;bottom:-12px;width:42px;height:42px;border-radius:50%;background:var(--sun);color:#7a5a13;display:flex;align-items:center;justify-content:center;font-family:'Fredoka',sans-serif;font-weight:600;font-size:22px;box-shadow:0 8px 18px -6px rgba(0,0,0,.3)}
.dl-cover .ribbon{position:absolute;z-index:3;top:14px;left:14px;background:rgba(255,255,255,.92);color:var(--green-d);font-family:'Fredoka',sans-serif;font-weight:600;font-size:12px;letter-spacing:.03em;padding:6px 13px;border-radius:999px}
.dl-cover.peach .ribbon{color:var(--peach-d)}
.dl-body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.dl-body .kicker{font-family:'Fredoka',sans-serif;font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--peach-d);margin-bottom:9px}
.dl-body h3{font-size:22px;margin-bottom:9px;font-weight:600}
.dl-body p{font-size:15.5px;color:var(--ink-soft);margin-bottom:16px}
.dl-points{list-style:none;display:grid;gap:9px;margin-bottom:20px}
.dl-points li{display:flex;gap:10px;align-items:center;font-size:14.5px;font-weight:600;color:var(--ink)}
.dl-points li svg{width:20px;height:20px;color:#fff;background:var(--green);border-radius:50%;padding:4px;flex:0 0 auto}
.dl-body .dl-act{margin-top:auto}
.dl-body .btn{width:100%;justify-content:center}

/* ---- modal ---- */
.dl-modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:22px}
.dl-modal.open{display:flex}
.dl-backdrop{position:absolute;inset:0;background:rgba(34,40,42,.55);backdrop-filter:blur(4px);animation:dlFade .2s ease}
.dl-panel{position:relative;z-index:2;width:min(480px,100%);max-height:92vh;overflow:auto;background:var(--cream);border-radius:24px;padding:34px 34px 30px;box-shadow:0 40px 90px -30px rgba(0,0,0,.55);animation:dlPop .26s cubic-bezier(.4,0,.2,1)}
@keyframes dlFade{from{opacity:0}to{opacity:1}}
@keyframes dlPop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.dl-x{position:absolute;top:16px;right:16px;width:40px;height:40px;border:none;background:#fff;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink);box-shadow:0 4px 12px -6px rgba(0,0,0,.3)}
.dl-x svg{width:20px;height:20px}
.dl-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:13px;color:var(--peach-d);background:#fff;border:2px solid var(--line);padding:6px 14px;border-radius:999px;margin-bottom:14px}
.dl-eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--sun)}
.dl-panel h3{font-size:24px;font-weight:600;margin-bottom:8px;max-width:15em}
.dl-panel .dl-lead{font-size:15px;color:var(--ink-soft);margin-bottom:20px}
.dl-field{margin-bottom:14px}
.dl-field label{display:block;font-family:'Fredoka',sans-serif;font-weight:500;font-size:14px;margin-bottom:6px}
.dl-field input{width:100%;font-family:'Nunito',sans-serif;font-size:16px;padding:12px 15px;border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);transition:.18s}
.dl-field input:focus{outline:none;border-color:var(--green-l);box-shadow:0 0 0 4px rgba(106,168,144,.18)}
.dl-err{display:none;background:#fdecea;color:#b5402c;border-radius:11px;padding:10px 14px;font-size:14px;font-weight:600;margin-bottom:12px}
.dl-err.show{display:block}
.dl-full{width:100%;justify-content:center}
.dl-direct{text-align:center;font-size:14px;color:var(--ink-soft);margin-top:14px}
.dl-direct a{color:var(--green-d);font-weight:700}
.dl-priv{text-align:center;font-size:12.5px;color:var(--ink-soft);margin-top:10px;opacity:.8}
.dl-thanks{text-align:center;padding:14px 0 6px;display:none}
.dl-thanks.show{display:block}
.dl-thanks .big{width:64px;height:64px;border-radius:50%;background:var(--green);color:#fff;font-size:34px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.dl-thanks h3{margin:0 auto 8px;max-width:none}
.dl-thanks p{font-size:15px;color:var(--ink-soft);max-width:30em;margin:0 auto 18px}
.dl-thanks a.relink{color:var(--green-d);font-weight:700}
.dl-form.hide{display:none}