/* Every value is a --gp-* custom property with a neutral fallback. Marketing overrides these in
   Beaver Builder or the theme; nothing here should need editing for a visual change. */
.gp-mgc {
  --gp-accent: #0E7C86;
  --gp-accent-tint: #E6F2F3;
  --gp-text: #1E2228;
  --gp-muted: #7A8399;
  --gp-border: #D9DCE1;
  --gp-radius: 8px;
  --gp-gap: 12px;
  color: var(--gp-text);
  /* A white card, not a transparent block dropped onto Marketing's page background (Jason,
     2026-08-31: matches the boxed look of the existing Donately widget on this site). */
  background: #fff;
  padding: 24px;
  border-radius: var(--gp-radius);
  box-shadow: 0 1px 4px rgba(30, 34, 40, 0.12);
}
.gp-mgc__referral { font-weight: 600; }
.gp-mgc__error { border-left: 4px solid #C62828; padding-left: var(--gp-gap); }
.gp-mgc__divider { border: 0; border-top: 1px solid var(--gp-border); margin: var(--gp-gap) 0; }
.gp-mgc__tiers { border: 0; margin: 0; padding: 0; }
/* Defensive reset -- a bare <legend> is exactly the kind of bare element Marketing's theme is
   likely to have its own default styling for (a border-bottom is a common theme pattern), which
   would look like a second, unintended divider directly under the heading. */
.gp-mgc__tiers legend { border: 0; margin: 0; padding: 0; }
.gp-mgc__option { display: flex; align-items: baseline; gap: var(--gp-gap); margin-bottom: var(--gp-gap); }
.gp-mgc__option label { display: flex; flex-wrap: wrap; gap: 4px var(--gp-gap); cursor: pointer; }

/* Three tier boxes in a row; the custom-amount box is a deliberate fourth row below them, not a
   fourth column (Jason, 2026-08-31), so it gets its own block rather than joining this grid. */
.gp-mgc__amounts-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gp-gap);
  margin-bottom: var(--gp-gap);
}
.gp-mgc__amount-box {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 16px 8px; border: 2px solid var(--gp-border); border-radius: var(--gp-radius);
  cursor: pointer; text-align: center;
}
/* The native radio stays in the DOM (keyboard/AT operable) but is visually replaced by the box's
   own border/background state below -- there is no second, decorative control to keep in sync. */
.gp-mgc__amount-box input[type="radio"] {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
}
.gp-mgc__amount-box:has(input:checked) {
  border-color: var(--gp-accent); background: var(--gp-accent-tint);
}
.gp-mgc__amount-box:has(input:focus-visible) { outline: 3px solid var(--gp-accent); outline-offset: 2px; }
.gp-mgc__amount-name { font-weight: 600; }
.gp-mgc__amount-value { color: var(--gp-muted); }
.gp-mgc__amount-box--custom {
  width: 100%; flex-direction: row; justify-content: center; align-items: center; gap: var(--gp-gap);
}
.gp-mgc__custom-input {
  display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius); padding: 4px 8px;
}
.gp-mgc__custom-prefix { color: var(--gp-muted); }
.gp-mgc__custom-input input {
  width: 6em; border: 0; font: inherit; color: inherit; padding: 4px 0;
}
/* Its own input, not the box's radio -- typing must not toggle the box's checked state through a
   focus-visible outline change while the donor is still composing a value. */
.gp-mgc__custom-input input:focus-visible { outline: none; }
/* Free number entry only -- no up/down stepper (Jason, 2026-08-31). type="number" is kept for the
   numeric keypad on mobile and native min/max enforcement; only the spin-button UI is suppressed. */
.gp-mgc__custom-input input::-webkit-inner-spin-button,
.gp-mgc__custom-input input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.gp-mgc__custom-input input[type="number"] { -moz-appearance: textfield; }

.gp-mgc__inline-error {
  display: block; color: #C62828; font-size: 0.875em; margin-top: 4px;
}

/* Compact on purpose (Jason, 2026-08-31): a fine-print disclaimer, not body copy. */
.gp-mgc__recurring-disclosure { color: var(--gp-muted); font-size: 0.75em; line-height: 1.3; }

.gp-mgc__email { align-items: center; }
.gp-mgc__required { color: #C62828; }
.gp-mgc__email input {
  border: 1px solid var(--gp-border); border-radius: var(--gp-radius); padding: 8px 12px;
  font: inherit; flex: 1; min-width: 0;
}

.gp-mgc__submit {
  display: block; margin: 0 auto;
  background: var(--gp-accent); color: #fff; border: 0;
  border-radius: var(--gp-radius); padding: 12px 20px; font: inherit; cursor: pointer;
}
/* Never remove this. Keyboard users have no other indication of position. */
.gp-mgc :focus-visible { outline: 3px solid var(--gp-accent); outline-offset: 2px; }

/* Stripe Embedded Checkout mounts inside .gp-mgc__modal-panel via gp-mgc.js. The donor never
   leaves givepower.org (ADR-0032 amended 2026-08-31). Fixed positioning + a body scroll-lock class
   (below) keeps the donor's place on the page intact if they close before completing. */
.gp-mgc__modal { position: fixed; inset: 0; z-index: 100000; }
.gp-mgc__modal[hidden] { display: none; }
.gp-mgc__modal-backdrop {
  position: absolute; inset: 0; background: rgba(30, 34, 40, 0.6);
}
.gp-mgc__modal-panel {
  position: relative; margin: 5vh auto; max-width: 500px; max-height: 90vh;
  overflow-y: auto; background: #fff; border-radius: var(--gp-radius);
  padding: var(--gp-gap);
}
.gp-mgc__modal-close {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  background: transparent; border: 0; font-size: 1.5rem; line-height: 1;
  cursor: pointer; color: var(--gp-muted); padding: 8px;
}
.gp-mgc__confirmation { padding: var(--gp-gap) 0; text-align: center; }
body.gp-mgc__no-scroll { overflow: hidden; }