/*===========================================
/*  DESKTOP LAYOUT
/*===========================================*/


/****** PLACE YOUR CUSTOM STYLES HERE ******/

/* =============================================================================
   EveryAction Form / Bonterra
   Custom Styling
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
    --ea-font: "proxima-nova", "Helvetica Neue", Arial, sans-serif;
    --ea-text: #2b2f36;
    --ea-label: #5f6b7a;
    --ea-muted: #6b7280;
    --ea-border: #d0d5dd;
    --ea-bg: #fff;
    --ea-addon: #f2f4f7;
    --ea-focus: #e31e24;
    --ea-btn: #e31e24;
    --ea-btn-dark: #c51b20;
    --ea-field-h: 40px;
    --ea-radius: 4px;
    --ea-gap: 16px;
    --ea-icon-w: 36px;
}

/* Labels: uppercase, tight */
.ngp-form label,
.ngp-form .at-text {
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ea-label);
}

/* ---------- Fields base ---------- */
.ngp-form input[type="text"],
.ngp-form input[type="email"],
/* .ngp-form input[type="tel"], */
.ngp-form input[type="phone"],
.ngp-form input[type="number"],
.ngp-form select,
.ngp-form textarea {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: var(--ea-field-h);
    border: 1px solid var(--ea-border) !important;
    border-radius: var(--ea-radius);
    background: #fff;
    /* FIX: this used to be 80px 12px which crushed the content in a 40px-tall input */
    padding: 10px 12px;
    font-size: 16px;
    line-height: 1.2;
    color: var(--ea-text);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .04);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ngp-form textarea {
    min-height: 120px;
    height: auto;
}

/* Icons (SVGs) */
.ea-icon-user {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%2390a4ae" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="3"/></svg>') !important;
}
.ea-icon-at {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%2390a4ae" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16v16H4z" fill="none"/><path d="M22 6l-10 7L2 6"/></svg>') !important;
}
.ea-icon-phone {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%2390a4ae" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.08 4.18 2 2 0 0 1 4.06 2h3a2 2 0 0 1 2 1.72c.13.98.35 1.93.65 2.84a2 2 0 0 1-.45 2.11L8.1 9.9a16 16 0 0 0 6 6l1.23-1.16a2 2 0 0 1 2.11-.45c.91.3 1.86.52 2.84.65A2 2 0 0 1 22 16.92z"/></svg>') !important;
}
.ea-icon-globe {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%2390a4ae" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>') !important;
}

/* Country (Select2 visible box) */
.select2-container .select2-selection--single {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
}
.at .select2-selection--single .select2-selection__rendered {
    padding-left: 16px !important;
}

/* ---------- Submit button ---------- */
.at .btn-at-primary {
    background-color: var(--ea-btn) !important;
}
.at .btn-at-primary:hover {
    background-color: var(--ea-btn-dark) !important;
}

/* Input sizing in EA containers */
.at input[type=text],
.at input[type=password],
.at input[type=date],
.at input[type=datetime],
.at input[type=datetime-local],
.at input[type=month],
.at input[type=week],
.at input[type=email],
.at input[type=number],
.at input[type=search],
.at input[type=time],
.at input[type=url],
.at input[type=color],
.at textarea {
    font-size: 1.5rem !important;
    padding: 1.5rem 2.2rem !important;
    border-radius: 4px !important;
}
.at input[type=tel] {
    font-size: 1.5rem !important;
    padding: 1.5rem 6px 1.5rem 52px !important;
}
.at .select2-selection--single {
    padding: 1rem 1.25rem 2rem .5rem !important;
}
.at label {
    font-size: 1.2rem !important;
    color: #5b6671;
    font-weight: 700 !important;
}

/* ---------- FIX: submit row was being pulled up & clipped ---------- */
.at-inner .clearfix .at-form-submit.clearfix {
    /* remove the negative offset and flex that caused clipping */
    position: static !important;
    top: auto !important;
    display: block !important;
    clear: both !important;
    overflow: visible !important;
    margin-top: 0 !important;
}

/* Align the submit row: right on desktop, centered on mobile */
@media (min-width: 901px) {
    .ngp-form .at-form-submit.clearfix { text-align: right !important; }
}
@media (max-width: 900px) {
    .ngp-form .at-form-submit.clearfix { text-align: center !important; }
}

/* Let the button size naturally; no float */
.ngp-form .at-form-submit .at-submit.btn-at.btn-at-primary {
    float: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 24px !important;
    line-height: 1.2 !important;
    position: relative;
    z-index: 1;
}

/* Full-width button on small screens */
@media (max-width: 900px) {
    .ngp-form .at-form-submit .at-submit { width: 100% !important; }
}

/* ---------- Field icons (pure CSS, inline SVG) ---------- */
/* Shared padding so text doesn't overlap the icon (18px icon @ 12px inset) */
:root { --ea-icon-pad: 44px; } /* 12 + 18 + ~14 buffer */

/* User (First/Last) */
.ngp-form input[name="FirstName"],
.ngp-form input[name$="FirstName"],
.ngp-form input[name="LastName"],
.ngp-form input[name$="LastName"] {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%2390a4ae" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="3"/></svg>');
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 18px;
}

/* Email (@) */
.ngp-form input[type="email"],
.ngp-form input[name="Email"],
.ngp-form input[name$="Email"] {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%2390a4ae" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16v16H4z" fill="none"/><path d="M22 6l-10 7L2 6"/></svg>');
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 18px;
}

/* Phone */
.ngp-form input[type="tel"],
.ngp-form input[name="MobilePhone"],
.ngp-form input[name$="Phone"] {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%2390a4ae" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.08 4.18 2 2 0 0 1 4.06 2h3a2 2 0 0 1 2 1.72c.13.98.35 1.93.65 2.84a2 2 0 0 1-.45 2.11L8.1 9.9a16 16 0 0 0 6 6l1.23-1.16a2 2 0 0 1 2.11-.45c.91.3 1.86.52 2.84.65A2 2 0 0 1 22 16.92z"/></svg>');
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 18px;
}

/* Shared left padding for icon fields */
.ngp-form input[name="FirstName"],
.ngp-form input[name$="FirstName"],
.ngp-form input[name="LastName"],
.ngp-form input[name$="LastName"],
.ngp-form input[type="email"],
.ngp-form input[name="Email"],
.ngp-form input[name$="Email"],
/* phone only when NOT using intl-tel-input */
.ngp-form input[type="tel"]:not(.iti__tel-input),
.ngp-form input[name="MobilePhone"]:not(.iti__tel-input),
.ngp-form input[name$="Phone"]:not(.iti__tel-input) {
  padding-left: var(--ea-icon-pad) !important;
  background-repeat: no-repeat !important;
  background-position: 12px center !important;
  background-size: 18px !important;
}

/* Reapply on focus so icon never disappears */
.ngp-form input[name="FirstName"]:focus,
.ngp-form input[name$="FirstName"]:focus,
.ngp-form input[name="LastName"]:focus,
.ngp-form input[name$="LastName"]:focus {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%2390a4ae" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="3"/></svg>') !important;
}
.ngp-form input[type="email"]:focus,
.ngp-form input[name="Email"]:focus,
.ngp-form input[name$="Email"]:focus {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%2390a4ae" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16v16H4z" fill="none"/><path d="M22 6l-10 7L2 6"/></svg>') !important;
}
.ngp-form input[type="tel"]:not(.iti__tel-input):focus,
.ngp-form input[name="MobilePhone"]:not(.iti__tel-input):focus,
.ngp-form input[name$="Phone"]:not(.iti__tel-input):focus {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%2390a4ae" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.08 4.18 2 2 0 0 1 4.06 2h3a2 2 0 0 1 2 1.72c.13.98.35 1.93.65 2.84a2 2 0 0 1-.45 2.11L8.1 9.9a16 16 0 0 0 6 6l1.23-1.16a2 2 0 0 1 2.11-.45c.91.3 1.86.52 2.84.65A2 2 0 0 1 22 16.92z"/></svg>') !important;
}

/* If you DO use intl-tel-input, keep it aligned and sized like other fields */
.ngp-form .iti { width: 100%; }
.ngp-form .iti__tel-input {
  height: var(--ea-field-h) !important;
  line-height: 1.2 !important;
  font-size: 16px !important;
}

/* Hide phone icon whenever intl-tel-input is active (old/new builds) */
.ngp-form .iti input[type="tel"],
.ngp-form input[type="tel"].intl-tel-input,
.ngp-form input[type="tel"].iti__tel-input,
.ngp-form input[type="tel"][data-intl-tel-input-id] {
  background-image: none !important;
  background-position: initial !important;
  background-size: auto !important;
  /* keep room for the flag dropdown */
  padding-left: 52px !important;
}

/* …and keep it hidden on focus too */
.ngp-form .iti input[type="tel"]:focus,
.ngp-form input[type="tel"].intl-tel-input:focus,
.ngp-form input[type="tel"].iti__tel-input:focus,
.ngp-form input[type="tel"][data-intl-tel-input-id]:focus {
  background-image: none !important;
}

.at span.select2-selection--single .select2-selection__rendered {
    background-color: rgba(255, 255, 255, 0) !important;
}

.at input[type=checkbox]:checked+span:before {
    background-color: var(--ea-btn) !important;
    border-color: var(--ea-btn) !important;
}
.at input[type=checkbox]+span:before {
    height: 2.125rem !important;
    width: 2.125rem !important;
    background: rgba(0, 0, 0, 0) !important;
    border-radius: 4px !important;
    border: 1px solid #ced4da !important;
    color: inherit !important;
    content: "" !important;
    display: block !important;
    left: 0 !important;
    position: absolute !important;
    top: 2px !important;
}
.at input[type=checkbox]+span {
    cursor: pointer !important;
    float: left !important;
    padding-left: 2.65rem !important;
    position: relative !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}
.at input[type=checkbox]:checked+span:after {
    color: #fff !important;
    opacity: 1 !important;
    transform: scale(2) !important;
}
.at input[type=checkbox]+span:after {
    -webkit-transition: all .1s ease-in-out !important;
    -moz-transition: all .1s ease-in-out !important;
    transition: all .1s ease-in-out !important;
    color: #fff !important;
    content: "✔" !important;
    display: block !important;
    font-family: "Arial Unicode MS" !important;
    font-size: .8125rem !important;
    line-height: 1 !important;
    left: 12px !important;
    position: absolute !important;
    top: 12px !important;
}

.at-markup.SmsLegalDisclaimer.at-legal p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.25rem;
    line-height: 1.5;
    color: #6b6b6b;
    padding: 10px;
}

.ngp-form {
    margin: 0 auto;
    max-width: 1600px !important;
}

.at .btn-at { font-weight: 700 !important; }

/* Example form-specific color override (keep if you still use this ID) */
#NVSignupForm2403923 form input[type="submit"] {
    background-color: var(--ea-btn) !important;
    color: #fff !important;
    text-shadow: none !important;
}
#NVSignupForm2403923 form input[type="submit"]:hover {
    background-color: var(--ea-btn-dark) !important;
}

/* ---------- Mobile / small screens ---------- */
@media (max-width: 900px) {
    :root { --ea-gap: 12px; }

    .ngp-form .at-row { margin-bottom: 14px; }

    .ngp-form .at-row > [class^="at-"] {
        flex-basis: 100% !important;
        min-width: 0;
    }

    .ngp-form .at-submit .btn-at-primary,
    .ngp-form .at-submit button[type="submit"],
    .ngp-form .at-submit input[type="submit"] {
        width: 100%;
    }

    /* Keep CardSign and submit row in normal flow on mobile */
    .at-fieldset.CardSign {
        position: static !important;
        top: auto !important;
    }
}

/* Optional: ensure captcha never overlaps submit */
.ngp-form .g-recaptcha,
.ngp-form .recaptcha-container { margin-top: 12px !important; }

/* =============================================================================
   End EveryAction Form / Bonterra
   Custom Styling
   ========================================================================== */


/*===========================================
/*  MOBILE & TABLET COMMON
/*===========================================*/


/*===========================================
/*  TABLET
/*===========================================*/


/*===========================================
/*  MOBILE
/*===========================================*/