/* Tandartspraktijk Diever · verwijsformulier implantologie (verwijzers.html)
   Opbouw uit het Verwijsformulier-sjabloon, kleuren en letters uit het huisstijlboek:
   leisteen en diepblauw voor actie en koppen, salie voor bevestiging en keuze, zand en mist als rustige vlakken.
   Witte tekst alleen op leisteen of diepblauw. Alle regels zitten binnen .vw, zodat de rest van de site er niets van merkt. */

.vw{--vw-rand:#C9D1D6;--vw-zacht:var(--meta,#5A6A76);--vw-ok:#1F6E4C;--vw-let:#7A5C00;--vw-krit:#9B2335;--vw-salie-vlak:#E6F0EE;
  max-width:920px;margin:0 auto;color:var(--leisteen);font-family:var(--sans)}
.vw [hidden]{display:none!important}
.vw *,.vw *::before,.vw *::after{box-sizing:border-box}

/* het formulier als kaart, met de leisteen kopbalk van de site */
.vw .vw-kaart{position:relative;scroll-margin-top:112px;background:#fff;border-radius:var(--radius-l,22px);padding:0 38px 34px;box-shadow:0 18px 50px -24px rgba(36,55,70,.35),0 0 0 1px #E1E7EC;overflow:hidden}
.vw .vw-kop{position:relative;margin:0 -38px 26px;padding:22px 38px;background:var(--leisteen);color:#fff;overflow:hidden}
.vw .vw-kop::after{content:"";position:absolute;right:-50px;top:-60px;width:170px;height:170px;border-radius:50%;background:var(--diepblauw);opacity:.75}
.vw .vw-kop strong{position:relative;z-index:1;display:block;font-family:var(--kop);font-weight:800;font-size:1.35rem;letter-spacing:-.01em}
.vw .vw-kop span{position:relative;z-index:1;display:block;margin-top:4px;font-size:.92rem;color:#DCE6EE}

.vw fieldset{border:0;padding:0;margin:0 0 30px;min-width:0}
.vw form > fieldset > legend{font-family:var(--kop);font-weight:800;font-size:1.45rem;letter-spacing:-.015em;color:var(--leisteen);padding:0;margin:0 0 6px}
.vw .keuzelegend{font-family:var(--sans);font-size:.95rem;font-weight:700;color:var(--leisteen);padding:0;margin:0 0 8px}
.vw .veldhulp{color:var(--vw-zacht);font-size:.95rem;margin:0 0 18px;max-width:62ch}
.vw .subkop{font-family:var(--kop);font-weight:800;font-size:1.08rem;color:var(--salie-diep);margin:30px 0 8px;padding-top:20px;border-top:1px solid var(--rand)}
.vw fieldset > .subkop:first-of-type{margin-top:12px;border-top:0;padding-top:0}
.vw .vklein{font-size:.88rem;color:var(--vw-zacht);margin:10px 0 0}
.vw .vklein a{color:var(--diepblauw)}

/* velden */
.vw .veldrij{display:grid;grid-template-columns:1fr;gap:0 20px;margin-bottom:6px}
@media (min-width:720px){
  .vw .veldrij{grid-template-columns:repeat(2,1fr);grid-template-rows:auto auto auto}
  .vw .veldrij.een{grid-template-columns:1fr}
  .vw .veldrij.drie{grid-template-columns:1.2fr .8fr .8fr}
  @supports (grid-template-rows:subgrid){
    .vw .veldrij > .vveld{display:grid;grid-template-rows:subgrid;grid-row:span 3;gap:0}
    .vw .veldrij > .vveld > label{align-self:end}
    .vw .veldrij > .vveld input{align-self:start}
  }
}
.vw .vveld{display:flex;flex-direction:column;margin-bottom:16px;min-width:0}
.vw .vveld > label{display:block;font-weight:700;font-size:.95rem;margin-bottom:7px;color:var(--leisteen)}
.vw .vhint{display:block;font-weight:400;color:var(--vw-zacht);font-size:.85rem;margin-top:2px}
.vw .vkeuze .vhint{margin-top:4px}
.vw .verplicht{color:var(--vw-krit);font-weight:700}
.vw .vveld input[type=text],.vw .vveld input[type=email],.vw .vveld input[type=tel],.vw .vveld input[type=date],.vw .vveld textarea{
  width:100%;min-height:52px;padding:12px 16px;border:1.5px solid #B9C2C8;border-radius:var(--radius,14px);
  font:inherit;font-size:1rem;color:var(--leisteen);background:#fff;transition:border-color .15s,background-color .15s}
.vw .vveld textarea{min-height:120px;resize:vertical;line-height:1.5}
.vw .vveld textarea[name="medische_info"]{min-height:150px}
.vw .vveld input:focus,.vw .vveld textarea:focus{outline:3px solid var(--diepblauw);outline-offset:1px;border-color:var(--diepblauw)}
.vw .vveld.vfout input,.vw .vveld.vfout textarea{border-color:var(--vw-krit);border-width:2px;background:#FDF6F7}
.vw .foutmelding{color:var(--vw-krit);font-size:.88rem;font-weight:700;margin-top:6px;display:none}
.vw .foutmelding:not(:empty){display:block}
.vw .vveld--auto input{background:var(--mist);border-style:dashed;color:#33475A}
.vw .vveld--auto input:focus,.vw .vveld--auto.zelf input{background:#fff;border-style:solid;color:var(--leisteen)}
.vw .vveld--auto > label::after{content:" · wordt aangevuld";font-weight:400;color:var(--vw-zacht);font-size:.85em}
.vw .vveld--auto.zelf > label::after{content:""}

/* keuzes */
.vw .keuzeblok{border:0;padding:0;margin:0 0 18px}
.vw .keuzes{display:flex;flex-wrap:wrap;gap:6px 22px}
.vw .vkeuze{display:flex;align-items:flex-start;gap:10px;padding:7px 0;font-size:.98rem;cursor:pointer;line-height:1.45;font-weight:400;color:var(--leisteen)}
.vw .vkeuze input{width:22px;height:22px;margin:0;flex:none;accent-color:var(--leisteen)}
.vw .vinkveld .vkeuze{padding:4px 0}
.vw .blokvraag{background:var(--porselein,#F7F8F5);box-shadow:inset 5px 0 0 var(--salie);border-radius:var(--radius,14px);padding:20px 22px 6px 26px;margin-bottom:18px}
.vw .blokvraag h4{font-family:var(--kop);font-size:1.02rem;font-weight:800;margin:0 0 12px;color:var(--leisteen)}

/* disciplinekaarten */
.vw .disckeuze{margin-bottom:14px}
.vw .disckaarten{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:640px){.vw .disckaarten{grid-template-columns:1fr 1fr}}
.vw .disckaart{position:relative;display:flex;align-items:flex-start;gap:12px;cursor:pointer;border:1.5px solid var(--vw-rand);border-radius:var(--radius,14px);padding:16px 18px;background:#fff;transition:border-color .15s,background-color .15s}
.vw .disckaart:hover{border-color:var(--salie);background:var(--vw-salie-vlak)}
.vw .disckaart input{position:absolute;opacity:0;width:1px;height:1px}
.vw .disckaart__vink{flex:0 0 auto;width:22px;height:22px;margin-top:1px;border-radius:6px;border:1.5px solid #9AA6AE;background:#fff;position:relative}
.vw .disckaart__tekst{display:block;line-height:1.4}
.vw .disckaart__tekst strong{display:block;font-family:var(--kop);font-weight:800;font-size:1.02rem;color:var(--leisteen);margin-bottom:3px}
.vw .disckaart__tekst span{display:block;font-size:.88rem;color:var(--vw-zacht)}
.vw .disckaart input:checked ~ .disckaart__vink{background:var(--leisteen);border-color:var(--leisteen)}
.vw .disckaart input:checked ~ .disckaart__vink::after{content:"";position:absolute;left:6.5px;top:2.5px;width:5px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.vw .disckaart:has(input:checked){border-color:var(--salie-diep);background:var(--vw-salie-vlak);box-shadow:inset 0 0 0 1px var(--salie-diep)}
.vw .disckaart input:focus-visible ~ .disckaart__vink{outline:3px solid var(--diepblauw);outline-offset:2px}

/* meldingen */
.vw .vmelding{border-radius:var(--radius,14px);padding:16px 20px;margin:6px 0 18px;font-size:.95rem;line-height:1.55}
.vw .vmelding--info{background:var(--mist);box-shadow:inset 5px 0 0 var(--blauw)}
.vw .vmelding--attentie{background:#F4EDD6;box-shadow:inset 5px 0 0 var(--vw-let)}
.vw .vmelding a{color:var(--leisteen);font-weight:700}
.vw .vmelding strong{color:var(--leisteen)}
.vw .foutsamenvatting{border:0;box-shadow:inset 5px 0 0 var(--vw-krit);background:#F9E4E6;border-radius:var(--radius,14px);padding:18px 22px;margin-bottom:22px}
.vw .foutsamenvatting h3{font-size:1.1rem;color:var(--vw-krit);margin:0 0 4px}
.vw .foutsamenvatting p{margin:0 0 8px;font-size:.95rem}
.vw .foutsamenvatting ul{margin:0;padding-left:20px}
.vw .foutsamenvatting a{color:var(--vw-krit);font-weight:700}
.vw .foutsamenvatting .foutkop{list-style:none;margin:12px 0 4px -20px;font-weight:700;color:var(--leisteen);font-size:.9rem}
.vw .foutsamenvatting .foutkop:first-child{margin-top:0}
.vw .verzendfout{margin:0 0 16px;padding:13px 18px;border-radius:var(--radius,14px);background:#F9E4E6;box-shadow:inset 5px 0 0 var(--vw-krit);color:#6F1A27;font-size:.95rem;font-weight:600}
.vw .conceptmelding{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:0 0 20px}
.vw .conceptmelding span{flex:1 1 260px}
.vw .conceptmelding .knop{min-height:42px;padding:8px 16px;font-size:.92rem}

/* knoppen */
.vw .knop{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 26px;border-radius:var(--radius,14px);
  font-family:var(--kop);font-weight:700;font-size:1.02rem;line-height:1.2;text-decoration:none;cursor:pointer;border:2px solid transparent;transition:background-color .15s,color .15s,border-color .15s}
.vw .knop--primair{background:var(--leisteen);color:#fff}
.vw .knop--primair:hover{background:var(--diepblauw)}
.vw .knop--secundair{background:#fff;color:var(--leisteen);border-color:var(--salie)}
.vw .knop--secundair:hover{background:var(--salie);border-color:var(--salie)}
.vw .knop:focus-visible{outline:3px solid var(--diepblauw);outline-offset:2px}
.vw .knop:disabled{opacity:.45;cursor:not-allowed}
.vw .knop--bezig{opacity:.8;cursor:progress;pointer-events:none}
.vw .knop--bezig::before{content:"";width:15px;height:15px;flex:0 0 auto;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:vw-draai .8s linear infinite}
@keyframes vw-draai{to{transform:rotate(360deg)}}
.vw .knoprij{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}

/* stappen */
.vw .stapbalk{list-style:none;margin:0 0 26px;padding:0 0 14px;display:flex;flex-wrap:wrap;gap:6px;border-bottom:2px solid var(--vlak)}
.vw .stapbalk li{margin:0;padding:0}
.vw .stapbalk li::before{display:none}
.vw .stapbalk button{appearance:none;border:1.5px solid transparent;background:none;cursor:pointer;font-family:var(--kop);font-weight:700;font-size:.9rem;color:var(--vw-zacht);
  padding:7px 14px 7px 8px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;line-height:1.3;text-align:left}
.vw .stapbalk button:hover{background:var(--vlak);color:var(--leisteen)}
.vw .stapbalk .nr{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--vlak);font-size:.8rem;font-weight:800;color:var(--leisteen)}
.vw .stapbalk [aria-selected="true"]{background:var(--leisteen);color:#fff}
.vw .stapbalk [aria-selected="true"] .nr{background:#fff;color:var(--leisteen)}
.vw .stapbalk .af .nr{background:var(--salie);color:var(--leisteen);font-size:0}
.vw .stapbalk .af .nr::after{content:"\2713";font-size:13px;font-weight:800}
.vw .stapbalk .af [aria-selected="true"] .nr{background:var(--salie)}
.vw .stapbalk .mist .nr{background:#F4EDD6;color:var(--vw-let)}
.vw .stapbalk .vopen{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--vw-let);color:#fff;font-size:.72rem;font-weight:800;line-height:1}
.vw .stapbalk [aria-selected="true"] .vopen{background:#F4EDD6;color:var(--vw-let)}
.vw .stapbalk .af .vopen{display:none}
.vw .stapbalk button:focus-visible{outline:3px solid var(--diepblauw);outline-offset:2px}
@media (max-width:640px){
  .vw .stapbalk{gap:4px}
  .vw .stapbalk button{font-size:0;padding:5px;gap:0}
  .vw .stapbalk button[aria-selected="true"]{font-size:.86rem;gap:7px;padding:5px 12px 5px 5px}
  .vw .stapbalk .nr{font-size:.8rem}
  .vw .stapbalk .af .nr{font-size:0}
  .vw .stapbalk .vopen{display:none}
}
.vw form.gestapeld > fieldset[hidden]{display:none}
.vw .stapvoet{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:24px;padding-top:20px;border-top:1px solid var(--rand)}
.vw .stapvoet .teller{margin-left:auto;color:var(--vw-zacht);font-size:.9rem;font-weight:600}
.vw .stapstand{margin:6px 0 0;font-size:.92rem;color:var(--vw-let);font-weight:700}
.vw .stapstand.compleet{color:var(--vw-ok)}
.vw .restmelding{margin:0 0 12px;font-size:.95rem;color:var(--vw-let);font-weight:700}
.vw .restmelding.compleet{color:var(--vw-ok)}

/* adres */
.vw .adresstatus{margin:-6px 0 14px;font-size:.9rem;color:var(--vw-zacht)}
.vw .adresstatus.bezig::before{content:"";display:inline-block;width:11px;height:11px;margin-right:7px;vertical-align:-1px;border:2px solid #C9D1D6;border-top-color:var(--diepblauw);border-radius:50%;animation:vw-draai .8s linear infinite}
.vw .adresstatus.gevonden{color:var(--vw-ok)}
.vw .adresstatus.handmatig{color:var(--vw-let)}
.vw .adreskaart{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;background:var(--vw-salie-vlak);box-shadow:inset 5px 0 0 var(--salie);border-radius:var(--radius,14px);padding:14px 18px 14px 22px;margin-bottom:16px}
.vw .adreskaart .adresregels{font-weight:700;line-height:1.45;color:var(--leisteen)}
.vw .adreskaart .knop{margin-left:auto;min-height:40px;padding:6px 14px;font-size:.88rem}

/* bijlagen */
.vw .sleepvak{position:relative;border:2px dashed #9FB4BE;border-radius:var(--radius,14px);background:var(--porselein,#F7F8F5);padding:28px 20px;text-align:center;transition:border-color .15s,background-color .15s}
.vw .sleepvak.erboven{border-color:var(--diepblauw);background:var(--mist)}
.vw .sleepvak__tekst{margin:0 0 8px;font-size:1rem}
.vw .sleepvak__soorten{margin:0;font-size:.85rem;color:var(--vw-zacht)}
.vw .sleepvak input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.vw .sleepvak__knop{min-height:42px;padding:7px 16px;font-size:.94rem;margin-top:6px}
.vw .bestandslijst{list-style:none;margin:10px 0 0;padding:0}
.vw .bestandslijst li{display:flex;align-items:center;gap:12px;padding:9px 12px;border:1px solid var(--rand);border-radius:10px;margin-bottom:6px;background:#fff}
.vw .bestandslijst li::before{display:none}
.vw .bestandslijst .mini{flex:0 0 auto;width:40px;height:40px;border-radius:6px;object-fit:cover;border:1px solid var(--rand);background:var(--vlak)}
.vw .bestandslijst .soort{flex:0 0 auto;width:40px;height:40px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:var(--mist);font-size:.64rem;font-weight:800;letter-spacing:.03em;color:var(--diepblauw);text-transform:uppercase}
.vw .bestandslijst .naam{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.94rem}
.vw .bestandslijst .omvang{flex:0 0 auto;color:var(--vw-zacht);font-size:.86rem}
.vw .bestandslijst .teveel,.vw .bestandstotaal.teveel{color:var(--vw-krit);font-weight:700}
.vw .bestandslijst .bestandweg{flex:0 0 auto;appearance:none;border:1px solid var(--rand);background:#fff;border-radius:8px;padding:5px 11px;font:inherit;font-size:.82rem;color:var(--vw-zacht);cursor:pointer}
.vw .bestandslijst .bestandweg:hover{border-color:var(--vw-krit);color:var(--vw-krit)}
.vw .bestandslijst .bestandweg:focus-visible{outline:3px solid var(--diepblauw);outline-offset:2px}
.vw .bestandstotaal{margin:6px 0 0;font-size:.88rem;color:var(--vw-zacht)}
@media (max-width:520px){.vw .bestandslijst li{flex-wrap:wrap}.vw .bestandslijst .naam{flex-basis:calc(100% - 56px)}}

.vw .onthoudvak{background:var(--zand);border-radius:var(--radius,14px);padding:14px 18px;margin-top:4px}
.vw .onthoudvak .vkeuze{padding:2px 0}
.vw .onthoudvak .onthoudwis{margin-top:10px;min-height:40px;padding:6px 14px;font-size:.88rem;align-self:flex-start}

/* naloop */
.vw .naloop{background:var(--mist);border-radius:var(--radius,14px);padding:20px 22px;margin-bottom:20px}
.vw .naloop h3{margin:0 0 6px;font-size:1.15rem;color:var(--leisteen)}
.vw .naloop__intro{margin:0 0 16px;color:#33475A;font-size:.95rem}
.vw .naloop__blok{background:#fff;border-radius:12px;padding:14px 18px;margin-bottom:10px}
.vw .naloop__kop{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.vw .naloop__kop h4{margin:0;font-size:1rem;color:var(--salie-diep)}
.vw .naloop__wijzig{margin-left:auto;appearance:none;border:1.5px solid var(--salie);background:#fff;color:var(--leisteen);border-radius:999px;padding:4px 14px;font-family:var(--kop);font-size:.84rem;font-weight:700;cursor:pointer}
.vw .naloop__wijzig:hover{background:var(--salie)}
.vw .naloop__wijzig:focus-visible{outline:3px solid var(--diepblauw);outline-offset:2px}
.vw .naloop__lijst{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:6px 20px;margin:0;font-size:.95rem}
.vw .naloop__lijst dt{color:var(--vw-zacht)}
.vw .naloop__lijst dd{margin:0;font-weight:700;overflow-wrap:anywhere;white-space:pre-line}
@media (max-width:520px){.vw .naloop__lijst{grid-template-columns:1fr;gap:0}.vw .naloop__lijst dd{margin-bottom:8px}}
.vw .naloop__slot{margin:14px 0 0;font-size:.85rem;color:#33475A}
.vw .naloop__slot::before{content:"";display:inline-block;width:10px;height:8px;margin-right:9px;border-radius:2px;background:var(--salie-diep);vertical-align:0}

@keyframes vw-aanwijzen{0%{box-shadow:0 0 0 0 rgba(44,108,150,.5)}70%{box-shadow:0 0 0 12px rgba(44,108,150,0)}100%{box-shadow:0 0 0 0 rgba(44,108,150,0)}}
.vw .aanwijzen{border-radius:12px;animation:vw-aanwijzen 1.1s ease-out 2}
@media (prefers-reduced-motion:reduce){
  .vw .aanwijzen{animation:none;outline:3px solid var(--diepblauw);outline-offset:3px}
  .vw .knop--bezig::before,.vw .adresstatus.bezig::before{animation-duration:2.4s}
}
@media (max-width:640px){
  .vw .vw-kaart{padding:0 18px 24px;border-radius:18px}
  .vw .vw-kop{margin:0 -18px 22px;padding:18px}
  .vw form > fieldset > legend{font-size:1.25rem}
  .vw .blokvraag{padding:16px 16px 4px 20px}
  .vw .knoprij .knop,.vw .stapvoet .knop{flex:1 1 auto}
  .vw .stapvoet .teller{flex-basis:100%;margin-left:0;order:-1}
}
@media print{.vw .stapbalk,.vw .stapvoet,.vw .knoprij,.vw .sleepvak{display:none}.vw form.gestapeld > fieldset[hidden]{display:block!important}}

/* sectie en inleiding boven het formulier */
.sectie-verwijzen{background:var(--vlak);scroll-margin-top:96px}
.sectie-verwijzen .vw-intro{max-width:920px;margin:0 auto 30px}
.sectie-verwijzen .vw-intro h2{margin-bottom:10px}
.sectie-verwijzen .vw-intro > p{max-width:62ch;font-size:1.06rem}
.vw-beloften{list-style:none;margin:18px 0 16px;padding:0;display:grid;grid-template-columns:1fr;gap:8px 28px;max-width:860px}
@media (min-width:720px){.vw-beloften{grid-template-columns:1fr 1fr}}
.vw-beloften li{position:relative;padding-left:30px;font-size:.98rem;line-height:1.45;margin:0}
.vw-beloften li::before{content:"";position:absolute;left:4px;top:.22em;width:7px;height:12px;border:solid var(--salie-diep);border-width:0 3px 3px 0;transform:rotate(45deg);background:none;border-radius:0}
.vw-overleg{font-size:.95rem;color:var(--meta)}
.vw-overleg a{color:var(--diepblauw);font-weight:700}
.vw .vveld > label.vkeuze{display:flex;font-weight:400;font-size:.98rem;margin-bottom:0}
.vw .vscheiding{height:1px;background:var(--rand);margin:26px 0 20px}