/* Luchtontvochtigerwinkel — contact-widget (launcher + teaser + popup)
   Scope: alles onder .qxcw. Font: Onest (laad zelf via Google Fonts). */
.qxcw{--navy:#0d2a47;--ink:#15273c;--muted:#6f7a83;--line:#e2e0dc;--orange-a:#f0974a;--orange-b:#e87f1e;--green:#1d9d55}
.qxcw,*{box-sizing:border-box}
.qxcw{font-family:'Onest',-apple-system,'Segoe UI',sans-serif;color:var(--ink)}
.qxcw a{color:var(--navy)}.qxcw a:hover{color:var(--orange-b)}
.qxcw .launcher{position:fixed;z-index:290;left:24px;bottom:24px;width:66px;height:66px;display:flex;align-items:center;justify-content:center;border:none;padding:0;background:var(--navy);color:#fff;border-radius:50%;cursor:pointer;box-shadow:0 10px 26px rgba(13,42,71,.3);transition:transform .15s,box-shadow .15s}
.qxcw .launcher::before{content:'';position:absolute;inset:0;border-radius:50%;background:var(--navy);animation:glow 2.2s ease-out infinite;z-index:-1}
@keyframes glow{0%{transform:scale(1);opacity:.45}70%{transform:scale(1.5);opacity:0}100%{transform:scale(1.5);opacity:0}}
.qxcw .launcher:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 14px 32px rgba(13,42,71,.35)}
.qxcw .launcher svg{width:40px;height:40px;display:block}
.qxcw .teaser{position:fixed;z-index:290;left:24px;bottom:104px;width:250px;background:#fff;border-radius:16px 16px 16px 4px;padding:14px 16px 15px;box-shadow:0 12px 32px rgba(13,42,71,.16),0 2px 8px rgba(13,42,71,.08);opacity:0;transform:scale(.7) translateY(8px);transform-origin:left bottom;pointer-events:none;transition:opacity .22s ease,transform .22s cubic-bezier(.34,1.56,.64,1);cursor:pointer}
.qxcw .teaser::after{content:'';position:absolute;left:14px;bottom:-8px;width:16px;height:16px;background:#fff;border-radius:0 0 0 4px;transform:rotate(45deg);box-shadow:-2px 2px 4px rgba(13,42,71,.05)}
.qxcw .teaser.show{opacity:1;transform:none;pointer-events:auto}
.qxcw .teaser .ts-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.qxcw .teaser .ts-av{width:26px;height:26px;flex:0 0 26px;border-radius:50%;overflow:hidden;background:#e8f0f7}
.qxcw .teaser .ts-av img{width:100%;height:100%;object-fit:cover;display:block}
.qxcw .teaser .ts-name{font-size:13px;font-weight:600;color:var(--navy);line-height:1.1}
.qxcw .teaser .ts-msg{font-size:14px;line-height:1.4;color:#3a4b58}
.qxcw .teaser-x{position:absolute;top:8px;right:9px;width:20px;height:20px;border:none;background:none;cursor:pointer;color:#aab6bf;font-size:16px;line-height:1;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;padding:0}
.qxcw .teaser-x:hover{background:#f0f3f5;color:#5a6b78}
.qxcw .popup{position:fixed;left:24px;bottom:100px;width:370px;max-width:calc(100vw - 32px);max-height:calc(100vh - 130px);background:#fff;border-radius:20px;box-shadow:0 24px 60px rgba(13,42,71,.25);display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(12px) scale(.98);pointer-events:none;transition:opacity .2s,transform .2s;z-index:20}
.qxcw .popup.open{opacity:1;transform:none;pointer-events:auto}
.qxcw .pp-head{background:var(--navy);color:#fff;padding:20px 20px 16px;display:flex;align-items:flex-start;gap:12px}
.qxcw .pp-head img{width:40px;height:40px;flex:0 0 auto}
.qxcw .pp-head h2{margin:0;font-size:17px;font-weight:700}
.qxcw .pp-head p{margin:3px 0 0;font-size:13px;color:#bccadb;line-height:1.45}
.qxcw .pp-close{margin-left:auto;background:rgba(255,255,255,.12);border:none;color:#fff;width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:15px;line-height:1;flex:0 0 auto}
.qxcw .pp-close:hover{background:rgba(255,255,255,.22)}
.qxcw .pp-body{padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
.qxcw .pp-panel{display:none;flex-direction:column;gap:10px}
.qxcw .pp-panel.active{display:flex;animation:panelIn .22s ease}
@keyframes panelIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.qxcw .chan{display:flex;align-items:center;gap:14px;padding:12px 14px;min-height:56px;border:1px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;text-align:left;font:inherit;width:100%;text-decoration:none;color:var(--ink);transition:border-color .15s,box-shadow .15s,transform .15s}
.qxcw .chan:hover{border-color:var(--orange-a);box-shadow:0 4px 14px rgba(13,42,71,.08);color:var(--ink);transform:translateX(3px)}
.qxcw .chan:hover .chan-arrow{color:var(--orange-b);transform:translateX(2px)}
.qxcw .chan-ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:#fff;overflow:hidden}
.qxcw .chan-ic img{width:100%;height:100%;object-fit:cover}
.qxcw .ic-avatar{background:#e8f0f7}
.qxcw .ic-form{background:linear-gradient(135deg,var(--orange-a),var(--orange-b))}
.qxcw .ic-mail{background:#3a5a7d}
.qxcw .ic-wa{background:#25d366}
.qxcw .ic-tel{background:var(--navy)}
.qxcw .hr{height:1px;background:var(--line);margin:4px 2px}
.qxcw .tasklink{display:flex;align-items:center;gap:9px;font:inherit;font-size:13.5px;font-weight:600;color:var(--navy);background:none;border:none;cursor:pointer;padding:6px 4px;text-align:left;border-radius:8px}
.qxcw .tasklink:hover{color:var(--orange-b)}
.qxcw .tasklink svg:first-child{color:#5b7a99;flex:0 0 auto}
.qxcw .tasklink .chan-arrow{margin-left:auto}
.qxcw .chan .sub a{font-weight:600}
.qxcw .chan .sub.flow{display:block;line-height:1.45}
.qxcw .chan-txt{min-width:0}
.qxcw .chan b{display:block;font-size:14.5px;font-weight:600}
.qxcw .chan .sub{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);margin-top:2px}
.qxcw .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.qxcw .dot.on{background:var(--green);box-shadow:0 0 0 3px rgba(29,157,85,.15)}
.qxcw .dot.off{background:#b6bec5}
.qxcw .sub.on{color:var(--green);font-weight:600}
.qxcw .dot.busy{background:var(--orange-b);box-shadow:0 0 0 3px rgba(232,127,30,.15)}
.qxcw .sub.busy{color:var(--orange-b);font-weight:600}
.qxcw .chan-arrow{margin-left:auto;color:#9aa7b1;flex:0 0 auto;transition:transform .15s,color .15s}
.qxcw .pp-back{align-self:flex-start;background:none;border:none;font:inherit;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;display:flex;align-items:center;gap:6px;padding:0}
.qxcw .pp-back:hover{color:var(--navy)}
.qxcw .field{display:flex;flex-direction:column;gap:6px}
.qxcw .field label{font-size:12.5px;font-weight:600;color:var(--navy)}
.qxcw .field label i{font-style:normal;font-weight:400;color:var(--muted)}
.qxcw .field input,.field textarea{font:inherit;font-size:14px;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:#fafafa;color:var(--ink);resize:vertical}
.qxcw .field input:focus,.field textarea:focus{outline:none;border-color:var(--orange-a);background:#fff;box-shadow:0 0 0 3px rgba(240,151,74,.15)}
.qxcw .btn{font:inherit;font-size:14.5px;font-weight:600;color:#fff;background:linear-gradient(90deg,var(--orange-a),var(--orange-b));border:none;border-radius:30px;padding:12px 22px;cursor:pointer;align-self:flex-start;transition:filter .15s,transform .15s}
.qxcw .btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.qxcw .btn.sending{opacity:.7;pointer-events:none}
.qxcw .pp-panel form .btn{margin-top:10px}
.qxcw .chatlog{display:flex;flex-direction:column;gap:10px;min-height:170px;max-height:250px;overflow-y:auto;padding:4px 2px}
.qxcw .msg{max-width:84%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.5;animation:msgIn .25s ease}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.qxcw .msg.bot{background:#eef2f6;color:var(--ink);border-bottom-left-radius:4px;align-self:flex-start}
.qxcw .botrow{display:flex;align-items:flex-end;gap:8px;max-width:90%}
.qxcw .botrow .avatar{width:26px;height:26px;border-radius:50%;background:#e8f0f7;overflow:hidden;flex:0 0 auto}
.qxcw .botrow .avatar img{width:100%;height:100%;object-fit:cover;display:block}
.qxcw .botrow .msg{max-width:100%}
.qxcw .msg.user{background:var(--navy);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.qxcw .typing{display:flex;gap:4px;padding:12px 14px;background:#eef2f6;border-radius:14px;border-bottom-left-radius:4px;align-self:flex-start;animation:msgIn .25s ease;margin-left:34px}
.qxcw .typing i{width:6px;height:6px;border-radius:50%;background:#9aa7b1;animation:blink 1.1s infinite}
.qxcw .typing i:nth-child(2){animation-delay:.18s}.qxcw .typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,80%,100%{opacity:.3;transform:none}40%{opacity:1;transform:translateY(-3px)}}
.qxcw .quickies{display:flex;flex-wrap:wrap;gap:8px}
.qxcw .quickies button{font:inherit;font-size:12.5px;font-weight:600;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:20px;padding:7px 13px;cursor:pointer;transition:border-color .15s,background .15s}
.qxcw .quickies button:hover{border-color:var(--orange-a);background:#fef7f0}
.qxcw .chatrow{display:flex;gap:8px}
.qxcw .chatrow input{flex:1;font:inherit;font-size:14px;padding:11px 13px;border:1px solid var(--line);border-radius:24px;background:#fafafa;min-width:0}
.qxcw .chatrow input:focus{outline:none;border-color:var(--orange-a);background:#fff}
.qxcw .chatrow button{width:42px;height:42px;border:none;border-radius:50%;background:linear-gradient(90deg,var(--orange-a),var(--orange-b));color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.qxcw .mailcard{border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:8px}
.qxcw .mailcard b{font-size:14.5px}
.qxcw .mailcard a{font-size:14.5px;font-weight:600;text-decoration:none;word-break:break-all}
.qxcw .mailcard span{font-size:12.5px;color:var(--muted)}
.qxcw .mailcard button.copy{font:inherit;font-size:12.5px;font-weight:600;align-self:flex-start;background:#fff;border:1px solid var(--line);border-radius:20px;padding:7px 14px;cursor:pointer;color:var(--navy);display:flex;align-items:center;gap:6px;transition:border-color .15s}
.qxcw .mailcard button.copy:hover{border-color:var(--orange-a)}
.qxcw .mailcard button.copy.copied{border-color:#8fc7a5;color:var(--green)}
.qxcw .sent{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 10px;text-align:center}
.qxcw .sent-ic{width:52px;height:52px;border-radius:50%;background:#e7f5ec;color:var(--green);display:flex;align-items:center;justify-content:center;animation:pop .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.qxcw .sent b{font-size:15px}.qxcw .sent span{font-size:13px;color:var(--muted)}
.qxcw .trackres{border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:14px;animation:panelIn .25s ease}
.qxcw .trackres .tr-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.qxcw .trackres .tr-top b{font-size:14.5px}
.qxcw .trackres .tr-top span{font-size:12px;color:var(--muted)}
.qxcw .tsteps{display:flex;align-items:center;gap:0}
.qxcw .tstep{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;position:relative}
.qxcw .tstep::before{content:'';position:absolute;top:7px;left:-50%;width:100%;height:2px;background:var(--line)}
.qxcw .tstep:first-child::before{display:none}
.qxcw .tstep.done::before,.tstep.now::before{background:var(--green)}
.qxcw .tstep i{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--line);z-index:1}
.qxcw .tstep.done i{background:var(--green);border-color:var(--green)}
.qxcw .tstep.now i{border-color:var(--green);box-shadow:0 0 0 4px rgba(29,157,85,.15)}
.qxcw .tstep span{font-size:11px;color:var(--muted);text-align:center}
.qxcw .tstep.done span,.tstep.now span{color:var(--ink);font-weight:600}
.qxcw .tr-eta{font-size:13px;background:#e7f5ec;color:#14663a;border-radius:10px;padding:10px 12px}
.qxcw .tr-link{font-size:12.5px;font-weight:600}
@media (max-width:520px){
  .qxcw .popup{left:0;right:0;bottom:0;width:100%;max-width:100%;max-height:88vh;border-radius:20px 20px 0 0;transform:translateY(100%)}
  .qxcw .popup.open{transform:none}
  .qxcw .chan{min-height:60px}
}

/* De oude WhatsApp-float (qlimatix-whatsapp-float-be.php) verdwijnt: WhatsApp zit in de widget. */
.wa-float{display:none!important}
/* Aanvullingen voor de echte backend: opgemaakte chatantwoorden, foutregels, resultaattekst. */
.qxcw .msg p{margin:0 0 6px}.qxcw .msg p:last-child{margin:0}.qxcw .msg ul{margin:4px 0 4px 18px;padding:0}
.qxcw .msg.bot a{color:var(--navy);text-decoration:underline}.qxcw .msg strong{font-weight:700}
.qxcw .cw-err{color:#b3261e;font-size:12.5px;margin:0}
.qxcw .tr-text{font-size:13px;line-height:1.5;color:var(--ink)}.qxcw .tr-text p{margin:0}
.qxcw .trackres[hidden],.qxcw form[hidden],.qxcw .tr-eta[hidden],.qxcw .tr-link[hidden],.qxcw .quickies[hidden]{display:none}
/* Popup boven het Trusted Shops-badge (dat script zet zichzelf op de hoogste z-index en overlapt
   op mobiel de onderrand van de popup); zolang de popup open is gaat het badge even weg. */
.qxcw .popup{z-index:2147483646}
body.qxcw-open [id^="trustbadge-container"],body.qxcw-open [class*="trustbadge"]{visibility:hidden!important}
/* Header: het thema kleurt elke h2 navy (onzichtbaar op de navy kop), dus expliciet wit; de
   openingstijden op één regel; het icoon strak uitgelijnd met de tekst. */
.qxcw .pp-head{align-items:center;gap:14px;padding:16px 18px}
.qxcw .pp-head h2{color:#fff;font-size:16px;line-height:1.25;margin:0}
.qxcw .pp-head p{color:#bccadb;font-size:12.5px;line-height:1.35;margin:2px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qxcw .pp-head>div{min-width:0;flex:1 1 auto}
.qxcw .pp-head img{width:40px;height:40px;flex:0 0 40px;border-radius:12px;object-fit:contain;display:block}
.qxcw .pp-close{margin-left:8px;flex:0 0 30px}
/* Mobiel: de popup vult het hele scherm (Jay, 03-09). De chat krijgt de volle hoogte, de pagina
   erachter scrolt niet mee zolang de popup open is. */
@media (max-width:520px){
  .qxcw .popup{top:0;left:0;right:0;bottom:0;width:100%;max-width:100%;height:100%;max-height:100%;border-radius:0;transform:translateY(100%)}
  .qxcw .popup.open{transform:none}
  .qxcw .pp-head{padding-top:max(16px,env(safe-area-inset-top))}
  .qxcw .pp-body{flex:1 1 auto;min-height:0;padding-bottom:max(16px,env(safe-area-inset-bottom))}
  .qxcw .pp-panel.active{flex:1 1 auto;min-height:0}
  .qxcw .chatlog{flex:1 1 auto;min-height:0;max-height:none}
  body.qxcw-open{overflow:hidden}
  body.qxcw-open .qxcw .launcher,body.qxcw-open .qxcw .teaser{display:none}
}
/* iOS zoomt in op een veld kleiner dan 16px; op mobiel dus 16px voor alle invoervelden. */
@media (max-width:520px){
  .qxcw .chatrow input,.qxcw .field input,.qxcw .field textarea{font-size:16px}
}

/* cw-hide-20260903: weg zolang een andere laag die hoek nodig heeft, dezelfde lijst als de
   Trusted Shops-badge en de WhatsApp-knop: sticky koopbalk op de PDP, vergelijkbalk,
   cart-drawer, zoeklaag en mobiel menu. Het open gesprek (.popup) blijft staan. */
body:has(#pdp-sticky.is-visible) .qxcw .launcher,body:has(#pdp-sticky.is-visible) .qxcw .teaser,
body:has(.cmpbar.is-open) .qxcw .launcher,body:has(.cmpbar.is-open) .qxcw .teaser,
body:has(#cartDrawer.open) .qxcw .launcher,body:has(#cartDrawer.open) .qxcw .teaser,
body:has(#lohs-backdrop.open) .qxcw .launcher,body:has(#lohs-backdrop.open) .qxcw .teaser,
body:has(.mnav.open) .qxcw .launcher,body:has(.mnav.open) .qxcw .teaser{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px)}