.wix-donation-app {
  margin: 28px 0 20px;
  border: 1px solid #c7d2cd;
  border-radius: 8px;
  background: #fffdf8;
  box-shadow: 0 18px 48px rgba(48, 70, 94, 0.1);
  overflow: hidden;
}

.donation-panel {
  display: grid;
  gap: 24px;
  padding: 30px;
}

.donation-panel h3,
.donation-panel p {
  margin: 0;
}

.donation-intro {
  display: grid;
  gap: 8px;
}

.payment-methods {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 20px;
  padding: 16px 0;
  border-top: 1px solid #e0e5e2;
  border-bottom: 1px solid #e0e5e2;
}

.payment-methods-label {
  color: #596775;
  font-size: 0.8rem;
  font-weight: 750;
}

.payment-mark {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
}

.payment-mark svg {
  display: block;
  height: 26px;
  width: auto;
}

.payment-mark-paypal svg {
  width: 92px;
}

.payment-mark-venmo svg {
  width: 88px;
}

.donation-form,
.donation-fields,
.donation-field {
  display: grid;
  gap: 12px;
}

.donation-field[hidden] {
  display: none;
}

.donation-legend,
.donation-label {
  color: #30465e;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0;
}

.amount-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.amount-choice {
  min-height: 48px;
  border: 1px solid #aebcb5;
  border-radius: 8px;
  background: #fff;
  color: #30465e;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

.amount-choice:hover,
.amount-choice[aria-checked="true"] {
  border-color: #496b58;
  background: #e3eadb;
}

.amount-choice:focus-visible,
.donation-submit:focus-visible,
.donation-input:focus-visible,
.donation-note:focus-visible {
  outline: 3px solid #62649c;
  outline-offset: 3px;
}

.donation-input,
.donation-note {
  width: 100%;
  border: 1px solid #aebcb5;
  border-radius: 8px;
  background: #fff;
  color: #30465e;
  font: inherit;
}

.donation-input {
  min-height: 48px;
  padding: 10px 12px;
}

.donation-note {
  min-height: 92px;
  padding: 12px;
  resize: vertical;
}

.donation-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #4f5f6c;
  font-size: 0.94rem;
}

.donation-check input {
  margin-top: 5px;
}

.donation-submit {
  min-height: 52px;
  border: 2px solid #496b58;
  border-radius: 8px;
  background: #496b58;
  color: #fffaf0;
  cursor: pointer;
  font: inherit;
  font-weight: 850;
}

.donation-submit:hover {
  background: #355340;
  border-color: #355340;
}

.donation-submit:disabled {
  cursor: wait;
  opacity: 0.6;
}

.donation-help,
.donation-error,
.donation-loading,
.donation-empty {
  color: #596775;
  font-size: 0.86rem;
}

.donation-loading,
.donation-empty {
  padding: 30px;
}

.donation-error {
  color: #9f2f2f;
}

.donation-checkout-note {
  text-align: center;
}

.donation-check-note {
  margin-top: 18px;
}

@media (max-width: 640px) {
  .donation-panel {
    padding: 24px 18px;
  }

  .amount-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .payment-methods-label {
    flex-basis: 100%;
  }
}