/* Energie Install — conversie-tools (popups, floating CTA, back-to-top, consent)
   Self-contained. Huisstijl: groen #0f7a43, donker #0b2417, wit.
   Mobiel-first, geen layout-shift (fixed/overlay), prefers-reduced-motion aware.
   Alle classes geprefixed met .ei- om botsingen met style.css te vermijden. */

:root{
  --eic-green:#0f7a43;
  --eic-green-d:#0b2417;
  --eic-green-l:#16a058;
  --eic-amber:#f5a623;
  --eic-ink:#0b2417;
  --eic-line:#e3ece6;
  --eic-radius:16px;
  --eic-shadow:0 18px 50px -12px rgba(11,36,23,.28);
}

/* ---------- Gedeelde knoppen ---------- */
.ei-cv-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font:inherit;font-weight:700;line-height:1.1;cursor:pointer;
  border:0;border-radius:12px;padding:.85em 1.3em;text-decoration:none;
  background:var(--eic-green);color:#fff;transition:background .18s,transform .12s,box-shadow .18s;
}
.ei-cv-btn:hover{background:var(--eic-green-l)}
.ei-cv-btn:active{transform:translateY(1px)}
.ei-cv-btn:focus-visible{outline:3px solid rgba(15,122,67,.45);outline-offset:2px}
.ei-cv-btn--ghost{background:transparent;color:var(--eic-green-d);border:1.5px solid var(--eic-line)}
.ei-cv-btn--ghost:hover{background:#f4f8f5;color:var(--eic-green-d)}

/* ================= EXIT-INTENT / SCROLL POPUP ================= */
.ei-modal-overlay{
  position:fixed;inset:0;z-index:9000;
  display:flex;align-items:center;justify-content:center;padding:18px;
  background:rgba(11,36,23,.55);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease;
}
.ei-modal-overlay.is-open{opacity:1;visibility:visible}
.ei-modal{
  position:relative;width:100%;max-width:440px;max-height:92vh;overflow-y:auto;
  background:#fff;border-radius:var(--eic-radius);box-shadow:var(--eic-shadow);
  transform:translateY(18px) scale(.98);transition:transform .3s cubic-bezier(.2,.8,.25,1);
  -webkit-overflow-scrolling:touch;
}
.ei-modal-overlay.is-open .ei-modal{transform:translateY(0) scale(1)}
.ei-modal__bar{height:6px;border-radius:var(--eic-radius) var(--eic-radius) 0 0;
  background:linear-gradient(90deg,#00A651,#50B848,#BFD730,#FFF200,#FCB814,#F37021,#ED1C24)}
.ei-modal__body{padding:26px 26px 24px}
.ei-modal__close{
  position:absolute;top:12px;right:12px;z-index:2;
  width:38px;height:38px;border:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(11,36,23,.06);color:var(--eic-green-d);transition:background .18s;
}
.ei-modal__close:hover{background:rgba(11,36,23,.14)}
.ei-modal__close:focus-visible{outline:3px solid rgba(15,122,67,.45);outline-offset:2px}
.ei-modal__eyebrow{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--eic-green);background:#eafaf1;padding:.35em .75em;border-radius:999px;margin-bottom:12px;
}
.ei-modal__title{margin:0 0 8px;font-size:1.45rem;line-height:1.2;color:var(--eic-green-d);font-weight:800}
.ei-modal__text{margin:0 0 18px;color:#4b5563;font-size:.98rem;line-height:1.5}
.ei-modal__usp{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}
.ei-modal__usp li{position:relative;padding-left:26px;color:#374151;font-size:.92rem;line-height:1.4}
.ei-modal__usp li::before{
  content:"";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;
  background:var(--eic-green) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/12px no-repeat;
}
.ei-field{display:block;margin-bottom:12px}
.ei-field input{
  width:100%;box-sizing:border-box;font:inherit;
  padding:.78em .9em;border:1.5px solid var(--eic-line);border-radius:11px;
  background:#fff;color:var(--eic-ink);transition:border-color .16s,box-shadow .16s;
}
.ei-field input:focus{outline:none;border-color:var(--eic-green);box-shadow:0 0 0 3px rgba(15,122,67,.15)}
.ei-field input:user-invalid{border-color:#dc2626}
.ei-modal__submit{width:100%;font-size:1rem;padding:.92em 1.2em}
.ei-modal__fine{margin:12px 0 0;font-size:.74rem;color:#9aa3a0;text-align:center;line-height:1.4}
.ei-modal__fine a{color:var(--eic-green);text-decoration:underline}
.ei-modal__msg{margin:0 0 14px;padding:.7em .9em;border-radius:10px;font-size:.88rem;line-height:1.4;display:none}
.ei-modal__msg.is-err{display:block;background:#fef2f2;color:#b91c1c}
.ei-modal__done{text-align:center;padding:8px 0}
.ei-modal__done svg{color:var(--eic-green);margin-bottom:10px}
.ei-modal__done h3{margin:0 0 8px;color:var(--eic-green-d);font-size:1.3rem}
.ei-modal__done p{margin:0;color:#4b5563}

/* ================= FLOATING CTA WIDGET ================= */
.ei-fab{
  position:fixed;right:18px;bottom:92px;z-index:8500;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
}
.ei-fab__action{
  display:flex;align-items:center;gap:0;overflow:hidden;
  height:52px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;
  color:#fff;box-shadow:0 10px 26px -8px rgba(11,36,23,.45);
  transform:translateY(14px) scale(.9);opacity:0;
  transition:transform .35s cubic-bezier(.2,.8,.25,1),opacity .35s,box-shadow .2s,background .18s;
}
.ei-fab.is-in .ei-fab__action{transform:translateY(0) scale(1);opacity:1}
.ei-fab.is-in .ei-fab__action:nth-child(2){transition-delay:.06s}
.ei-fab__action:hover{box-shadow:0 14px 30px -8px rgba(11,36,23,.55)}
.ei-fab__action:focus-visible{outline:3px solid rgba(255,255,255,.85);outline-offset:2px}
.ei-fab__ic{width:52px;height:52px;flex:0 0 52px;display:flex;align-items:center;justify-content:center}
.ei-fab__lbl{
  max-width:0;white-space:nowrap;font-weight:700;font-size:.95rem;
  transition:max-width .3s ease,padding .3s ease;padding:0;overflow:hidden;
}
.ei-fab__action:hover .ei-fab__lbl,.ei-fab__action:focus-visible .ei-fab__lbl{max-width:160px;padding-right:18px}
.ei-fab__call{background:var(--eic-green)}
.ei-fab__call:hover{background:var(--eic-green-l)}
.ei-fab__wa{background:#25d366}
.ei-fab__wa:hover{background:#1ebe5b}
/* op mobiel labels altijd zichtbaar voor duidelijkheid */
@media(max-width:560px){
  .ei-fab{right:14px;bottom:84px;gap:9px}
  .ei-fab__action{height:48px}
  .ei-fab__ic{width:48px;height:48px;flex-basis:48px}
}

/* ================= BACK TO TOP ================= */
.ei-totop{
  position:fixed;left:18px;bottom:18px;z-index:8400;
  width:46px;height:46px;border:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--eic-green-d);
  box-shadow:0 8px 22px -8px rgba(11,36,23,.4);border:1px solid var(--eic-line);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s,visibility .25s,transform .25s,background .18s,color .18s;
}
.ei-totop.is-vis{opacity:1;visibility:visible;transform:translateY(0)}
.ei-totop:hover{background:var(--eic-green);color:#fff}
.ei-totop:focus-visible{outline:3px solid rgba(15,122,67,.45);outline-offset:2px}
@media(max-width:560px){.ei-totop{left:14px;bottom:14px;width:42px;height:42px}}

/* ================= CONSENT BAR ================= */
.ei-consent{
  position:fixed;left:0;right:0;bottom:0;z-index:9200;
  background:#fff;border-top:3px solid var(--eic-green);
  box-shadow:0 -10px 30px -12px rgba(11,36,23,.25);
  transform:translateY(100%);transition:transform .35s cubic-bezier(.2,.8,.25,1);
}
.ei-consent.is-show{transform:translateY(0)}
.ei-consent__in{
  max-width:1100px;margin:0 auto;padding:16px 20px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.ei-consent__txt{flex:1 1 280px;min-width:200px;color:#374151;font-size:.88rem;line-height:1.5;margin:0}
.ei-consent__txt a{color:var(--eic-green);text-decoration:underline}
.ei-consent__btns{display:flex;gap:10px;flex:0 0 auto}
.ei-consent__btns .ei-cv-btn{padding:.7em 1.2em;font-size:.92rem}
@media(max-width:560px){
  .ei-consent__in{padding:14px 16px;gap:12px}
  .ei-consent__btns{width:100%}
  .ei-consent__btns .ei-cv-btn{flex:1}
}

/* ================= REDUCED MOTION ================= */
@media(prefers-reduced-motion:reduce){
  .ei-modal-overlay,.ei-modal,.ei-fab__action,.ei-totop,.ei-consent{transition-duration:.001ms!important}
  .ei-modal{transform:none!important}
  .ei-fab__action{transform:none!important}
  .ei-fab__lbl{transition:none}
}

/* ── Zweef-stack rechtsonder — DEFINITIEF, geen overlap meer.
     Eén gedeelde rechter-rand; bottom-waarden afgeleid van de knopgroottes
     (chat-bubble 56 · WhatsApp 52 · back-to-top 46) + 16px tussenruimte.
     Stapel van onder naar boven:  chat-bubble → WhatsApp → back-to-top.
     De chat-bubble (.eic-bubble, sitechat-widget.php) staat op bottom:20/right:20. ── */
#itlcb-fab{display:none!important} /* legacy gedeelde chatbot — EI gebruikt eigen .eic-bubble */
.ei-fab{left:auto!important;right:20px!important;bottom:92px!important}    /* WhatsApp, net boven de chat-bubble */
.ei-fab__call{display:none!important}
.ei-totop{left:auto!important;right:20px!important;bottom:160px!important}  /* back-to-top, boven WhatsApp */
@media(max-width:560px){
  .ei-fab{right:14px!important;bottom:88px!important}
  .ei-totop{left:auto!important;right:14px!important;bottom:152px!important;width:44px;height:44px}
}

/* ── QA-fix mobiel: floating-iconen verbergen zolang menu/cookie-balk open is (geen overlap) ── */
body.nav-open .eic-bubble, body.nav-open .ei-fab, body.nav-open .ei-totop,
body:has(.ei-consent.is-show) .eic-bubble, body:has(.ei-consent.is-show) .ei-fab, body:has(.ei-consent.is-show) .ei-totop{display:none!important}
@media(max-width:560px){ .footer-certs{max-width:100%!important;flex-wrap:wrap!important;overflow:hidden} }