/* LMB belkaart: bellen, appen of teruggebeld worden, in de donkere
   contactsectie (#contact) van de home en /contact/. Hoort bij de plugin
   lmb-contact (1.4.3). Rustig: één kaart, kleine animaties, de knoppen en
   lettertypes van de site zelf. */

.belkaart{margin-top:30px;padding:22px 22px 20px;border:1px solid rgba(255,255,255,.14);border-radius:var(--rond-l,26px);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));max-width:560px}
.bk-wie{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.bk-foto{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 3px rgba(237,139,0,.35)}
.bk-naam{display:flex;flex-direction:column;min-width:0}
.bk-naam b{font-family:var(--kop,'Inter',sans-serif);font-weight:700;font-size:16px;color:#fff;letter-spacing:-.01em}
.bk-naam span{font-size:14px;color:#9C9CB4}
.bk-status{margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid rgba(255,255,255,.16);border-radius:999px;
  font-family:var(--kop,'Inter',sans-serif);font-weight:600;font-size:12px;color:#DCDCE6;white-space:nowrap}
.bk-status i{position:relative;width:7px;height:7px;border-radius:50%;background:#3DD68C;flex:none}
.bk-status i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid #3DD68C;animation:bkPuls 2.2s ease-out infinite}
.bk-status.bk-dicht i,.bk-status.bk-dicht i::after{background:var(--oranje,#ED8B00);border-color:var(--oranje,#ED8B00)}
.bk-status:not(.bk-aan) i::after{animation:none;opacity:0}
@keyframes bkPuls{from{transform:scale(.6);opacity:.8}to{transform:scale(1.9);opacity:0}}

.bk-acties{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.bk-acties .knop{display:inline-flex;align-items:center;gap:10px}
.bk-acties svg{width:18px;height:18px;flex:none}
.bk-bel svg{transform-origin:50% 60%;animation:bkTril 7s ease-in-out infinite}
@keyframes bkTril{0%,86%,100%{transform:rotate(0)}88%{transform:rotate(-13deg)}90%{transform:rotate(11deg)}92%{transform:rotate(-8deg)}94%{transform:rotate(5deg)}96%{transform:rotate(0)}}

.bk-terug{display:none;margin-top:14px;background:transparent;border:0;padding:4px 0;cursor:pointer;
  font-family:var(--body,'Heebo',sans-serif);font-size:14.5px;color:#BFBFD2;text-align:left}
.belkaart.js .bk-terug{display:block}
.bk-terug u{color:#fff;text-decoration:none;border-bottom:1.5px solid var(--oranje,#ED8B00);padding-bottom:1px;transition:color .15s ease}
.bk-terug:hover u{color:var(--oranje-lt,#FFA22A)}
.bk-terug[aria-expanded="true"]{color:#8B8BA4}

.bk-form{margin-top:14px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);display:grid;gap:14px;animation:bkOpen .35s cubic-bezier(.22,.61,.36,1)}
.bk-form[hidden]{display:none}
@keyframes bkOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.bk-velden{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bk-form label{display:block;font-family:var(--kop,'Inter',sans-serif);font-weight:600;font-size:12.5px;color:#BFBFD2}
.bk-form input{display:block;width:100%;margin-top:6px;padding:12px 14px;border-radius:11px;border:1.5px solid transparent;
  font-family:var(--body,'Heebo',sans-serif);font-size:15.5px;color:var(--zwart,#000017);background:#fff;transition:border-color .16s ease}
.bk-form input::placeholder{color:#B4B4C0}
.bk-form input:focus{outline:none;border-color:var(--oranje,#ED8B00)}
.bk-form input.fout{border-color:#E5484D;background:#FDF3F2}
.bk-momenten{display:flex;flex-wrap:wrap;gap:8px}
.bk-moment{padding:9px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:transparent;color:#DCDCE6;
  font-family:var(--kop,'Inter',sans-serif);font-weight:600;font-size:13px;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}
.bk-moment:hover{border-color:#fff}
.bk-moment[aria-pressed="true"]{background:#fff;border-color:#fff;color:var(--zwart,#000017)}
.bk-melding{margin:0;min-height:20px;font-family:var(--kop,'Inter',sans-serif);font-weight:600;font-size:14px;color:#BFBFD2}
.bk-melding.ok{color:#3DD68C}
.bk-melding.nok{color:#FF8A80;padding:10px 12px;border-radius:10px;background:rgba(255,138,128,.1)}

/* ── de bevestiging na het versturen (sinds 1.4.3) ── */
.bk-klaar{display:flex;align-items:flex-start;gap:14px;margin-top:16px;padding:16px 18px;border-radius:16px;outline:none;
  border:1px solid rgba(61,214,140,.35);background:rgba(61,214,140,.08);animation:bkOpen .35s cubic-bezier(.22,.61,.36,1)}
.bk-klaar b{display:block;font-family:var(--kop,'Inter',sans-serif);font-weight:700;font-size:16px;color:#fff;letter-spacing:-.01em}
.bk-klaar span{display:block;margin-top:4px;font-size:14.5px;line-height:1.55;color:#DCDCE6}
.bk-klaar small{display:block;margin-top:8px;font-family:var(--kop,'Inter',sans-serif);font-size:12px;letter-spacing:.04em;color:#8B8BA4}
.bk-vink{width:36px;height:36px;flex:none;fill:none;stroke:#3DD68C;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.bk-vink circle{stroke-dasharray:114;stroke-dashoffset:114;animation:bkTeken .6s cubic-bezier(.65,0,.35,1) forwards}
.bk-vink path{stroke-dasharray:26;stroke-dashoffset:26;animation:bkTeken .35s .5s cubic-bezier(.65,0,.35,1) forwards}
@keyframes bkTeken{to{stroke-dashoffset:0}}
.bk-klaar-acties{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.bk-klaar-acties a{display:inline-flex;align-items:center;padding:8px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.3);color:#fff;
  text-decoration:none;font-family:var(--kop,'Inter',sans-serif);font-weight:600;font-size:13px;transition:border-color .15s ease,background .15s ease}
.bk-klaar-acties a:first-child{background:#fff;border-color:#fff;color:var(--zwart,#000017)}
.bk-klaar-acties a:hover{border-color:#fff}

/* ── de agenda: dag en tijd kiezen (sinds 1.5) ── */
.bk-velden .bk-mail{grid-column:1/-1}
.bk-agenda{display:grid;gap:10px;min-width:0}
.bk-agenda[hidden]{display:none}
.bk-alabel{margin:0;font-family:var(--kop,'Inter',sans-serif);font-weight:600;font-size:12.5px;color:#BFBFD2}
.bk-dagen{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 24px 6px 2px;margin:0 -2px;scrollbar-width:none;
  -webkit-mask:linear-gradient(90deg,#000 85%,transparent);mask:linear-gradient(90deg,#000 85%,transparent)}
.bk-dagen::-webkit-scrollbar{display:none}
.bk-dag{flex:none;scroll-snap-align:start;width:60px;padding:9px 0 8px;display:flex;flex-direction:column;align-items:center;gap:3px;border-radius:14px;
  border:1px solid rgba(255,255,255,.2);background:transparent;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.bk-dag span{font-family:var(--kop,'Inter',sans-serif);font-weight:600;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#9C9CB4}
.bk-dag b{font-family:var(--kop,'Inter',sans-serif);font-weight:700;font-size:20px;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.bk-dag:hover:not(:disabled){border-color:#fff}
.bk-dag[aria-pressed="true"]{background:#fff;border-color:#fff}
.bk-dag[aria-pressed="true"] b,.bk-dag[aria-pressed="true"] span{color:var(--zwart,#000017)}
.bk-dag:disabled{opacity:.32;cursor:not-allowed}
.bk-dag.bk-leeg{height:64px;border-style:dashed;animation:bkGloei 1.1s ease-in-out infinite alternate}
@keyframes bkGloei{from{opacity:.2}to{opacity:.55}}
.bk-tijden{display:grid;gap:10px}
.bk-dagdeel{display:grid;grid-template-columns:62px 1fr;gap:10px;align-items:start}
.bk-dagdeel>span{padding-top:8px;font-size:12.5px;color:#8B8BA4}
.bk-tijdrij{display:flex;flex-wrap:wrap;gap:6px}
.bk-tijd{min-width:60px;padding:7px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:transparent;color:#DCDCE6;
  font-family:var(--kop,'Inter',sans-serif);font-weight:600;font-size:13px;font-variant-numeric:tabular-nums;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease}
.bk-tijd:hover:not(:disabled){border-color:#fff;color:#fff}
.bk-tijd[aria-pressed="true"]{background:var(--oranje,#ED8B00);border-color:var(--oranje,#ED8B00);color:var(--zwart,#000017)}
.bk-tijd:disabled{opacity:.3;text-decoration:line-through;cursor:not-allowed}
.bk-dag:focus-visible,.bk-tijd:focus-visible,.bk-klaar-acties a:focus-visible{outline:2px solid var(--oranje,#ED8B00);outline-offset:2px}
@media (max-width:560px){
  .bk-dagdeel{grid-template-columns:1fr;gap:6px}
  .bk-dagdeel>span{padding-top:0}
}
.bk-noot{margin:0;font-size:13px;color:#8B8BA4}

@media (max-width:560px){
  .bk-velden{grid-template-columns:1fr}
  .bk-status{margin-left:0}
  .bk-acties .knop{flex:1 1 100%;justify-content:center}
}

/* ── op de telefoon: WhatsApp naast de bestaande belbalk ── */
.belbalk-wa{display:none}
@media (max-width:720px){
  body .belbalk{right:62px}
  body .belbalk::before{content:"";display:inline-block;width:16px;height:16px;margin-right:9px;vertical-align:-2px;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.2 15.2 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.2 15.2 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat}
  .belbalk-wa{display:grid;place-items:center;position:fixed;right:0;bottom:0;z-index:55;width:62px;height:58px;
    background:var(--zwart,#000017);color:#fff;text-decoration:none;box-shadow:0 -6px 22px rgba(0,0,23,.22)}
  .belbalk-wa svg{width:22px;height:22px}
}
@media (prefers-reduced-motion:reduce){
  .bk-status i::after,.bk-bel svg,.bk-form,.bk-klaar,.bk-dag.bk-leeg{animation:none}
  .bk-vink circle,.bk-vink path{animation:none;stroke-dashoffset:0}
}

/* ── de kleine contactblokken op de andere pagina's (sinds 1.4.2) ── */
.knop.bk-bel,.knop.bk-app{display:inline-flex;align-items:center;gap:10px}
.knop.bk-bel svg,.knop.bk-app svg{width:18px;height:18px;flex:none}
.knop.bk-bel svg{transform-origin:50% 60%;animation:bkTril 7s ease-in-out infinite}
.bk-mini{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:22px 0 0;font-size:14px;color:#BFBFD2}
.bk-mini-foto{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px rgba(237,139,0,.35)}
.bk-status.bk-klein{margin-left:0;padding:4px 10px;font-size:11.5px}

/* ── het nummer in de kop: onder 1420 pixels verdween het, nu een ronde belknop ── */
@media (min-width:721px) and (max-width:1420px){
  body .kop-r .tel{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--zwart,#000017);
    font-size:0;line-height:0;color:var(--zwart,#000017);text-decoration:none;transition:background .16s ease,color .16s ease}
  body .kop-r .tel::before{content:"";width:17px;height:17px;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.2 15.2 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.2 15.2 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat}
  body .kop-r .tel:hover{background:var(--zwart,#000017);color:#fff;text-decoration:none}
}
@media (prefers-reduced-motion:reduce){.knop.bk-bel svg{animation:none}}