/* Oppasvragen: kaarten op overzichten, de losse vraag en de blokken in de dashboards. Mobiel eerst. */
.ov-nieuw { padding: 48px 0; background: #fff; }
.ov-nieuw h2 { margin: 0 0 8px; color: #4f3f8f; font-size: 1.7rem; font-weight: 800; line-height: 1.2; text-align: left; }
.ov-nieuw p { margin: 0 0 24px; color: #3d4757; line-height: 1.55; text-align: left; }
.ov-lijst { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ov-kaart a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px; border: 1px solid #e2ddf0; border-radius: 8px; background: #fff; color: #3d4757; text-decoration: none; }
.ov-kaart a:hover, .ov-kaart a:focus-visible { border-color: #4f3f8f; background: #f7f5fc; }
.ov-kaart__kop { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; justify-content: space-between; }
.ov-kaart__kop strong { color: #4f3f8f; font-size: 1.05rem; }
.ov-kaart__kop time { color: #5b6778; font-size: 0.85rem; }
.ov-kaart__feiten { font-size: 0.95rem; line-height: 1.45; }
.ov-kaart__tarief { margin-top: 4px; color: #1f2a3c; font-weight: 700; }
.ov-sectie { padding: 32px 0 56px; background: #fff; }
.ov-intro { max-width: 70ch; margin: 0 0 24px; color: #3d4757; line-height: 1.6; text-align: left; }
.ov-verder { margin-top: 40px; color: #3d4757; line-height: 1.6; text-align: left; }
.ov-verder h2 { margin: 0 0 8px; font-size: 1.4rem; text-align: left; }
.ov-verder p { margin: 0 0 8px; }

.ov-vraag .container { max-width: 760px; text-align: left; }
.ov-oog { margin: 0 0 8px; color: #5f4da6; font-size: 0.95rem; font-weight: 700; }
.ov-vraag h1 { margin: 0 0 20px; color: #4f3f8f; font-size: 2rem; font-weight: 800; line-height: 1.2; text-align: left; }
.ov-vraag h2 { margin: 28px 0 8px; font-size: 1.3rem; text-align: left; }
.ov-feiten { display: grid; gap: 8px; margin: 0; padding: 16px; border-radius: 8px; background: #faf9fd; }
.ov-feiten div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
.ov-feiten dt { color: #5b6778; }
.ov-feiten dd { margin: 0; color: #1f2a3c; font-weight: 600; }
.ov-tekst { margin: 0; color: #3d4757; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.ov-reageer { margin-top: 28px; padding: 20px; border: 1px solid #e2ddf0; border-radius: 8px; }
.ov-reageer h2 { margin-top: 0; }
.ov-reageer p { margin: 0 0 12px; color: #3d4757; line-height: 1.55; }
.ov-reageer label { display: block; margin-bottom: 6px; font-weight: 600; }
.ov-reageer textarea, .ov-form textarea, .ov-form input[type="text"], .ov-form input[type="number"], .ov-form select { width: 100%; padding: 12px; border: 1px solid #cfd4dc; border-radius: 8px; font: inherit; font-size: 16px; box-sizing: border-box; }
.ov-melding { margin: 12px 0 0; font-weight: 600; }
.ov-melding--fout { color: #b00020; }
.ov-melding--goed { color: #1b6e3c; }
.ov-klein { margin: 16px 0 0; color: #5b6778; font-size: 0.9rem; line-height: 1.5; }

/* Formulier en lijsten in de dashboards */
.ov-form { display: grid; gap: 16px; margin-top: 16px; }
.ov-form label, .ov-form legend { display: block; margin-bottom: 6px; padding: 0; font-weight: 600; }
.ov-form fieldset { margin: 0; padding: 0; border: 0; }
.ov-keuzes { display: flex; flex-wrap: wrap; gap: 8px; }
.ov-keuzes label { display: inline-flex; gap: 8px; align-items: center; margin: 0; padding: 8px 12px; border: 1px solid #cfd4dc; border-radius: 8px; font-weight: 400; cursor: pointer; }
.ov-keuzes input { width: auto; margin: 0; }
.ov-rij { display: grid; gap: 16px; }
.ov-hulp { margin: 6px 0 0; color: #5b6778; font-size: 14px; line-height: 1.5; }
.ov-dash-vraag { margin-top: 16px; padding: 16px; border: 1px solid #e2e5ea; border-radius: 8px; text-align: left; }
.ov-dash-kop { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; }
.ov-dash-status { color: #4f3f8f; font-weight: 600; }
.ov-dash-vraag p { margin: 8px 0 0; line-height: 1.5; overflow-wrap: anywhere; }
.ov-acties { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ov-reactie { margin-top: 12px; padding-top: 12px; border-top: 1px solid #e2e5ea; }
.ov-knop-licht { padding: 10px 14px; border: 1px solid #b9aee0; border-radius: 8px; background: #fff; color: #4f3f8f; font: inherit; font-weight: 600; cursor: pointer; }
.ov-knop-licht:hover { background: #f7f5fc; }
.ov-knop-licht--gevaar { border-color: #e0b4b0; color: #b3261e; }
@media (min-width: 560px) { .ov-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 720px) {
  .ov-nieuw { padding: 64px 0; }
  .ov-nieuw h2 { font-size: 2rem; }
  .ov-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 980px) { .ov-lijst { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ov-acties a { text-decoration: none; }
.ov-klein a, .ov-reageer a:not(.hh-knop), .ov-verder a, .ov-intro a { color: #4f3f8f; font-weight: 600; text-decoration: underline; }

/* Bij weinig resultaten: laat oppassers zelf reageren */
.ov-tip { margin: 24px 0; padding: 20px; border: 1px solid #e2ddf0; border-radius: 8px; background: #faf9fd; text-align: left; }
.ov-tip h3 { margin: 0 0 4px; color: #4f3f8f; font-size: 1.15rem; text-align: left; }
.ov-tip p { margin: 0 0 12px; color: #3d4757; line-height: 1.55; text-align: left; }
.ov-tip__knop { display: inline-block; padding: 12px 18px; border-radius: 8px; background: #4f3f8f; color: #fff !important; font-weight: 700; text-decoration: none; }
.ov-tip__knop:hover, .ov-tip__knop:focus-visible { background: #3f3275; }