/* Donation form — scoped styles (loaded only on /donate/). */

/* The result panels use the `hidden` attribute, but `.form-status { display:flex }`
   would otherwise override it and show all of them at once. Make `hidden` win. */
[hidden] {
  display: none !important;
}

.donate-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.donate-preset {
  flex: 1 1 auto;
  min-width: 90px;
  padding: 0.6rem 0.75rem;
  font: inherit;
  font-weight: 600;
  color: var(--color-forest, #1f4d3a);
  background: var(--color-white, #fff);
  border: 1.5px solid var(--color-border, #ddd);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.donate-preset:hover {
  border-color: var(--color-forest, #1f4d3a);
}

.donate-preset.is-selected {
  background: var(--color-forest, #1f4d3a);
  border-color: var(--color-forest, #1f4d3a);
  color: #fff;
}

.donate-tier2 {
  margin-top: 1.25rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border, #ddd);
  border-left: 4px solid var(--color-clay, #b4552d);
  border-radius: 8px;
  background: var(--color-sand, #f7f3ec);
}

.donate-tier2 > legend {
  font-weight: 700;
  padding: 0 0.5rem;
  color: var(--color-clay, #b4552d);
}

/* The pending panel uses a neutral tone (no success/error colour). */
#donate-pending {
  color: var(--color-ink, #2b2b2b);
}