/* ---- src/styles/core.css ---- */
/* goodpower-core.css -- shared styles for all GP form templates */

/* -- Float labels -------------------------------------------- */
.en__field label { transition: all 0.2s ease; }
.en__field.populated label,
.en__field.focused  label {
  font-size: 0.72em;
}

/* -- Custom select ------------------------------------------- */
/* Template CSS often sets z-index on .en__field__element and .en__field--select,
   creating stacking contexts that trap the .select-items dropdown panel.
   - z-index: auto on the element removes its stacking context so select-items
     z-index propagates to the parent field level.
   - :has(.select-arrow-active) bumps the open field above its siblings so
     the panel can overlap the next field. */
.en__field__element--select { position: relative; z-index: auto !important; }
.en__field--select:has(.select-arrow-active) { z-index: 9999 !important; }
.select-selected {
  display: flex; align-items: center; cursor: pointer;
  padding: 0.6em 1em; border: 1px solid #ccc; background: #fff;
  user-select: none;
}
.select-selected.select-arrow-active::after {
  transform: rotate(225deg) translateY(2px);
  border-color: #0d3043;
}
.select-selected::after {
  content: '';
  width: 4px;
  height: 4px;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  transform: rotate(45deg) translateY(-2px);
  margin-left: auto;
  flex-shrink: 0;
}
.select-items {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 99;
  border: 1px solid #ccc; background: #fff; max-height: 220px; overflow-y: auto;
}
.select-items.select-hide { display: none; }
.select-items div { padding: 0.5em 1em; cursor: pointer; }
.select-items div:hover { background: var(--gp-primary, #2b7a4b); color: #fff; }
.select-items .same-as-selected { font-weight: 600; }

/* -- Popup mobile CTA button --------------------------------- */
.popup-btn {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9000;
  background: var(--gp-primary, #2b7a4b); color: #fff;
  text-align: center; padding: 1em;
  font-weight: 700; font-size: 1em; cursor: pointer;
}
@media (min-width: 993px) { .popup-btn { display: none !important; } }

/* Source copy block for popup button text — JS reads text into .popup-btn span */
.mobile_popup_text { display: none; }
.ui-sortable .mobile_popup_text { display: block; }

/* -- Hidden address fields ----------------------------------- */
.en__field--hidden { display: none !important; }

/* -- Cross-campaign hidden data fields ----------------------- */
/* Fields used for data capture / split-test assignment that    */
/* must never be visible to supporters on any brand.            */
.en__field--2026-november-vreg-split-test-question { display: none !important; }
.en__field--survey-source-page-id { display: none !important; }

/* -- NeverBounce feedback ------------------------------------ */
.nb-feedback { display: none; color: #c00; margin-top: 4px; font-size: 0.85em; }
.nb-feedback.showerror { display: block; }
/* Submit button while a submit waits for the NeverBounce check (neverbounce.js). */
/* The three dots are shown one at a time by JS (visibility), so no keyframes.    */
.en__submit button.gp-nb-verifying { cursor: progress; opacity: 0.85; }
.gp-nb-dots { display: inline-block; text-align: left; }

/* -- Donation amount buttons --------------------------------- */
.en__field--donationAmt .en__field__element { display: flex; flex-wrap: wrap; gap: 8px; }
.en__field--donationAmt label {
  flex: 1 1 auto; min-width: 60px; text-align: center;
  border: 2px solid var(--gp-primary, #2b7a4b);
  border-radius: 4px; padding: 0.5em 0.75em; cursor: pointer;
}
.en__field--donationAmt label.selected,
.en__field--donationAmt input:checked + label {
  background: var(--gp-primary, #2b7a4b); color: #fff;
}
#custom-amount-wrap { display: none; margin-top: 8px; }

/* -- Tab menu ------------------------------------------------ */
.tab_menu { list-style: none; margin: 0; padding: 0; display: flex; }
.tab_menu li { flex: 1; text-align: center; padding: 0.6em; cursor: pointer; border-bottom: 2px solid transparent; }
.tab_menu li.active_tab { border-bottom-color: var(--gp-primary, #2b7a4b); font-weight: 700; }

/* -- Back button --------------------------------------------- */
.back_btn { cursor: pointer; color: var(--gp-primary, #2b7a4b); font-size: 0.9em; }

/* -- Payment tabs -------------------------------------------- */
.payment-tab { cursor: pointer; padding: 0.5em 1.2em; border: 1px solid #ccc; }
.payment-tab.active { background: var(--gp-primary, #2b7a4b); color: #fff; border-color: var(--gp-primary, #2b7a4b); }

/* -- Loading overlay (submit wait screen) -------------------- */
/* Shared by all templates using loadingOverlay: true.          */
/* Template CSS may override these if custom styling is needed. */
#form_4 { height: 400px; }
.cnfm_dtn2 {
  position: relative;
  height: 100%;
  background: #4b4949;
  display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center;
  z-index: 99; color: #fff;
}
.cnfm_dtn2 h4 { font-weight: 100; margin-top: 20px; }

/* -- Checkbox dropdown --------------------------------------- */
/* Used by checkboxDropdown feature on survey/quiz pages.      */
[id^="customDropdown_"] {
  position: relative;
  margin-bottom: 8px;
  font-size: 16px;
}
[id^="customDropdown_"] .title {
  cursor: pointer;
  padding: 0.6em 1em;
  border: 1px solid #ccc;
  background: #fff;
  user-select: none;
  position: relative;
}
[id^="customDropdown_"] .title::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: 10px;
  width: 4px;
  height: 4px;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}
[id^="customDropdown_"] .options {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0; z-index: 9999;
  border: 1px solid #ccc;
  background: #fff;
  max-height: 250px;
  overflow-y: auto;
}
[id^="customDropdown_"] .option {
  padding: 0.5em 1em;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5em;
}
[id^="customDropdown_"] .option::before {
  content: "☐";
  font-size: 1em;
  flex-shrink: 0;
}
[id^="customDropdown_"] .option.selected::before {
  content: "☑";
}
[id^="customDropdown_"] .option:hover { background: #f5f5f5; }
[id^="customDropdown_"] .option.selected {
  background: var(--gp-primary, #2b7a4b);
  color: #fff;
}
[id^="customDropdown_"] .other-textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9em;
}

/* When a field shows a validation error (position:absolute, margin-top
   offset to sit below the input), the wrapper's height doesn't naturally
   expand to contain it.  Reserve space by adding padding-bottom so the
   error text doesn't overlap the next field's label.
   NOTE: must be scoped with #main-content to match the specificity of
   the base field rule in every brand.css:
     #main-content .en__field { padding-bottom: 10px; ... }  (spec 1,1,0)
   Without the ID prefix our two-class selector (spec 0,2,0) loses the
   cascade and the override never actually applies. */
#main-content .en__field--validationFailed:has(> .en__field__error) {
  padding-bottom: 18px;
}

/* Push EN validation errors below the checkbox dropdown widget.
   Brand CSS positions .en__field__error with position:absolute + a
   fixed margin-top offset calibrated for single-line inputs.  When
   the checkbox-dropdown widget is present those offsets land the
   error in the wrong place.  Reset to relative flow and use flex
   order to guarantee the error renders after the dropdown. */
.en__field--checkbox:has([id^="customDropdown_"]) {
  display: flex;
  flex-direction: column;
}
#main-content .en__field--checkbox:has([id^="customDropdown_"]) > .en__field__error {
  position: relative !important;
  top: auto !important;
  margin-top: 4px !important;
  order: 10;
}

/* -- Prefill collapse (src/features/prefill-collapse.js) ----- */
/* Dedicated class, not en__field--hidden, so revealing never un-hides
   fields addressAutocomplete hides. */
.gp-prefill-hidden { display: none !important; }
.gp-prefill-notyou {
  display: block;
  margin: 4px 0 12px;
  text-decoration: underline;
  cursor: pointer;
}

/* -- ETT AI -------------------------------------------------- */
#gp-letter-spinner { display: none; text-align: center; padding: 2em; }
#gp-letter-preview { padding: 1em; border: 1px solid #ddd; background: #fafafa; display: none; }
.gp-error { color: #c00; }


/* ---- src/styles/asm/brand.css ---- */
/**
 * brand.css -- ASM (America Saves Money) brand identity
 *
 * Loaded as part of core.css for all ASM pages.
 * Contains only brand-level declarations: fonts, base typography, brand colors.
 * Layout and component-level rules belong in per-template style.css files.
 *
 * Fonts: "Barlow" (body/UI) -- same family as CROP.
 * Font files are hosted on the EN CDN (RackCDN) -- same URLs as the legacy asm.css.
 *
 * Colors: the --asm-* custom properties below, taken from the
 * americasavesmoney.com theme palette (2026-11-12). Use the variables, not
 * hex values, so the next palette change is one edit.
 * Per-template style.css files use these variables too (core.css loads first).
 */

:root {
  --asm-green:        #218753; /* site "money-green": buttons, active states, links */
  --asm-green-dark:   #1a6b42; /* button hover */
  --asm-mint:         #e1eddf; /* light accent: dropdown hover, footer link hover */
  --asm-charcoal:     #1e1e1e; /* headings, dark UI */
  --asm-gray-text:    #555555; /* body copy, field labels */
  --asm-footer-black: #111111; /* footer background */
  --asm-gray-on-dark: #a3a3a3; /* footer text and links */
  --asm-off-white:    #f7f7f5; /* field backgrounds */
  --asm-border:       #eeeeee; /* field borders */
  --asm-burnt-orange: #cb3e27; /* alert/highlight: thank-you banner */
}

/* ── Font faces ─────────────────────────────────────────────────────────────── */

@font-face {
  font-family: Barlow;
  src: url('https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/2281/Barlow-Regular.woff2?v=1645728294000') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: Barlow;
  font-weight: 400;
  font-style: italic;
  src: url('https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/2281/Barlow-Italic.woff2?v=1645732397000') format('woff2');
}

@font-face {
  font-family: Barlow;
  font-weight: 100;
  font-style: normal;
  src: url('https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/2281/Barlow-Thin.woff2?v=1645732400000') format('woff2');
}

@font-face {
  font-family: Barlow;
  font-weight: 100;
  font-style: italic;
  src: url('https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/2281/Barlow-ThinItalic.woff2?v=1645732402000') format('woff2');
}

@font-face {
  font-family: Barlow;
  font-weight: 200;
  font-style: normal;
  src: url('https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/2281/Barlow-ExtraLight.woff2?v=1645732405000') format('woff2');
}

@font-face {
  font-family: Barlow;
  font-weight: 200;
  font-style: italic;
  src: url('https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/2281/Barlow-ExtraLightItalic.woff2?v=1645732388000') format('woff2');
}

@font-face {
  font-family: Barlow;
  font-weight: 300;
  font-style: normal;
  src: url('https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/2281/Barlow-Light.woff2?v=1645732391000') format('woff2');
}

@font-face {
  font-family: Barlow;
  font-weight: 300;
  font-style: italic;
  src: url('https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/2281/Barlow-LightItalic.woff2?v=1645732394000') format('woff2');
}

@font-face {
  font-family: Barlow;
  font-weight: 500;
  font-style: normal;
  src: url('https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/2281/Barlow-Medium.woff2?v=1645732407000') format('woff2');
}

@font-face {
  font-family: Barlow;
  font-weight: 500;
  font-style: italic;
  src: url('https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/2281/Barlow-MediumItalic.woff2?v=1645732409000') format('woff2');
}

@font-face {
  font-family: Barlow;
  font-weight: 600;
  font-style: normal;
  src: url('https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/2281/Barlow-SemiBold.woff2?v=1645732412000') format('woff2');
}

@font-face {
  font-family: Barlow;
  font-weight: 600;
  font-style: italic;
  src: url('https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/2281/Barlow-SemiBoldItalic.woff2?v=1645732413000') format('woff2');
}

@font-face {
  font-family: Barlow;
  font-weight: 700;
  font-style: normal;
  src: url('https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/2281/Barlow-Bold.woff2?v=1645728290000') format('woff2');
}

@font-face {
  font-family: Barlow;
  font-weight: 700;
  font-style: italic;
  src: url('https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/2281/Barlow-BoldItalic.woff2?v=1645732415000') format('woff2');
}

@font-face {
  font-family: Barlow;
  font-weight: 800;
  font-style: normal;
  src: url('https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/2281/Barlow-ExtraBold.woff2?v=1645732417000') format('woff2');
}

@font-face {
  font-family: Barlow;
  font-weight: 800;
  font-style: italic;
  src: url('https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/2281/Barlow-ExtraBoldItalic.woff2?v=1645732419000') format('woff2');
}

@font-face {
  font-family: 'Barlow Condensed';
  src: url('https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/2281/BarlowCondensed-Regular.woff2?v=1645732880000') format('woff2');
  font-weight: 400;
  font-style: normal;
}

/* ── Election deadline hidden fields ────────────────────────────────────────── */
/* Written by electionDeadlineLookup.js; must never be visible to the supporter. */
.en__field--vreg-deadline-passed,
.en__field--absentee-ballot-request-deadline-passed { display: none !important; }

/* ── Base typography ────────────────────────────────────────────────────────── */

body {
  font-family: Barlow, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  color: var(--asm-gray-text);
  background: #fff;
  padding: 0;
  margin: 0;
}

h2, h3, h4 {
  font-family: Barlow, sans-serif;
  font-weight: 700;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 20px;
  line-height: normal;
  font-weight: 700;
}

strong, b { font-weight: 700; }

label { -webkit-tap-highlight-color: transparent; }

/* ── Reset / base ────────────────────────────────────────────────────────────── */

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
button:focus, button:active:focus, button.active:focus { outline: none; outline-offset: 0; box-shadow: none; }
input:focus, textarea:focus, select:focus { outline: none; }
a:focus, a:hover, a:active { outline: none !important; }

/* ── Page shell ──────────────────────────────────────────────────────────────── */

body #main-content { border-radius: 0; box-shadow: none; background: none; margin: 0; padding: 0; min-height: 500px; }
#main-content .sub-content { position: relative; margin: 0 4%; }

/* ── Header / hero ───────────────────────────────────────────────────────────── */

.header { background-size: cover; background-repeat: no-repeat; width: 100%; position: relative; }
.header .logo { position: absolute; top: 30px; left: 4%; z-index: 99; }
/* material_form_test: shorter overlay */
.header .overlay { text-align: center; height: 350px !important; display: flex; justify-content: center; flex-direction: column; opacity: 0.45; background: #000; }
.header h1 { font-size: 32px; font-weight: 500; text-align: left; text-transform: uppercase; color: #fff; background: rgba(0,0,0,0.5); padding: 10px 20px; }
/* Page-builder image toggles — hide until inside a sortable editor context */
#main-content img.main-image { display: none; }
#main-content .ui-sortable img.main-image { display: block; }
#main-content img.mob-image { display: none; }
#main-content .ui-sortable img.mob-image { display: block; }

/* ── Two-column layout ───────────────────────────────────────────────────────── */

/* Editor-only: column-2 is visible in the page builder */
.en__component.en__component--column--2.ui-sortable { display: block; }

/* Desktop: row becomes flex, column widths and form-card elevation */
@media (min-width: 993px) {
  #main-content .en__component--row { display: flex; align-items: flex-start; align-content: flex-start; }
  #main-content .en__component--row--2 .en__component--column--1 { width: 64%; padding-right: 30px; }
  #main-content .en__component--row--2 .en__component--column--2 { width: 36%; }
  label.popup-btn { display: none; }
}

/* Form card styling (all sizes) */
#main-content .en__component--row--2 .en__component--column--2 {
  background: #fff;
  padding: 2px 30px 40px 30px;
  margin-top: -150px;
  box-shadow: 0 0 10px 3px rgba(0,0,0,0.2);
}

/* Mobile: hide form column behind popup toggle */
@media (max-width: 992px) {
  #main-content .en__component--row--2 .en__component--column { width: 100%; }
  #main-content .en__component--row--2 .en__component--column--2 { display: none; }
  #popup:checked + .wrapper #main-content .en__component--row--2 .en__component--column--2 { display: block; }
  #popup:checked + .wrapper .header { height: 125px; background: var(--asm-charcoal) !important; }
  #popup:checked + .wrapper #main-content .sub-content { margin: 0; }
  #popup:checked + .wrapper #main-content .en__component--formblock { min-height: 56vh; padding-top: 0; }
  #popup:checked + .wrapper label.popup-btn span { display: none; }
  #popup:checked + .wrapper label.popup-btn { width: 50px; height: 50px; bottom: auto; top: 20px; left: auto; right: 20px; cursor: pointer; background: none; position: absolute; overflow: hidden; }
  #popup:checked + .wrapper label.popup-btn:before { content: '+'; display: block; transform: rotate(45deg); text-align: center; font-weight: 100; font-size: 72px; line-height: 16px; color: #fff; }
  #popup:checked + .wrapper .header .logo { width: 160px; }
  #popup:checked + .wrapper #main-content .page_title { display: none; }
  #popup:checked + .wrapper .header .overlay { display: none; }
  #popup:checked + .wrapper #main-content .en__component--row--2 .en__component--column--1 { display: none; }
}

/* ── Mobile sticky CTA bar ───────────────────────────────────────────────────── */

/* Hide the #popup checkbox input itself (asm.css line 128).
   Without this the native checkbox renders visibly at top-left of the page. */
input#popup { position: absolute; opacity: 0; top: 0; left: 0; }

label.popup-btn {
  width: 100%; padding: 10px 0; position: fixed; bottom: 0; left: 0;
  z-index: 99; display: block; cursor: pointer; background-color: var(--asm-charcoal);
}
label.popup-btn span {
  display: block; text-align: center; color: #fff; padding: 18px 0;
  width: 80%; margin: 0 auto; font-size: 20px; font-weight: bold;
  border-radius: 40px; background-color: var(--asm-green); animation: wiggle 2.7s infinite;
}
label.popup-btn:hover span { animation: none; }

@keyframes wiggle {
  2%  { transform: translateX(3px) rotate(2deg); }
  4%  { transform: translateX(-3px) rotate(-2deg); }
  6%  { transform: translateX(3px) rotate(2deg); }
  8%  { transform: translateX(-3px) rotate(-2deg); }
  10% { transform: translateX(2px) rotate(1deg); }
  12% { transform: translateX(-2px) rotate(-1deg); }
  14% { transform: translateX(2px) rotate(1deg); }
  16% { transform: translateX(-2px) rotate(-1deg); }
  18% { transform: translateX(1px) rotate(0); }
  20% { transform: translateX(-1px) rotate(0); }
}

/* ── Submit button ───────────────────────────────────────────────────────────── */

#main-content .en__submit button {
  width: 100%;
  padding: 12px 0 !important;
  border-radius: 6px !important;
  font-size: 20px;
  /* Buttons don't inherit the body font; legacy asm.css:163 sets Barlow bold. */
  font-family: Barlow, sans-serif;
  font-weight: bold;
  background: var(--asm-green) !important;
  color: #fff !important;
  border: 1px solid var(--asm-green) !important;
  margin: 30px auto 0;
  display: block;
}
#main-content .en__submit button:hover {
  background: var(--asm-green-dark) !important;
  color: #fff !important;
  border: 1px solid var(--asm-green-dark) !important;
}

/* ── Form fields / float-label ───────────────────────────────────────────────── */

/* Positioning context for each field so absolutely-positioned labels
   resolve inside their own field, not a shared ancestor. */
#main-content .en__component--row--2, .en__field--select, .en__field { position: relative; }
/* Padding confirmed against live reference (asm.css line 640 wins over line 162). */
#main-content .en__field { padding-bottom: 10px; padding-top: 15px; }

#main-content .action-form .en__field__input {
  background-color: var(--asm-off-white) !important;
  height: 50px;
  padding: 14px 7px 0 10px !important;
  font-weight: 500;
  font-size: 16px !important;
  width: 100%;
  border: 1px solid var(--asm-border);
}
#main-content .action-form .en__field__input:focus-within {
  background-color: #fff !important;
  border-bottom: 2px solid var(--asm-green);
}

.en__field--textarea .en__field__label,
.en__field--number .en__field__label,
.en__field--text .en__field__label,
.en__field--select .en__field__label,
.en__field--emailAddress .en__field__label,
.en__field--telephone .en__field__label {
  padding: 0; color: var(--asm-gray-text); position: absolute;
  top: 28px; left: 10px; font-size: 14px;
  -webkit-transition: all .3s ease; transition: all .3s ease;
}
/* Populated label position: material_form_test.css loads after asm.css and wins.
   Confirmed via live computed styles on page 175092:
   top 16px / left 10px / font-size 11px / font-weight 400. */
.en__field--textarea.populated .en__field__label,
.en__field--number.populated .en__field__label,
.en__field--text.populated .en__field__label,
.en__field--emailAddress.populated .en__field__label,
.en__field--telephone.populated .en__field__label {
  top: 16px;
  left: 10px;
  font-size: 11px;
  font-weight: 400;
}
/* select label: reset to relative flow so it sits above the custom-select div.
   width: 100% overrides EN's enPage.css which sets .en__field__label { width: 180px }.
   Copied from goodpower/brand.css — the absolute-position default from the
   shared float-label rule above would cause the custom-select div to overlap it. */
#main-content .en__field--select .en__field__label {
  position: relative;
  top: 0;
  left: 0;
  font-size: 15px;
  font-weight: 500 !important;
  width: 100% !important;
}
#main-content .en__field.en__field--select > .en__field__label {
  position: relative;
  font-size: 15px;
  top: 0;
  font-weight: 500 !important;
  left: 0;
  width: 100% !important;
}

/* z-index: 99 on float labels — without this, the NeverBounce #nb-field-* wrapper
 * (position: relative) wins the stacking tie-break and paints over the label.
 * Legacy source: asm.css line 340. */
.en__field--text .en__field__label, .en__field--select .en__field__label,
.en__field--emailAddress .en__field__label, .en__field--telephone .en__field__label { z-index: 99; }

#main-content .action-form select,
#main-content .action-form input[type="text"],
#main-content .action-form .en__field__input { width: 100%; padding: 10px; margin: 0; }

/* ── Select element (custom-select.js support) ───────────────────────────────── */
/* Copied from goodpower/brand.css and adapted for ASM brand colors.            */
#main-content .en__field__element--select { position: relative; }
#main-content .en__field__element--select:after {
    content: '\25B8';
    font: 37px "Consolas", monospace;
    color: #000;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    right: 0;
    top: -4px;
    position: absolute;
    pointer-events: none;
    padding: 0px 8px;
    cursor: pointer;
}
#main-content .en__field__element--select .en__field__item { padding: 0; }
#main-content .en__field__element--select .en__field__item--other { margin-top: 27px; }

/* Hide native <select> once customSelect.js has built its replacement divs. */
#main-content .sub-content .en__field__element--select select { display: none; }

/* Custom select styling — ASM brand colors */
#main-content .select-selected { background-color: var(--asm-off-white); }
#main-content .select-selected.select-arrow-active:after {
    border-color: transparent transparent #000 transparent;
    top: -39px;
}
#main-content .select-items div, .select-selected {
    color: #333;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
    user-select: none;
    font-size: 16px;
}
#main-content .select-items {
    position: absolute;
    background-color: #ffffff;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    border: 1px solid var(--asm-green);
    overflow: scroll;
    max-height: 300px;
}
#main-content .select-items:first-of-type { z-index: 999; }
#main-content .select-hide { display: none; }
#main-content .select-items div:hover, #main-content .select-items .same-as-selected { background-color: var(--asm-mint); color: var(--asm-charcoal); font-weight: 600; }
#main-content .en__field.en__field--select { padding-top: 10px; z-index: 999; }
#main-content .en__field--select .en__field__error { padding-top: 77px; }

#main-content .en__field__element--calendar, #main-content .en__field__element--checkbox,
#main-content .en__field__element--email, #main-content .en__field__element--number,
#main-content .en__field__element--password, #main-content .en__field__element--radio,
#main-content .en__field__element--select, #main-content .en__field__element--text,
#main-content .en__field__element--textarea, #main-content .en__field__element--telephone,
#main-content .en__field__item { display: block; }
#main-content .action-form .en__field__item--hidden { display: none; }

.en__field.en__field--checkbox { display: block; }
#main-content .en__field__input--radio, #main-content .en__field__input--checkbox { display: none; }
#main-content .en__field__input--radio + .en__field__label,
#main-content .en__field__input--checkbox + .en__field__label { position: relative; padding-left: 34px; cursor: pointer; }
/* Checkbox custom box (12×12; confirmed via live computed styles on page 175092). */
#main-content .action-form .en__field__input--checkbox + .en__field__label:before {
  content: ''; display: block; position: absolute; left: 0; top: 6px;
  border: 2px solid var(--asm-charcoal); background: #fff; width: 12px; height: 12px; border-radius: 0;
}
#main-content .sub-content .en__field__input--checkbox:checked + .en__field__label:before {
  background: url(https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/2281/check.png?v=1629302296000) no-repeat;
  background-size: 12px; content: ''; background-position: 0px 0px; width: 12px; height: 12px;
}

/* Checkbox label sizing (migrated from legacy ASM footer inline <style>) */
#main-content .en__field__element--checkbox .en__field__input--checkbox + .en__field__label {
  font-size: 12px;
  line-height: 18px;
}

/* Errors */
#main-content ul.en__errorList { width: 50%; }
ul.en__errorList { margin: 0; padding: 0; }
ul.en__errorList li { list-style: none; padding: 10px 20px; background: #ffc9c9; color: #aa220d; }
#main-content .en__errorHeader { font-size: 18px; font-weight: bold; background: #f00; color: #fff; width: 50%; padding: 10px 20px; }
#main-content .action-form .en__component .en__field__error {
  position: absolute; top: 0; bottom: auto; margin-top: 65px; width: 100%;
  border: none !important; text-align: left !important; padding-left: 10px !important;
  font-weight: 600 !important; font-size: 12px; color: #f00; z-index: 9;
}

/* Select field error — pushes below field so it doesn't overlap label/input.
   Legacy source: asm.css lines 341 and 829. */
#main-content .action-form .en__field--select .en__field__error { padding-top: 77px; }

#en__pagebuilder #main-content .en__component.en__component--formblock .en__submit { padding-top: 30px; }
#en__pagebuilder #main-content .en__component.en__component--formblock .en__field.en__field--opt-in-policy-text > .en__field__label { top: 15px; font-size: 12px; line-height: 1.5; }
#en__pagebuilder #main-content .en__component.en__component--formblock .en__field.en__field--opt-in-policy-text > .en__field__label p { margin: 0; }

/* ── Headings / copy ─────────────────────────────────────────────────────────── */

#main-content h2 { flex: none; line-height: 36px; font-size: 1.5rem; font-weight: 700; color: var(--asm-charcoal); margin-bottom: 1.5rem; }
#main-content h1 {
  margin: 0; color: var(--asm-charcoal); padding-top: 10px; text-transform: uppercase;
  font-family: Barlow, sans-serif; font-weight: 900;
  font-size: 4vw; line-height: 1; width: 100%;
}
#main-content h1 span { background: none !important; box-shadow: none !important; }
.form-title h2, .en__component--copyblock.title h2 { font-size: 1.9vw !important; margin: 1.3vw 0 !important; text-transform: none !important; }
.en__component.en__component--copyblock { padding: 0 !important; }
p.action_stats { margin: 0; }
/* Links in page copy and form text (were browser-default blue).
   :where() gives this zero specificity, so any template or page rule that
   styles a link (e.g. a button-style link) still wins. */
:where(#main-content .action-form, #main-content .en__component--copyblock) a { color: var(--asm-green); }

@media (max-width: 1024px) {
  #main-content .en__component--row--2 .en__component--column--2 { width: 100%; margin-top: 0; }
  .en__submit { font-size: 20px !important; }
  .text { font-size: 16px; }
}
@media (max-width: 768px) {
  .header .overlay { height: 230px !important; }
  #main-content .en__component--row--2 .en__component--column--2 { width: 100%; }
  #main-content h1 { font-size: 7vw; line-height: .9; }
  .form-title h2, .en__component--copyblock.title h2 { font-size: 5vw !important; padding-top: 1vw; }
  .en__submit { font-size: 20px !important; }
}
@media (max-width: 480px) {
  .header .overlay { height: 230px !important; }
  .header .logo { width: 200px !important; padding-top: 10px; }
  #main-content h1 { font-size: 10vw; line-height: .9; }
  .form-title h2, .en__component--copyblock.title h2 { font-size: 5vw !important; padding-top: 1vw; }
}

/* ── EN progress bar widget ───────────────────────────────────────────────────
 * Migrated from legacy asm.css:556–636 and material_form_test.css:80–92.
 * Only rules that apply on live legacy page 166912 (verified 2026-11-05 with
 * getComputedStyle at 1440px). !important is needed where EN sets inline
 * styles on the widget (track height/background, fill color).
 * Not carried over: the arrow / exclamation icons (content commented out in
 * legacy, never render) and the stripe animation (no stripe image).
 * ──────────────────────────────────────────────────────────────────────────── */

.enWidget { font-family: Barlow, sans-serif !important; }
.enWidget--progressBar { display: inline-block; padding: 20px 20px 0 0 !important; }
.enWidget__progress {
  overflow: visible !important;
  min-height: 16px !important;
  height: 16px !important;
  background: #ccc !important;
  position: relative;
}
.enWidget__fill { background-color: var(--asm-green) !important; position: relative; border-radius: 30px; }
/* Dot at the end of the fill */
.enWidget__fill::after {
  content: ''; display: block; position: absolute; right: -25px;
  width: 32px; height: 32px; background: var(--asm-charcoal); border-radius: 50%;
}
.enWidget__fill__count { display: none; }
.enWidget--progressBar .enWidget__copy--below { margin-top: 10px; text-align: right; }
.enWidget--progressBar .enWidget__copy--below p { color: var(--asm-charcoal); }

/* ── NeverBounce feedback bubble ─────────────────────────────────────────────
 * Suppressed by default; revealed via .showerror class set by neverbounce.js.
 * Migrated from legacy ASM footer inline <style>.
 * ──────────────────────────────────────────────────────────────────────────── */

#main-content div.nb-feedback {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#main-content div.nb-feedback > div { display: none !important; }
#main-content div.nb-feedback.showerror {
  border: 1px solid #fff !important;
  padding: 0.8em !important;
  margin-top: 10px !important;
}
#main-content div.nb-feedback.showerror > div { display: block !important; }
#main-content .action-form div[id^=nb-field-].nb-success #en__field_supporter_emailAddress {
  border-color: transparent !important;
}
#main-content .action-form div[id^=nb-field-] #en__field_supporter_emailAddress:focus-within,
#main-content .action-form div[id^=nb-field-].nb-success #en__field_supporter_emailAddress:focus-within,
#main-content .action-form div[id^=nb-field-].nb-error #en__field_supporter_emailAddress:focus-within {
  border-bottom-color: var(--asm-green) !important;
}

/* ── Footer ───────────────────────────────────────────────────────────────────
 * Layout migrated from legacy/americasavesmoney/en/asm.css. Colors match the
 * americasavesmoney.com footer (2026-11-12): dark background, gray text, mint
 * on hover. Needs a light (mint/white) footer logo in the template settings.
 * SVG icon-size rules (.sm-nav__icon--facebook etc.) omitted — the current
 * footer markup uses <img> tags, not inline SVGs; those rules are dead code.
 * ──────────────────────────────────────────────────────────────────────────── */

#footer {
  text-align: center;
  background: var(--asm-footer-black);
  padding: 20px 0;
  color: var(--asm-gray-on-dark);
}
#footer a { color: var(--asm-gray-on-dark); }
#footer a:hover, #footer a:focus-visible { color: var(--asm-mint); text-decoration: underline; }

#footer .sm-nav {
  display: flex;
  justify-content: center;
  margin: 0;
}
#footer .sm-nav__link {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  height: 36px;
  width: 36px;
  margin: 0 .375rem;
}
#footer .sm-nav__link:first-child { margin: 0 .375rem 0 0; }

.assistive-text {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

.social-media-border-radius { border-radius: 3px; }

.footer-quick-links { text-decoration: none; padding: 5px 10px; }

/* ── Termly cookie banner ─────────────────────────────────────────────────────
 * Hidden on every legacy ASM page (legacy/americasavesmoney/en/asm.css:1039).
 * Same rule as goodpower/brand.css and jpm/brand.css. Original reason unknown.
 * ──────────────────────────────────────────────────────────────────────────── */
.termly-styles-termly-banner-e1ed59 { display: none !important; }

@media (min-width: 992px) {
  #footer .sub-content { min-width: 60%; width: 50%; margin: 0 auto; }
  #footer { margin-top: 40px; }
}
@media (max-width: 992px) {
  .wrapper #main-content #footer .sub-content { margin: 0 4%; }
  #footer { padding-bottom: 60px; }
}