/* ==========================================================================
   Gravity Forms — RedeenKind Theme
   Custom form styling for donation forms and general GF forms.
   Uses REK design tokens from base.css.
   ========================================================================== */


/* ==========================================================================
   1. Hidden elements
   ========================================================================== */

.gform_wrapper .gform_heading,
.gform_wrapper .gform_required_legend,
.gform_wrapper .admin-hidden-markup,
.gform_wrapper .gfield_description:not(.gfield_validation_message),
.gform_validation_errors,
.gform_wrapper .gfield.hidden_label > .gfield_label,
.gform_wrapper .gfield.hidden_label > legend.gfield_label {
  display: none;
}

.gform_wrapper .gfield_required {
  display: none !important;
}

.gfield--type-honeypot,
.gfield_visibility_hidden,
.gfield_visibility_administrative,
.gform_hidden,
.gform_validation_container,
.gfield_total,
.gform_wrapper .gfield.px-mandatory-hidden-field,
.gform_wrapper .gfield.px-hide-price-field {
  position: absolute !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  pointer-events: none;
}


/* ==========================================================================
   2. Form body
   ========================================================================== */

.gform_wrapper {
  font-family: var(--Font-Family-Primary);
  margin-inline: auto;
}

.site-main > .gform_wrapper,
.site-main > .gf_browser_unknown,
.site-main > [class*="gf_browser"] {
  padding-top: var(--D5);
}

.gform_wrapper .gform_body,
.gform_wrapper .gform-body {
  padding: var(--D15) var(--D1);
}


/* ==========================================================================
   3. Progress bar (colored segments)
   ========================================================================== */

.px-form-steps {
  display: flex;
  flex-direction: column;
  gap: var(--D05);
  padding: var(--D075);
  background-color: var(--Oranje-10);
}

.px-form-steps__bars {
  display: flex;
  gap: var(--D05);
}

.px-form-steps__bar {
  display: block;
  flex: 1;
  height: 6px;
  border-radius: 3px;
}

.px-form-steps__bar--active {
  background-color: var(--Oranje-100);
}

.px-form-steps__bar--pending {
  background-color: var(--Oranje-25);
}

.px-form-steps__label {
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-Labels);
  font-weight: var(--px-weight-medium);
  color: var(--Oranje-100);
}


/* ==========================================================================
   4. Field layout (12-column grid)
   ========================================================================== */

.gform_wrapper .gform_fields {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--D1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.gform_wrapper .gfield {
  display: flex;
  flex-direction: column;
  gap: var(--D05);
  grid-column: 1 / -1;
}

.gform_wrapper fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

.gform_wrapper fieldset > legend.gfield_label {
  margin-bottom: var(--D075);
}

.gform_wrapper fieldset > legend.gfield_label:empty {
  display: none;
}

@media (min-width: 768px) {
  .gform_wrapper .gfield.gf_left_half,
  .gform_wrapper .gfield.gf_right_half,
  .gform_wrapper .gfield.gfield--width-half,
  .gform_wrapper .gfield.px-field-50 {
    grid-column: span 6;
  }

  /* GF legacy ready classes (o.a. voornaam/tussenvoegsel/achternaam en
     postcode/huisnummer/toevoeging) → 3 kolommen, in ALLE formulieren */
  .gform_wrapper .gfield.gf_left_third,
  .gform_wrapper .gfield.gf_middle_third,
  .gform_wrapper .gfield.gf_right_third,
  .gform_wrapper .gfield.gfield--width-third {
    grid-column: span 4;
  }

  .gform_wrapper .gfield.gfield--width-quarter {
    grid-column: span 3;
  }

  .gform_wrapper .gfield.gfield--width-five-twelfths {
    grid-column: span 5;
  }

  .gform_wrapper .gfield.gfield--width-seven-twelfths {
    grid-column: span 7;
  }

  .gform_wrapper .gfield.gfield--width-two-twelfths {
    grid-column: span 2;
  }
}

/* Inline embed context: reset body padding when form is inside a component */
.px-newsletter__gf-wrap .gform_wrapper .gform_body,
.px-newsletter__gf-wrap .gform_wrapper .gform-body {
  padding: 0;
}

/* Inline embed context: contactformulier (px-contact-form) */
.px-contact-form__form .gform_wrapper {
  margin: 0;
}

.px-contact-form__form .gform_wrapper .gform_body,
.px-contact-form__form .gform_wrapper .gform-body {
  padding: 0;
}

/* Verzendknop oranje i.p.v. de globale rode donatieknop (Figma #D06516 = Oranje-100) */
.px-contact-form__form .gform_wrapper .gform_button {
  background-color: var(--Oranje-100);
  border-color: var(--Oranje-100);
}

.px-contact-form__form .gform_wrapper .gform_button:hover {
  background-color: var(--Oranje-130);
  border-color: var(--Oranje-130);
}

.px-contact-form__form .gform_wrapper .gform_button:focus-visible {
  outline: solid 2px var(--Oranje-100);
  outline-offset: 2px;
}

/* Geen donatie-hartje op de contactknop (schone pill-knop) */
.px-contact-form__form .gform_wrapper .gform_button .px-btn__heart,
.px-contact-form__form .px-btn__heart {
  display: none;
}

/* ==========================================================================
   5. Labels
   ========================================================================== */

.gform_wrapper .gfield_label {
  display: flex;
  align-items: center;
  gap: var(--D025);
  margin: 0;
  color: var(--Antraciet-100);
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-Body-Small);
  font-weight: var(--px-weight-regular);
  line-height: 1.4;
}

.gform_wrapper .px-phone-privacy-description {
  display: none;
  color: var(--Antraciet-75);
  font-size: var(--Font-Size-Labels);
  font-style: italic;
  font-weight: var(--px-weight-regular);
  line-height: 1.5;
}

.gform_wrapper .px-phone-privacy-description--visible {
  display: block;
}


/* ==========================================================================
   6. Text inputs & selects
   ========================================================================== */

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper textarea,
.gform_wrapper select {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 58px;
  padding: var(--D1);
  border-radius: var(--R8);
  border: 2px solid var(--Oranje-25);
  background-color: var(--Wit);
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-Body);
  font-weight: var(--px-weight-regular);
  line-height: 1.5;
  color: var(--Antraciet-100);
  transition: border-color var(--px-duration-normal) var(--px-ease-in-out),
              box-shadow var(--px-duration-normal) var(--px-ease-in-out);
}

/* Een tekstvlak is meerregelig en mag dus niet de vaste eenregelhoogte en de
   verticale centrering van het blok hierboven overnemen. Het aantal regels
   volgt de veldgrootte die in Gravity Forms per veld is ingesteld:
   klein = 3 regels, normaal = 5 regels, groot = 8 regels. De hoogte is ook de
   ondergrens, zodat slepen aan de greep het veld alleen groter maakt. */
.gform_wrapper textarea {
  --px-textarea-lines: 5;
  --px-textarea-height: calc(
    var(--Font-Size-Body) * 1.5 * var(--px-textarea-lines)
    + var(--D1) * 2
    + var(--D001) * 2
  );
  display: block;
  height: var(--px-textarea-height);
  min-height: var(--px-textarea-height);
  resize: vertical;
}

.gform_wrapper textarea.small {
  --px-textarea-lines: 3;
}

.gform_wrapper textarea.large {
  --px-textarea-lines: 8;
}

.gform_wrapper select {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  padding-block: 0;
  line-height: calc(58px - 4px);
  padding-inline-start: var(--D1);
  padding-inline-end: calc(var(--D1) + 1.5rem);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23464643' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--D1) center;
  background-size: 1.1rem;
}

.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
  color: var(--Antraciet-50);
  font-size: var(--Font-Size-Body-Small);
  font-weight: var(--px-weight-regular);
}

/* Dropdown in placeholder-stand (GF's gf_placeholder optie geselecteerd)
   kleurt als een placeholder, net als tekstvelden */
.gform_wrapper select:has(option.gf_placeholder:checked) {
  color: var(--Antraciet-50);
  font-size: var(--Font-Size-Body-Small);
}

.gform_wrapper input[type="text"]:hover,
.gform_wrapper input[type="email"]:hover,
.gform_wrapper input[type="number"]:hover,
.gform_wrapper input[type="tel"]:hover,
.gform_wrapper textarea:hover,
.gform_wrapper select:hover {
  border-color: var(--Oranje-50);
}

.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
  border-color: var(--Oranje-100);
  box-shadow: 0 0 0 3px var(--Oranje-10);
  outline: none;
}

.gform_wrapper input[type="text"]:focus-visible,
.gform_wrapper input[type="email"]:focus-visible,
.gform_wrapper input[type="number"]:focus-visible,
.gform_wrapper input[type="tel"]:focus-visible,
.gform_wrapper textarea:focus-visible,
.gform_wrapper select:focus-visible {
  border-color: var(--Oranje-100);
  box-shadow: 0 0 0 3px var(--Oranje-10);
  outline: none;
}

.gform_wrapper .gfield_error input[type="text"],
.gform_wrapper .gfield_error input[type="email"],
.gform_wrapper .gfield_error input[type="number"],
.gform_wrapper .gfield_error input[type="tel"],
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
  border-color: var(--Rood-100);
}


/* ==========================================================================
   6b. Datumveld met dropdowns (dag / maand / jaar)
   Geldt voor ELK GF datumveld in dropdown-weergave, niet voor één formulier.
   GF rendert drie <select>'s in .clear-multi; standaard stapelen die onder
   elkaar. Hier zetten we ze netjes naast elkaar (gelijke breedte) en tonen
   we de lege optie (Dag/Maand/Jaar) in de placeholder-kleur tot er een
   waarde gekozen is; daarna wordt de tekst donker.
   ========================================================================== */

.gform_wrapper .clear-multi:has(> [class*="gfield_date_dropdown_"]) {
  display: flex;
  gap: var(--D075);
  align-items: flex-start;
}

.gform_wrapper .clear-multi:has(> [class*="gfield_date_dropdown_"]) > [class*="gfield_date_dropdown_"] {
  flex: 1 1 0;
  min-width: 0;
}

/* Placeholder-stand: zolang de lege optie geselecteerd is toont het veld die
   tekst in de placeholder-kleur (GF geeft deze optie geen gf_placeholder-class,
   vandaar de match op de lege waarde). Na een keuze valt de kleur terug op de
   standaard donkere select-kleur. */
.gform_wrapper .ginput_container_date select:has(option[value=""]:checked) {
  color: var(--Antraciet-50);
  font-size: var(--Font-Size-Body-Small);
}

/* Op smalle schermen worden de drie kolommen krap. Verklein de horizontale
   padding en de chevron zodat de langste placeholder ("Maand") niet afkapt. */
@media (max-width: 480px) {
  .gform_wrapper .ginput_container_date select {
    padding-inline-start: var(--D05);
    padding-inline-end: calc(var(--D05) + 1rem);
    background-position: right var(--D05) center;
    background-size: 1rem;
  }
}


/* ==========================================================================
   7. Checkboxes
   ========================================================================== */

.gform_wrapper .gfield_checkbox {
  display: flex;
  flex-direction: column;
  gap: var(--D075);
  list-style: none;
  margin: 0;
  padding: 0;
}

.gform_wrapper .gfield_checkbox .gchoice {
  display: flex;
  gap: var(--D05);
}

.gform_wrapper .gfield_checkbox label {
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-Body-Small);
  font-weight: var(--px-weight-medium);
  line-height: 1.4;
  color: var(--Antraciet-100);
  cursor: pointer;
  margin-top: 2px;
}

.gform_wrapper .gfield_checkbox label a {
  color: var(--Oranje-100);
  text-decoration: underline;
}

.gform_wrapper input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 0;
  border: 2px solid var(--Oranje-25);
  background: var(--Wit) no-repeat center;
  background-size: 100% 100%;
  cursor: pointer;
  transition: border-color var(--px-duration-fast) var(--px-ease-out),
              background-color var(--px-duration-fast) var(--px-ease-out);
}

.gform_wrapper input[type="checkbox"]:hover {
  border-color: var(--Oranje-100);
}

.gform_wrapper input[type="checkbox"]:focus {
  outline: none;
}

.gform_wrapper input[type="checkbox"]:focus-visible {
  outline: solid 2px var(--Oranje-100);
  outline-offset: 1px;
}

.gform_wrapper input[type="checkbox"]:checked {
  border-color: var(--Oranje-130);
  background-color: var(--Oranje-130);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6L9 17L4 12' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 16px 16px;
}


/* ==========================================================================
   7b. Consent field
   ========================================================================== */

.gform_wrapper .ginput_container_consent {
  display: flex;
  gap: var(--D05);
}

.gform_wrapper .ginput_container_consent label {
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-Body-Small);
  font-weight: var(--px-weight-medium);
  line-height: 1.4;
  color: var(--Antraciet-100);
  cursor: pointer;
  margin-top: 2px;
}

.gform_wrapper .ginput_container_consent label a {
  color: var(--Oranje-100);
  text-decoration: underline;
}


/* ==========================================================================
   8. Radio buttons (standard)
   ========================================================================== */

.gform_wrapper .gfield_radio {
  display: flex;
  flex-direction: column;
  gap: var(--D05);
  list-style: none;
  margin: 0;
  padding: 0;
}

.gform_wrapper .gfield_radio .gchoice {
  display: flex;
  align-items: center;
  gap: var(--D025);
}

.gform_wrapper .gfield_radio label {
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-Body);
  font-weight: var(--px-weight-medium);
  line-height: 1.4;
  color: var(--Antraciet-100);
  cursor: pointer;
}

.gform_wrapper input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--Antraciet-50);
  background-color: var(--Wit);
  cursor: pointer;
  transition: border-color var(--px-duration-fast) var(--px-ease-out);
}

.gform_wrapper input[type="radio"]:hover {
  border-color: var(--Oranje-100);
}

.gform_wrapper input[type="radio"]:checked {
  border-color: var(--Oranje-100);
  box-shadow: inset 0 0 0 3px var(--Wit),
              inset 0 0 0 12px var(--Oranje-100);
}

.gform_wrapper input[type="radio"]:focus-visible {
  outline: solid 2px var(--Oranje-100);
  outline-offset: 1px;
}


/* ==========================================================================
   9. Toggle radio (Eenmalig/Maandelijks, Particulier/Organisatie)
   CSS class: px-radio-toggle
   ========================================================================== */

.gform_wrapper .gfield.px-radio-toggle .gfield_radio {
  flex-direction: row;
  background-color: var(--Oranje-10);
  border-radius: var(--RFull);
  padding: 5px;
  gap: 0;
}

.gform_wrapper .gfield.px-radio-toggle .gfield_radio .gchoice {
  flex: 1;
  gap: 0;
}

.gform_wrapper .gfield.px-radio-toggle .gfield_radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.gform_wrapper .gfield.px-radio-toggle .gfield_radio label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  padding: 10px;
  border-radius: var(--RFull);
  font-size: var(--Font-Size-Body-Small);
  font-weight: var(--px-weight-regular);
  color: var(--Antraciet-130);
  background-color: transparent;
  cursor: pointer;
  transition: background-color var(--px-duration-normal) var(--px-ease-in-out),
              color var(--px-duration-normal) var(--px-ease-in-out),
              transform var(--px-duration-fast) var(--px-ease-out),
              box-shadow var(--px-duration-normal) var(--px-ease-in-out);
}

.gform_wrapper .gfield.px-radio-toggle .gfield_radio label:hover {
  background-color: var(--Oranje-25);
}

.gform_wrapper .gfield.px-radio-toggle .gfield_radio label:active {
  transform: scale(0.97);
}

.gform_wrapper .gfield.px-radio-toggle .gfield_radio input[type="radio"]:checked + label {
  background-color: var(--Oranje-130);
  color: var(--Wit);
  font-weight: var(--px-weight-semibold);
}

.gform_wrapper .gfield.px-radio-toggle .gfield_radio input[type="radio"]:focus-visible + label {
  outline: solid 2px var(--Oranje-100);
  outline-offset: 2px;
}


/* ==========================================================================
   10. Amount radio pills (€10, €25, €50, €100)
   CSS class: px-amount-pills
   ========================================================================== */

.gform_wrapper .gfield.px-amount-pills .gfield_radio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--D075);
}

.gform_wrapper .gfield.px-amount-pills .gfield_radio .gchoice {
  gap: 0;
}

.gform_wrapper .gfield.px-amount-pills .gfield_radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.gform_wrapper .gfield.px-amount-pills .gfield_radio label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 80px;
  padding: var(--D1);
  border-radius: var(--R12);
  border: 2px solid var(--Oranje-25);
  background: var(--Wit);
  font-size: var(--Font-Size-H4);
  font-weight: var(--px-weight-semibold);
  color: var(--Antraciet-100);
  cursor: pointer;
  transition: border-color var(--px-duration-normal) var(--px-ease-in-out),
              box-shadow var(--px-duration-normal) var(--px-ease-in-out),
              color var(--px-duration-normal) var(--px-ease-in-out),
              transform var(--px-duration-fast) var(--px-ease-out);
}

.gform_wrapper .gfield.px-amount-pills .gfield_radio label:hover {
  border-color: var(--Oranje-75);
  box-shadow: 0 2px 8px rgba(208, 101, 22, 0.12);
}

.gform_wrapper .gfield.px-amount-pills .gfield_radio label:active {
  transform: scale(0.98);
}

.gform_wrapper .gfield.px-amount-pills .gfield_radio input[type="radio"]:checked + label {
  border-color: var(--Oranje-25);
  box-shadow: inset 0 0 0 2px var(--Oranje-100);
  color: var(--Oranje-130);
}

.gform_wrapper .gfield.px-amount-pills .gfield_radio input[type="radio"]:focus-visible + label {
  outline: solid 2px var(--Oranje-100);
  outline-offset: 2px;
}

.gform_wrapper .gfield.px-amount-pills .gfield_radio .gchoice:nth-child(5) {
  grid-column: 1 / -1;
}

.gform_wrapper .gfield.px-amount-pills .gfield_radio .gchoice:nth-child(5) label {
  min-height: 56px;
  font-size: var(--Font-Size-Body);
  font-weight: var(--px-weight-medium);
}

/* Note: de vroegere styling voor GF's eigen Other-choice tekstinput
   (.px-amount-pills .gfield_radio .gchoice input[type="text"]) is verwijderd.
   Zowel 156 als 157 gebruiken nu een expliciete "Anders"-keuze plus een apart
   custom-bedrag veld (.px-custom-amount hieronder); er staat geen tekstinput meer
   in de radiogroep, dus die selector was dood. */
.gform_wrapper .gfield.px-custom-amount {
  margin-top: calc(var(--D05) * -1);
}


/* ==========================================================================
   10b. Donation amount description
   CSS class: px-donate-description
   ========================================================================== */

.gform_wrapper .gfield.px-donate-description {
  padding-block: var(--D075);
  padding-inline: var(--D1);
  border-inline-start: var(--D025) solid var(--Oranje-100);
  border-radius: var(--R8);
  background-color: var(--Oranje-10);
  color: var(--Antraciet-100);
  font-size: var(--Font-Size-Body-Small);
  font-weight: var(--px-weight-medium);
  line-height: 1.5;
}


/* ==========================================================================
   11. Trust bar (HTML field: veilig betalen / ANBI)
   CSS class: px-trust-bar
   ========================================================================== */

.gform_wrapper .gfield.px-trust-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--D05);
  padding: var(--D1);
  margin-top: var(--D05);
  background-color: var(--Turquoise-25);
  border-radius: var(--R12);
  font-size: var(--Font-Size-Labels);
  font-weight: var(--px-weight-regular);
  color: var(--Turquoise-130);
}

@media (min-width: 768px) {
  .gform_wrapper .gfield.px-trust-bar {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--D2);
  }
}

.px-trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--D025);
  white-space: nowrap;
}

.px-trust-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-block;
  opacity: 0.7;
}


/* ==========================================================================
   11b. Currency field (€ prefix)
   CSS class: px-currency-field
   ========================================================================== */

.gform_wrapper .gfield.px-currency-field .ginput_container {
  position: relative;
}

.gform_wrapper .gfield.px-currency-field .ginput_container::before {
  content: '€';
  position: absolute;
  left: var(--D1);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-Body);
  font-weight: var(--px-weight-regular);
  color: var(--Antraciet-100);
  pointer-events: none;
  z-index: 1;
}

.gform_wrapper .gfield.px-currency-field input {
  padding-left: calc(var(--D1) + 1.2em) !important;
}


/* ==========================================================================
   12. Meeste impact label
   CSS class: px-impact-label
   Gebruikt [px_handwritten_label] shortcode → shared component CSS.
   ========================================================================== */

.gform_wrapper .gfield.px-impact-label {
  display: flex;
  align-items: flex-end;
}


/* ==========================================================================
   13. Form section with background
   CSS class: px-section-bg
   ========================================================================== */

.px-section-wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--D1);
  background-color: var(--Oranje-10);
  border-radius: var(--R12);
  padding: var(--D1);
  grid-column: 1 / -1;
}

.px-section-wrapper > .gfield {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .px-section-wrapper > .gfield.px-field-50 {
    grid-column: span 6;
  }

  .px-section-wrapper > .gfield.px-field-addr-pc {
    grid-column: span 5;
  }

  .px-section-wrapper > .gfield.px-field-addr-nr {
    grid-column: span 4;
  }

  .px-section-wrapper > .gfield.px-field-addr-toev {
    grid-column: span 3;
  }

  .px-section-wrapper > .gfield.px-address-street,
  .px-section-wrapper > .gfield.px-address-city {
    grid-column: span 6;
  }
}

.gform_wrapper .gfield.px-section,
.gform_wrapper .gfield.px-section-end {
  display: none;
}


/* ==========================================================================
   13b. Postcode field — uppercase
   ========================================================================== */

.gform_wrapper .gfield.px-address-postal-code input[type="text"] {
  text-transform: uppercase;
}

.gform_wrapper .gfield.px-address-postal-code input[type="text"]::placeholder {
  text-transform: none;
}


/* ==========================================================================
   13c. Name field (px-name) — voornaam / tussenvoegsel / achternaam
   ========================================================================== */

.gform_wrapper .gfield.px-name .ginput_container_name {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--D1);
}

.gform_wrapper .gfield.px-name .name_last {
  grid-column: 1 / -1;
}

.gform_wrapper .gfield.px-name .name_prefix,
.gform_wrapper .gfield.px-name .name_suffix {
  display: none;
}

.gform_wrapper .gfield.px-name .ginput_container_name span {
  display: flex;
  flex-direction: column;
}

.gform_wrapper .gfield.px-name .ginput_container_name span label {
  display: none;
}

.gform_wrapper .gfield.px-name .ginput_container_name span input {
  width: 100%;
}


/* ==========================================================================
   14. Buttons
   ========================================================================== */

.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
  margin-top: var(--D1);
  position: relative;
  z-index: 1;
}

.gform_wrapper .gform_page_footer {
  display: flex;
  align-items: center;
  gap: var(--D1);
}

/* Donate / Next button */
.gform_wrapper .px-btn--donate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: var(--D05);
  flex: 1;
  width: 100%;
  padding: var(--D1) var(--D2);
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-Body);
  font-weight: var(--px-weight-bold);
  line-height: 1.4;
  color: var(--Wit);
  background-color: var(--Rood-100);
  border: 2px solid var(--Rood-100);
  border-radius: var(--RFull);
  cursor: pointer;
  overflow: visible;
  transition: background-color var(--px-duration-normal) var(--px-ease-in-out),
              border-color var(--px-duration-normal) var(--px-ease-in-out),
              transform var(--px-duration-fast) var(--px-ease-out);
}

.gform_wrapper .px-btn--donate:hover {
  background-color: var(--Rood-75);
  border-color: var(--Rood-75);
}

.gform_wrapper .px-btn--donate:active {
  transform: scale(0.98);
}

.gform_wrapper .px-btn--donate:focus-visible {
  outline: solid 2px var(--Rood-100);
  outline-offset: 2px;
}

.gform_wrapper .px-btn--donate .px-btn__heart {
  position: absolute;
  top: -10px;
  right: -2px;
  display: inline-flex;
  filter: drop-shadow(0 2px 4px rgba(124, 0, 41, 0.25));
  transition: transform var(--px-duration-fast) var(--px-ease-out);
}

.gform_wrapper .px-btn--donate .px-btn__heart svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: none;
  overflow: visible;
}

.gform_wrapper .px-btn--donate:hover .px-btn__heart {
  transform: scale(1.1);
}

/* Back / Previous button */
.gform_wrapper .px-btn--back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--D05);
  padding: var(--D1) var(--D2);
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-Body);
  font-weight: var(--px-weight-bold);
  line-height: 1.4;
  color: var(--Antraciet-100);
  background-color: var(--Wit);
  border: 2px solid var(--Antraciet-130);
  border-radius: var(--RFull);
  cursor: pointer;
  transition: border-color var(--px-duration-fast) var(--px-ease-out),
              background-color var(--px-duration-fast) var(--px-ease-out);
}

.gform_wrapper .px-btn--back:hover {
  border-color: var(--Antraciet-130);
  background-color: var(--Antraciet-10);
}

.gform_wrapper .px-btn--back:focus-visible {
  outline: solid 2px var(--Oranje-100);
  outline-offset: 2px;
}

/* Submit button (same as donate) */
.gform_wrapper .gform_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--D05);
  width: 100%;
  padding: var(--D1) var(--D2);
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-Body);
  font-weight: var(--px-weight-bold);
  line-height: 1.4;
  color: var(--Wit);
  background-color: var(--Rood-100);
  border: 2px solid var(--Rood-100);
  border-radius: var(--RFull);
  cursor: pointer;
  transition: background-color var(--px-duration-fast) var(--px-ease-out),
              border-color var(--px-duration-fast) var(--px-ease-out);
}

/* Page 2 footer: back + donate side by side */
.gform_wrapper .gform_page_footer:has(.gform_previous_button) {
  display: flex;
  gap: var(--D1);
}

.gform_wrapper .gform_page_footer:has(.gform_previous_button) .px-btn--back {
  flex: 0 0 auto;
  min-width: 120px;
}

.gform_wrapper .gform_page_footer:has(.gform_previous_button) .px-btn--donate,
.gform_wrapper .gform_page_footer:has(.gform_previous_button) .gform_button {
  flex: 1;
}


/* ==========================================================================
   15. Validation & error states
   ========================================================================== */

.gform_wrapper .gfield_validation_message {
  display: flex;
  align-items: center;
  gap: var(--D025);
  color: var(--Rood-100);
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-Labels);
  font-weight: var(--px-weight-medium);
  line-height: 1.4;
}


/* ==========================================================================
   16. Floating labels (hidden_label fields)
   Uses :has() for state detection.
   ========================================================================== */

.gform_wrapper .gfield.hidden_label:is(
  .gfield--type-text,
  .gfield--type-email,
  .gfield--type-phone,
  .gfield--type-number,
  .gfield--type-url
) {
  position: relative;
  align-self: start;
}

.gform_wrapper .gfield.hidden_label:is(
  .gfield--type-text,
  .gfield--type-email,
  .gfield--type-phone,
  .gfield--type-number,
  .gfield--type-url
) input {
  font-size: var(--Font-Size-Body);
  line-height: 1.4;
  padding: calc(var(--D05) + 0.325rem) var(--D1);
  transition: padding var(--px-duration-normal) var(--px-ease-out);
}

.gform_wrapper .gfield.hidden_label:is(
  .gfield--type-text,
  .gfield--type-email,
  .gfield--type-phone,
  .gfield--type-number,
  .gfield--type-url
) input:focus::placeholder {
  color: transparent;
}

.gform_wrapper .gfield.hidden_label:is(
  .gfield--type-text,
  .gfield--type-email,
  .gfield--type-phone,
  .gfield--type-number,
  .gfield--type-url
):has(input:focus) input,
.gform_wrapper .gfield.hidden_label:is(
  .gfield--type-text,
  .gfield--type-email,
  .gfield--type-phone,
  .gfield--type-number,
  .gfield--type-url
):has(input:not(:placeholder-shown)) input {
  padding-top: calc(var(--D05) + 0.75rem);
  padding-bottom: calc(var(--D05) - 0.1rem);
}

.gform_wrapper .gfield.hidden_label:is(
  .gfield--type-text,
  .gfield--type-email,
  .gfield--type-phone,
  .gfield--type-number,
  .gfield--type-url
) > .gfield_label {
  display: flex;
  align-items: center;
  position: absolute;
  z-index: 1;
  pointer-events: none;
  top: 50%;
  left: var(--D1);
  transform: translateY(-50%);
  opacity: 0;
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-Body);
  font-weight: var(--px-weight-regular);
  color: var(--Antraciet-50);
  padding: 0;
  margin: 0;
  background: transparent;
  transition: top var(--px-duration-normal) var(--px-ease-out),
              transform var(--px-duration-normal) var(--px-ease-out),
              font-size var(--px-duration-normal) var(--px-ease-out),
              font-weight var(--px-duration-normal) var(--px-ease-out),
              color var(--px-duration-normal) var(--px-ease-out),
              opacity var(--px-duration-normal) var(--px-ease-out);
}

.gform_wrapper .gfield.hidden_label:is(
  .gfield--type-text,
  .gfield--type-email,
  .gfield--type-phone,
  .gfield--type-number,
  .gfield--type-url
):has(input:focus) > .gfield_label,
.gform_wrapper .gfield.hidden_label:is(
  .gfield--type-text,
  .gfield--type-email,
  .gfield--type-phone,
  .gfield--type-number,
  .gfield--type-url
):has(input:not(:placeholder-shown)) > .gfield_label {
  top: var(--D05);
  transform: translateY(0);
  font-size: var(--Font-Size-Labels);
  font-weight: var(--px-weight-semibold);
  line-height: 1;
  color: var(--Oranje-100);
  opacity: 1;
}


/* ==========================================================================
   17. Complex fields (name)
   ========================================================================== */

.gform_wrapper .gfield--type-name .ginput_complex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--D1);
}

.gform_wrapper .gfield--type-name .name_first,
.gform_wrapper .gfield--type-name .name_last {
  flex: 1 1 0;
  min-width: 0;
}

.gform_wrapper .gfield--type-name:not(.hidden_label) .gform-field-label--type-sub {
  display: none;
}


/* ==========================================================================
   18. HTML field links
   ========================================================================== */

.gform_wrapper .gfield_html a {
  color: var(--Oranje-100);
  text-decoration: underline;
}

.gform_wrapper .gfield_html a:hover {
  color: var(--Oranje-130);
}


/* ==========================================================================
   19. Ajax spinner
   ========================================================================== */

.gform_ajax_spinner {
  position: fixed;
  bottom: var(--D1);
  left: 50%;
  margin-left: -36px;
  z-index: 999999;
  width: 72px;
  height: 72px;
  padding: 14px;
  background: var(--Wit);
  border-radius: var(--RFull);
  box-shadow: var(--px-shadow-elevated);
  border: none;
}


/* ==========================================================================
   20. Page title fields (section headers inside form pages)
   CSS class: px-page-title
   ========================================================================== */

.gform_wrapper .gfield.px-page-title {
  margin-bottom: var(--D05);
}

.gform_wrapper .gfield.px-page-title h3 {
  font-size: 24px;
  font-weight: var(--px-weight-bold);
  color: var(--Antraciet-100);
  margin: 0 0 var(--D025);
}

.gform_wrapper .gfield.px-page-title p {
  font-size: var(--Font-Size-Body-Small);
  font-weight: var(--px-weight-regular);
  color: var(--Antraciet-100);
  margin: 0;
}


/* ==========================================================================
   21. Donor type label
   CSS class: px-donor-type-label
   ========================================================================== */

.gform_wrapper .gfield.px-donor-type-label {
  font-size: var(--Font-Size-Labels);
  font-weight: var(--px-weight-regular);
  color: var(--Antraciet-100);
}


/* ==========================================================================
   22. GF Theme reset (remove default GF 2.5 styles)
   ========================================================================== */

.gform_wrapper.gravity-theme .gform_fields,
.gform_wrapper .gform_fields {
  grid-column-gap: var(--D1);
  grid-row-gap: var(--D1);
}

.gform_wrapper.gravity-theme .gfield,
.gform_wrapper .gfield {
  margin-bottom: 0;
}

.gform_wrapper.gravity-theme .gsection,
.gform_wrapper .gsection {
  border-bottom: none;
  padding: 0;
}

/* Legacy markup overrides */
.gform_wrapper .gform_page {
  margin: 0;
  padding: 0;
}

.gform_wrapper ul.gform_fields {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gform_wrapper li.gfield {
  list-style: none;
}

.gform_wrapper .ginput_container {
  margin: 0;
}


/* ==========================================================================
   18. Postcode confirmation pill
   Figma node 297:13580 — address lookup result after postcode + huisnummer
   ========================================================================== */

.px-postcode-confirm {
  grid-column: 1 / -1;
  display: none;
  align-items: center;
  gap: var(--D025);
  background-color: var(--Turquoise-25);
  border: 2px solid var(--Turquoise-100);
  border-radius: var(--RFull);
  padding-block: var(--D1);
  padding-inline: var(--D1);
  color: var(--Turquoise-130);
  font-size: var(--Font-Size-Body-Small);
  font-weight: var(--px-weight-medium);
  line-height: 1.5;
}

.px-postcode-confirm--visible {
  display: flex;
}

.px-postcode-confirm__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.px-postcode-confirm__spinner {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  animation: px-spin 1s linear infinite;
}

@keyframes px-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   19. Handmatig-adres hint
   Verschijnt onder het adresblok wanneer de postcode-lookup geen adres vindt
   (buitenlandse of onbekende postcode). Geen foutmelding: de bezoeker wordt
   niet geblokkeerd en kan straat + woonplaats alsnog zelf invullen.
   ========================================================================== */

.px-postcode-manual {
  grid-column: 1 / -1;
  display: none;
  background-color: var(--Oranje-10);
  border: 2px solid var(--Oranje-50);
  border-radius: var(--R8);
  padding-block: var(--D075);
  padding-inline: var(--D075);
  color: var(--Oranje-130);
  font-size: var(--Font-Size-Body-Small);
  font-weight: var(--px-weight-medium);
  line-height: 1.5;
}

.px-postcode-manual--visible {
  display: block;
}

/* Adresvelden (formulier 157) die pas verschijnen als de lookup faalt. */
.gfield.px-addr-collapsed {
  display: none;
}