/* =============================================
   JUSTSAFE LANDING PAGE THEME VARIANTS
   Appended to main_2025.css

   Two variants scoped by body class:
   - .theme-fingerprint (black, matches fingerprint ad)
   - .theme-stats (navy, matches stats ad)

   EveryAction loads at.min.css from CDN which
   competes for specificity — !important used
   where needed to win the cascade.
   ============================================= */


/* =============================================
   FINGERPRINT VARIANT — .theme-fingerprint
   ============================================= */

/* --- Page & Container Backgrounds ---
   Force the entire chain transparent so the dark
   body bg shows through the left column area.
   Only the form card stays white. */
.theme-fingerprint {
  background-color: #1a1a1a !important;
}

.theme-fingerprint #content {
  background-color: transparent !important;
  background: transparent !important;
  color: #fff !important;
}

.theme-fingerprint .everyaction-page .at,
.theme-fingerprint .everyaction-page .at-inner,
.theme-fingerprint .everyaction-page .at-form {
  background-color: transparent !important;
  background: transparent !important;
}

/* --- Header ---
   Dark bar, white logo (filter inverts the SVG) */
.theme-fingerprint #header {
  background-color: #1a1a1a !important;
  background: #1a1a1a !important;
  padding: 25px 0 !important;
}

.theme-fingerprint #header #logo img {
  filter: brightness(0) invert(1);
}

/* --- Headline Banner ---
   Light gray full-width bar above the two columns.
   Targets the EveryAction form title element. */
.theme-fingerprint .everyaction-page header.at-title {
  background-color: #f4f4f4 !important;
  color: #28283b !important;
  padding: 20px 30px !important;
  border-radius: 12px;
  box-sizing: border-box;
  margin: 0 auto 20px auto !important;
}

.theme-fingerprint .everyaction-page header.at-title,
.theme-fingerprint .everyaction-page header.at-title * {
  color: #28283b !important;
}

/* --- Left Column (HeaderHtml) ---
   White text on dark page bg, orange accents.
   EveryAction injects this from the form definition.
   Needs !important to beat at.min.css rules. */
.theme-fingerprint .everyaction-page .at-form .HeaderHtml,
.theme-fingerprint .everyaction-page .at-form .HeaderHtml div,
.theme-fingerprint .everyaction-page .at-form .HeaderHtml p,
.theme-fingerprint .everyaction-page .at-form .HeaderHtml li,
.theme-fingerprint .everyaction-page .at-form .HeaderHtml span,
.theme-fingerprint .everyaction-page .at-form .HeaderHtml strong,
.theme-fingerprint .everyaction-page .at-form .HeaderHtml em,
.theme-fingerprint .everyaction-page .at-form .HeaderHtml header {
  color: #fff !important;
}

.theme-fingerprint .everyaction-page .at-form .HeaderHtml a {
  color: #fc5f00 !important;
}

.theme-fingerprint .everyaction-page .at-form .HeaderHtml h1,
.theme-fingerprint .everyaction-page .at-form .HeaderHtml h2 {
  color: #fc5f00 !important;
}

/* --- Form Card ---
   White card with shadow for depth against dark bg.
   Amount buttons preserved with white text. */
.theme-fingerprint .everyaction-page .at form {
  background: #fff !important;
  color: #393838 !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

/* Preserve white text on amount buttons — needs double class to beat label rule */
.theme-fingerprint .everyaction-page .at form .label-amount > a,
.theme-fingerprint .everyaction-page .at form label.label-amount > a {
  color: #fff !important;
}

.theme-fingerprint .everyaction-page .at form label.label-amount {
  color: #fff !important;
}

.theme-fingerprint .everyaction-page .at form label {
  color: #393838 !important;
}

.theme-fingerprint .everyaction-page .at fieldset legend {
  color: #393838 !important;
}

.theme-fingerprint .everyaction-page .at form input[type="text"],
.theme-fingerprint .everyaction-page .at form input[type="email"],
.theme-fingerprint .everyaction-page .at form input[type="tel"],
.theme-fingerprint .everyaction-page .at form input[type="number"],
.theme-fingerprint .everyaction-page .at form input[type="password"],
.theme-fingerprint .everyaction-page .at form select,
.theme-fingerprint .everyaction-page .at form textarea {
  border-color: #b0b0b0 !important;
}

/* --- Legal Text --- */
.theme-fingerprint .everyaction-page .at-legal,
.theme-fingerprint .everyaction-page .at-legal * {
  color: #b0b0b0 !important;
}

/* --- Step Indicators --- */
.theme-fingerprint .everyaction-page .at .at-steps .at-step {
  color: #999 !important;
}

.theme-fingerprint .everyaction-page .at .at-steps .at-step.active {
  color: #393838 !important;
}

/* --- Footer ---
   Dark to match page, white text/icons */
.theme-fingerprint #footer {
  background-color: #111 !important;
  background: #111 !important;
  color: #fff !important;
}

.theme-fingerprint #footer p {
  color: rgba(255, 255, 255, 0.7) !important;
}

.theme-fingerprint #footer a {
  color: rgba(255, 255, 255, 0.85) !important;
}

.theme-fingerprint #footer ul.social-menu li a {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
}

.theme-fingerprint #footer ul.social-menu li a:hover {
  background-color: #fc5f00 !important;
  color: #fff !important;
}


/* =============================================
   STATS VARIANT — .theme-stats
   ============================================= */

/* --- Page & Container Backgrounds --- */
.theme-stats {
  background-color: #003972 !important;
}

.theme-stats #content {
  background-color: transparent !important;
  background: transparent !important;
  color: #fff !important;
}

.theme-stats .everyaction-page .at,
.theme-stats .everyaction-page .at-inner,
.theme-stats .everyaction-page .at-form {
  background-color: transparent !important;
  background: transparent !important;
}

/* --- Header --- */
.theme-stats #header {
  background-color: #003972 !important;
  background: #003972 !important;
  padding: 25px 0 !important;
}

.theme-stats #header #logo img {
  filter: brightness(0) invert(1);
}

/* --- Headline Banner --- */
.theme-stats .everyaction-page header.at-title {
  background-color: #f4f4f4 !important;
  color: #28283b !important;
  padding: 20px 30px !important;
  border-radius: 12px;
  box-sizing: border-box;
  margin: 0 auto 20px auto !important;
}

.theme-stats .everyaction-page header.at-title,
.theme-stats .everyaction-page header.at-title * {
  color: #28283b !important;
}

/* --- Left Column (HeaderHtml) --- */
.theme-stats .everyaction-page .at-form .HeaderHtml,
.theme-stats .everyaction-page .at-form .HeaderHtml div,
.theme-stats .everyaction-page .at-form .HeaderHtml p,
.theme-stats .everyaction-page .at-form .HeaderHtml li,
.theme-stats .everyaction-page .at-form .HeaderHtml span,
.theme-stats .everyaction-page .at-form .HeaderHtml strong,
.theme-stats .everyaction-page .at-form .HeaderHtml em,
.theme-stats .everyaction-page .at-form .HeaderHtml header {
  color: #fff !important;
}

.theme-stats .everyaction-page .at-form .HeaderHtml a {
  color: #fc5f00 !important;
}

.theme-stats .everyaction-page .at-form .HeaderHtml h1,
.theme-stats .everyaction-page .at-form .HeaderHtml h2 {
  color: #fc5f00 !important;
}

/* --- Form Card --- */
.theme-stats .everyaction-page .at form {
  background: #fff !important;
  color: #393838 !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

/* Preserve white text on amount buttons — needs double class to beat label rule */
.theme-stats .everyaction-page .at form .label-amount > a,
.theme-stats .everyaction-page .at form label.label-amount > a {
  color: #fff !important;
}

/* Amount labels specifically should not override button text */
.theme-stats .everyaction-page .at form label.label-amount {
  color: #fff !important;
}

.theme-stats .everyaction-page .at form label {
  color: #393838 !important;
}

.theme-stats .everyaction-page .at fieldset legend {
  color: #393838 !important;
}

.theme-stats .everyaction-page .at form input[type="text"],
.theme-stats .everyaction-page .at form input[type="email"],
.theme-stats .everyaction-page .at form input[type="tel"],
.theme-stats .everyaction-page .at form input[type="number"],
.theme-stats .everyaction-page .at form input[type="password"],
.theme-stats .everyaction-page .at form select,
.theme-stats .everyaction-page .at form textarea {
  border-color: #b0b0b0 !important;
}

/* --- Legal Text --- */
.theme-stats .everyaction-page .at-legal,
.theme-stats .everyaction-page .at-legal * {
  color: #a8c4e0 !important;
}

/* --- Step Indicators --- */
.theme-stats .everyaction-page .at .at-steps .at-step {
  color: #7fa8cc !important;
}

.theme-stats .everyaction-page .at .at-steps .at-step.active {
  color: #393838 !important;
}

/* --- Footer --- */
.theme-stats #footer {
  background-color: #002a56 !important;
  background: #002a56 !important;
  color: #c8daf0 !important;
}

.theme-stats #footer p {
  color: #c8daf0 !important;
}

.theme-stats #footer a {
  color: #c8daf0 !important;
}

.theme-stats #footer ul.social-menu li a {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
}

.theme-stats #footer ul.social-menu li a:hover {
  background-color: #fc5f00 !important;
  color: #fff !important;
}


/* =============================================
   SHARED RESPONSIVE — MOBILE STACKING
   ============================================= */

@media (max-width: 992px) {

  .theme-fingerprint .everyaction-page .at-form .HeaderHtml,
  .theme-fingerprint .everyaction-page .at-form form,
  .theme-stats .everyaction-page .at-form .HeaderHtml,
  .theme-stats .everyaction-page .at-form form {
    float: none !important;
    width: 100% !important;
  }

  .theme-fingerprint .everyaction-page header.at-title,
  .theme-stats .everyaction-page header.at-title {
    padding: 15px 20px !important;
    border-radius: 8px 8px 0 0;
  }

  .theme-fingerprint .everyaction-page .at form,
  .theme-stats .everyaction-page .at form {
    border-radius: 12px;
    margin-top: 20px;
  }

  .theme-fingerprint #header,
  .theme-stats #header {
    padding: 15px 0 !important;
  }
}