/* ===============================
   Horizontale layout algemene velden
   =============================== */
form#webform-submission-doe-een-gift-add-form div.form-item:not(.webform-type-radios):not(.webform-type-checkboxes):not(.form-composite):not(.form-actions):not(fieldset) {
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  max-width: 700px;
}

form#webform-submission-doe-een-gift-add-form div.form-item > label {
  width: 200px;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 0;
  color: #222;
  flex-shrink: 0;
}

form#webform-submission-doe-een-gift-add-form div.form-item > input,
form#webform-submission-doe-een-gift-add-form div.form-item > select,
form#webform-submission-doe-een-gift-add-form div.form-item > textarea {
  flex: 1;
  padding: 8px 12px;
  font-size: 15px;
  border-radius: 6px;
  border: 1px solid #ccc;
  width: 100%;
  box-sizing: border-box;
}

/* Fieldset & legend */
form#webform-submission-doe-een-gift-add-form fieldset {
  border: none;
  padding: 0;
  margin: 0 0 10px;
}

form#webform-submission-doe-een-gift-add-form legend {
  display: block;
  font-weight: bold;
  font-size: 20px;
  color: #003366;
  margin-bottom: 10px;
}

/* Radios & checkboxes inline */
form#webform-submission-doe-een-gift-add-form .webform-type-radios .form-radios,
form#webform-submission-doe-een-gift-add-form .webform-type-checkboxes .form-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 0;
  margin: 0 0 10px;
}

form#webform-submission-doe-een-gift-add-form .webform-type-radios label,
form#webform-submission-doe-een-gift-add-form .webform-type-checkboxes label {
  font-weight: normal;
  margin-right: 10px;
}

/* Mobiel */
@media (max-width: 600px) {
  form#webform-submission-doe-een-gift-add-form div.form-item:not(.webform-type-radios):not(.webform-type-checkboxes):not(.form-composite):not(.form-actions):not(fieldset) {
    flex-direction: column;
    align-items: flex-start;
  }
  form#webform-submission-doe-een-gift-add-form div.form-item > label {
    width: 100%;
    margin-bottom: 5px;
  }
}

/* ===============================
   Bedragkeuze styling (optioneel)
   =============================== */
.donation-amount-wrapper {
  margin: 5px 0 5px;
  display: none; /* standaard verborgen */
}
.donation-amount-wrapper legend {
  font-size: 1.2rem;
  font-weight: 700;
  color: #003366;
  margin-bottom: 5px;
}
.donation-amount-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.donation-amount-options label {
  border: none;
  padding: 0;
}
/* Verberg het radioknopje zelf */
.donation-amount-options input[type="radio"] { display: none; }
/* Maak het span een volledige knop */
.donation-amount-options span {
  display: inline-block;
  padding: 10px 16px;
  font-size: 1rem;
  font-weight: 600;
  color: #003366;
  background-color: #fff;
  border: 2px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 60px;
  text-align: center;
}
/* Geselecteerd bedrag */
.donation-amount-options input[type="radio"]:checked + span {
  background-color: #006699;
  border-color: #006699;
  color: #fff;
}
/* Actieve geselecteerde stijl voor volledige label */
.donation-amount-options label.selected {
  background-color: #006699;
  border-color: #006699;
  color: #fff;
}

.tax-info {
  font-size: 0.9rem;
  color: #444;
  margin-top: 12px;
}

/* ✅ Validatie checkmark */
.checkmark {
  margin-left: 0.5rem;
  font-size: 1.2em;
  color: green;
}

/* Algemene opmaak fieldset */
fieldset#edit-civicrm-1-contribution-1-cg30-custom-153--wrapper {
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 5px;
}

/* Stijl legend */
fieldset#edit-civicrm-1-contribution-1-cg30-custom-153--wrapper legend {
  font-size: 1.2rem;
  font-weight: 700;
  color: #003366;
  margin-bottom: 15px;
}

/* Zet radios horizontaal */
#edit-civicrm-1-contribution-1-cg30-custom-153 {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* Elke radio als blok */
#edit-civicrm-1-contribution-1-cg30-custom-153 .form-item {
  margin: 0;
  padding: 0;
}

/* Verborgen standaard radio input */
#edit-civicrm-1-contribution-1-cg30-custom-153 input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

fieldset:not(.fieldgroup) { padding-top: 20px !important; }

/* Label als knop */
#edit-civicrm-1-contribution-1-cg30-custom-153 label.option {
  display: inline-block;
  border: 2px solid #ccc;
  border-radius: 6px;
  padding: 10px 18px;
  background-color: #fff;
  color: #003366;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

/* Visueel geselecteerd als input checked is */
#edit-civicrm-1-contribution-1-cg30-custom-153 input[type="radio"]:checked + label.option {
  background-color: #006699;
  color: #fff;
  border-color: #006699;
}

/* Container met horizontale layout (Gift in naam van) */
#edit-civicrm-1-contribution-1-cg14-custom-37 {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
#edit-civicrm-1-contribution-1-cg14-custom-37 .form-item {
  display: flex;
  align-items: center;
  margin: 0;
}
#edit-civicrm-1-contribution-1-cg14-custom-37 .form-item:first-of-type { margin-left: 30px; }
#edit-civicrm-1-contribution-1-cg14-custom-37 .form-radio { margin-right: 6px; }
#edit-civicrm-1-contribution-1-cg14-custom-37 label.option {
  font-weight: 500;
  cursor: pointer;
}

/* Primaire/secondaire knoppen */
.button-secondary,
button.form-submit:not(.form-submit--primary),
input.form-submit:not(.form-submit--primary),
input.crm-form-submit:not(.form-submit--primary),
button.crm-form-submit:not(.form-submit--primary),
.account-links ul.links li a.icon-logout,
.header-region .block--menu--main > ul.menu > .menu-item a.menu-link--gift {
  color: #fff !important;
  background-color: #dc5e1f !important;
  border: 1px solid #dc5e1f !important;
}

/* Horizontale layout voor betalingsverwerker radiobuttons */
#edit-civicrm-1-contribution-1-contribution-payment-processor-id {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1rem;
}
#edit-civicrm-1-contribution-1-contribution-payment-processor-id .form-item {
  display: flex;
  align-items: center;
  margin: 0;
}
/* Verborgen standaard radio input */
#edit-civicrm-1-contribution-1-contribution-payment-processor-id input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
/* Label als knop */
#edit-civicrm-1-contribution-1-contribution-payment-processor-id label.option {
  display: inline-block;
  border: 2px solid #ccc;
  border-radius: 6px;
  padding: 10px 18px;
  background-color: #fff;
  color: #003366;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}
/* Visueel geselecteerd */
#edit-civicrm-1-contribution-1-contribution-payment-processor-id input[type="radio"]:checked + label.option {
  background-color: #006699;
  color: #fff;
  border-color: #006699;
}

/* Beperk styling tot het domiciliëringsblok */
#edit-contribution-pagebreak {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 20px;
  background: #f9f9f9;
  margin-bottom: 30px;
}

/* Input-velden netjes */
#edit-contribution-pagebreak input[type="text"] {
  flex: 1;
  min-width: 250px;
  padding: 8px;
  font-size: 1em;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Checkbox recht voor label */
#edit-contribution-pagebreak .form-type-checkbox { flex-direction: row; }

/* Herstel bevestigingstekst */
#edit-bevestiging-tekst {
  padding: 0px;
  border-radius: 5px;
  font-size: 0.95em;
  line-height: 1.6em;
  margin-top: 20px;
  clear: both;
}

/* Checkbox normaliseren binnen domiciliëring */
#edit-contribution-pagebreak .form-item-bevestiging input[type="checkbox"] {
  all: unset;
  appearance: checkbox;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  cursor: pointer;
  vertical-align: middle;
  display: block;
}
#edit-contribution-pagebreak .form-item-bevestiging label {
  margin: 0;
  font-weight: 600;
}
#edit-bevestiging-fieldset { padding: 0px 15px 15px 15px !important; }

/* Campagne veld verbergen */
#edit-civicrm-1-contribution-1-contribution-campaign-id--wrapper {
  display: none !important;
}