/*
 * Schadeformulier in de stijl van het Lindeveen Design System.
 * Gebruikt de tokens van het thema (tokens.css); met fallbacks voor een ander thema.
 */
.lv-sm-formulier { display: grid; gap: var(--space-5, 24px); max-width: 40rem; }
.lv-sm-formulier p { margin: 0; }
.lv-sm-uitleg, .lv-sm-privacy { font-size: 15px; color: var(--muted, #4f5e65); }

.lv-sm-veld { display: grid; gap: var(--space-1, 4px); border: 0; padding: 0; margin: 0; min-width: 0; }
.lv-sm-veld > label, .lv-sm-veld legend { font-weight: 700; padding: 0; }
.lv-sm-veld legend { margin-bottom: var(--space-1, 4px); }
.lv-sm-ster { color: var(--signal, #9a4d00); }
.lv-sm-hint { font-size: 15px; color: var(--muted, #4f5e65); }

.lv-sm-veld input[type="text"], .lv-sm-veld input[type="tel"], .lv-sm-veld input[type="email"], .lv-sm-veld input[type="date"], .lv-sm-veld textarea {
  font: inherit; color: var(--ink, #15232a); background: var(--bg, #fff);
  border: var(--border-stevig, 2px) solid var(--muted, #4f5e65); border-radius: var(--radius-md, 6px);
  padding: var(--space-2, 8px) var(--space-3, 12px); min-height: var(--tikdoel, 44px); width: 100%; box-sizing: border-box;
}
.lv-sm-veld.is-kort input { max-width: 14rem; }
.lv-sm-veld textarea { min-height: 9rem; resize: vertical; }
.lv-sm-veld input:focus-visible, .lv-sm-veld textarea:focus-visible, .lv-sm-optie input:focus-visible { outline: var(--border-kop, 3px) solid var(--focus, #9a4d00); outline-offset: 2px; }

.lv-sm-opties { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); }
.lv-sm-optie { display: inline-flex; align-items: center; gap: var(--space-2, 8px); min-height: var(--tikdoel, 44px); padding: var(--space-1, 4px) var(--space-4, 16px) var(--space-1, 4px) var(--space-3, 12px); border: var(--border-stevig, 2px) solid var(--line, #d3dcdf); border-radius: var(--radius-md, 6px); background: var(--bg, #fff); cursor: pointer; font-weight: 600; font-size: 16px; }
.lv-sm-optie:has(input:checked) { border-color: var(--brand, #14505e); background: var(--band, #eef3f4); }
.lv-sm-optie input { width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--brand, #14505e); }

/* Fouten: rand in signaalkleur, altijd met tekst ("Fout:") erbij */
.lv-sm-veld.heeft-fout { border-left: var(--border-accent, 4px) solid var(--signal, #9a4d00); padding-left: var(--space-3, 12px); }
.lv-sm-veld.heeft-fout input, .lv-sm-veld.heeft-fout textarea { border-color: var(--signal, #9a4d00); }
.lv-sm-foutmelding { color: var(--signal, #9a4d00); font-weight: 700; }
.lv-sm-fouten { border: var(--border-stevig, 2px) solid var(--signal, #9a4d00); border-left-width: var(--border-kader, 5px); background: var(--signal-soft, #fdf0e1); padding: var(--space-4, 16px) var(--space-5, 24px); margin-bottom: var(--space-5, 24px); }
.lv-sm-fouten:focus { outline: var(--border-kop, 3px) solid var(--focus, #9a4d00); outline-offset: 2px; }
.lv-sm-fouten h2 { font-size: 20px; margin: 0 0 var(--space-2, 8px); }
.lv-sm-fouten p { margin: 0; }
.lv-sm-fouten ul { margin: var(--space-2, 8px) 0 0; padding-left: 1.2rem; }
.lv-sm-fouten a { color: var(--ink, #15232a); font-weight: 700; }

.lv-sm-knop { font: inherit; font-weight: 700; font-size: 18px; color: var(--on-brand, #fff); background: var(--brand, #14505e); border: 0; border-radius: var(--radius-md, 6px); padding: var(--space-3, 12px) var(--space-6, 32px); min-height: var(--tikdoel, 44px); cursor: pointer; }
.lv-sm-knop:hover { background: var(--brand-hover, #1b6677); }
.lv-sm-knop:focus-visible { outline: var(--border-kop, 3px) solid var(--focus, #9a4d00); outline-offset: 2px; }

/* Bevestiging */
.lv-sm-bevestiging { border-left: var(--border-kader, 5px) solid var(--ok, #26632f); background: var(--ok-soft, #e5f2e6); padding: var(--space-4, 16px) var(--space-5, 24px); display: grid; gap: var(--space-2, 8px); }
.lv-sm-bevestiging:focus { outline: none; }
.lv-sm-bevestiging h2 { font-size: 22px; margin: 0; color: var(--ok, #26632f); }
.lv-sm-bevestiging p { margin: 0; }

/* Spamval, onzichtbaar voor mensen */
.lv-sm-weg { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; }