/* Storingsformulier + symptoomkaarten op /reparatie-breda. Hoort bij reparatie.js.
   Bouwt op aanvraag.css (formulierkaart, voortgang, velden, foutmelding, ontvangst) — die blijft ongewijzigd.
   Spec: pages/REPARATIE.md. */

/* ── symptoomkaarten: klik vult het probleem vast in ── */
.symptomen{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:36px}
.symptoom{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--rand);border-radius:16px;
  padding:24px 22px;color:var(--t1);text-decoration:none;box-shadow:0 2px 12px rgba(15,27,45,.05);
  transition:border-color .2s,transform .2s}
.symptoom:hover,.symptoom:focus-visible{border-color:var(--blauw-h);transform:translateY(-2px)}
.symptoom:focus-visible{outline:3px solid var(--blauw-h);outline-offset:2px}
.symptoom .ik{width:44px;height:44px;border-radius:12px;background:var(--licht);color:var(--blauw-h);display:grid;place-items:center}
.symptoom h3{font-family:var(--kop);font-weight:700;font-size:17px;line-height:1.25;margin:4px 0 0}
.symptoom p{color:var(--t2);font-size:14px;line-height:1.55;margin:0}
.symptoom .link{margin-top:auto;padding-top:6px;font-weight:700;font-size:14px;color:var(--blauw-h)}

/* ── het formulier zelf: de aanvraag-stijlen, maar ingebed in een sectie ── */
.storing-form.aanvraag-main{padding:0;max-width:760px;margin:0 auto}
.storing-form>h2,.storing-form>.intro{text-align:center;margin-left:auto;margin-right:auto}
.storing-form>.intro{max-width:52ch}
.storing-form .voortgang{margin:0 auto 22px}
.storing-form .formulierkaart h3{font-family:var(--kop);font-weight:700;font-size:20px;margin:0 0 6px}
.storing-form .formulierkaart .sub{margin-bottom:18px}
.storing-form fieldset{border:0;padding:0;margin:0 0 26px;min-width:0}
.storing-form legend{font-family:var(--kop);font-weight:700;font-size:20px;padding:0;margin:0 0 4px}
.storing-form legend small{display:block;font-family:var(--body);font-weight:400;font-size:14px;color:var(--t2);margin-top:4px}
.storing-form .velden{margin-top:4px}

/* keuzeknoppen: echte radio's, visueel als grote tikvlakken (≥48px) */
.keuzes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.keuzes.drie{grid-template-columns:repeat(3,minmax(0,1fr))}
.keuze{position:relative}
.keuze input{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}
.keuze label{display:flex;align-items:center;gap:10px;min-height:52px;padding:12px 14px;margin:0;
  border:1px solid #aebbc9;border-radius:10px;background:#fff;font-size:15px;font-weight:600;color:var(--navy);
  line-height:1.3;cursor:pointer;transition:border-color .15s,background .15s}
.keuze label::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:2px solid #aebbc9;background:#fff}
.keuze input:checked+label{border-color:var(--blauw-h);background:var(--licht);box-shadow:inset 0 0 0 1px var(--blauw-h)}
.keuze input:checked+label::before{border-color:var(--blauw-h);background:radial-gradient(circle,var(--blauw-h) 45%,#fff 50%)}
.keuze input:focus-visible+label{outline:3px solid var(--blauw-h);outline-offset:2px}
.keuze[hidden]{display:none!important}

.storing-form .form-zeker{margin:0 0 22px}
.storing-form .ontvangst .knop.wa{background:#25D366;margin-right:10px}
.storing-form .ontvangst .knop.wa:hover{background:#1ebe5b}
.storing-form .ontvangst .knop.secundair{margin-top:18px}
.werkgebied-hint{display:none;font-size:13.5px;color:var(--t2);background:var(--warm);border-radius:8px;padding:10px 12px;margin-top:8px}
.werkgebied-hint.zichtbaar{display:block}
.fotolijst{list-style:none;padding:0;margin:8px 0 0;font-size:13px;color:var(--t2)}

@media(max-width:600px){
  .symptomen{grid-template-columns:1fr;gap:12px}
  .symptoom{padding:18px 16px}
  .keuzes,.keuzes.drie{grid-template-columns:1fr}
  .storing-form legend{font-size:18px}
}