/* DHB Adviespopup (apop) */
@property --apop-a{syntax:'<angle>';initial-value:0deg;inherits:false;}

/* Kopkleur vastzetten.
   Koppen hier zetten alleen een lettertype en erven hun kleur van de
   wrapper. Overerving heeft geen specificiteit, dus de Elementor-kit of
   het thema wint daarvan en kleurt de koppen ineens blauw. De wrapper
   staat er dubbel in, zodat deze regel zwaarder weegt dan de kit. De
   eigen kleuren hieronder hebben de wrapper ook gekregen en winnen weer
   van deze regel. */
.apop.apop h1,
.apop.apop h2,
.apop.apop h3,
.apop.apop h4,
.apop.apop h5,
.apop.apop h6 {
	color: inherit;
}




.apop{
  position:fixed;inset:0;z-index:999999;
  display:none;align-items:center;justify-content:center;
  padding:20px;
  font-family:'Satoshi',ui-sans-serif,system-ui,sans-serif;
  --apop-vh:100vh;
}
/* dvh houdt rekening met de adresbalk van mobiele browsers */
@supports (height:100dvh){
  .apop{--apop-vh:100dvh;height:100dvh;}
}
.apop.is-open{display:flex;}
.apop *{margin:0;padding:0;box-sizing:border-box;}
.apop button,.apop input,.apop textarea{font-family:inherit;}
.apop-veil{
  position:absolute;inset:0;
  background:rgba(15,14,14,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .35s ease;
}
.apop.is-in .apop-veil{opacity:1;}

/* -- de kaart -- */
.apop-card{
  position:relative;width:min(560px,100%);
  max-height:calc(var(--apop-vh,100vh) - 40px);
  display:flex;flex-direction:column;
  border-radius:26px;
  background:
    radial-gradient(50% 55% at 92% 3%,rgba(255,76,0,.17),transparent 62%),
    linear-gradient(180deg,#1D1D1D 0%,#0F0E0E 100%);
  color:#fff;
  box-shadow:0 50px 110px rgba(0,0,0,.5);
  opacity:0;transform:translateY(22px) scale(.97);
  transition:opacity .4s ease,transform .5s cubic-bezier(.22,.61,.36,1);
}
.apop.is-in .apop-card{opacity:1;transform:none;}
.apop-card::before{
  content:"";position:absolute;inset:-2px;border-radius:28px;padding:2px;
  background:conic-gradient(from var(--apop-a),transparent 0turn,transparent .64turn,rgba(255,76,0,.95) .78turn,#FFB08A .85turn,rgba(255,76,0,.95) .92turn,transparent 1turn);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;animation:apop-beam 6s linear infinite;
}
@keyframes apop-beam{to{--apop-a:360deg;}}

/* kop */
.apop-head{position:relative;z-index:1;padding:22px 24px 0;}
.apop-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;}
.apop-step{
  font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.45);white-space:nowrap;
}
.apop-x,.apop-x:hover,.apop-x:focus{
  width:36px;height:36px;border-radius:50%;flex:none;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.75)!important;
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
.apop-x svg{width:15px;height:15px;}
.apop-x:hover{background:rgba(255,255,255,.14)!important;color:#fff!important;transform:rotate(90deg);}
.apop-rating{
  display:inline-flex;align-items:center;gap:11px;
  padding:7px 9px 7px 13px;border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.apop-rating .star{width:15px;height:15px;color:#FF4C00;flex:none;filter:drop-shadow(0 0 6px rgba(255,76,0,.6));}
.apop-rating b{font-size:13.5px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;}
.apop-rating small{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.6);white-space:nowrap;}
.apop-avs{display:flex;align-items:center;flex:none;}
.apop-avs img{border-radius:50%;object-fit:cover;border:2px solid rgba(29,29,29,.9);margin-left:-9px;}
.apop-avs img:first-child{margin-left:0;}
@media (max-width:420px){.apop-rating small{display:none;}}

.apop-track{display:flex;align-items:center;gap:14px;margin-top:14px;}
.apop-segs{display:flex;gap:6px;flex:1;}
.apop-seg{flex:1;height:3px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;}
.apop-seg span{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,#E8440A,#FF6A2A);
  transition:width .5s cubic-bezier(.22,.61,.36,1);
}
.apop-seg.is-done span{width:100%;}
.apop .apop-head h2{
  margin-top:18px;font-size:21px;line-height:1.25;color:#fff;
  font-family:'DHB Elms','Satoshi',ui-sans-serif,system-ui,sans-serif;font-weight:800;
}
.apop-sub{margin-top:5px;font-size:12.5px;color:rgba(255,255,255,.55);}

/* stappen */
.apop-body{position:relative;z-index:1;padding:18px 24px 0;overflow-y:auto;overflow-x:hidden;flex:1;}
.apop-view{display:none;}
.apop-view.is-on{display:block;animation:apop-in .4s cubic-bezier(.22,.61,.36,1);}
@keyframes apop-in{from{opacity:0;transform:translateX(16px);}to{opacity:1;transform:none;}}

.apop-opts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;}
.apop-opt,.apop-opt:hover,.apop-opt:focus,.apop-opt:active{
  position:relative;text-align:left;cursor:pointer;
  display:flex;align-items:center;gap:12px;
  padding:13px 14px;border-radius:16px;
  background:rgba(255,255,255,.05)!important;
  border:1.5px solid rgba(255,255,255,.13);
  color:#fff!important;width:100%;
  transition:all .25s cubic-bezier(.22,.61,.36,1);
}
.apop-opt .oic{
  width:38px;height:38px;border-radius:12px;flex:none;
  display:grid;place-items:center;
  background:rgba(255,76,0,.1);border:1px solid rgba(255,76,0,.22);
  color:#FF4C00;
  transition:background-color .3s ease,border-color .3s ease,color .3s ease,transform .4s cubic-bezier(.34,1.56,.64,1);
}
.apop-opt .oic svg{width:19px;height:19px;}
.apop-opt:hover .oic{transform:scale(1.06);}
.apop-opt.is-on .oic{background:linear-gradient(135deg,#E8440A,#FF4C00 55%,#FF6A2A);border-color:transparent;color:#141313;}
.apop-opt .otxt{min-width:0;}
.apop-opt .otick{
  position:absolute;right:11px;top:11px;
  width:18px;height:18px;border-radius:50%;
  display:grid;place-items:center;
  background:#FF4C00;color:#141313;
  opacity:0;transform:scale(.5);
  transition:opacity .25s ease,transform .3s cubic-bezier(.34,1.56,.64,1);
}
.apop-opt .otick svg{width:10px;height:10px;}
.apop-opt.is-on .otick{opacity:1;transform:none;}
.apop-opt:hover{border-color:rgba(255,76,0,.55)!important;background:rgba(255,76,0,.08)!important;transform:translateY(-2px);}
.apop-opt.is-on,.apop-opt.is-on:hover{border-color:#FF4C00!important;background:rgba(255,76,0,.14)!important;}
.apop-opt b{display:block;font-size:13.5px;font-weight:800;line-height:1.2;overflow-wrap:break-word;}
/* een losse laatste optie vult de hele rij */
.apop-opts > .apop-opt:last-child:nth-child(odd){grid-column:1 / -1;}
.apop-opt small{display:block;margin-top:3px;font-size:11px;color:rgba(255,255,255,.5);}

/* velden */
.apop-fields{position:relative;display:flex;flex-direction:column;gap:9px;}
/* honeypot onzichtbaar zonder de kaart breder te maken */
.apop-hp{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0;}
.apop-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px;}
@media (max-width:460px){.apop-row{grid-template-columns:minmax(0,1fr);}}
.apop-field{
  display:flex;align-items:center;gap:11px;
  padding:4px 4px 4px 6px;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease;
}
.apop-field:focus-within{border-color:rgba(255,76,0,.6);background:rgba(255,76,0,.06);box-shadow:0 0 0 4px rgba(255,76,0,.1);}
.apop-field--area{align-items:flex-start;}
.apop-field .fic{
  width:36px;height:36px;border-radius:11px;flex:none;
  display:grid;place-items:center;
  background:rgba(255,76,0,.1);border:1px solid rgba(255,76,0,.2);color:#FF4C00;
}
.apop-field--area .fic{margin-top:5px;}
.apop-field .fic svg{width:15px;height:15px;}
.apop-field input,.apop-field textarea,
.apop-field input:focus,.apop-field textarea:focus{
  flex:1;min-width:0;width:100%;
  background:none!important;border:none!important;outline:none;resize:none;box-shadow:none!important;
  font-size:13.5px;font-weight:500;color:#fff!important;padding:10px 2px;
}
.apop-field textarea{min-height:66px;line-height:1.55;}
.apop-field input::placeholder,.apop-field textarea::placeholder{color:rgba(255,255,255,.4);}
.apop-ok{
  width:19px;height:19px;border-radius:50%;flex:none;margin-right:7px;
  display:grid;place-items:center;background:rgba(255,76,0,.16);color:#FF4C00;
  opacity:0;transform:scale(.5);
  transition:opacity .25s ease,transform .3s cubic-bezier(.34,1.56,.64,1);
}
.apop-ok svg{width:10px;height:10px;}
.apop-field.is-valid .apop-ok{opacity:1;transform:none;}

/* keuzeoverzicht */
.apop-recap{margin-bottom:14px;display:flex;flex-wrap:wrap;gap:6px;}
.apop-recap span{
  padding:7px 12px;border-radius:999px;
  background:rgba(255,76,0,.12);border:1px solid rgba(255,76,0,.3);
  font-size:11.5px;font-weight:700;color:#FF8A55;
}

/* voet */
.apop-foot{position:relative;z-index:1;padding:16px 24px 22px;}
.apop-next,.apop-send,
.apop-next:hover,.apop-send:hover,
.apop-next:focus,.apop-send:focus{
  width:100%;
  display:none;align-items:center;justify-content:center;gap:12px;
  padding:8px;border-radius:999px;border:none;cursor:pointer;
  font-size:15px;font-weight:700;line-height:1;color:#fff!important;
  background:linear-gradient(135deg,#E8440A 0%,#FF4C00 55%,#FF6A2A 100%);
  box-shadow:0 10px 26px rgba(255,76,0,.28),inset 0 1px 0 rgba(255,255,255,.35);
  position:relative;isolation:isolate;overflow:hidden;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),opacity .3s ease;
}
.apop-next.is-shown,.apop-send.is-shown{display:flex;}
.apop-next > span:first-child,.apop-send > span:first-child{position:relative;z-index:2;}
.apop-next::before,.apop-send::before{
  content:"";position:absolute;left:50%;top:50%;
  width:42px;height:42px;border-radius:50%;background:#141313;
  transform:translate(-50%,-50%) scale(0);
  transition:transform .55s cubic-bezier(.22,.61,.36,1);z-index:1;
}
.apop-next:hover:not(:disabled)::before,.apop-send:hover:not(:disabled)::before{transform:translate(-50%,-50%) scale(16);}
.apop-next:hover:not(:disabled),.apop-send:hover:not(:disabled){transform:translateY(-2px);}
.apop-next:disabled,.apop-send:disabled{opacity:.45;cursor:not-allowed;transform:none;}
.apop-next .circ,.apop-send .circ{
  width:42px;height:42px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:rgba(255,255,255,.95);color:#141313;position:relative;z-index:2;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1),background-color .35s ease;
}
.apop-next .circ svg,.apop-send .circ svg{width:15px;height:15px;}
.apop-next:hover:not(:disabled) .circ,.apop-send:hover:not(:disabled) .circ{transform:rotate(45deg);background:#FF4C00;}
.apop-error{
  margin-top:10px;text-align:center;display:none;
  font-size:11.5px;font-weight:600;color:#FFB4B4;
}
.apop-error.is-on{display:block;}

.apop-bottom{
  margin-top:14px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
}
.apop-back,.apop-back:hover,.apop-back:focus{
  background:none!important;border:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  grid-column:1;justify-self:start;
  font-size:12.5px;font-weight:700;color:rgba(255,255,255,.5)!important;
  transition:color .25s ease;visibility:hidden;
}
.apop-back svg{width:13px;height:13px;}
.apop-back:hover{color:#fff!important;}
.apop-back.is-shown{visibility:visible;}
.apop-adviser{
  grid-column:2;justify-self:center;
  display:flex;align-items:center;gap:9px;
  font-size:11.5px;color:rgba(255,255,255,.5);text-align:left;
}
.apop-adviser img{border-radius:50%;object-fit:cover;border:1.5px solid rgba(255,76,0,.55);}
.apop-adviser b{color:rgba(255,255,255,.85);}
@media (max-width:440px){
  .apop-bottom{grid-template-columns:minmax(0,1fr);justify-items:center;gap:12px;}
  .apop-back{grid-column:1;justify-self:center;order:2;}
  .apop-adviser{grid-column:1;order:1;}
}

/* succes */
.apop-done{display:none;flex-direction:column;align-items:center;text-align:center;padding:38px 24px 34px;position:relative;z-index:1;}
.apop-card.is-done .apop-done{display:flex;}
.apop-card.is-done .apop-head,
.apop-card.is-done .apop-body,
.apop-card.is-done .apop-foot{display:none;}
.apop-check{
  width:66px;height:66px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,76,0,.12);border:2px solid rgba(255,76,0,.5);color:#FF4C00;
  animation:apop-checkin .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes apop-checkin{from{transform:scale(.4);opacity:0;}to{transform:scale(1);opacity:1;}}
.apop-check svg{width:30px;height:30px;}
.apop .apop-done h3{margin-top:15px;font-size:20px;font-weight:900;color:#fff;}
.apop .apop-done h3 em{font-style:normal;color:#FF4C00;}
.apop-done p{margin-top:8px;font-size:13px;line-height:1.6;color:rgba(255,255,255,.6);max-width:320px;}
.apop-close2,.apop-close2:hover,.apop-close2:focus{
  margin-top:20px;cursor:pointer;
  padding:11px 22px;border-radius:999px;
  background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.16);
  color:#fff!important;font-size:13.5px;font-weight:700;
  transition:all .25s ease;
}
.apop-close2:hover{background:rgba(255,255,255,.13)!important;}

@media (max-width:620px){
  .apop{padding:10px;}
  .apop-card{border-radius:22px;max-height:calc(var(--apop-vh,100vh) - 20px);width:100%;}
  .apop-head{padding:14px 14px 0;}
  .apop-body{padding:12px 14px 0;}
  .apop-foot{padding:12px 14px 14px;}

  /* kop compacter zodat de keuzes in beeld passen */
  .apop-rating{padding:5px 7px 5px 11px;gap:8px;}
  .apop-rating b{font-size:12.5px;}
  .apop-avs img{width:22px!important;height:22px!important;}
  .apop-x{width:32px;height:32px;}
  .apop-track{margin-top:11px;gap:10px;}
  .apop-head h2{font-size:17px;margin-top:12px;line-height:1.2;}
  .apop-sub{font-size:11.5px;margin-top:4px;}

  /* twee kolommen, icoon boven de tekst: lange woorden passen zo wél */
  .apop-opts{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px;}
  /* icoon naast de tekst: scheelt een regel hoogte per vakje */
  .apop-opt,.apop-opt:hover,.apop-opt:focus{
    flex-direction:row;align-items:center;
    gap:9px;padding:8px 22px 8px 9px;border-radius:13px;
  }
  .apop-opt .oic{width:28px;height:28px;border-radius:8px;}
  .apop-opt .oic svg{width:15px;height:15px;}
  .apop-opt .otxt{min-width:0;flex:1;}
  .apop-opt b{font-size:11.5px;line-height:1.2;hyphens:auto;}
  /* toelichting weglaten: scheelt nog een regel */
  .apop-opt small{display:none;}
  .apop-opt .otick{right:6px;top:50%;transform:translateY(-50%) scale(.5);width:15px;height:15px;}
  .apop-opt.is-on .otick{transform:translateY(-50%);}
  .apop-opt .otick svg{width:9px;height:9px;}
  .apop-adviser{font-size:10.5px;}
  .apop-adviser img{width:22px!important;height:22px!important;}

  /* velden en knoppen wat strakker */
  .apop-field .fic{width:32px;height:32px;border-radius:9px;}
  .apop-field input,.apop-field textarea{font-size:13px;padding:9px 2px;}
  .apop-field textarea{min-height:58px;}
  .apop-next,.apop-send{font-size:14px;}
  .apop-next .circ,.apop-send .circ{width:38px;height:38px;}
  .apop-bottom{margin-top:11px;}
}

/* smalle telefoons: net genoeg krimpen zodat lange namen op één regel passen */
@media (max-width:430px){
  .apop-opt,.apop-opt:hover,.apop-opt:focus{gap:8px;padding:8px 17px 8px 8px;}
  .apop-opt .oic{width:26px;height:26px;border-radius:7px;}
  .apop-opt .oic svg{width:14px;height:14px;}
  .apop-opt b{font-size:11px;}
  .apop-opt .otick{right:4px;width:14px;height:14px;}
}

@media (prefers-reduced-motion:reduce){
  .apop-card,.apop-card::before,.apop-veil,.apop-view.is-on,.apop-check{animation:none;transition:none;}
  .apop.is-open .apop-card{opacity:1;transform:none;}
  .apop.is-open .apop-veil{opacity:1;}
}

/* ===== Knoppen die de popup openen ===== */
.apop-trigger-wrap{display:flex;flex-wrap:wrap;}
.apop-trigger,
.apop-trigger:hover,
.apop-trigger:focus{
  display:inline-flex;align-items:center;justify-content:center;gap:13px;
  padding:8px 8px 8px 28px;border-radius:999px;border:none;cursor:pointer;
  font-family:'Satoshi',ui-sans-serif,system-ui,sans-serif;
  font-size:15.5px;font-weight:700;line-height:1;color:#fff!important;
  position:relative;isolation:isolate;overflow:hidden;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s ease;
}
.apop-trigger--knop{
  background:linear-gradient(135deg,#E8440A 0%,var(--apop-btn,#FF4C00) 55%,#FF6A2A 100%);
  box-shadow:0 10px 30px rgba(255,76,0,.3),inset 0 1px 0 rgba(255,255,255,.35);
}
.apop-trigger--donker{
  background:#141313;
  box-shadow:0 10px 28px rgba(20,19,19,.24);
}
.apop-trigger > span:first-child{position:relative;z-index:2;}
.apop-trigger::before{
  content:"";position:absolute;left:50%;top:50%;
  width:44px;height:44px;border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  transition:transform .55s cubic-bezier(.22,.61,.36,1);z-index:1;
}
.apop-trigger--knop::before{background:#141313;}
.apop-trigger--donker::before{background:linear-gradient(135deg,#E8440A,var(--apop-btn,#FF4C00) 55%,#FF6A2A);}
.apop-trigger:hover::before{transform:translate(-50%,-50%) scale(16);}
.apop-trigger--knop:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(0,0,0,.45),0 0 0 1px rgba(255,76,0,.35);}
.apop-trigger--donker:hover{transform:translateY(-3px);color:#141313!important;box-shadow:0 18px 40px rgba(255,76,0,.35);}
.apop-trigger .circ{
  width:44px;height:44px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:rgba(255,255,255,.95);color:#141313;
  position:relative;z-index:2;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1),background-color .35s ease;
}
.apop-trigger .circ svg{width:16px;height:16px;}
.apop-trigger:hover .circ{transform:rotate(45deg);}
.apop-trigger--knop:hover .circ{background:var(--apop-btn,#FF4C00);}

/* tekstlink-variant */
.apop-trigger--link,
.apop-trigger--link:hover,
.apop-trigger--link:focus{
  padding:0;gap:11px;border-radius:0;overflow:visible;
  background:none!important;box-shadow:none;
  color:#141313!important;font-size:15px;font-weight:800;
}
.apop-trigger--link::before{display:none;}
.apop-trigger--link u{text-decoration:none;position:relative;}
.apop-trigger--link u::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;background:currentColor;
  transform-origin:left;transition:transform .45s cubic-bezier(.22,.61,.36,1),background-color .3s ease;
}
.apop-trigger--link:hover{transform:none;}
.apop-trigger--link:hover u::after{transform:scaleX(.55);background:var(--apop-btn,#FF4C00);}

/* zolang de adviespopup open staat blijft de chatknop erachter */
body.apop-is-open .nlw{
  opacity:0!important;
  pointer-events:none!important;
  transition:opacity .2s ease;
}