/* DTTASA website giving (17 October 2026): the pieces the Donate and Project New Dawn forms share. The monthly
   agreement tick, the fee line, and the result card after Paystack in its four honest states. Uses each page's own
   colours (scoped variables of #dtdonate and #pnd) with the same values as fallbacks. */

.giving-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  border: 1.5px solid rgba(4,80,30,0.22);
  border-radius: 12px;
  background: rgba(201,169,97,0.08);
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(0,0,0,0.82);
  cursor: pointer;
}
.giving-consent[hidden] { display: none; }
.giving-consent input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--green-deep, #04501e);
  cursor: pointer;
}
.giving-consent strong { color: var(--green-deep, #04501e); font-weight: 600; }
.giving-consent small { display: block; margin-top: 4px; color: rgba(0,0,0,0.58); font-size: 0.8rem; }

/* The currency choice (the President, 25 October 2026): naira or dollars, on the amount label's row. The chosen one
   is filled like a chosen amount; a dollar amount is paid in naira at today's rate, shown under each dollar button.
   The buttons are named under each page's own ID: each page resets its buttons (#dtdonate button, #pnd button), and that
   reset outranks a shared class rule (the 17 October lesson). */
.giving-amount-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.giving-currency {
  display: inline-flex;
  padding: 3px;
  border: 1.5px solid rgba(0,0,0,0.12);
  border-radius: 999px;
  background: var(--paper, #fff);
}
#dtdonate .giving-currency-opt, #pnd .giving-currency-opt {
  min-height: 36px;
  min-width: 72px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  color: rgba(0,0,0,0.62);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
#dtdonate .giving-currency-opt:hover, #pnd .giving-currency-opt:hover { color: var(--green-deep, #04501e); }
#dtdonate .giving-currency-opt[aria-checked="true"], #pnd .giving-currency-opt[aria-checked="true"] { background: var(--green-deep, #04501e); color: var(--paper, #fff); }
#dtdonate .giving-currency-opt:focus-visible, #pnd .giving-currency-opt:focus-visible { outline: 2px solid var(--green-bright, #43b14b); outline-offset: 2px; }
.giving-preset-ngn {
  display: block;
  margin-top: 3px;
  font-size: 0.72rem;
  font-weight: 500;
  opacity: 0.72;
}
.giving-preset-ngn:empty { display: none; }
.giving-usd-note {
  margin: -4px 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(4,80,30,0.06);
  font-size: 0.84rem;
  line-height: 1.5;
  color: rgba(0,0,0,0.72);
}
.giving-usd-note[hidden] { display: none; }
.giving-usd-note strong { color: var(--green-deep, #04501e); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { #dtdonate .giving-currency-opt, #pnd .giving-currency-opt { transition: none; } }

.giving-fee {
  margin: -4px 0 14px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(0,0,0,0.58);
  text-align: center;
}

/* The result card, in place of the form after Paystack */
/* The answer sits in the middle of the card the form filled, not at its top. */
.giving-showing-result { display: flex; flex-direction: column; justify-content: center; }
.giving-result { text-align: center; padding: 18px 0 6px; }
.giving-result h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 1.45rem;
  line-height: 1.25;
  color: var(--green-deep, #04501e);
  margin: 0 0 14px;
}
.giving-result p {
  font-size: 0.97rem;
  line-height: 1.65;
  color: rgba(0,0,0,0.72);
  margin: 0 0 10px;
}
.giving-result p strong { color: rgba(0,0,0,0.88); }
.giving-result .giving-help { font-size: 0.86rem; color: rgba(0,0,0,0.5); margin-top: 16px; }
.giving-result .giving-help a { color: var(--green-deep, #04501e); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.giving-mark {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--paper, #faf8f3);
  animation: giving-pop 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.giving-mark-ok { background: var(--green-deep, #04501e); }
.giving-mark-no { background: #b42318; }
.giving-mark-wait { background: var(--gold, #c9a961); color: #2b2214; }
.giving-mark-spin { background: rgba(4,80,30,0.08); animation: none; }
.giving-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid rgba(4,80,30,0.18);
  border-top-color: var(--green-deep, #04501e);
  border-radius: 50%;
  animation: giving-spin 0.8s linear infinite;
}
/* The pages reset every button (#dtdonate button, #pnd button), so the button is named under each page too. */
.giving-again, #dtdonate .giving-again, #pnd .giving-again {
  margin-top: 6px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 2px solid var(--green-deep, #04501e);
  background: transparent;
  color: var(--green-deep, #04501e);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.giving-again:hover, #dtdonate .giving-again:hover, #pnd .giving-again:hover { background: var(--green-deep, #04501e); color: var(--paper, #faf8f3); }
.giving-again:active { transform: scale(0.97); }
.giving-again:focus-visible, .giving-consent input:focus-visible { outline: 3px solid var(--gold, #c9a961); outline-offset: 2px; }

@keyframes giving-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes giving-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .giving-mark { animation: none; }
  .giving-spinner { animation-duration: 2.4s; }
}