/**
 * Donation form styling. Self-contained (does NOT rely on the theme's Tailwind
 * compiler picking up utility classes) but themeable via the theme's CSS token
 * variables. Used by the [ifi_donate] shortcode and the site-wide donate modal.
 */
.ifi-donate {
  --d-pri: var(--color-primary, #022b49);
  --d-sec: var(--color-secondary, #f15b29);
  --d-ink: var(--color-darker, #191919);
  --d-muted: var(--color-dark, #787878);
  --d-line: color-mix(in srgb, var(--color-darker, #191919) 14%, transparent);
  --d-paper: var(--color-light, #f2f2f2);
  --d-serif: var(--font-serif, Georgia, "Times New Roman", serif);
  color: var(--d-ink);
}

.ifi-donate__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .ifi-donate__grid { grid-template-columns: 1.05fr 1fr; gap: 4rem; } }

/* Case for support */
.ifi-donate__lead { max-width: 34rem; }
.ifi-donate__title { margin: 0; font-family: var(--d-serif); font-weight: 700; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); line-height: 1.1; color: var(--d-pri); text-wrap: balance; }
/* Modal: centered heading matching the membership modal (the toggle is the global
   .ifi-toggle component, identical everywhere). */
.ifi-donate__title--modal { text-align: center; margin: 0 0 1.5rem; font-size: clamp(1.875rem, 1.3rem + 2vw, 2.25rem); }
.ifi-donate__intro { margin: 1rem 0 0; font-size: 1rem; line-height: 1.6; color: color-mix(in srgb, var(--d-ink) 75%, transparent); }
.ifi-donate__points { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; font-size: .9rem; line-height: 1.4; }
.ifi-donate__points li { display: flex; align-items: flex-start; gap: .75rem; }
/* Icons may be <i> or converted to <svg> by the theme; color both. */
.ifi-donate__points li > i, .ifi-donate__points li > svg { margin-top: .1rem; width: 1.05em; flex-shrink: 0; color: var(--d-sec); fill: var(--d-sec); }
.ifi-donate__trust { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .75rem; font-weight: 600; color: var(--d-muted); }
.ifi-donate__trust span { display: inline-flex; align-items: center; gap: .4rem; }
.ifi-donate__trust i, .ifi-donate__trust svg { width: 1em; color: var(--d-sec); fill: var(--d-sec); }

/* Form card (inline shortcode only; the modal supplies its own container) */
.ifi-donate__form { background: #fff; border-radius: 14px; padding: 1.5rem; box-shadow: 0 14px 36px -14px rgba(2, 43, 73, .24), 0 2px 6px rgba(2, 43, 73, .06); }
@media (min-width: 640px) { .ifi-donate__form { padding: 2rem; } }

/* Frequency toggle uses the global .ifi-toggle component (assets/css/toggle.css).
   Only its placement is donation-specific. */
.ifi-donate__freq { margin: 0 auto 1.5rem; }

/* Amount chips */
.ifi-donate__legend { display: block; margin-bottom: .75rem; padding: 0; font-size: .875rem; font-weight: 600; color: var(--d-ink); }
.ifi-donate__amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .625rem; }
/* Scoped 3-deep so the amount chips out-specify the theme's global
   `form button { @apply btn-primary }` rule (else clicks don't visibly change). */
.ifi-donate .ifi-donate__amounts .ifi-amt { border: 1px solid var(--d-line); border-radius: 10px; padding: .85rem .5rem; font-family: var(--d-serif); font-size: 1.15rem; font-weight: 700; text-transform: none; letter-spacing: normal; color: var(--d-pri) !important; background: #fff !important; cursor: pointer; transition-property: color, background-color, border-color, box-shadow, opacity, transform; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, .2, 1); }
.ifi-donate .ifi-donate__amounts .ifi-amt:hover { border-color: var(--d-pri); background: color-mix(in srgb, var(--d-pri) 5%, #fff) !important; }
.ifi-donate .ifi-donate__amounts .ifi-amt[aria-pressed="true"] { border-color: var(--d-pri); background: var(--d-pri) !important; color: #fff !important; }
.ifi-donate .ifi-donate__amounts .ifi-amt:focus-visible { outline: 2px solid var(--d-pri); outline-offset: 2px; }

/* Custom amount */
.ifi-donate__custom { position: relative; margin-top: .75rem; }
.ifi-donate__custom-sym { position: absolute; inset: 0 auto 0 0; display: flex; align-items: center; padding-left: 1rem; font-family: var(--d-serif); font-size: 1.1rem; font-weight: 600; color: var(--d-muted); pointer-events: none; }
/* Inputs use the site-wide input skin (inputs.css); only the $-prefix left padding
   is scoped here so the symbol doesn't overlap the amount. */
.ifi-donate .ifi-donate__custom input { padding-left: 2.25rem; }

/* Donor fields */
.ifi-donate__fields { margin-top: 1.25rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .ifi-donate__fields { grid-template-columns: 1fr 1fr; } .ifi-donate__fields .ifi-donate__wide { grid-column: 1 / -1; } }
.ifi-donate .ifi-field { display: block; margin: 0; font-size: .8rem; font-weight: 600; color: var(--d-ink); }
.ifi-donate .ifi-field input, .ifi-donate .ifi-field textarea { margin-top: .375rem; }
.ifi-donate .ifi-field abbr { color: var(--d-sec); text-decoration: none; }
.ifi-donate textarea { min-height: 80px; resize: vertical; }

/* Memo */
.ifi-donate__memo { margin-top: 1rem; }
.ifi-donate__memo summary { display: flex; align-items: center; gap: .5rem; list-style: none; cursor: pointer; font-size: .875rem; font-weight: 600; color: var(--d-sec); }
.ifi-donate__memo summary::-webkit-details-marker { display: none; }
/* + when closed, − when open — drawn via ::before so it doesn't depend on the FA
   icon subset (the theme converts <i> to SVG and drops the fa- classes). */
.ifi-donate__memo summary::before { content: "+"; width: 1em; font-size: 1rem; font-weight: 700; line-height: 1; text-align: center; }
.ifi-donate__memo[open] summary::before { content: "\2212"; }

/* Actions */
.ifi-donate__msg { display: none; margin-top: 1rem; border: 1px solid #fecaca; border-radius: 8px; background: #fef2f2; padding: .5rem .75rem; font-size: .875rem; color: #b91c1c; }
.ifi-donate__msg.is-visible { display: block; }
/* !important on bg/color to defend against the theme's `form button` btn-primary. */
.ifi-donate__submit { margin-top: 1.5rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; padding: .9rem 1.5rem; border: 0; border-radius: 8px; background: var(--d-sec) !important; color: #fff !important; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; cursor: pointer; transition-property: color, background-color, border-color, box-shadow, opacity, transform; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, .2, 1); }
.ifi-donate__submit:hover { background: color-mix(in srgb, var(--d-sec) 90%, #000) !important; }
.ifi-donate__submit:disabled { opacity: .6; cursor: not-allowed; }
.ifi-donate__secure { margin-top: .75rem; display: flex; align-items: center; justify-content: center; gap: .4rem; font-size: .75rem; color: color-mix(in srgb, var(--d-ink) 50%, transparent); }

.ifi-donate .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .ifi-donate .ifi-donate__amounts .ifi-amt, .ifi-donate__freq span, .ifi-donate__memo summary i, .ifi-donate__submit { transition: none !important; }
}