/* Beekmans Keuzehulp. Huisstijlkleuren staan als variabelen bovenaan, zodat een nieuwe huisstijl op één plek aan te passen is. */
.bkk{--o:#ee7306;--o2:#d96400;--ink:#373736;--mut:#5f5f5d;--line:#e6e4e1;--soft:#fff4ec;--ok:#2f7a23;--nee:#b3261e;--bg:#f4f4f4;
  font-family:Lato,system-ui,sans-serif;color:var(--ink);max-width:760px;margin:0 auto;line-height:1.5;font-size:var(--fs-basis);text-align:left;
  /* lettergrootte: vier vaste maten, nergens anders een eigen maat gebruiken */
  --fs-titel:20px;--fs-basis:17px;--fs-klein:15px;--fs-label:13px}
.bkk *{box-sizing:border-box}
.bkk .bkk-chat{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 34px rgba(0,0,0,.07);overflow:hidden}
.bkk .bkk-loading{padding:30px;text-align:center;color:var(--mut)}

/* kop met accountmanager */
.bkk .bkk-kop{display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--ink);color:#fff}
.bkk .bkk-ava{width:52px;height:52px;border-radius:50%;flex:none;background:#5a5a58;position:relative}
.bkk .bkk-ava img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 20%;margin:0;display:block}
.bkk .bkk-ava.is-online:after{content:"";position:absolute;right:-2px;bottom:-1px;z-index:2;width:15px;height:15px;border-radius:50%;background:#5ccf4a;border:2.5px solid var(--ink)}
.bkk .bkk-wie{flex:1;min-width:0;display:flex;flex-direction:column}
.bkk .bkk-wie b{font-size:var(--fs-titel);line-height:1.2}
.bkk .bkk-wie span{font-size:var(--fs-klein);color:#dcdad7}
.bkk .bkk-seg{display:inline-flex;background:#4a4a48;border-radius:99px;padding:3px;flex:none}
.bkk button.bkk-segb{all:unset;cursor:pointer;font-family:inherit;font-size:var(--fs-klein);font-weight:700;padding:8px 18px;border-radius:99px;color:#eeece9}
.bkk button.bkk-segb.is-on{background:var(--o);color:#fff;font-weight:900}
.bkk button.bkk-segb:focus-visible{outline:2px solid #fff;outline-offset:1px}

/* gesprek */
.bkk .bkk-log{background:var(--bg);padding:20px 18px 18px;display:flex;flex-direction:column;gap:12px;max-height:660px;overflow-y:auto;scroll-behavior:smooth}
.bkk .bkk-b{max-width:84%;padding:12px 15px;font-size:var(--fs-basis);line-height:1.5;border-radius:4px 16px 16px 16px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05);align-self:flex-start}
.bkk .bkk-stap{display:block;font-size:var(--fs-label);font-weight:700;color:var(--mut);margin-bottom:2px}
.bkk .bkk-u{align-self:flex-end;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;align-items:center;max-width:90%}
.bkk .bkk-ub{background:var(--o);color:#fff;font-weight:700;font-size:var(--fs-basis);padding:9px 14px;border-radius:16px 4px 16px 16px}
.bkk button.bkk-wijzig{all:unset;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-klein);font-weight:700;color:var(--ink);padding:7px 11px;border-radius:99px;border:1.5px solid #d6d3cf;background:#fff}
.bkk button.bkk-wijzig:hover{border-color:var(--o);color:#b85700}
.bkk button.bkk-wijzig svg{width:14px;height:14px}
.bkk .bkk-new{animation:bkkIn .3s ease both}
@keyframes bkkIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bkk .bkk-new,.bkk .bkk-typ i{animation:none}}
.bkk .bkk-typ{display:inline-flex;gap:4px;padding:15px 16px}
.bkk .bkk-typ i{width:7px;height:7px;border-radius:50%;background:#b5b2ae;animation:bkkDot 1s infinite ease-in-out}
.bkk .bkk-typ i:nth-child(2){animation-delay:.15s}.bkk .bkk-typ i:nth-child(3){animation-delay:.3s}
@keyframes bkkDot{0%,80%,100%{opacity:.3;transform:none}40%{opacity:1;transform:translateY(-3px)}}

/* antwoordopties */
.bkk .bkk-keuzes{align-self:flex-end;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;max-width:94%}
.bkk button.bkk-k{all:unset;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:8px;border:2px solid var(--o);background:#fff;color:var(--ink);font-weight:700;font-size:var(--fs-basis);padding:9px 15px;border-radius:99px;transition:background .15s}
.bkk button.bkk-k:hover{background:var(--soft)}
.bkk button.bkk-k.is-on{background:var(--o);color:#fff}
.bkk button.bkk-k:focus-visible,.bkk button.bkk-wijzig:focus-visible,.bkk button.bkk-terug:focus-visible{outline:3px solid rgba(238,115,6,.35);outline-offset:2px}
.bkk .bkk-k svg{width:26px;height:26px;flex:none;stroke-width:2.5}
.bkk .bkk-k small{font-weight:700;font-size:var(--fs-label);color:var(--ok)}
.bkk .bkk-k.is-on small{color:#fff}
.bkk .bkk-k small.zero{color:#8e8c89}
.bkk .bkk-nav{align-self:stretch;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.bkk button.bkk-terug{all:unset;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-klein);font-weight:700;color:var(--ink);padding:9px 14px;border-radius:99px;background:#fff;border:1.5px solid #d6d3cf}
.bkk button.bkk-terug:hover{border-color:var(--ink)}
.bkk button.bkk-terug svg{width:16px;height:16px}
.bkk button.bkk-next{all:unset;cursor:pointer;font-family:inherit;background:var(--ink);color:#fff;font-weight:900;font-size:var(--fs-basis);padding:11px 20px;border-radius:99px;margin-left:auto}
.bkk button.bkk-next[disabled]{background:#d9d7d3;color:#77756f;cursor:not-allowed}

/* advies */
.bkk .bkk-res{align-self:stretch;background:#fff;border-radius:4px 16px 16px 16px;padding:16px;box-shadow:0 1px 2px rgba(0,0,0,.05);display:flex;flex-direction:column;gap:18px}
.bkk .bkk-sec-h{display:flex;align-items:center;gap:8px;font-size:var(--fs-titel);font-weight:900;color:var(--ink);margin-bottom:8px}
.bkk .bkk-sec-h svg{width:26px;height:26px;color:var(--o)}
.bkk .bkk-geen{display:flex;gap:12px;align-items:flex-start;background:#fdf1ef;border:1.5px solid #f2c9c3;border-radius:10px;padding:12px 14px;margin-bottom:10px}
.bkk .bkk-geen svg{width:24px;height:24px;flex:none;color:var(--nee);margin-top:1px}
.bkk .bkk-geen b{display:block;font-size:var(--fs-titel);line-height:1.35;color:var(--ink)}
.bkk .bkk-geen span{display:block;font-size:var(--fs-klein);color:var(--mut);margin-top:2px}
.bkk .bkk-note{background:var(--bg);border-radius:8px;padding:10px 12px;font-size:var(--fs-klein);margin-bottom:8px}
.bkk .bkk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bkk .bkk-m{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;position:relative}
.bkk .bkk-m.top{border:2px solid var(--o)}
.bkk .bkk-m.alt{border:1.5px solid #d6d3cf}
.bkk a.bkk-m-link{display:flex;flex-direction:column;flex:1;text-decoration:none!important;color:var(--ink)!important}
.bkk a.bkk-m-link:hover b{text-decoration:underline;text-underline-offset:3px}
.bkk .bkk-badge{position:absolute;top:7px;left:7px;background:var(--o);color:#fff;font-size:var(--fs-label);font-weight:900;padding:3px 9px;border-radius:99px;z-index:1}
.bkk .bkk-badge.alt{background:var(--ink)}
.bkk .bkk-img{height:110px;background:#f3f2ef;display:flex;align-items:center;justify-content:center}
.bkk .bkk-img img{width:100%;height:100%;object-fit:contain;margin:0}
.bkk .bkk-img svg{width:34%;height:auto;color:#c9c6c2}
.bkk .bkk-mi{padding:10px 11px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.bkk .bkk-mi b{font-size:var(--fs-basis);line-height:1.3}
.bkk .bkk-specs{font-size:var(--fs-klein);color:var(--mut)}
.bkk .bkk-afw{list-style:none;margin:2px 0 0;padding:0}
.bkk .bkk-afw li{position:relative;padding-left:20px;font-size:var(--fs-klein);line-height:1.35;font-weight:700;color:var(--nee);margin:0 0 3px}
.bkk .bkk-afw li:before,.bkk .bkk-afw li:after{content:"";position:absolute;left:3px;top:9px;width:11px;height:2.5px;background:var(--nee);border-radius:2px;transform:rotate(45deg)}
.bkk .bkk-afw li:after{transform:rotate(-45deg)}
.bkk .bkk-uit{font-size:var(--fs-label);font-weight:700;color:var(--mut);background:#ecebe8;border-radius:6px;padding:2px 8px;align-self:flex-start}
.bkk .bkk-ok{position:relative;padding-left:20px;font-size:var(--fs-klein);font-weight:700;color:var(--ok)}
.bkk .bkk-ok:before{content:"";position:absolute;left:3px;top:5px;width:10px;height:5px;border-left:2.5px solid var(--ok);border-bottom:2.5px solid var(--ok);transform:rotate(-45deg)}
.bkk .bkk-price{margin-top:auto;padding-top:6px;font-weight:900;font-size:var(--fs-basis)}
.bkk .bkk-price small{font-weight:400;color:var(--mut);font-size:var(--fs-label)}
.bkk .bkk-lease{align-self:stretch;display:flex;align-items:center;gap:12px;background:var(--ink);color:#fff;border-radius:12px;padding:12px 14px}
.bkk .bkk-lease svg{width:28px;height:28px;flex:none;color:var(--o)}
.bkk .bkk-lease>div{flex:1;min-width:0}
.bkk .bkk-lease b{display:block;font-size:var(--fs-titel);line-height:1.3}
.bkk .bkk-lease span{display:block;font-size:var(--fs-klein);color:#dcdad7}
.bkk a.bkk-lease-kn{margin-left:auto;flex:none;background:var(--o);color:#fff!important;font-weight:900;font-size:var(--fs-basis);padding:10px 16px;border-radius:9px;text-decoration:none!important;white-space:nowrap}
.bkk a.bkk-lease-kn:hover{background:var(--o2)}
.bkk a.bkk-lease-kn:focus-visible{outline:3px solid rgba(238,115,6,.5);outline-offset:2px}
.bkk .bkk-links{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.bkk a.bkk-more{display:inline-flex;align-items:center;gap:6px;color:#b85700!important;font-weight:800;text-decoration:none!important;font-size:var(--fs-basis)}
.bkk a.bkk-more:hover{text-decoration:underline!important;text-underline-offset:3px}
.bkk a.bkk-more svg{width:16px;height:16px;flex:none}

/* voet: voor het advies een belregel, na het advies de vier vervolgstappen (altijd in beeld) */
.bkk .bkk-voet{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 18px;border-top:1px solid var(--line);font-size:var(--fs-klein);color:var(--mut);background:#fff}
.bkk .bkk-voet a{color:#b85700;font-weight:700;text-decoration:none}
.bkk .bkk-voet.is-advies{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:12px 14px;box-shadow:0 -6px 16px rgba(0,0,0,.05)}
.bkk .bkk-voet a.bkk-act{display:flex;align-items:center;gap:9px;padding:10px 11px;border-radius:10px;background:#fff;border:2px solid var(--line);text-decoration:none!important;color:var(--ink)!important;transition:border-color .15s;min-width:0}
.bkk .bkk-voet a.bkk-act:hover{border-color:var(--o)}
.bkk .bkk-voet a.bkk-act:focus-visible{outline:3px solid rgba(238,115,6,.35);outline-offset:2px}
.bkk .bkk-voet a.bkk-act.pri{background:var(--o);border-color:var(--o);color:#fff!important}
.bkk .bkk-voet a.bkk-act.pri:hover{background:var(--o2);border-color:var(--o2)}
.bkk .bkk-voet a.bkk-act svg{width:22px;height:22px;flex:none;color:var(--o)}
.bkk .bkk-voet a.bkk-act.pri svg{color:#fff}
.bkk .bkk-voet a.bkk-act span{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.bkk .bkk-voet a.bkk-act b{font-size:var(--fs-klein);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bkk .bkk-voet a.bkk-act small{font-size:var(--fs-label);opacity:.85;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bkk .bkk-wie i.bkk-xs{font-style:normal}
.bkk button.bkk-link{all:unset;cursor:pointer;font-family:inherit;font-size:var(--fs-klein);color:var(--mut);text-decoration:underline;text-underline-offset:3px}
.bkk .bkk-b button.bkk-link{font-size:inherit;color:#b85700;font-weight:700;margin-left:4px}

@media (max-width:600px){
  .bkk{--fs-titel:18px;--fs-basis:16px;--fs-klein:14px;--fs-label:13px}
  .bkk .bkk-keuzes[data-q="doel"]{display:grid;grid-template-columns:1fr 1fr;max-width:100%;width:100%}
  .bkk .bkk-keuzes[data-q="doel"] .bkk-k{border-radius:12px;font-size:var(--fs-klein);padding:9px 10px;justify-content:flex-start;white-space:normal}
  .bkk .bkk-keuzes[data-q="doel"] .bkk-k svg{width:24px;height:24px}
  .bkk .bkk-kop{padding:10px 12px;gap:10px}.bkk .bkk-ava{width:42px;height:42px}.bkk .bkk-wie b{font-size:var(--fs-titel)}.bkk .bkk-wie span{font-size:var(--fs-label)}.bkk .bkk-wie i.bkk-xs{display:none}
  .bkk button.bkk-segb{padding:7px 12px;font-size:var(--fs-klein)}
  .bkk .bkk-log{padding:14px 12px;max-height:72vh}
  .bkk .bkk-b{max-width:92%}
  .bkk .bkk-grid{grid-template-columns:1fr}
  .bkk .bkk-lease{flex-wrap:wrap}.bkk a.bkk-lease-kn{margin-left:0;width:100%;text-align:center}
  .bkk a.bkk-m-link{flex-direction:row}.bkk .bkk-img{width:34%;height:auto;min-height:96px}.bkk .bkk-mi{width:66%}
  .bkk .bkk-voet{padding:10px 14px;flex-wrap:wrap}
  .bkk .bkk-voet.is-advies{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:8px 10px}
  .bkk .bkk-voet a.bkk-act{flex-direction:column;justify-content:center;gap:3px;padding:8px 4px;text-align:center}
  .bkk .bkk-voet a.bkk-act span{align-items:center}
  .bkk .bkk-voet a.bkk-act b{font-size:var(--fs-label);white-space:normal}
  .bkk .bkk-voet a.bkk-act small{display:none}
}

/* keuzehulp in een Flatsome-popup (pillar pages), zelfde uitstraling als nu */
#keuzehulp.lightbox-content,.lightbox-content.bkk-lb{background:transparent!important;box-shadow:none!important;padding:0!important;max-width:760px!important}
.lightbox-content.bkk-lb .bkk{margin:0}
.lightbox-content.bkk-lb .bkk .bkk-chat{border:3px solid #000;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.mfp-wrap .mfp-content .bkk-lb .mfp-close{color:#fff!important;top:8px!important;right:8px!important}
body.body-scroll-lock--active .zwevende-footer-balk,body:has(.mfp-wrap) .zwevende-footer-balk{display:none!important}
@media (max-width:600px){.lightbox-content.bkk-lb .bkk .bkk-log{max-height:calc(100vh - 320px);max-height:calc(100dvh - 320px)}}

/* offerte- en terugbelpopup vanuit de keuzehulp */
.mfp-wrap.bkk-pop .mfp-content{max-width:560px}
.mfp-wrap.bkk-pop .lightbox-content{border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.25);padding:0!important;background:#fff;font-family:Lato,system-ui,sans-serif}
.bkk-pop .bkk-pop-kop{display:flex;align-items:center;gap:14px;background:#373736;color:#fff;padding:20px 56px 20px 24px}
.bkk-pop .bkk-pop-kop img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 20%;margin:0;flex:none;border:2px solid #fff}
.bkk-pop .bkk-pop-kop b{display:block;font-size:20px;line-height:1.2;color:#fff}
.bkk-pop .bkk-pop-kop span{font-size:14px;color:#dcdad7}
.bkk-pop .gform_wrapper{padding:20px 24px 24px;margin:0!important}
.bkk-pop .gfield--type-html{font-size:16px;color:#5f5f5d;line-height:1.5}
.bkk-pop .gfield--type-html p{margin:0 0 4px}
.bkk-pop .gfield--type-html a{color:#b85700;font-weight:700}
.bkk-pop .gform_fields{row-gap:12px!important;column-gap:12px!important}
.bkk-pop .gform_wrapper input[type=date],.bkk-pop .gform_wrapper input[type=text],.bkk-pop .gform_wrapper input[type=email],.bkk-pop .gform_wrapper input[type=tel],.bkk-pop .gform_wrapper textarea{border:1.5px solid #e3e1de!important;border-radius:10px!important;background:#faf9f7!important;box-shadow:none!important;font-size:16px!important;padding:12px 14px!important;min-height:48px;color:#373736!important;transition:border-color .15s,background .15s}
.bkk-pop .gform_wrapper .iti input[type=tel]{padding-left:52px!important}
.bkk-pop .gfield_label{font-size:14px!important;font-weight:700!important;color:#5f5f5d!important}
.bkk-pop .gform_wrapper input:focus,.bkk-pop .gform_wrapper textarea:focus{border-color:#ee7306!important;background:#fff!important;outline:3px solid rgba(238,115,6,.18)!important;outline-offset:0}
.bkk-pop .gform_wrapper textarea{background:#fff4ec!important;border-color:#f3d6bf!important;font-size:15px!important;line-height:1.5;min-height:140px}
.bkk-pop .gform_footer{margin-top:14px!important;padding:0!important;display:block!important}
.bkk-pop .gform_wrapper .gform_button{display:block!important;width:100%!important;background:#ee7306!important;border:0!important;border-radius:10px!important;color:#fff!important;font-weight:900!important;font-size:17px!important;text-transform:none!important;letter-spacing:0!important;padding:14px!important;min-height:52px;box-shadow:none!important;margin:0!important}
.bkk-pop .gform_wrapper .gform_button:hover{background:#d96400!important}
.bkk-pop .mfp-close{color:#fff!important;opacity:.9}
@media (max-width:600px){.bkk-pop .bkk-pop-kop{padding:16px 52px 16px 18px}.bkk-pop .gform_wrapper{padding:16px 18px 20px}}
