/**
 * style.css -- ASM VREG template (page 2 of 2-step flow)
 *
 * Sources:
 *   legacy/americasavesmoney/en/asm.css          -- layout, header, column, form rules
 *   legacy/americasavesmoney/en/material_form_test.css -- field styling (float-label compat)
 *   legacy/americasavesmoney/en/ett_advocacy_template_google_map_api.css -- submit button, thank-you animation
 *
 * Brand-level rules (reset, page shell, header/hero, two-column layout, mobile CTA
 * bar, submit button, form fields/float-label, headings, NeverBounce bubble, footer)
 * live in src/styles/asm/brand.css (compiled into core.css).
 * This file: VREG-specific rules only.
 */

/* ── VREG hidden fields ──────────────────────────────────────────────────────── */
/* Written by electionDeadlineLookup.js; must never be visible to the supporter. */
.en__field--vreg-redirect-path { display: none !important; }

/* ── Email field -- hidden by default; revealed by JS when not chain-filled ── */
/* When this page is reached via ?chain from the 2-step petition page, EN
   pre-fills the email field. On direct/standalone access the field is empty,
   and init_vreg.js reveals it so the supporter can type their email.
   Matches the GP vreg-2step-redirect pattern exactly. */
.en__field--emailAddress { display: none; }

/* ── Single-column layout — max width cap ────────────────────────────────────── */
/* Pages built with one column (en__component--row--1) get a 700px max width,
   matching the GP single-col template. Two-column pages (en__component--row--2)
   are unaffected — this rule does not apply to them. */
#main-content .en__component--row--1 { max-width: 700px; margin: 0 auto; }

/* ── NOT_TAGGED_42 address field ─────────────────────────────────────────────── */
/* Hide Google Maps "Enter a location" default placeholder text */
#en__field_supporter_NOT_TAGGED_42::placeholder { color: transparent; }

/* ── Action badge ────────────────────────────────────────────────────────────── */

.action_type {
  font-family: 'Barlow Condensed', Helvetica Neue, Helvetica, sans-serif;
  padding: 5px 10px; border-radius: 2px; color: #fff; text-transform: uppercase;
  display: inline-block; margin: 10px 0 2px; background-color: var(--asm-green);
  line-height: 1; font-weight: 500;
}

/* ── Thank-you animation (subscribe/2) ──────────────────────────────────────── */

.wrapper #main-content .thanks-anim { border-radius: 0; animation: boingIn 1s; width: 36%; z-index: 100; padding: 0 20px; margin: 0 auto; }
.wrapper #main-content .thanks-anim p { background: var(--asm-burnt-orange); padding: 15px; width: 100%; color: #fff; z-index: 99; font-weight: bold; margin: 0; }
.wrapper #main-content .thanks-mob-anim { animation: boingIn 1s; background: var(--asm-burnt-orange); color: #fff; text-align: center; padding: 10px !important; display: none; width: 100%; z-index: 99; border-radius: 0; height: 66px; font-weight: bold; }
.wrapper #main-content .thanks-mob-anim p { margin: 0; }
#en__pagebuilder .thanks-mob-anim, #en__pagebuilder .thanks-anim { display: block !important; }
#en__pagebuilder .thanks-anim .en__component__actions { top: -120px; }
.animate { opacity: 0; }
.animate.animated { opacity: 1; }
.duration1 { animation-duration: 1s; }
.duration2 { animation-duration: 2s; }
.duration3 { animation-duration: 3s; }

@media (max-width: 992px) {
  .wrapper #main-content .thanks-anim { display: none; }
  .wrapper #main-content .thanks-mob-anim { display: block; }
}

@media (max-width: 480px) {
  .wrapper #main-content .thanks-mob-anim p::before { display: none !important; }
}