/* =============================================================
   De Verhuizing — UX Polish
   - Toasts, loading-states, form-feedback, skeleton-loaders,
     smooth-scroll, focus-visible, no-FOUC.
   - Vanilla, geen libs. Footprint < 5KB.
   ============================================================= */

/* ── Smooth scroll (respecteert reduced-motion via head.php) ── */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

/* ── Toast container + items ────────────────────────────────── */
.dv-toast-host{
  position:fixed; top:20px; left:50%; transform:translateX(-50%);
  z-index:99999; display:flex; flex-direction:column; gap:.55rem;
  pointer-events:none; max-width:min(92vw,420px); width:100%;
}
.dv-toast{
  display:flex; align-items:flex-start; gap:.65rem;
  background:#fff; color:#0f172a; border:1px solid #e2e8f0;
  border-left:4px solid var(--primary,#152B5D);
  border-radius:10px; padding:.75rem .85rem .75rem .9rem;
  box-shadow:0 12px 28px rgba(15,23,42,.18);
  font-size:.9rem; font-weight:500; line-height:1.4;
  pointer-events:auto;
  opacity:0; transform:translateY(-10px);
  transition:opacity .25s ease, transform .25s ease;
}
.dv-toast.show{opacity:1; transform:translateY(0)}
.dv-toast.success{border-left-color:#16a34a}
.dv-toast.error{border-left-color:#dc2626}
.dv-toast.info{border-left-color:var(--primary,#152B5D)}
.dv-toast .dv-toast-ico{flex-shrink:0; font-size:1.05rem; margin-top:1px}
.dv-toast.success .dv-toast-ico{color:#16a34a}
.dv-toast.error   .dv-toast-ico{color:#dc2626}
.dv-toast.info    .dv-toast-ico{color:var(--primary,#152B5D)}
.dv-toast .dv-toast-msg{flex:1; min-width:0; word-wrap:break-word}
.dv-toast .dv-toast-close{
  flex-shrink:0; background:transparent; border:0; cursor:pointer;
  color:#64748b; font-size:1rem; line-height:1; padding:2px 4px;
  border-radius:4px; transition:background .15s, color .15s;
}
.dv-toast .dv-toast-close:hover{background:#f1f5f9; color:#0f172a}

@media (max-width:560px){
  .dv-toast-host{top:12px; left:8px; right:8px; transform:none; max-width:none}
}

/* ── Loading-state (knop spinner) ───────────────────────────── */
.is-loading{position:relative; pointer-events:none; opacity:.78; cursor:wait !important}
.is-loading > *{visibility:hidden}
.is-loading::after{
  content:''; position:absolute; inset:0; margin:auto;
  width:18px; height:18px; border-radius:50%;
  border:2.5px solid currentColor; border-top-color:transparent;
  animation:dv-spin .7s linear infinite;
  visibility:visible !important;
}
@keyframes dv-spin{to{transform:rotate(360deg)}}

/* ── Form invalid feedback (na user-interactie) ─────────────── */
form.dv-validated input:invalid:not(:placeholder-shown),
form.dv-validated select:invalid:not([value=""]),
form.dv-validated textarea:invalid:not(:placeholder-shown){
  border-color:#dc2626 !important;
  box-shadow:0 0 0 3px rgba(220,38,38,.12) !important;
}
form.dv-validated input:invalid:not(:placeholder-shown) + .dv-field-err,
form.dv-validated select:invalid + .dv-field-err,
form.dv-validated textarea:invalid:not(:placeholder-shown) + .dv-field-err{
  display:block;
}
.dv-field-err{
  display:none; color:#b91c1c; font-size:.78rem; font-weight:600;
  margin-top:.3rem;
}

/* ── Skeleton-loaders ──────────────────────────────────────── */
.dv-skel{
  display:block; background:linear-gradient(90deg,#eef2f7 0%,#f8fafc 50%,#eef2f7 100%);
  background-size:200% 100%; animation:dv-skel 1.3s ease-in-out infinite;
  border-radius:8px; min-height:14px;
}
.dv-skel + .dv-skel{margin-top:.55rem}
.dv-skel.h-1{height:14px;width:90%}
.dv-skel.h-2{height:18px;width:70%}
.dv-skel.h-3{height:24px;width:55%}
.dv-skel.block{height:120px;width:100%;border-radius:12px}
@keyframes dv-skel{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion: reduce){.dv-skel{animation:none}}

/* ── Scroll-to-top floating (rechtsonder; niet conflicteren met
       footer-bestaande .back-to-top — die staat al rechtsonder.
       Hier alleen util-class voor pagina's zonder footer.) ──── */
.dv-scroll-top{
  position:fixed; right:18px; bottom:24px; width:44px; height:44px;
  border-radius:50%; background:var(--primary,#152B5D); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(15,23,42,.3);
  cursor:pointer; border:0; opacity:0; pointer-events:none;
  transform:translateY(8px); transition:opacity .22s, transform .22s, background .15s;
  z-index:890;
}
.dv-scroll-top.visible{opacity:1; pointer-events:auto; transform:translateY(0)}
.dv-scroll-top:hover,.dv-scroll-top:focus-visible{background:var(--secondary,#F96706)}
@media (max-width:640px){.dv-scroll-top{bottom:80px;right:14px}}