/**
 * ===========================================
 * DONOR FUND (THE DONORS' FUND) — SHARED STYLES
 * ===========================================
 * Loaded by every campaign template next to /shared/wallet-pay/wallet-pay.css.
 * The classes are set on modal 3 by /shared/donor-fund/donor-fund.js.
 */

/* The two Donor Fund fields: only with the Donor Fund option picked */
#DonationProcessModal3 .donor-fund-fields {
  display: none;
}

#DonationProcessModal3.is-donor-fund .donor-fund-fields {
  display: block;
}

/* Donor Fund picked: the card blocks step aside (logos, saved cards, card fields).
   !important on purpose — tools/saved-cards.js drives those blocks with inline
   display toggles, and this rule must win whatever it last set. */
#DonationProcessModal3.is-donor-fund .credit__card,
#DonationProcessModal3.is-donor-fund #saved_cards_section,
#DonationProcessModal3.is-donor-fund #card_fields_section {
  display: none !important;
}

/* Campaign with Donor Fund, address not filled yet: the whole payment section
   waits below the address block. */
#DonationProcessModal3.is-address-pending .payment__method,
#DonationProcessModal3.is-address-pending .credit__card,
#DonationProcessModal3.is-address-pending #saved_cards_section,
#DonationProcessModal3.is-address-pending #card_fields_section,
#DonationProcessModal3.is-address-pending .donor-fund-fields {
  display: none !important;
}

/* Address first: some room between the address block and the payment method */
#DonationProcessModal3.is-address-first .billing-address-section {
  margin-bottom: 20px;
}

/* City / State / Postal code / Country keep their 2-column grid. Wrapped in
   .billing-address-section, that row became the 4th child of its parent, so the
   templates' "form .text__field__card:nth-child(4)" rule (flex column) caught it
   and stacked the four fields. Applies to every campaign, Donor Fund or not. */
#DonationProcessModal3 .billing-address-section .text__field__card.city__state {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}