/* Project fonts and palette are supplied by TTNW; no external payment assets. */
.site-donation { max-width: 560px; width: 100%; margin: 0; color: inherit; }
.site-donation, .site-donation * { box-sizing: border-box; }
.site-donation__label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.site-donation__row { display: flex; align-items: center; gap: 0; padding: 4px; border: 1px solid var(--site-purple); border-radius: 999px; background: var(--site-white); color: var(--site-purple); }
.site-donation__amount { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 16px; }
.site-donation__amount input { width: 100%; min-width: 0; padding: 8px 0; border: 0; border-radius: 0; background: transparent; color: var(--site-purple); font-family: var(--site-font-heading); font-size: 22px; font-weight: 400; line-height: 1.4; }
.site-donation__amount span { flex-shrink: 0; font-size: 14px; }
.site-donation__button { flex: 0 0 auto; max-width: 65%; min-width: 0; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 999px; padding: 12px 20px; background: var(--site-yellow); color: var(--site-purple); font-family: var(--site-font-heading); font-size: 17px; font-weight: 400; line-height: 1.4; cursor: pointer; overflow-wrap: anywhere; transition: background-color .18s ease, color .18s ease; }
.site-donation__button-label { min-width: 0; }
.site-donation__icon { display: inline-flex; align-items: center; flex: 0 0 40px; width: 40px; height: 24px; }
.site-donation__icon .c-icon__asset { display: block; width: 100%; height: 100%; object-fit: contain; }
.site-donation__button:focus-visible, .site-donation__amount input:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.site-donation__note { margin: 12px 0 0; font-size: 12px; line-height: 1.5; }
.site-donation-section { max-width: 620px; }
.site-donation-section > .c-content { margin-bottom: 24px; }
@media (hover: hover) { .site-donation__button:hover { background: var(--site-primary-hover-bg, var(--site-purple)); color: var(--site-primary-hover-color, var(--site-white)); } }
@media (max-width: 520px) { .site-donation__amount { padding-inline: 10px; } .site-donation__amount input { font-size: 20px; } .site-donation__button { padding-inline: 16px; font-size: 16px; gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .site-donation__button { transition: none; } }