:root {
  --primary: #2b2868;
  --muted: #9aa0a6;
  --border: #d9d9e3;
  --error: #c0392b;
}

#donation-form {
  max-width: 520px;
  margin: 40px auto;
  font-family: Arial, sans-serif;
  background: #ffffff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

#donation-form input {
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-sizing: border-box;
  color: var(--primary);
  outline: none;
  margin-bottom: 12px;
}

#donation-form input::placeholder {
  color: var(--muted);
}

#donation-form input:focus {
  border-color: var(--primary);
}

#donation-form input.was-touched:required:invalid {
  border-color: var(--error);
  background: #fff5f5;
}

#donation-form input:required:valid {
  border-color: var(--border);
  background: #ffffff;
}

#donation-form input[type="number"] {
  -moz-appearance: textfield;
}

#donation-form input[type="number"]::-webkit-outer-spin-button,
#donation-form input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#donation-form label {
  font-size: 14px;
  color: var(--primary);
  display: block;
  margin: 10px 0;
}
#stripe-submit {
    cursor: pointer;
    transition: all 0.2s ease;
}

#stripe-submit:hover:not(:disabled) {
    filter: brightness(0.9);
    transform: translateY(-1px);
    color: #ffc414;
}

#stripe-submit:active:not(:disabled) {
    transform: translateY(0);
}

#stripe-submit:disabled {
    cursor: wait;
    opacity: 0.7;
}
#donation-form label input[type="radio"] {
  width: auto;
  margin-right: 8px;
  margin-bottom: 0;
}

#payment-element {
  margin: 20px 0;
}

#stripe-submit {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  cursor: pointer;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  margin-top: 10px;
}

#stripe-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#paypal-area {
  margin-top: 18px;
}

#paypal-button-container {
  margin-top: 10px;
}
.amount-group {
    position: relative;
    margin-bottom: 12px;
}

.amount-group input {
    margin-bottom: 0 !important;
    padding-left: 25px !important;
}

.amount-group .currency {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa0a6;
    font-size: 15px;
    pointer-events: none;
    z-index: 2;
}
.amount-group .cents {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa0a6;
    pointer-events: none;
}

.amount-group input {
    padding-left: 38px;
    padding-right: 42px;
}
.payment-methods {
    display: flex;
    gap: 24px;
    margin: 18px 0;
}

.payment-methods label {
    display: flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
}

.payment-methods input[type="radio"] {
    margin-right: 8px;
}

@media (max-width: 640px) {
    .payment-methods {
        display: block;
    }

    .payment-methods label {
        margin-bottom: 10px;
    }
}