/* ---------------------------------------------------------------------------
   Bedrag- resp. donateursvormkeuze als knoppenrij in plaats van kale radio's.
   Zelfde gedachte als de CiviCRM-extensie 'radiobuttons', maar dan als
   formulier-eigen CSS: geen extra extensie, en alleen op deze twee formulieren.
   Kleuren zijn gemeten aan het thema: accent #c13c62, veldrand #ccc, hoeken
   vierkant (border-radius 0).
   --------------------------------------------------------------------------- */
.webform-submission-form .js-webform-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.webform-submission-form .js-webform-radios .form-check {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}
.webform-submission-form .js-webform-radios .form-check-label {
  display: block;
  padding: 0.65rem 1.15rem;
  border: 1px solid #ccc;
  background: #fff;
  color: #333;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
.webform-submission-form .js-webform-radios .form-check-label:hover {
  border-color: #c13c62;
  color: #c13c62;
}

/* De radio zelf verdwijnt alleen als de browser :has() kent - anders blijft het
   een gewone, werkende radiolijst (progressive enhancement). */
@supports selector(:has(*)) {
  .webform-submission-form .js-webform-radios .form-check-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
  }
  .webform-submission-form .js-webform-radios .form-check:has(.form-check-input:checked) .form-check-label {
    background: #c13c62;
    border-color: #c13c62;
    color: #fff;
  }
  .webform-submission-form .js-webform-radios .form-check:has(.form-check-input:focus-visible) .form-check-label {
    outline: 2px solid #c13c62;
    outline-offset: 2px;
  }
}

/* Bedragen-tabel in de introtekst: twee nette kolommen, bedrag rechts
   uitgelijnd zodat 25 / 50 / 100 / 200 onder elkaar uitkomen.
   Het thema geeft tabellen een donkergrijze th-achtergrond met witte tekst en
   een zebra-arcering op de rijen; voor deze tabel zetten we dat uit. Vandaar de
   !important - dit is een gescopete uitzondering op de themastyling. */
.webform-submission-form table.ozk-bedragen {
  width: auto;
  border-collapse: collapse;
  margin: 0 0 0.5rem;
  background: none !important;
}

/* Compacter: minder lucht tussen de introtekst, de tabel en de eerste vraag. */
.webform-submission-form .webform-element-markup p {
  margin-bottom: 0.5rem;
}
.webform-submission-form .webform-element-markup {
  margin-bottom: 0.5rem;
}
.webform-submission-form legend {
  margin-bottom: 0.35rem;
}
.webform-submission-form fieldset.mb-3 {
  margin-bottom: 0.75rem !important;
}
.webform-submission-form table.ozk-bedragen tr,
.webform-submission-form table.ozk-bedragen th,
.webform-submission-form table.ozk-bedragen td {
  background: none !important;
  color: inherit !important;
  border: 0 !important;
}
.webform-submission-form table.ozk-bedragen th {
  text-align: right;
  white-space: nowrap;
  font-weight: 700;
  padding: 0.2rem 1.25rem 0.2rem 0 !important;
  vertical-align: top;
}
.webform-submission-form table.ozk-bedragen td {
  padding: 0.2rem 0 !important;
  vertical-align: top;
}

/* Het invoerveld van 'Een ander bedrag' hoeft niet de volle breedte. */
.webform-submission-form .webform-radios-other input[type="number"] {
  max-width: 12rem;
}

/* De vraag boven de knoppen mag wat rustiger dan een paginakop. */
.webform-submission-form legend .fieldset-legend {
  font-size: 1.2rem;
  font-weight: 600;
}

/* Knoppen naast elkaar in plaats van onder elkaar op volle breedte. */
.webform-submission-form .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.webform-submission-form .form-actions .button,
.webform-submission-form .form-actions input[type="submit"],
.webform-submission-form .form-actions button {
  width: auto;
  flex: 0 0 auto;
}

/* Op kleine schermen twee knoppen per rij, gecentreerd. */
@media (max-width: 480px) {
  .webform-submission-form .js-webform-radios .form-check {
    flex: 1 1 calc(50% - 0.25rem);
  }
  .webform-submission-form .js-webform-radios .form-check-label {
    text-align: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}