/* ===========================================================================
   Harv — call-prompt: appears bottom-right on blog + diensten, once per
   visitor, only after 3 minutes on the page OR >25% scroll.
   =========================================================================== */
.cp-pop {
  position: fixed; right: clamp(16px, 3vw, 36px); bottom: calc(clamp(16px, 3vw, 32px) + env(safe-area-inset-bottom, 0px)); z-index: 88;
  width: min(380px, calc(100vw - 32px));
  background: #fff; border: 1px solid rgba(16, 19, 20, .12); border-left: 4px solid #77fb38;
  border-radius: 18px; padding: 20px 22px;
  box-shadow: 0 34px 80px -42px rgba(16, 19, 20, .6);
  display: flex; gap: 14px; align-items: flex-start;
  font-family: "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  animation: cp-in .45s cubic-bezier(.16, 1, .3, 1);
}
.cp-pop[hidden] { display: none; }
@keyframes cp-in { from { opacity: 0; } to { opacity: 1; } }
.cp-pop img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: center 28%; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #77fb38; flex: 0 0 auto; }
.cp-pop .cp-txt { min-width: 0; }
.cp-pop .cp-txt b { display: block; font-size: 1.02rem; letter-spacing: -.01em; color: #101314; }
.cp-pop .cp-txt p { color: #5b6166; font-size: .9rem; line-height: 1.5; margin: 4px 0 12px; }
.cp-pop .cp-go { display: inline-flex; align-items: center; gap: 8px; background: #77fb38; color: #101314; font-weight: 700; font-size: .92rem; text-decoration: none; padding: 11px 16px; border-radius: 11px; transition: background-color .2s; }
.cp-pop .cp-go:hover { background: #d2ff72; }
.cp-pop .cp-x { position: absolute; top: 6px; right: 10px; border: 0; background: none; font: inherit; font-size: 1.2rem; font-weight: 700; color: #5b6166; cursor: pointer; padding: 4px; }
.cp-pop .cp-x:hover { color: #101314; }
@media (prefers-reduced-motion: reduce) { .cp-pop { animation: none; } }
@media print { .cp-pop { display: none; } }

/* --- krimp-animatie van de pop-up naar de mini-knop --- */
.cp-pop { transform-origin: calc(100% - 47px) calc(100% - 45px); transition: transform .55s cubic-bezier(.5, 0, .2, 1), opacity .45s ease .08s; }
.cp-pop.shrink { transform: scale(.15); opacity: 0; pointer-events: none; }
.cp-pop .cp-txt, .cp-pop .cp-x { transition: opacity .22s ease; }
.cp-pop.shrink .cp-txt, .cp-pop.shrink .cp-x { opacity: 0; }
.cp-pop > img { transition: transform .55s cubic-bezier(.5, 0, .2, 1); }
.cp-pop.shrink > img { transform: translateX(44px); }

/* --- de blijvende mini-knop: foto + kalender-badge (variant B) --- */
.cp-mini {
  position: fixed; right: clamp(16px, 3vw, 36px); bottom: calc(clamp(16px, 3vw, 32px) + env(safe-area-inset-bottom, 0px)); z-index: 89;
  width: 58px; height: 58px; border-radius: 50%; display: block;
  opacity: 0; transform: scale(.4); pointer-events: none;
  transition: opacity .3s ease, transform .42s cubic-bezier(.2, 1.2, .3, 1);
}
.cp-mini.in { opacity: 1; transform: scale(1); pointer-events: auto; }
.cp-mini img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center 28%; box-shadow: 0 0 0 3px #fff, 0 14px 30px -14px rgba(16, 19, 20, .55); display: block; }
.cp-mini:hover img { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #77fb38, 0 14px 30px -10px rgba(16, 19, 20, .6); }
.cp-mini .bdg { position: absolute; right: -4px; bottom: -4px; width: 26px; height: 26px; border-radius: 50%; background: #77fb38; color: #101314; display: grid; place-items: center; box-shadow: 0 0 0 3px #f4f4f3; opacity: 0; transform: scale(.3); transition: opacity .25s ease .22s, transform .35s cubic-bezier(.2, 1.4, .3, 1) .22s; }
.cp-mini.in .bdg { opacity: 1; transform: scale(1); }
.cp-mini .bdg svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) {
  .cp-pop, .cp-pop > img, .cp-pop .cp-txt, .cp-pop .cp-x, .cp-mini, .cp-mini .bdg { transition: none; }
}

/* --- mobiel: laat de face-knop zakken + krimpen zodat zijn midden samenvalt
   met de TLDR-pill linksonder (bottom:20px + safe-area, ~28px pill, midden ~34px) --- */
@media (max-width: 767px) {
  .cp-mini, .cp-pop { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .cp-mini { width: 48px; height: 48px; -webkit-tap-highlight-color: transparent; }
  .cp-mini .bdg { width: 22px; height: 22px; }
  .cp-mini .bdg svg { width: 12px; height: 12px; }
  .cp-mini:active { transform: scale(.94); }
}