/* ==========================================================================
   GFCH — WooCommerce Donation Checkout Flow: Brand Refresh
   Scope: donations archive, WCDP campaign page, checkout, order-pay.
   All selectors are scoped to WooCommerce/WCDP body classes and plugin
   classes so nothing leaks onto unrelated theme pages.

   IMPLEMENTATION NOTE (2026-07-24): the design agent's draft referenced
   the gfch-design-system token names (--gfch-blue, --space-5, --surface-card,
   --shadow-focus, etc. from tokens/{colors,spacing,typography}.css). Those
   tokens are NOT loaded on production — the live gfch-theme/style.css only
   defines a small, differently-named set (--blue, --red, --text, --radius-lg,
   --shadow-sm/md/lg, with different pixel/rgba values than the design
   system). Referencing undefined custom properties makes the affected
   declarations compute to their initial/inherited value silently — no
   error, no visual change, page still returns 200. To avoid shipping a
   no-op redesign, the actual token values (colors.css + spacing.css +
   typography.css from the gfch-design-system skill) are inlined below as
   this file's own :root block. This file is self-contained; it does not
   depend on style.css defining anything.
   ========================================================================== */

:root {
  /* ── Brand colors (gfch-design-system/tokens/colors.css) ────────── */
  --gfch-red:    #D42A35;
  --gfch-blue:   #1B4F8A;
  --gfch-yellow: #E8960C;
  --gfch-green:  #1E7A3E;
  --gfch-navy:   #0F2B4C;
  --gfch-cream:  #FAFAF7;
  --gfch-ice:    #EDF2F8;
  --gfch-mint:   #EBF5EE;

  --red-700:    #A81F28;
  --blue-700:   #143B68;
  --blue-100:   #D6E1EF;
  --green-700:  #155C2E;
  --green-100:  #CFE6D6;

  --ink-900: #16202B;
  --ink-800: #24303C;
  --ink-500: #727C88;
  --ink-300: #C4CBD2;
  --ink-200: #E1E5EA;
  --ink-050: #F6F7F9;
  --white:   #FFFFFF;

  --surface-card:  var(--white);
  --text-heading:  var(--ink-900);
  --text-body:     var(--ink-800);
  --text-muted:    var(--ink-500);
  --border-subtle: var(--ink-200);
  --border-strong: var(--ink-300);
  --focus-ring:    var(--gfch-blue);

  /* ── Spacing / radius / elevation / layout (tokens/spacing.css) ──── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  --border-width:        1px;
  --border-width-strong: 2px;

  --shadow-sm:    0 1px 3px rgba(15, 43, 76, 0.08), 0 1px 2px rgba(15, 43, 76, 0.06);
  --shadow-lg:    0 12px 28px rgba(15, 43, 76, 0.12), 0 4px 10px rgba(15, 43, 76, 0.06);
  --shadow-focus: 0 0 0 3px rgba(27, 79, 138, 0.35);

  --container-max:    1200px;
  --container-narrow: 760px;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;

  /* ── Typography (tokens/typography.css) ──────────────────────────── */
  --font-heading: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --fs-h4:   1.25rem;
  --fs-body: 1rem;
  --fs-sm:   0.875rem;
  --ls-caps: 0.06em;
}

/* --------------------------------------------------------------------------
   1. DONATIONS ARCHIVE — /support/donate/
   Verified live (2026-07-24 curl): body.archive.tax-product_cat.term-donate
   .woocommerce.woocommerce-page, ul.products.columns-3, li.product.
   -------------------------------------------------------------------------- */
body.tax-product_cat.woocommerce.woocommerce-page ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
  justify-content: start;
  gap: var(--space-5);
}

body.tax-product_cat.woocommerce.woocommerce-page ul.products li.product {
  /* Undo WooCommerce's float-based column math now that grid owns layout */
  width: auto !important;
  margin: 0 !important;
  float: none !important;
}

body.tax-product_cat.woocommerce.woocommerce-page ul.products li.product {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  transition: box-shadow var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}

body.tax-product_cat.woocommerce.woocommerce-page ul.products li.product:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   2. CAMPAIGN CONTRIBUTION INPUT — /donate/support-our-mission/ (WC Donation Platform)
   Verified live (2026-07-24 curl): #wcdp-donation-amount, input.wcdp-range,
   input#wcdp_1_wcdp-range, .wcdp-amount, woocommerce-Price-currencySymbol.
   -------------------------------------------------------------------------- */

/* Amount field — match brand Input component */
.wcdp-form #wcdp-donation-amount,
.wcdp-form input.wcdp-donation-amount {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--text-body);
  padding: 12px 14px;
  background: var(--white);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-md);
  outline: none;
  box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}

.wcdp-form #wcdp-donation-amount:focus,
.wcdp-form input.wcdp-donation-amount:focus {
  border-color: var(--gfch-blue);
  box-shadow: var(--shadow-focus);
}

/* Currency symbol sits directly before the input in the live markup —
   give it matching vertical rhythm so it doesn't look bolted on. */
.wcdp-form .wcdp-amount .woocommerce-Price-currencySymbol {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  margin-right: var(--space-1);
}

.wcdp-form .wcdp-amount label {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
  font-size: var(--fs-sm);
}

/* Range slider — strip OS chrome, apply brand track/thumb.
   NOTE: each vendor pseudo-element MUST stay in its own rule; combining
   ::-webkit-* and ::-moz-* in one comma-selector makes browsers that don't
   recognize one of them drop the entire rule. */
.wcdp-form input.wcdp-range,
.wcdp-form input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  margin: var(--space-3) 0;
  cursor: pointer;
}

.wcdp-form input.wcdp-range:focus-visible {
  outline: none;
}

/* WebKit track */
.wcdp-form input.wcdp-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  border-radius: var(--radius-pill);
  background: linear-gradient(to right, var(--gfch-blue), var(--gfch-green));
}

/* WebKit thumb */
.wcdp-form input.wcdp-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px; /* (20px thumb - 6px track) / 2, centers thumb on track */
  border-radius: 50%;
  background: var(--white);
  border: var(--border-width-strong) solid var(--gfch-blue);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}

.wcdp-form input.wcdp-range::-webkit-slider-thumb:hover {
  box-shadow: var(--shadow-focus);
  transform: scale(1.05);
}

/* Firefox track */
.wcdp-form input.wcdp-range::-moz-range-track {
  width: 100%;
  height: 6px;
  border-radius: var(--radius-pill);
  background: linear-gradient(to right, var(--gfch-blue), var(--gfch-green));
  border: none;
}

/* Firefox thumb */
.wcdp-form input.wcdp-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--white);
  border: var(--border-width-strong) solid var(--gfch-blue);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}

.wcdp-form input.wcdp-range::-moz-range-thumb:hover {
  box-shadow: var(--shadow-focus);
  transform: scale(1.05);
}

/* Firefox progress-fill (WebKit has no equivalent; the gradient track above
   approximates a filled-left effect on both engines without JS). */
.wcdp-form input.wcdp-range::-moz-range-progress {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--gfch-blue);
}

/* --------------------------------------------------------------------------
   3. CHECKOUT FORM FIELDS — /checkout/
   Verified live (2026-07-24, cart populated + curl): body.woocommerce-checkout,
   form.checkout.woocommerce-checkout, .col-1/.col-2, #billing_first_name,
   #billing_last_name, #billing_company, #billing_city, #billing_state,
   #billing_postcode, #billing_phone, #billing_email, #billing_country.
   -------------------------------------------------------------------------- */
body.woocommerce-checkout .woocommerce-billing-fields .input-text,
body.woocommerce-checkout .woocommerce-shipping-fields .input-text,
body.woocommerce-checkout #order_comments,
body.woocommerce-checkout .select2-selection,
body.woocommerce-checkout select.country_to_state {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text-body);
  padding: 12px 14px;
  background: var(--white);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-md);
  outline: none;
  box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}

body.woocommerce-checkout .woocommerce-billing-fields .input-text:focus,
body.woocommerce-checkout .woocommerce-shipping-fields .input-text:focus,
body.woocommerce-checkout #order_comments:focus,
body.woocommerce-checkout select.country_to_state:focus {
  border-color: var(--gfch-blue);
  box-shadow: var(--shadow-focus);
}

/* Select2 country/state dropdown (WooCommerce enhances these via JS, so the
   markup only exists at runtime — not visible to a static curl capture)
   needs its own focus-visible ring target since Select2 wraps the native
   select. */
body.woocommerce-checkout .select2-container--open .select2-selection {
  border-color: var(--gfch-blue);
  box-shadow: var(--shadow-focus);
}

body.woocommerce-checkout .woocommerce-billing-fields label,
body.woocommerce-checkout .woocommerce-shipping-fields label {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-body);
}

body.woocommerce-checkout .woocommerce-billing-fields .required,
body.woocommerce-checkout .woocommerce-shipping-fields .required {
  color: var(--gfch-red);
  text-decoration: none;
}

/* Reduce dead whitespace in the two-column layout on wide screens by
   tightening the max content width and giving the review column a touch
   more presence, instead of two loosely-floated 50% halves. */
body.woocommerce-checkout form.checkout.woocommerce-checkout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  max-width: var(--container-max);
  margin-inline: auto;
}

body.woocommerce-checkout form.checkout.woocommerce-checkout .col-1,
body.woocommerce-checkout form.checkout.woocommerce-checkout .col-2 {
  float: none !important;
  width: 100% !important;
  flex: 1 1 420px;
  max-width: 560px;
}

/* --------------------------------------------------------------------------
   4. CHECKOUT PAYMENT METHODS — ul.wc_payment_methods.payment_methods.methods
   Verified live (2026-07-24): li.wc_payment_method.payment_method_woo_mpgs /
   .payment_method_bacs, input#payment_method_woo_mpgs / #payment_method_bacs
   type="radio" class="input-radio", each followed by its label sibling.
   -------------------------------------------------------------------------- */
body.woocommerce-checkout ul.wc_payment_methods.payment_methods.methods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

body.woocommerce-checkout ul.wc_payment_methods.payment_methods.methods li.wc_payment_method {
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--border-subtle);
}

body.woocommerce-checkout ul.wc_payment_methods.payment_methods.methods li.wc_payment_method:last-of-type {
  border-bottom: none;
}

/* Hide native radio visually but keep it operable/accessible */
body.woocommerce-checkout input.input-radio[name="payment_method"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 0 var(--space-2) 0 0;
  border: var(--border-width-strong) solid var(--border-strong);
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard);
  flex-shrink: 0;
}

body.woocommerce-checkout input.input-radio[name="payment_method"]:checked {
  border-color: var(--gfch-blue);
}

body.woocommerce-checkout input.input-radio[name="payment_method"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--gfch-blue);
}

body.woocommerce-checkout input.input-radio[name="payment_method"]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

body.woocommerce-checkout ul.wc_payment_methods.payment_methods.methods label {
  display: flex;
  align-items: center;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  color: var(--text-body);
  cursor: pointer;
}

body.woocommerce-checkout .payment_box {
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--gfch-ice);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   5. CHECKOUT FEE OPT-IN — "Yes, I want to cover the transaction fee."
   CORRECTED from the design agent's draft: this row only renders once cart
   has a subtotal, so it never appeared on the design agent's empty-cart
   crawl. Real markup captured live (2026-07-24, cart populated via
   add-to-cart=3544, curl -c/-b cookie jar to preserve session -> /checkout/):

     <tr class="wcdp-fee-recovery-row">
       <th colspan="2">
         <label class="wcdp-fee-recovery" for="wcdp_fee_recovery">
           <input type="checkbox" id="wcdp_fee_recovery"
                  class="wcdp-fee-recovery__input" name="wcdp_fee_recovery"
                  value="wcdp_fee_recovery">
           <span class="wcdp-fee-recovery__body">
             <span></span>
             <span class="wcdp-fee-recovery__body-header">Yes, I want to
               cover the transaction fee.</span>
             <span class="wcdp-fee-recovery__body-cover-checkbox">
               <svg class="wcdp-fee-recovery__body-cover-checkbox--svg"
                    viewBox="0 0 12 10"><polyline points="1.5 6 4.5 9 10.5 1">
               </polyline></svg>
             </span>
           </span>
         </label>
       </th>
     </tr>

   The plugin already draws its own checkbox using a real <span> box + inline
   SVG checkmark (not a generated ::after tick) — the native input is a
   sibling of .wcdp-fee-recovery__body inside the same <label>, so CSS can
   target the visible box/svg via the :checked sibling combinator.
   The .wcdp-fee-optin / .fee-covering-wrapper / #covering_transaction_fee
   selectors in the original draft do not exist anywhere in this plugin and
   have been replaced below.
   -------------------------------------------------------------------------- */
body.woocommerce-checkout tr.wcdp-fee-recovery-row {
  background: var(--gfch-mint);
}

body.woocommerce-checkout tr.wcdp-fee-recovery-row th {
  border-bottom: var(--border-width) solid var(--green-100);
  padding: var(--space-4);
}

body.woocommerce-checkout label.wcdp-fee-recovery {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  color: var(--text-body);
}

/* Native checkbox stays in the DOM/tab order but visually hidden — the
   plugin's own span+svg is the visible control. */
body.woocommerce-checkout input.wcdp-fee-recovery__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.woocommerce-checkout .wcdp-fee-recovery__body {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* FIX (2026-07-24): the plugin's own default CSS still applies
     border:2px solid var(--wcdp-main-2); border-radius:5px; min-height:50px
     to this element (we only overrode display/align-items/gap above), and
     since it doesn't stretch full width, that border rendered as a tight
     green pill nested inside the wider mint-tinted .wcdp-fee-recovery-row
     background — a redundant box-in-box look. One card (the mint row) is
     enough; strip the plugin's inner border/box entirely. */
  width: 100%;
  border: none;
  border-radius: 0;
  min-height: auto;
  overflow: visible;
  background: transparent;
}

body.woocommerce-checkout .wcdp-fee-recovery__body-header {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-body);
  /* FIX (2026-07-24): the plugin's own CSS positions
     .wcdp-fee-recovery__body-cover-checkbox with position:absolute;
     top:10px;left:10px — that beats our earlier display:inline-flex
     override (specificity), so the checkbox still renders on top of this
     text. Verified live via getComputedStyle: checkbox box is 18-20px wide
     starting at the same x-origin as this header. Reserve room for it
     instead of fighting the plugin's positioning. */
  display: block;
  padding-left: 30px;
}

/* Visible checkbox box (unchecked state) */
body.woocommerce-checkout .wcdp-fee-recovery__body-cover-checkbox {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: var(--border-width-strong) solid var(--green-700);
  border-radius: var(--radius-sm);
  background: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}

/* Checkmark svg — hidden until :checked */
body.woocommerce-checkout .wcdp-fee-recovery__body-cover-checkbox--svg {
  width: 12px;
  height: 10px;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-standard);
}

body.woocommerce-checkout .wcdp-fee-recovery__body-cover-checkbox--svg polyline {
  fill: none;
  stroke: var(--white);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Checked state — input precedes .wcdp-fee-recovery__body as a sibling
   inside the same label, so a plain sibling combinator reaches both the
   box and the svg. */
body.woocommerce-checkout input.wcdp-fee-recovery__input:checked ~ .wcdp-fee-recovery__body .wcdp-fee-recovery__body-cover-checkbox {
  background: var(--gfch-green);
  border-color: var(--gfch-green);
}

body.woocommerce-checkout input.wcdp-fee-recovery__input:checked ~ .wcdp-fee-recovery__body .wcdp-fee-recovery__body-cover-checkbox--svg {
  opacity: 1;
}

body.woocommerce-checkout input.wcdp-fee-recovery__input:focus-visible ~ .wcdp-fee-recovery__body .wcdp-fee-recovery__body-cover-checkbox {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   6. CHECKOUT PAYMENT CARD CONTAINER — /checkout/ only
   Verified live (2026-07-24): <div id="payment" class="woocommerce-checkout-payment">
   appears on /checkout/ with this exact class combination. (On order-pay,
   the same #payment div renders WITHOUT the woocommerce-checkout-payment
   class — see section 7, which has its own bare-#payment rule for that page.)
   -------------------------------------------------------------------------- */
body.woocommerce-checkout #payment.woocommerce-checkout-payment {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

/* WooCommerce core ships a ::before triangle pointer on the active payment
   box — neutralize it so it doesn't clash with the new card surface. */
body.woocommerce-checkout #payment.woocommerce-checkout-payment ul.payment_methods li .payment_box::before {
  display: none;
}

/* #place_order is already on-brand per the brief — no color/shape changes,
   just confirm it has breathing room now that its container is a Card. */
body.woocommerce-checkout #payment.woocommerce-checkout-payment .form-row.place-order {
  margin-top: var(--space-4);
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   7. ORDER-PAY SUMMARY CARD — /checkout/order-pay/<id>/?pay_for_order=true&key=...
   CORRECTED from the design agent's draft, which flagged this whole section
   as unverified. Reached live (2026-07-24) via the two pre-existing pending
   test orders (#5307/#5308, cleaned up in task 3): WooCommerce gates guest
   order-pay behind an email-verification step (matching the order's
   billing email) before rendering the review form — that's why a plain
   crawl never saw it.

   Real body class: body.woocommerce-checkout.woocommerce-page.woocommerce-order-pay
   (order-pay carries ALL THREE classes, not a separate template).
   Real markup: <form id="order_review" method="post"><table class="shop_table">
   — there is NO wrapping ".woocommerce-order-pay" div and NO
   "table.order_details" class (both guessed in the original draft and
   replaced below). The payment methods list and #payment div reuse the same
   markup as /checkout/, EXCEPT #payment has no "woocommerce-checkout-payment"
   class on this template, so it needs its own selector, not the section-6 one.
   -------------------------------------------------------------------------- */
body.woocommerce-order-pay #order_review {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  max-width: var(--container-narrow);
  margin: var(--space-6) auto;
}

body.woocommerce-order-pay table.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text-body);
}

body.woocommerce-order-pay table.shop_table th,
body.woocommerce-order-pay table.shop_table td {
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--border-subtle);
  text-align: left;
}

body.woocommerce-order-pay table.shop_table thead th {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

/* #payment on order-pay has no .woocommerce-checkout-payment class (see
   note above) — same card treatment as section 6, targeted directly. */
body.woocommerce-order-pay #payment {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  margin-top: var(--space-5);
}

body.woocommerce-order-pay #payment ul.payment_methods li .payment_box::before {
  display: none;
}

/* --------------------------------------------------------------------------
   7b. ORDER-PAY DONATION SUMMARY — the actual visible widget
   CORRECTED again (2026-07-24, live browser DOM inspection, not curl): the
   "DONATION NUMBER / DATE / TOTAL / PAYMENT METHOD" summary is NOT
   #order_review/table.shop_table (section 7 above styles a real but
   visually-secondary element) — it's WooCommerce's standard order-details
   list, confirmed via live outerHTML dump:
     <div class="woocommerce">
       <ul class="order_details">
         <li class="order">Donation number: <strong>5314</strong></li>
         <li class="date">Date: <strong>July 24, 2026</strong></li>
         <li class="total">Total: <strong>$10</strong></li>
         <li class="method">Payment method: <strong>Credit Card</strong></li>
       </ul>
       <p class="loading-payment-text">Loading payment method, please wait...</p>
     </div>
   This was previously bare on the page background with no card treatment.
   -------------------------------------------------------------------------- */
body.woocommerce-order-pay .woocommerce ul.order_details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-6);
  list-style: none;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  max-width: var(--container-narrow);
  margin: var(--space-6) auto;
}

body.woocommerce-order-pay .woocommerce ul.order_details li {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-xs, var(--fs-sm));
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-muted);
}

body.woocommerce-order-pay .woocommerce ul.order_details li strong {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  text-transform: none;
  letter-spacing: normal;
  color: var(--gfch-navy);
}

/* On-brand loading state for the pre-modal "Loading payment method..." line.
   Real class confirmed live (2026-07-24, browser DOM inspection):
   <p class="loading-payment-text">. Never style the modal iframe itself —
   cross-origin, PCI scope, out of bounds. */
body.woocommerce-order-pay p.loading-payment-text,
body.woocommerce-order-pay .payment_method_woo_mpgs .payment-loading,
body.woocommerce-order-pay .woo-mpgs-loading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: var(--space-4) 0;
}

/* Dim the page chrome behind the hosted payment modal without touching the
   modal's own iframe/contents. Same caveat as above: unverified live. */
body.woocommerce-order-pay .mpgs-modal-backdrop,
body.woocommerce-order-pay .payment-modal-backdrop {
  background: rgba(15, 43, 76, 0.45); /* --gfch-navy at 45% */
}

/* --------------------------------------------------------------------------
   8. WCDP SECTION DIVIDER (contribution widget → Donor details)
   Confirmed live (2026-07-24) via browser DOM inspection: the visible
   "horizontal line with a downward chevron" between the contribution
   amount widget and the checkout form is a single inline SVG,
   `svg.wcdp-divider-arrow` (the sibling `.wcdp-divider` div is just an
   invisible 1em spacer — height:1em;clear:both, no paint). The arrow path
   and both gradient line segments all reference one CSS custom property,
   `var(--wcdp-controls)`, which the plugin hardcodes to plain black via an
   inline <style>:root{...} block it injects per-page. Overriding that
   property on a closer DOM ancestor (below, not :root) cascades down into
   the SVG's fill/stop-color without touching the SVG markup itself or
   fighting the plugin's own inline block. Recolored to brand blue instead
   of removing it — it does real work (visually separating the two form
   sections) and just needed to stop looking like unstyled plugin default. */
body.woocommerce-checkout .wc-donation-platform {
  --wcdp-controls: var(--gfch-blue);
}