/* Donate, thank-you and test-checkout pages. Uses the site tokens from static/site.css; logical properties only. */

.donate-lede { font-size: 1.1rem; max-inline-size: 40rem; }

.donate-test-note {
  border-inline-start: 4px solid var(--banner-bg);
  background: var(--surface);
  padding: var(--space-2) var(--space-3);
}

.donate-form { max-inline-size: 36rem; display: grid; gap: var(--space-4); margin-block-start: var(--space-4); }

.donate-fieldset { border: 0; margin: 0; padding: 0; }
.donate-fieldset legend { font-weight: 700; font-size: 1.1rem; margin-block-end: var(--space-2); padding: 0; }

.choice-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  margin: 0;
  cursor: pointer;
}
.choice-row .choice {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space-2) var(--space-3);
  min-block-size: 2.75rem;
}
.choice-row .choice:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.choice-amount { min-inline-size: 4.5rem; justify-content: center; }
.choice input { inline-size: 1.15rem; block-size: 1.15rem; margin: 0; accent-color: var(--accent); }

.other-label { margin-block-start: var(--space-3); }
.dollar-input { display: inline-flex; align-items: center; gap: var(--space-1); }
.dollar-input input { inline-size: 9rem; }

.donate-field select { inline-size: 100%; }

.hint { color: var(--muted); font-size: 0.95rem; margin-block: var(--space-1) 0; }

.pay-buttons { display: flex; flex-direction: column; gap: var(--space-2); }
.pay-buttons .button { inline-size: 100%; min-block-size: 3rem; font-size: 1.05rem; }

.form-errors, .field-error { color: var(--text); border-inline-start: 4px solid #b3261e; padding-inline-start: var(--space-2); }
.form-errors ul, .field-error ul { margin: 0; padding-inline-start: var(--space-3); }

.thanks-card { max-inline-size: 40rem; }

@media (min-width: 40rem) {
  .pay-buttons { flex-direction: row; }
  .pay-buttons .button { inline-size: auto; }
}