/* Donation form and payment instructions, measured from the Wix capture. */
main[data-page^="donation"] { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
main[data-page^="donation"] .hero-page h1 { transform: translateY(-11px); }
.donation-wrap { max-width: 1135px; padding: 0 15px; }
.donation-body { padding: 136px 0; }
.donation-intro { margin-bottom: 20px; }
.donation-terms { padding: 0 1px; line-height: 24px; }
.donation-terms h2 { margin: 24px 0; font-size: 22px; line-height: 36px; }
.donation-terms ul { margin: 24px 0; padding-left: 32px; }
.donation-form { margin: 24px 1px 0; }
.donation-form .form-grid { grid-template-columns: 1fr; gap: 24px; }
.donation-form .field label { font-size: 16px; line-height: 22.4px; margin-bottom: 8px; }
.donation-form .field label > [aria-hidden="true"] { margin-left: 3px; }
.donation-form .field input:not([type="hidden"]) { height: 42px; font-size: 16px; border-color: #858585; padding: 9px 12px; text-overflow: ellipsis; }
.donation-form input::placeholder { color: #303036; opacity: 1; text-overflow: ellipsis; }
.donation-form .amount-help { color: var(--footer); font-size: 14px; line-height: 21px; margin-top: 6px; }
.donation-form .signature-pad { position: relative; padding-top: 40px; }
.donation-form .signature-pad canvas { display: block; width: 100%; height: 162px; border: 1px solid #858585; border-radius: 6px; touch-action: none; }
.donation-form .sig-clear { position: absolute; top: 0; left: 0; height: 34px; padding: 4px 12px; background: #fff; border: 1px solid #858585; border-radius: 6px; color: var(--ink); font: 14px/1.4 var(--body); cursor: pointer; }
.donation-form .sig-clear:hover { background: var(--band-grey); }
.donation-checks { grid-template-columns: 1fr; gap: 24px; margin-top: 24px; }
.donation-checks label { align-items: center; gap: 12px; line-height: 24px; }
.donation-checks input { appearance: none; width: 16px; height: 16px; margin: 0; border: 1px solid #858585; border-radius: 0; background: #fff; }
.donation-checks input:checked { appearance: auto; accent-color: #000; }
.donation-form .btn { display: flex; width: 100%; min-height: 44px; margin-top: 24px; }
.donation-form .form-status:empty { display: none; }
.donation-note { margin-top: 68px; border-top: 2px solid #c2c2c2; padding-top: 12px; }
.donation-confirmation-body { padding: 100px 0; line-height: 25.6px; }
.payment-intro { margin-bottom: 39px; }
.payment-link { margin-top: 10px; overflow-wrap: anywhere; }
.payment-qr { width: 242px; height: 290px; object-fit: cover; margin: 18px 0 36px; }
.bank-details { margin-top: 10px; }

@media (max-width: 760px) {
  main[data-page^="donation"] .hero-page { min-height: 250px; border-radius: 0; padding-left: 15px; padding-right: 15px; }
  main[data-page^="donation"] .hero-page h1 { gap: 14px; transform: translateY(-16px); }
  .donation-body, .donation-confirmation-body { padding: 80px 0; }
  .donation-terms h2 { max-width: 310px; font-size: 42px; line-height: 63px; }
  .donation-checks label:first-child > span { max-width: 290px; }
  .donation-note { margin-top: 54px; padding-top: 26px; }
  .payment-intro { margin-bottom: 31px; }
  .payment-link { margin-top: 12px; }
  .payment-qr { width: 200px; height: 240px; margin: 21px 0 32px; }
  .bank-details { margin-top: 13px; }
}

/* Signature tools: Draw (pointer) or Type (keyboard), as the Wix pad offered. */
.donation-form .sig-tools { position: absolute; top: 4px; left: 0; display: flex; gap: 8px; }
.donation-form .sig-mode { font: 14px/1 var(--body); padding: 6px 12px; border: 1px solid #858585; border-radius: 6px; background: #fff; cursor: pointer; }
.donation-form .sig-mode[aria-pressed="true"] { background: #000; color: #fff; border-color: #000; }
.donation-form .sig-type { width: 100%; margin-top: 10px; font: 16px/1.4 var(--body); padding: 9px 12px; border: 1px solid #000; border-radius: 6px; }

/* Clear sits at the right edge so it can never cover the Draw button (review finding 10). */
.donation-form .signature-pad .sig-clear { left: auto; right: 0; top: 4px; }