/* ============================================================================
   newdesign.css  —  Visual reskin layer for the WashAssist portal (3F2Z9G)
   ----------------------------------------------------------------------------
   Loaded LAST (after bootstrap.css + main.css) so it wins on specificity.
   This file ONLY changes appearance. It does not rename, move, or remove any
   element, ID, name, class, iframe, or data-* attribute that SinglePage.js or
   PaymentGatewayManagement.js depend on.

   Source of the visual language: NewDesign.html (brand tokens copied verbatim).

   IMPORTANT scoping notes:
     - `.form-check` is used by BOTH the JS-rendered plan radios AND the terms /
       opt-in checkboxes. Plan-card styling is therefore scoped under
       #UnlimitedPlandiv1 / #UnlimitedPlandiv2 only.
     - Cardknox <iframe> elements receive inline styles from JS (setIfieldStyle).
       We style only their WRAPPERS, never the iframes' box themselves.
     - .hide / .hidden = display:none!important (Bootstrap). Never redefined here.
   ============================================================================ */

/* ── ACUMIN VARIABLE CONCEPT — Splash brand face (local files in ../fonts) ── */
@font-face {
  font-family: 'Acumin Variable Concept';
  src: url('../fonts/Acumin-Variable-Concept.woff2') format('woff2'),
       url('../fonts/Acumin-Variable-Concept.ttf') format('truetype');
  font-weight: 100 900;       /* variable weight axis: Light → Black */
  font-style: normal;
  font-display: swap;
}
/* Variable Concept is roman-only — map italics (brand subhead) to Acumin Pro italics */
@font-face {
  font-family: 'Acumin Variable Concept';
  src: url('../fonts/Acumin-ItPro.woff2') format('woff2');
  font-weight: 300 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Acumin Variable Concept';
  src: url('../fonts/Acumin-BdItPro.woff2') format('woff2');
  font-weight: 600 900;
  font-style: italic;
  font-display: swap;
}

/* ── SPLASH CAR WASH BRAND TOKENS (SCW Style Guide v1.3) ──
   Primary  : Splash Blue #2b3491 · Sudsy Blue #3dbeee · Racecar Red #dc3e26
   Secondary: Splash Navy #1c164e · Yellow #f1c61e · Charcoal #3a3f47 ·
              Light gray #dbdbdb · Cream #f5eedd
   Rule     : all dark text is Splash Navy (#1c164e), never black.
   The semantic --blue-* names below are remapped to brand colours so the whole
   UI recolours coherently. */
:root {
  color-scheme: light;
  /* brand names */
  --splash-blue:  #2b3491;   /* primary */
  --splash-navy:  #1c164e;   /* darkest — all dark text */
  --sudsy-blue:   #3dbeee;   /* accent */
  --racecar-red:  #dc3e26;   /* alerts / highlight word */
  --splash-yellow:#f1c61e;
  --charcoal:     #3a3f47;
  --cream:        #f5eedd;

  /* semantic (consumed throughout this file) */
  --blue-dark:   #1c164e;    /* Splash Navy — headings, dark text, button start */
  --blue-mid:    #2b3491;    /* Splash Blue — primary, links, focus */
  --blue-light:  #3dbeee;    /* Sudsy Blue — accents, hovers */
  --blue-pale:   #eaf3fb;    /* pale blue tint — selected / info fills */
  --teal:        #3dbeee;
  --gold:        #f1c61e;
  --white:       #ffffff;
  --gray-100:    #f4f6fb;
  --gray-200:    #e4e7f0;
  --gray-400:    #9aa3b8;
  --gray-600:    #3a3f47;    /* Charcoal — secondary text */
  --gray-800:    #1c164e;    /* Splash Navy — primary text */
  --success:     #1f9d57;
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --shadow-sm:   0 1px 3px rgba(28,22,78,.08), 0 1px 2px rgba(28,22,78,.06);
  --shadow-md:   0 4px 16px rgba(28,22,78,.10);
  --shadow-lg:   0 12px 40px rgba(28,22,78,.16);
  /* Local Acumin Variable Concept → Archivo fallback → system */
  --nd-font: 'Acumin Variable Concept', 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --nd-display: 'Acumin Variable Concept', 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --nd-tagline: 'Mogra', cursive;
}

/* ── BASE / TYPOGRAPHY ── */
body,
body#top {
  background-color: var(--gray-100) !important;
  color: var(--gray-800) !important;
  font-family: var(--nd-font) !important;
  font-size: 14px;
  line-height: 1.6;
}
body, label, input, select, button, textarea,
.form-check-label, h1, h2, h3, h4, h5, h6, p, span, a {
  font-family: var(--nd-font) !important;
}
/* Headlines/subheads use the Acumin/Archivo display face, heavy weight */
.hero h1, .section-title,
#customerInformation-div > .row > .col-xs-12 > h5,
#thankYouSection h5,
#confirmationPopUp h3, #paymentConfirmationPopUp h4 {
  font-family: var(--nd-display) !important;
  font-weight: 800 !important;
}
.hero h1 { text-transform: uppercase; letter-spacing: -.01em; }

/* Splash tagline — Mogra, lowercase, with a red highlight word (brand p.12/14) */
.hero .tagline {
  font-family: var(--nd-tagline) !important;
  font-size: 20px;
  font-weight: 400;
  color: var(--sudsy-blue);
  margin: 22px auto 0;
  max-width: none;          /* override .hero p { max-width:480px } */
  opacity: 1;
  line-height: 1.3;
  text-align: center;
}
.hero .tagline .hl { color: var(--racecar-red); }

/* ============================================================================
   HEADER  (.carwash_header_in > #lnkLogo > #logoImage)
   White-label safe: light bar so any logo colour stays visible.
   ============================================================================ */
.carwash_header_in {
  background: var(--splash-blue) !important;   /* white "dark colorway" logo sits on Splash Blue */
  padding: 16px 0 !important;
  border-bottom: none !important;
  box-shadow: none !important;
  text-align: center;
}
.imageLogo,
.carwash_header_in .imageLogo {
  display: block;
  width: auto !important;
  max-width: 220px !important;
  max-height: 58px;
  margin: 0 auto !important;
}

/* ============================================================================
   DEMO BANNER  (.payment_status / .a_payment_status)
   JS toggles .hide on it — visibility behaviour preserved.
   ============================================================================ */
.payment_status {
  background-color: var(--cream) !important;
  border-bottom: 2px solid var(--splash-yellow);
  height: auto !important;
  padding: 10px 16px;
  text-align: center;
}
.a_payment_status {
  color: var(--splash-navy) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* ============================================================================
   HERO  (additive .hero section, white-label generic copy)
   Lives inside #body-wrapper, so it stays hidden until the backend reveals it.
   ============================================================================ */
.hero {
  /* Vertical gradient whose 0% stop equals the header's Splash Blue, so the
     header→hero seam is the same colour across the full width (no diagonal seam). */
  background: linear-gradient(180deg, var(--splash-blue) 0%, #262d7a 52%, var(--splash-navy) 100%);
  color: var(--white);
  text-align: center;
  padding: 26px 24px 52px;
  position: relative;
  overflow: hidden;
}
/* soft sudsy "splash" glow — kept away from the top seam so it reads as ambient
   light, not an edge (brand: illustrations emphasise movement) */
.hero::after {
  content: "";
  position: absolute;
  top: 30px; right: -110px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(61,190,238,.20) 0%, rgba(61,190,238,0) 68%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero .badge {
  display: inline-block;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 14px;
  margin-bottom: 18px;
  color: var(--white);
}
.hero h1 {
  font-size: clamp(26px, 5vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 16px;
  color: var(--white);
}
.hero p {
  font-size: 16px;
  opacity: .9;
  max-width: 500px;
  margin: 0 auto 26px;
  line-height: 1.6;
  color: var(--white);
}
.hero .stats {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}
.hero .stats span {
  font-size: 14px;
  opacity: .9;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--white);
}
.hero .stats span::before {
  content: "\2713";
  font-weight: 700;
  color: var(--teal);
  font-size: 16px;
}

/* ── HERO BENEFITS CHECKLIST (top checklist) ── */
.hero-benefits {
  list-style: none;
  max-width: 720px;
  margin: 4px auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 44px;
  text-align: left;
}
@media (max-width: 640px) { .hero-benefits { grid-template-columns: 1fr; max-width: 420px; } }
.hero-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(255,255,255,.88);
}
.hero-benefits li .ck {
  color: var(--sudsy-blue);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.35;
  flex-shrink: 0;
}
.hero-benefits li strong { color: var(--white); font-weight: 700; }

/* ── TRUST BAR (additive) ── */
.trust-bar {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 16px 24px;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
}
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--splash-navy);
  font-weight: 600;
}
.trust-item .ti { display: inline-flex; align-items: center; color: var(--splash-blue); }
.trust-item .ti svg { width: 18px; height: 18px; display: block; }

/* ============================================================================
   CARD SHELL  (.main-div is both the Bootstrap column and the white card)
   Neutralise the col-sm-8 / col-sm-offset-2 sizing so the card centres at a
   capped width and overlaps the hero.
   ============================================================================ */
.main-div {
  background: var(--white) !important;
  width: 100% !important;
  max-width: 860px;
  float: none !important;
  margin: 28px auto 56px !important;   /* sits below the trust bar — no overlap/clipping */
  padding: 0 !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: visible;
}
/* The card's row (#purchaseSection / #thankYouSection) carries Bootstrap's negative
   side margins, which make it wider than the viewport and shift the centred card
   off-centre on mobile. Neutralise them so the card centres cleanly within the
   container (the 15px container padding provides the side gap). */
#purchaseSection,
#thankYouSection {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* inner padding lives on the content wrapper */
#msform {
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
/* #fieldsets is display:flex; flex-direction:column (main.css). Once .main-div is
   no longer floated, this column-flex container fails to resolve its auto width
   and collapses to 0 in Chromium — pin it to 100% so the form fills the card. */
#msform #fieldsets,
#msform #fieldsets > section {
  width: 100% !important;
}
.fs-content {
  padding: 30px 32px;
  box-sizing: border-box;
}
@media (max-width: 600px) {
  .fs-content { padding: 22px 16px; }
}

/* ============================================================================
   SECTION HEADERS (additive .section-label / .section-title / .section-sub)
   + existing plan heading <h5> restyled.
   ============================================================================ */
.section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 6px;
}
.section-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--blue-dark);
  margin: 0 0 4px;
}
.section-sub {
  font-size: 14px;
  color: var(--gray-600);
  margin-bottom: 22px;
}
/* the JS-present plan heading: "Select Your Unlimited Package" */
#customerInformation-div > .row > .col-xs-12 > h5 {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--blue-dark) !important;
  margin: 0 0 4px !important;
}

/* divider used between blocks (additive .form-divider, or a styled <hr>) */
.form-divider,
#customerInformation-div hr {
  height: 1px;
  border: none;
  background: var(--gray-200);
  margin: 26px 0;
}

/* ============================================================================
   PLAN CARDS  — scoped to the two JS-populated plan columns only.
   Markup per plan (generated by SinglePage.js):
     <div class="form-check"><label class="form-check-label">
       <input type="radio" class="form-check-input ulplanRadio" name="optradio" id="..">
       Name - $price/mo plus tax
     </label></div>
   ============================================================================ */
/* All cards render into #UnlimitedPlandiv1 as one ordered grid (2-up desktop,
   1-column mobile) → order stays 1,2,3,4 on every screen. #UnlimitedPlandiv2 unused. */
#UnlimitedPlandiv1 {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin-top: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 16px;
}
#UnlimitedPlandiv2 { display: none !important; }
@media (max-width: 600px) {
  #UnlimitedPlandiv1 { grid-template-columns: 1fr; }
}
#UnlimitedPlandiv1 .form-check,
#UnlimitedPlandiv2 .form-check {
  position: relative;
  margin: 0 !important;
  padding: 0 !important;                      /* padding moves to the label so the
                                                 ENTIRE card is clickable */
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: var(--white);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
#UnlimitedPlandiv1 .form-check:hover,
#UnlimitedPlandiv2 .form-check:hover {
  border-color: var(--blue-light);
  box-shadow: var(--shadow-md);
}
/* hide the native radio (kept in the DOM + functional for JS/validation) */
#UnlimitedPlandiv1 .form-check .ulplanRadio,
#UnlimitedPlandiv2 .form-check .ulplanRadio {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px; height: 1px;
  margin: 0 !important;
  pointer-events: none;
}
#UnlimitedPlandiv1 .form-check .form-check-label,
#UnlimitedPlandiv2 .form-check .form-check-label {
  display: block;
  margin: 0;
  padding: 18px 46px 18px 18px;   /* fills the whole card → entire box is clickable */
  cursor: pointer;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--blue-dark) !important;
  line-height: 1.45;
}
/* custom radio indicator — top-right, aligned with the plan title (cards are now
   taller because of the feature list); click-through so it never blocks the label */
#UnlimitedPlandiv1 .form-check::after,
#UnlimitedPlandiv2 .form-check::after {
  content: "";
  position: absolute;
  top: 19px; right: 16px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--gray-200);
  background: var(--white);
  pointer-events: none;
  transition: all .15s;
}
/* selected state (modern browsers — :has) */
#UnlimitedPlandiv1 .form-check:has(.ulplanRadio:checked),
#UnlimitedPlandiv2 .form-check:has(.ulplanRadio:checked) {
  border-color: var(--blue-dark);
  background: var(--blue-pale);
  box-shadow: 0 0 0 3px rgba(0,48,130,.12);
}
#UnlimitedPlandiv1 .form-check:has(.ulplanRadio:checked)::after,
#UnlimitedPlandiv2 .form-check:has(.ulplanRadio:checked)::after {
  border-color: var(--blue-dark);
  background: var(--blue-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
/* plan name + price line (sits above the feature list) */
#UnlimitedPlandiv1 .form-check .plan-head,
#UnlimitedPlandiv2 .form-check .plan-head {
  display: block;
}
/* included-services checklist under the price — any number of items renders cleanly */
#UnlimitedPlandiv1 .form-check .plan-features,
#UnlimitedPlandiv2 .form-check .plan-features {
  list-style: none;
  margin: 11px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#UnlimitedPlandiv1 .form-check .plan-features li,
#UnlimitedPlandiv2 .form-check .plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--gray-600) !important;
  line-height: 1.35;
}
#UnlimitedPlandiv1 .form-check .plan-features li::before,
#UnlimitedPlandiv2 .form-check .plan-features li::before {
  content: "\2713";
  color: var(--sudsy-blue);
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1.3;
}

/* plan validation error label sits below the cards */
#optradio-error.error { margin-top: 4px; display: block; }

/* ============================================================================
   LOCATION SELECTOR  (.isLocation block + select2)
   .isLocation.hide stays hidden (Bootstrap .hide wins).
   ============================================================================ */
.isLocation {
  clear: both;          /* drop below the floated heading col (Bootstrap floats) */
  background: var(--blue-pale);
  border: 1.5px solid var(--blue-light);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 22px;
}
.isLocation::after { content: ""; display: table; clear: both; }
.isLocation label {
  color: var(--blue-mid) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  margin-bottom: 2px !important;
}
.isLocation .select2-container { width: 100% !important; }
.isLocation .select2-selection,
.isLocation .select2-container--default .select2-selection--single {
  background: var(--white) !important;
  border: 1.5px solid rgba(0,153,214,.4) !important;
  border-radius: var(--radius-sm) !important;
}
/* read-only location name shown (instead of the dropdown) when there's only one location */
.isLocation .nd-location-readonly {
  font-size: 15px;
  font-weight: 700;
  color: var(--splash-navy);
  padding: 6px 0 2px;
  line-height: 1.3;
}

/* ============================================================================
   FORM FIELDS  (labels, inputs, selects)
   ============================================================================ */
#customerInformation-div label,
#msform label {
  color: var(--gray-600) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin-bottom: 5px !important;
}
.required { color: #e53e3e !important; }

#msform input[type=email],
#msform input[type=password],
#msform input[type=tel],
#msform input[type=text],
#msform select.form-control,
.form-control:not(.select2) {
  border: 1.5px solid var(--gray-200) !important;
  border-radius: var(--radius-sm) !important;
  height: 44px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  color: var(--gray-800) !important;
  background-color: var(--white) !important;
  box-shadow: none !important;
  transition: border-color .15s, box-shadow .15s;
}
#msform input[type=email]:focus,
#msform input[type=password]:focus,
#msform input[type=tel]:focus,
#msform input[type=text]:focus,
#msform select.form-control:focus,
.form-control:not(.select2):focus {
  border-color: var(--blue-mid) !important;
  box-shadow: 0 0 0 3px rgba(0,86,179,.12) !important;
  outline: 0 !important;
}
input::placeholder, textarea::placeholder { color: var(--gray-400) !important; }

/* ============================================================================
   CREDIT CARD SECTION
   Additive wrapper <div class="cc-section"> + <div class="cc-header"> around the
   existing credit-card .row (contains #customerInformation + #datacap_payment_form).
   We style WRAPPERS only; Cardknox iframes are left to their JS-injected styles.
   ============================================================================ */
.cc-section {
  background: #e9edf6;            /* deeper than the white fields so they read as fields */
  border: 1.5px solid #dde2ee;
  border-radius: var(--radius-md);
  padding: 20px;
  margin-top: 4px;
}
/* stronger field definition inside the panel */
.cc-section .form-control:not(.select2) {
  border: 1.5px solid #c7cee0 !important;
}
.cc-section > .row { margin-left: 0; margin-right: 0; }
.cc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.cc-header .icon { display: inline-flex; align-items: center; color: var(--splash-blue); }
.cc-header .icon svg { width: 20px; height: 20px; display: block; }
.cc-header .cc-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-800);
}
.cc-header .lock-badge {
  margin-left: auto;
  font-size: 11px;
  color: var(--splash-blue);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.cc-header .lock-badge svg { width: 13px; height: 13px; display: block; }

/* ── Payment fields ──
   All three gateways' markup stays in the DOM; the backend shows only the active
   one. The key fix: the inactive gateway's containers must not render as blank
   white boxes. OpenEdge fields are EMPTY divs until GlobalPayments injects an
   iframe — hide them while empty; box them once populated. Cardknox card/CVV
   iframes keep their JS-injected internal style, so we only set their height and
   leave their wrappers transparent. */
.cc-section .card-number,
.cc-section .card-expiration,
.cc-section .card-cvv { margin: 0; line-height: 0; }
/* Hide inactive (empty) gateway slots so they don't leave blank boxes */
.cc-section .openedge:empty { display: none !important; }
/* Don't box the OpenEdge CONTAINER — that doubled the border and left an inline
   baseline gap below the iframe. The GlobalPayments hosted iframe IS the field:
   make it block (no gap) and give it the standard field border. */
.cc-section .openedge { border: none !important; background: transparent !important; min-height: 0 !important; }
/* GlobalPayments renders an oversized (~62px) iframe with its input in the top
   ~40px and reserved white space below; its height is set inline so CSS can't
   shrink the iframe. Clip the CONTAINER to one field-row and let GP's own input
   border be the field outline (no extra border → no box-in-box). */
/* GP's input is now styled (in initializeGlobalCss) to match the Zip box exactly —
   44px, 1.5px #c7cee0 border, 6px radius, no bottom margin. So the GP INPUT is the
   field; we just clip the container to one row to hide GP's wrapper/error space,
   and add no border of our own (the input already carries the matching border). */
.cc-section .openedge:not(:empty) {
  height: 44px !important;
  overflow: hidden !important;
}
.cc-section .openedge iframe {
  display: block !important;
  width: 100% !important;
  border: none !important;
}
/* Cardknox card / CVV iframes keep their JS-injected INTERNAL border — only size them.
   NOTE: never force `display` here — the JS toggles display:none to switch gateways,
   and a CSS !important would override it and leak hidden fields into the active view. */
.cc-section #iFrame-CardNumber,
.cc-section #iFrame-CVV {
  width: 100% !important;
  height: 44px !important;
}
.cc-section .exp_month { background: transparent !important; border: none !important; }
.cc-section #iFrame-AccounNumber { display: none !important; }  /* ACH iframe stays hidden */

/* ============================================================================
   TERMS + OPT-IN CHECKBOXES  (scoped so plan-card styles never reach them)
   ============================================================================ */
.form-check:has(#MainContent_chktermcondition),
#CheckboxTransactionalMessagingMainContent.form-check,
#CheckboxPromotionalMessagingMainContent.form-check {
  position: static;
  border: none;
  background: transparent;
  padding-left: 1.8rem !important;
  margin-top: 10px !important;
  cursor: default;
}
.form-check:has(#MainContent_chktermcondition)::after,
#CheckboxTransactionalMessagingMainContent.form-check::after,
#CheckboxPromotionalMessagingMainContent.form-check::after {
  content: none !important;   /* no plan-card check indicator here */
}
.form-check .form-check-label,
.form-check-label {
  color: var(--gray-600) !important;
  font-size: 13px !important;
}
#MainContent_chktermcondition,
#MainContent_CheckboxTransactionalMessaging,
#MainContent_CheckboxPromotionalMessaging {
  accent-color: var(--blue-dark);
  width: 16px; height: 16px;
}

/* ============================================================================
   PRIMARY CTA  (.action-button covers #submit-btn [Cardknox] & #pay_button [Datacap])
   Preserve disabled / state classes the JS toggles (custom_btn_dark, cursor_no_drop).
   ============================================================================ */
.action-button,
#msform .action-button,
.credit-card-submit-Cardknox .action-button {
  /* NOTE: display is intentionally NOT !important — SetPaymentMode() calls
     $('#submit-btn').hide() / $('#pay_button').hide() (inline display:none) to show
     only the active gateway's button. An !important here overrode that and leaked
     all three checkout buttons into view. */
  display: block;
  width: 100% !important;
  max-width: 440px;
  height: auto !important;
  margin: 20px auto 0 !important;
  padding: 16px !important;
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-mid) 100%) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  color: var(--white) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.action-button:hover:not([disabled]):not(.cursor_no_drop) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,48,130,.35);
}
.action-button:active { transform: translateY(0); }
.action-button[disabled],
.action-button:disabled,
.action-button.cursor_no_drop {
  opacity: .55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}
/* OpenEdge (GlobalPayments) submit button container — full width / centred so the
   GP button matches the full-width .action-button CTA (overrides main.css width:19%) */
#credit-card-button-div { display: block; }
#credit-card-submit {
  width: 100% !important;
  max-width: 440px;
  margin: 20px auto 0 !important;
}
#credit-card-submit iframe { width: 100% !important; height: 52px !important; display: block; }

/* ============================================================================
   THANK-YOU / SUCCESS SECTION  (#thankYouSection)
   Keeps #signupDate / #firstMonthAmount / #renewDate / .btnPortalSubmit intact.
   ============================================================================ */
#thankYouSection .fs-content { text-align: center; }
#thankYouSection h5 {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--blue-dark) !important;
  margin-bottom: 10px !important;
}
#thankYouSection .row > .col-xs-12 { text-align: center; }
/* additive success icon */
.nd-success-icon {
  width: 76px; height: 76px;
  background: linear-gradient(135deg, var(--splash-blue), var(--sudsy-blue));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 8px auto 22px;
  box-shadow: 0 8px 24px rgba(43,52,145,.3);
}
.nd-success-icon svg { width: 38px; height: 38px; display: block; }
/* the membership-info box */
#thankYouSection .plan-info {
  display: flex;
  justify-content: center;
  margin: 18px 0;
}
#thankYouSection .plan-info > div {
  background: var(--gray-100) !important;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md) !important;
  padding: 20px 24px !important;
  text-align: left;
  min-width: 280px;
  max-width: 360px;
  float: none !important;
  width: auto !important;
}
#thankYouSection .plan-info h5 {
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--blue-dark) !important;
  margin-bottom: 12px !important;
}

/* ============================================================================
   MODALS  (Bootstrap markup preserved — visual only)
   #confirmationPopUp, #paymentConfirmationPopUp, #customarInfoModal
   ============================================================================ */
#confirmationPopUp .modal-content,
#paymentConfirmationPopUp .modal-content,
#customarInfoModal .modal-content {
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 8px;
}
#confirmationPopUp .modal-header,
#paymentConfirmationPopUp .modal-header,
#customarInfoModal .modal-header {
  border-bottom: none !important;
  min-height: 0 !important;
}
#paymentConfirmationPopUp .modal-header.bg-warning {
  background: transparent !important;
  color: var(--blue-dark) !important;
}
#confirmationPopUp h3,
#paymentConfirmationPopUp h4 {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--blue-dark) !important;
}
#confirmationPopUp .modal-footer,
#paymentConfirmationPopUp .modal-footer {
  border-top: none !important;
  justify-content: flex-end;
  gap: 10px;
}
/* primary (yes / confirm) buttons → gradient */
#confirmationPopUp .action-yes-button,
#confirmYes,
#paymentConfirmationPopUp .btn-danger {
  background: linear-gradient(135deg, var(--blue-dark), var(--blue-mid)) !important;
  border: none !important;
  color: var(--white) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 22px !important;
  font-weight: 700 !important;
  width: auto !important;
}
/* secondary (no) buttons */
#confirmationPopUp .btn-secondary,
#paymentConfirmationPopUp .btn-default {
  background: var(--white) !important;
  border: 1.5px solid var(--gray-200) !important;
  color: var(--gray-600) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 22px !important;
  font-weight: 600 !important;
  width: auto !important;
}

/* ============================================================================
   FOOTER  (.footer)  — light, centred, not fixed.
   Beats inline background-color:#282a2b (inline style is not !important).
   ============================================================================ */
.footer {
  position: relative !important;
  width: 100%;
  background-color: transparent !important;
  border: none !important;
  border-top: 1px solid var(--gray-200) !important;
  padding: 22px 16px !important;
  text-align: center;
  color: var(--gray-400) !important;
}
.footer span,
.footer #LabelCopyRights { color: var(--gray-400) !important; font-size: 12px; }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 560px) {
  .hero { padding: 36px 18px 52px; }
  .hero .stats { gap: 14px; }
  .trust-bar { gap: 14px; }
  .main-div { margin: 20px auto 40px !important; }
}