.wn-donation-form {
  --wn-teal: #559b96;
  --wn-orange: #ef6238;
  --wn-pink: #dc397a;
  --wn-violet: #292526;
  --wn-violet-soft: #5a426f;
  --wn-card: #fff;
  --wn-muted: #756e69;
  --wn-border: rgba(41, 37, 38, 0.15);
  --wn-radius: 0.875rem;
  background: linear-gradient(135deg, #f8f7f7 0%, #f1f9f8 50%, #fff5f0 100%);
  border-radius: 2rem;
  box-sizing: border-box;
  color: var(--wn-violet);
  display: grid;
  gap: 2rem;
  margin-inline: auto;
  max-width: 48rem;
  padding: clamp(1.25rem, 4vw, 3rem);
  width: 100%;
}

.wn-donation-form *,
.wn-donation-form *::before,
.wn-donation-form *::after {
  box-sizing: border-box;
}

.wn-honeypot {
  height: 1px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.wn-form-intro {
  margin-inline: auto;
  max-width: 38rem;
  text-align: center;
}

.wn-form-icon {
  align-items: center;
  background: var(--wn-pink);
  border-radius: 1rem;
  box-shadow: 0 10px 20px -10px rgba(220, 57, 122, 0.7);
  color: #fff;
  display: flex;
  height: 3.5rem;
  justify-content: center;
  margin: 0 auto 1rem;
  width: 3.5rem;
}

.wn-form-icon svg {
  height: 1.75rem;
  width: 1.75rem;
}

.wn-form-intro h2 {
  color: var(--wn-violet);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0;
}

.wn-form-intro p {
  color: var(--wn-muted);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0.75rem 0 0;
}

.wn-section {
  border: 0;
  margin: 0;
  min-inline-size: 0;
  padding: 0;
}

.wn-section > legend {
  align-items: baseline;
  color: var(--wn-violet);
  display: flex;
  float: left;
  gap: 1rem;
  justify-content: space-between;
  margin: 0 0 1rem;
  padding: 0;
  width: 100%;
}

.wn-section-title {
  color: var(--wn-violet);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
}

.wn-required-note,
.wn-required-indicator {
  color: var(--wn-pink);
}

.wn-required-note {
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.wn-required-indicator {
  margin-left: 0.125rem;
}

.wn-suggested {
  clear: both;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 0.75rem;
}

.wn-amount-card {
  --wn-card-accent: var(--wn-orange);
  background: var(--wn-card);
  border: 2px solid var(--wn-border);
  border-radius: var(--wn-radius);
  color: var(--wn-violet);
  cursor: pointer;
  font: inherit;
  position: relative;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.wn-amount-card--1 {
  --wn-card-accent: var(--wn-teal);
}

.wn-amount-card--2 {
  --wn-card-accent: var(--wn-orange);
}

.wn-amount-card--3 {
  --wn-card-accent: var(--wn-pink);
}

.wn-amount-card--custom {
  --wn-card-accent: var(--wn-violet-soft);
}

.wn-amount-card:hover,
.wn-amount-card:focus-within,
.wn-amount-btn:focus-visible {
  border-color: var(--wn-card-accent);
  box-shadow: 0 8px 24px -14px var(--wn-card-accent);
}

.wn-amount-btn:focus-visible {
  outline: 3px solid rgba(85, 155, 150, 0.3);
  outline-offset: 2px;
}

.wn-amount-card[data-state="checked"] {
  background-color: var(--wn-card);
  border-color: var(--wn-card-accent);
  box-shadow: 0 8px 24px -12px var(--wn-card-accent);
  transform: translateY(-2px);
}

@supports (background: color-mix(in srgb, red, white)) {
  .wn-amount-card[data-state="checked"] {
    background-color: color-mix(in srgb, var(--wn-card-accent) 8%, var(--wn-card));
  }
}

.wn-amount-btn {
  align-items: flex-start;
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 12rem;
  padding: 1.25rem;
  text-align: left;
  width: 100%;
}

.wn-amount-radio {
  align-items: center;
  background: transparent;
  border: 2px solid var(--wn-card-accent);
  border-radius: 50%;
  display: flex;
  height: 1.5rem;
  justify-content: center;
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 1.5rem;
}

.wn-amount-radio-indicator {
  align-items: center;
  background: var(--wn-card-accent);
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 0.6rem;
  font-weight: 800;
  height: 0.85rem;
  justify-content: center;
  line-height: 1;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s ease, transform 0.2s ease;
  width: 0.85rem;
}

.wn-amount-card[data-state="checked"] .wn-amount-radio-indicator {
  opacity: 1;
  transform: scale(1);
}

.wn-amount-value {
  color: var(--wn-violet);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  padding-right: 2rem;
}

.wn-amount-description {
  color: var(--wn-muted);
  font-size: 0.875rem;
  line-height: 1.55;
}

.wn-custom {
  clear: both;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.25rem;
}

.wn-custom-title {
  color: var(--wn-violet);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  padding-right: 2rem;
}

.wn-custom-input-row {
  align-items: center;
  display: flex;
  gap: 0.65rem;
}

.wn-donation-form input[type="text"],
.wn-donation-form input[type="email"],
.wn-donation-form input[type="number"] {
  appearance: none;
  background: #fff;
  border: 1px solid var(--wn-border);
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(41, 37, 38, 0.05);
  color: var(--wn-violet);
  font: inherit;
  height: 2.75rem;
  line-height: 1.4;
  max-width: 100%;
  padding: 0.6rem 0.75rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

.wn-donation-form input::placeholder {
  color: #968f8a;
  opacity: 1;
}

.wn-donation-form input:focus {
  border-color: var(--wn-teal);
  box-shadow: 0 0 0 3px rgba(85, 155, 150, 0.18);
  outline: 0;
}

.wn-custom .wn-amount-input {
  font-size: 1.125rem;
  font-weight: 700;
}

.wn-currency {
  color: var(--wn-violet);
  font-size: 1.125rem;
  font-weight: 700;
}

.wn-section--donor {
  background: var(--wn-card);
  border: 1px solid var(--wn-border);
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(41, 37, 38, 0.08);
  padding: 1.5rem;
}

.wn-section--donor > legend {
  margin-bottom: 1rem;
}

.wn-donor-grid {
  clear: both;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wn-field {
  display: grid;
  gap: 0.5rem;
}

.wn-field--email {
  grid-column: 1 / -1;
}

.wn-field label {
  color: var(--wn-violet);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

.wn-submit-button {
  appearance: none;
  background: var(--wn-orange);
  border: 0;
  border-radius: 0.5rem;
  box-shadow: 0 8px 20px -10px rgba(239, 98, 56, 0.85);
  color: #fff;
  cursor: pointer;
  display: block;
  font: inherit;
  font-size: 1.125rem;
  font-weight: 700;
  min-height: 3.5rem;
  padding: 0.9rem 1.5rem;
  transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  width: 100%;
}

.wn-submit-button:hover {
  box-shadow: 0 10px 24px -10px rgba(239, 98, 56, 0.95);
  filter: brightness(0.96);
  transform: translateY(-1px);
}

.wn-submit-button:focus-visible {
  box-shadow: 0 0 0 4px rgba(239, 98, 56, 0.25);
  outline: 2px solid var(--wn-orange);
  outline-offset: 2px;
}

.wn-submit-button:disabled,
.wn-donation-form[aria-busy="true"] .wn-submit-button {
  cursor: wait;
  opacity: 0.6;
  transform: none;
}

.wn-form-error {
  margin-inline: auto;
  max-width: 48rem;
}

@media (max-width: 680px) {
  .wn-donation-form {
    border-radius: 1.25rem;
    gap: 1.75rem;
  }

  .wn-section > legend {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }

  .wn-suggested,
  .wn-donor-grid {
    grid-template-columns: 1fr;
  }

  .wn-amount-btn {
    min-height: 0;
  }

  .wn-field--email {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wn-amount-card,
  .wn-amount-radio-indicator,
  .wn-submit-button {
    transition: none;
  }
}