/* Formulier Afspraak verzetten (/afspraken/verzetten/): rest van het formulier, voorkeursdata en pop-up.
   Aanvulling op site.css en formulieren.css (geladen via `styles:` in de front matter). */

/* Deel van het formulier dat verschijnt na "over 3 werkdagen of later": zelfde ruimte als .form */
.vz-rest{display:flex;flex-direction:column;gap:22px}

/* Voorkeursdata naast elkaar, op de telefoon onder elkaar */
.vz-data{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:18px}
.vz-meer{align-self:flex-start;margin-top:14px}
.vz-datum{max-width:280px}

/* Datumvelden: zelfde hoogte en uitlijning als de andere velden (ook op iPhone) */
input[type="date"].inp{display:block;min-height:52px;line-height:1.2;text-align:left;-webkit-appearance:none;appearance:none}
input[type="date"].inp::-webkit-date-and-time-value{text-align:left}
input[type="date"].inp::-webkit-calendar-picker-indicator{cursor:pointer}

/* Pop-up "Bel ons om je afspraak te verzetten" */
.vz-dialog{width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;border-radius:var(--r);background:#fff;color:var(--midnight);box-shadow:0 30px 60px -24px rgba(16,42,67,.55);overflow:auto}
.vz-dialog::backdrop{background:rgba(16,42,67,.62)}
.vz-dialog[open]{animation:vzIn .35s var(--ease)}
.vz-dialog-in{position:relative;display:flex;flex-direction:column;gap:16px;padding:clamp(24px,5vw,40px)}
.vz-dialog-in .h3{padding-right:44px}
.vz-dialog-in .h3:focus{outline:none}
.vz-dialog-in .h3:focus-visible{outline:3px solid var(--midnight);outline-offset:3px}
.vz-sluit{position:absolute;top:12px;right:12px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--midnight);cursor:pointer;transition:background .3s}
.vz-sluit:hover{background:var(--mist)}
.vz-sluit svg{width:22px;height:22px}
.vz-praktijken{list-style:none;display:flex;flex-direction:column;gap:12px;margin:4px 0}
.vz-praktijken li{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:18px 20px;border:1.5px solid var(--line);border-radius:var(--r)}
.vz-pr-naam{font-size:19px}
@media (max-width:640px){
  .vz-dialog-in>.card-ico{display:none}
  .vz-praktijken li{padding:16px}
  .vz-praktijken .btn{width:100%}
}

@keyframes vzIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  .vz-dialog[open]{animation:none}
}