/* NMR WEBSITE R9T - STAGING DONATION UX POLISH
   Additive UI-only styles for /donate/; payment inputs, endpoints and POST names unchanged.
   Existing R9S styles are still loaded first. */

/* The amount spinner implies whole-dollar increments when donors may enter cents.
   Remove decorative arrows, preserving the numeric input, min/max/step and keyboard use. */
.nmr-donations .nmr-stripe-form input[name="custom_amount"] {
  appearance: textfield;
  -moz-appearance: textfield;
  font-variant-numeric: tabular-nums;
}
.nmr-donations .nmr-stripe-form input[name="custom_amount"]::-webkit-outer-spin-button,
.nmr-donations .nmr-stripe-form input[name="custom_amount"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* When the user types a custom amount, the original backend still receives
   the selected radio for safe fallback. Visually mute it, since the custom
   value is the effective donation amount. */
.nmr-donations form.nmr-stripe-form.nmr-r9t-custom-active .nmr-amount-choice input:checked + span,
.nmr-donations form.nmr-stripe-form.nmr-r9t-custom-active .nmr-amount-choice input:checked + span:hover {
  background: #fff;
  border-color: #e5dfeb;
  box-shadow: 0 2px 6px rgba(20,18,50,.02);
  color: var(--nmr-r9r-ink, #273148);
}
.nmr-donations form.nmr-stripe-form.nmr-r9t-custom-active .nmr-amount-choice:hover > span {
  border-color: #ae91d4;
  background: #fcfaff;
}
.nmr-donations form.nmr-stripe-form.nmr-r9t-custom-active .nmr-amount-choice input:focus-visible + span {
  outline: 3px solid #956acf;
  outline-offset: 3px;
}
.nmr-donations form.nmr-stripe-form.nmr-r9t-custom-active .nmr-amount-wrap {
  border-color: var(--nmr-r9r-purple, #6532a3);
  box-shadow: 0 0 0 2px rgba(101,50,163,.08);
  background: #fefcff;
}
.nmr-donations form.nmr-stripe-form.nmr-r9t-custom-active .nmr-amount-wrap:has(input[aria-invalid='true']) {
  border-color: #cf4848;
  box-shadow: none;
  background: #fff;
}

/* A clear, accessible explanation while the custom amount takes precedence. */
.nmr-donations .nmr-r9t-custom-note {
  margin: 9px 0 0;
  padding: 8px 11px;
  border: 1px solid #e8ddf8;
  background: #faf6ff;
  border-radius: 9px;
  color: #53278b;
  font-size: .81rem;
  line-height: 1.4;
  font-weight: 650;
}
.nmr-donations .nmr-r9t-custom-note[hidden] { display: none !important; }
.nmr-donations .nmr-r9t-custom-note::before {
  content: '\2713';
  display: inline-block;
  margin-right: 6px;
  font-weight: 800;
}

/* Slightly more distinct keyboard focus and tap targets. */
.nmr-donations .nmr-card-submit button:focus-visible {
  outline: 3px solid #956acf;
  outline-offset: 4px;
}
.nmr-donations .nmr-amount-choice > span,
.nmr-donations .nmr-frequency label { touch-action: manipulation; }
.nmr-donations .nmr-stripe-form .nmr-r9r-choice-summary {
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .nmr-donations .nmr-payment-layout,
  .nmr-donations .nmr-stripe-card,
  .nmr-donations .nmr-payment-alternatives { min-width: 0; }
  .nmr-donations .nmr-amount-wrap { max-width: 100%; }
  .nmr-donations .nmr-amount-wrap input { font-size: 16px; } /* iOS: prevent zoom */
  .nmr-donations .nmr-bank-form input:not([type='hidden']) { font-size: 16px; }
}
@media (max-width: 390px) {
  .nmr-donations .nmr-donation-card { padding-inline: 16px; }
  .nmr-donations .nmr-amount-presets { gap: 8px; }
  .nmr-donations .nmr-payment-heading { gap: 12px; }
}