/* ============================================================
   USAforIOM — EveryAction Form Theme
   Scope: form controls only (inputs, buttons, fields, checkboxes,
   toggles, step nav, links, errors).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

/* ---------- WordPress environment normalization ----------
   This form is designed against EveryAction's own hosted page. When it's
   embedded in WordPress, the site's theme can leak generic element styles
   into it — hello-elementor's reset.css sets `label { vertical-align: middle }`,
   which knocks the amount buttons and the recurring row out of alignment.
   Reset it so the embedded form renders identically to the hosted one.
   Harmless on EveryAction, where baseline is already the value. */
.ngp-form[data-form-url] label {
  vertical-align: baseline;
}

/* Elementor's global kit styles every <a> (".elementor-kit-N a"), which
   out-ranks the form's own base type scale and made the step-nav links
   taller than on the hosted page. Matching specificity + later load order
   wins against Elementor, while still losing to EveryAction's own more
   specific rules — so the cascade stays identical to the hosted form. */
.ngp-form[data-form-url] a {
  font-size: var(--text-base);
}

/* ---------- Variables ---------- */
:root {
  --blue-primary: #012B9F;
  --blue-deep: #0F007F;
  --red-primary: #C3343C;
  --red-accent: #75001C;
  --yellow-accent: #FFB81C;

  --ink: #121212;
  --text: #252525;
  --text-muted: #5B6472;
  --border: #D8DCE3;
  --surface: #F4F5F7;
  --white: #FFFFFF;

  --font-main: 'Mulish', Arial, Helvetica, sans-serif;
  --text-sm: 0.9375rem;
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: 1.125rem;
  --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(18, 18, 18, 0.08);
  --shadow-md: 0 10px 24px rgba(1, 43, 159, 0.16);
  --ease: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {:where(.ngp-form[data-form-url]).at,
:where(.ngp-form[data-form-url]).at * { transition: none !important; animation: none !important; }

}

/* ---------- Base typography ---------- */
:where(.ngp-form[data-form-url]).at,
:where(.ngp-form[data-form-url]).at * {
  font-family: var(--font-main) !important;
  color: var(--text);
  font-size: var(--text-base);
}
:where(.ngp-form[data-form-url]).at h1,
:where(.ngp-form[data-form-url]).at h2,
:where(.ngp-form[data-form-url]).at h3,
:where(.ngp-form[data-form-url]).at h4,
:where(.ngp-form[data-form-url]).at h5,
:where(.ngp-form[data-form-url]).at h6,
:where(.ngp-form[data-form-url]) .at-inner header.at-title {
  color: var(--ink) !important;
  font-family: var(--font-main) !important;
  font-weight: 800;
  letter-spacing: -0.01em;
}
:where(.ngp-form[data-form-url]) .at-inner header.at-title {
  font-size: var(--text-2xl);
  text-align: center;
  margin-bottom: 4px;
}
:where(.ngp-form[data-form-url]) .at-markup.HeaderHtml h1 { font-size: var(--text-2xl); }
:where(.ngp-form[data-form-url]) .at-markup.HeaderHtml h2 { font-size: var(--text-xl); }
:where(.ngp-form[data-form-url]) .at-markup.HeaderHtml h3,
:where(.ngp-form[data-form-url]) .at-markup.HeaderHtml h4 { font-size: var(--text-lg); }

/* ---------- Section spacing ---------- */
:where(.ngp-form[data-form-url]) .at-fieldset {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* ---------- Step navigation ---------- */
:where(.ngp-form[data-form-url]) ol.at-steps.clearfix,
section :where(.ngp-form[data-form-url]).at .at-steps { background: transparent; }
:where(.ngp-form[data-form-url]) .at-steps a span.step-title,
:where(.ngp-form[data-form-url]) .at-steps b span.step-title {
  color: var(--text-muted);
  font-weight: 600;
  font-size: var(--text-sm);
  transition: color var(--ease);
}
:where(.ngp-form[data-form-url]).at .at-step > a:before,
:where(.ngp-form[data-form-url]).at .at-step > b:before {
  background-color: var(--border);
  color: var(--white);
  transition: background-color var(--ease), transform var(--ease);
}
:where(.ngp-form[data-form-url]).at .at-step.active > :before,
:where(.ngp-form[data-form-url]).at .at-step.active a:before {
  background: var(--blue-primary);
  box-shadow: 0 0 0 4px rgba(1, 43, 159, 0.12);
}
:where(.ngp-form[data-form-url]).at .at-step.active span.step-title,
:where(.ngp-form[data-form-url]).at .at-step.active b span.step-title {
  color: var(--ink);
}
:where(.ngp-form[data-form-url]).at li.at-step.active { border-bottom-color: var(--blue-primary); }
:where(.ngp-form[data-form-url]) li.at-step.valid > :before { background-color: var(--blue-primary); opacity: 0.55; }

/* ---------- Amount selection ---------- */
:where(.ngp-form[data-form-url]) div.at-radio {
  display: block;
}
:where(.ngp-form[data-form-url]) div.at-radios.clearfix {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
:where(.ngp-form[data-form-url]) div.at-radios.clearfix > label.label-amount {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}
:where(.ngp-form[data-form-url]) div.at-radios.clearfix > label.label-amount:nth-child(1) { grid-column: 1; grid-row: 1; }
:where(.ngp-form[data-form-url]) div.at-radios.clearfix > label.label-amount:nth-child(2) { grid-column: 2; grid-row: 1; }
:where(.ngp-form[data-form-url]) div.at-radios.clearfix > label.label-amount:nth-child(3) { grid-column: 3; grid-row: 1; }
:where(.ngp-form[data-form-url]) div.at-radios.clearfix > label.label-amount:nth-child(4) { grid-column: 4; grid-row: 1; }
:where(.ngp-form[data-form-url]) label.label-amount {
  position: relative;
  display: block;
  background-color: var(--surface) !important;
  border: 1.5px solid transparent !important;
  border-radius: var(--radius-md) !important;
  color: var(--ink) !important;
  font-weight: 700;
  text-align: center;
  padding: 14px 12px;
  min-width: 84px;
  transition: background-color var(--ease), color var(--ease),
  box-shadow var(--ease), transform var(--ease);
}
:where(.ngp-form[data-form-url]) label.label-amount > a {
  background-color: transparent !important;
  border: none !important;
  border-radius: inherit !important;
  box-shadow: none !important;
}
:where(.ngp-form[data-form-url]) label.label-amount:hover {
  background-color: #E9EBFB !important;
  transform: translateY(-1px);
}
:where(.ngp-form[data-form-url]) label.label-amount:not(.label-otheramount):has(input[type=radio]:checked) {
  background: linear-gradient(135deg, var(--blue-primary), var(--blue-deep)) !important;
  color: var(--white) !important;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
:where(.ngp-form[data-form-url]) label.label-amount:not(.label-otheramount):has(input[type=radio]:checked)::after {
  content: "✓";
  position: absolute;
  top: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--yellow-accent);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(18, 18, 18, 0.25);
}

/* Custom "Other amount" field  */
:where(.ngp-form[data-form-url]) div.at-radios.clearfix > label.label-amount.label-otheramount {
  grid-column: 1 / -1;
  grid-row: 2;
  background-color: transparent !important;
  border: none !important;
  padding: 0;
  font-size: 0 !important;
}
:where(.ngp-form[data-form-url]) label.label-amount.label-otheramount > a,
:where(.ngp-form[data-form-url]) label.label-amount.label-otheramount input[type=radio]:checked + a {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
:where(.ngp-form[data-form-url]) input.edit-otheramount,
:where(.ngp-form[data-form-url]) label.label-amount input.edit-otheramount:required {
  width: 100% !important;
  background-color: var(--surface) !important;
  border: 1.5px solid transparent !important;
  border-radius: var(--radius-md) !important;
  color: var(--ink) !important;
  font-family: var(--font-main) !important;
  font-size: var(--text-xl) !important;
  font-weight: 400 !important;
  transition: background-color var(--ease), border-color var(--ease);
  padding: 7px 10px 7px 2rem !important;
}
:where(.ngp-form[data-form-url]) input.edit-otheramount:hover,
:where(.ngp-form[data-form-url]) input.edit-otheramount:active,
:where(.ngp-form[data-form-url]) input.edit-otheramount:focus {
  background-color: var(--surface) !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}
:where(.ngp-form[data-form-url]) input.edit-otheramount::placeholder,
:where(.ngp-form[data-form-url]) input.edit-otheramount::-webkit-input-placeholder {
  color: var(--text-muted) !important;
  opacity: 1;
  font-family: var(--font-main) !important;
  font-size: var(--text-xl) !important;
  font-weight: 400 !important;
}
:where(.ngp-form[data-form-url]) span.label-otheramount-prefix { color: var(--text-muted) !important; font-weight: 700; }
:where(.ngp-form[data-form-url]).at form .label-amount input:required:focus {
  font-weight: 700;
  font-size: var(--text-lg);
  font-family: var(--font-main) !important;
}

/* ---------- Recurring: Toggle switch ---------- */
:where(.ngp-form[data-form-url]) .at-recurring {
  align-items: center;
}
:where(.ngp-form[data-form-url]) .at-recurring label {
  line-height: normal;
  margin: 0;
}
:where(.ngp-form[data-form-url]) .at-recurring label.at-check.IsRecurring {
  align-items: center;
  cursor: pointer;
}
:where(.ngp-form[data-form-url]) .at-recurring label.at-check.IsRecurring input[type=checkbox] {
  position: absolute;
  opacity: 0;
  width: 44px;
  height: 24px;
  margin: 0;
  cursor: pointer;
}
:where(.ngp-form[data-form-url]) .at-recurring label.at-check.IsRecurring .at-checkbox-title-container {
  position: relative;
  display: inline-block;
  padding-left: 54px;
  min-height: 24px;
}
:where(.ngp-form[data-form-url]) .at-recurring label.at-check.IsRecurring .at-checkbox-title-container:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: #C7CDD6;
  border: none;
  transition: background-color var(--ease);
}
:where(.ngp-form[data-form-url]) .at-recurring label.at-check.IsRecurring .at-checkbox-title-container:after {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%) !important;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--white);
  opacity: 1 !important;
  box-shadow: 0 1px 3px rgba(18, 18, 18, 0.35);
  transition: transform var(--ease);
}
:where(.ngp-form[data-form-url]) .at-recurring label.at-check.IsRecurring input[type=checkbox]:checked ~ .at-checkbox-title-container:before {
  background: var(--blue-primary);
}
:where(.ngp-form[data-form-url]) .at-recurring label.at-check.IsRecurring input[type=checkbox]:checked ~ .at-checkbox-title-container:after {
  transform: translateY(-50%) translateX(20px) !important;
}
:where(.ngp-form[data-form-url]) .at-recurring span.at-checkbox-title,
:where(.ngp-form[data-form-url]) .at-recurring .at-checkbox-title {
  color: var(--ink) !important;
  font-family: var(--font-main) !important;
  font-weight: 600;
}
:where(.ngp-form[data-form-url]) .at-recurring label.at-select.SelectedFrequency > label,
:where(.ngp-form[data-form-url]) .SelectedFrequency.select-collapse > label { display: none; }
:where(.ngp-form[data-form-url]) .at-recurring label.at-select.SelectedFrequency,
:where(.ngp-form[data-form-url]) .at-recurring label.at-select.SelectedFrequency *,
:where(.ngp-form[data-form-url]) .SelectedFrequency.select-collapse,
:where(.ngp-form[data-form-url]) .SelectedFrequency.select-collapse * {
  color: var(--ink) !important;
  font-family: var(--font-main) !important;
  font-weight: 600;
  text-decoration: none !important;
}

/* ---------- Checkboxes ---------- */
:where(.ngp-form[data-form-url]).at label input[type=checkbox] + span:before {
  border: 1.5px solid var(--border);
  border-radius: 6px;
  transition: background-color var(--ease), border-color var(--ease);
}
:where(.ngp-form[data-form-url]).at label input[type=checkbox]:checked + span:before {
  background-color: var(--blue-primary) !important;
  border-color: var(--blue-primary) !important;
}
:where(.ngp-form[data-form-url]).at label input[type=checkbox]:hover + span:before {
  border-color: var(--blue-primary);
}
:where(.ngp-form[data-form-url]).at input[type=radio] { accent-color: var(--blue-primary); }
:where(.ngp-form[data-form-url]).at .at-checkbox-title,
:where(.ngp-form[data-form-url]).at div.radios label { color: var(--text) !important; }
:where(.ngp-form[data-form-url]) #NVContributionForm2660442-TributeGift { padding-top: 0px !important }

/* ---------- Text inputs / selects (Details, Payment steps) ---------- */
:where(.ngp-form[data-form-url]).at label.at-text input[type=text],
:where(.ngp-form[data-form-url]).at label.at-text input[type=email],
:where(.ngp-form[data-form-url]).at label.at-text input[type=tel],
:where(.ngp-form[data-form-url]).at label.at-select select,
section :where(.ngp-form[data-form-url]).at input[type=text],
section :where(.ngp-form[data-form-url]).at input[type=email],
section :where(.ngp-form[data-form-url]).at input[type=tel],
section :where(.ngp-form[data-form-url]).at input[type=number] {
  background-color: var(--surface) !important;
  border: 1.5px solid transparent !important;
  border-radius: var(--radius-sm);
  color: var(--ink) !important;
  font-family: var(--font-main) !important;
  transition: background-color var(--ease), border-color var(--ease);
  font-size: var(--text-lg);
}
:where(.ngp-form[data-form-url]).at label.at-text input[type=text]:focus,
:where(.ngp-form[data-form-url]).at label.at-text input[type=email]:focus,
:where(.ngp-form[data-form-url]).at label.at-text input[type=tel]:focus,
section :where(.ngp-form[data-form-url]).at input[type=text]:focus,
section :where(.ngp-form[data-form-url]).at input[type=email]:focus,
section :where(.ngp-form[data-form-url]).at input[type=tel]:focus,
section :where(.ngp-form[data-form-url]).at input[type=number]:focus,
:where(.ngp-form[data-form-url]).at input:focus,
:where(.ngp-form[data-form-url]).at select:focus,
:where(.ngp-form[data-form-url]).at button:focus {
  outline: none !important;
  box-shadow: none !important;
}
:where(.ngp-form[data-form-url]).at label.at-text input[type=text]:hover,
:where(.ngp-form[data-form-url]).at label.at-text input[type=email]:hover,
:where(.ngp-form[data-form-url]).at label.at-text input[type=tel]:hover,
section :where(.ngp-form[data-form-url]).at input[type=text]:hover,
section :where(.ngp-form[data-form-url]).at input[type=email]:hover,
section :where(.ngp-form[data-form-url]).at input[type=tel]:hover,
section :where(.ngp-form[data-form-url]).at input[type=number]:hover {
  background-color: #ECEEF2 !important;
}
:where(.ngp-form[data-form-url]).at label.at-text input[type=text]:active,
:where(.ngp-form[data-form-url]).at label.at-text input[type=email]:active,
:where(.ngp-form[data-form-url]).at label.at-text input[type=tel]:active,
div :where(.ngp-form[data-form-url]).at input[type=text]:active,
div :where(.ngp-form[data-form-url]).at input[type=email]:active,
section :where(.ngp-form[data-form-url]).at input[type=tel]:active,
section :where(.ngp-form[data-form-url]).at input[type=number]:active {
  background-color: var(--white) !important;
  border-color: var(--blue-primary) !important;
}
:where(.ngp-form[data-form-url]).at label.at-label,
:where(.ngp-form[data-form-url]).at .at-row label {
  color: var(--text-muted) !important;
  font-weight: 600;
  font-size: var(--text-sm);
}
:where(.ngp-form[data-form-url]).at .at-step.valid>*:before {
  background: var(--yellow-accent) !important;
  color: var(--ink);
}

/* ---------- Buttons ----------
   Typography and shape below are matched to the "Pay with Card" button
   (.at-btn-radio.large) so every primary button reads identically across
   steps: 15px / 500 weight / normal line-height / 4px radius / 12-13px
   vertical padding. Keep these in sync if the payment button changes. */
:where(.ngp-form[data-form-url]) .at-submit.btn-at.btn-at-primary,
:where(.ngp-form[data-form-url]) .at-form-submit .at-submit.btn-at.btn-at-primary,
:where(.ngp-form[data-form-url]) a.nextStep.btn-at-primary,
:where(.ngp-form[data-form-url]) .submitStep.btn-at.btn-at-primary {
  background-color: var(--blue-primary) !important;
  color: var(--white) !important;
  border: none;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 500;
  line-height: normal;
  text-shadow: none !important;
  padding: 12px 24px 13px;
  width: 100%;
  box-shadow: var(--shadow-sm);
  transition: background-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
:where(.ngp-form[data-form-url]) .at-submit.btn-at.btn-at-primary:hover,
:where(.ngp-form[data-form-url]) a.nextStep.btn-at-primary:hover,
:where(.ngp-form[data-form-url]) .submitStep.btn-at.btn-at-primary:hover {
  background-color: var(--blue-deep) !important;
  box-shadow: var(--shadow-md);
  color: var(--white) !important;
}
:where(.ngp-form[data-form-url]) .at-submit.btn-at.btn-at-primary:active,
:where(.ngp-form[data-form-url]) a.nextStep.btn-at-primary:active,
:where(.ngp-form[data-form-url]) .submitStep.btn-at.btn-at-primary:active {
  transform: scale(0.99);
}
:where(.ngp-form[data-form-url]) a.btn-at-link,
:where(.ngp-form[data-form-url]) a.prevStep.btn-at-link {
  color: var(--blue-primary) !important;
  font-weight: 600;
}
:where(.ngp-form[data-form-url]) .at-btn-radio,
:where(.ngp-form[data-form-url]) label.at-btn-radio.large {
  background-color: var(--blue-primary) !important;
  color: var(--white) !important;
  border: none !important;
  text-shadow: none !important;
  width: 100%;
  box-shadow: var(--shadow-sm);
  transition: background-color var(--ease), box-shadow var(--ease), transform var(--ease);
}

/* ---------- Links ---------- */
:where(.ngp-form[data-form-url]).at p a,
:where(.ngp-form[data-form-url]).at a {
  color: var(--blue-primary) !important;
  text-decoration: none;
  transition: color var(--ease);
}
:where(.ngp-form[data-form-url]).at a:hover,
:where(.ngp-form[data-form-url]).at a:focus-visible {
  color: var(--blue-deep) !important;
  text-decoration: underline;
}

/* ---------- Error / validation states ---------- */
:where(.ngp-form[data-form-url]).at .error {
  font-size: .85rem !important;
}
:where(.ngp-form[data-form-url]).at .error input:required,
:where(.ngp-form[data-form-url]).at .error select:required,
section :where(.ngp-form[data-form-url]).at .error input[type=text]:required {
  background-color: #FDF1F2 !important;
  border-color: var(--red-primary) !important;
  color: var(--red-primary) !important;
}
:where(.ngp-form[data-form-url]).at .error small.error,
:where(.ngp-form[data-form-url]).at label.error,
:where(.ngp-form[data-form-url]) .at-row.at-row .error {
  color: var(--red-primary) !important;
  font-weight: 600;
}