/* ===========================================================
   Form Engine CSS  —  styles the dynamic JSON-driven form
   (builder.js / logic.js / custom.js)
   Loaded AFTER css/style.css so these rules win on conflict.
   =========================================================== */

/* ===== Form wrapper / centered slide layout ===== */
#form-wrapper {
  margin: 0 auto;
  width: 100%;
}

/* Each slide (rendered by builder.js as <div class="slide form-step">) */
.form-step {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px 25px 10px;
  text-align: center;
}

/* ===== Slide title (H2) — override style.css global h2 { color:#fff } ===== */
.form-step h2 {
  font-family: 'Roboto', 'Open Sans', Arial, sans-serif !important;
  font-size: 22pt !important;
  font-weight: 700 !important;
  color: #292929 !important;
  text-align: center !important;
  margin: 0 0 8px !important;
  line-height: 1.2;
}

/* ===== Slide subtitle (H3) — override style.css global h3 ===== */
.form-step h3 {
  font-family: 'Roboto', 'Open Sans', Arial, sans-serif !important;
  font-size: 12pt !important;
  font-weight: 400 !important;
  color: #666 !important;
  text-align: center !important;
  margin: 0 0 18px !important;
}

/* Hide the subtitle entirely when its text content is empty */
.form-step h3:empty {
  display: none;
}

/* ===== Progress bar / percent text ===== */
#progress_wrapper {
  text-align: center;
  max-width: 300px;
  margin: 10px auto 16px;
  display: none;
}

#progress_wrapper .progress {
  height: 10px;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
}

#progress_wrapper .progress-bar {
  background-color: #a91013;
  box-shadow: none;
  transition: width 0.35s ease;
}

#percent {
  display: block;
  text-align: center;
  font-size: 12px;
  margin-top: 4px;
  color: #525252;
}

/* ===== Error message ===== */
#error-message {
  max-width: 500px;
  margin: 10px auto;
  padding: 10px 14px;
  border-radius: 4px;
  background: #fdecea;
  color: #b71c1c;
  border: 1px solid #f5c2c0;
}

/* ===== Inputs (text / email / tel / select) — matches SSDI baseline ===== */
.form-step input[type="text"],
.form-step input[type="email"],
.form-step input[type="tel"],
.form-step select {
  border: 2px solid #a4a4a4 !important;
  color: #a4a4a4;
  width: 100%;
  font-size: 1.25rem;
 /** padding: 0.75rem 1.25rem;**/
  border-radius: 6px !important;
  background-color: #fff;
  line-height: 1.4;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.form-step .form-control-lg,
.form-step .form-select-lg {
  font-size: 1.25rem !important;
  /**padding: 0.75rem 1.25rem !important;**/
  border-radius: 6px !important;
}

.form-step ::placeholder {
  color: #a4a4a4 !important;
  opacity: 1;
}

.form-step input[type="text"]:focus,
.form-step input[type="email"]:focus,
.form-step input[type="tel"]:focus,
.form-step select:focus {
  outline: none;
  border-color: #2eaef1 !important;
  box-shadow: 0 0 5px rgba(46, 174, 241, 0.4);
}

.form-step input[type="radio"]:focus-visible {
  outline: none;
}

/* ===== Custom SVG dropdown arrow on selects ===== */
.form-step select::-ms-expand {
  display: none;
}

.form-step select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='gray'><path d='M5 7l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 14px;
  padding-right: 2.25rem !important;
}

/* ===== Radio "buttons" rendered by builder.js (.bttn) ===== */
.bttn {
  background-color: #fff;
  color: #292929;
  font-weight: bold;
  border: 2px solid #292929;
  border-radius: 6px;
  font-size: 1.15rem;
  padding: 12px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s, color 0.2s;
  min-height: 48px;
  line-height: 1.4;
  text-align: center;
}

.bttn:hover,
.bttn.active {
  background-color: #203769;
  border-color: #203769;
  color: #fff;
}

/* ===== Next / Submit buttons — full-width, Bootstrap-blue defaults stay ===== */
.form-step .btn-primary,
.form-step .btn-success {
  display: block;
  width: 100%;
  font-weight: bold;
  font-size: 1.25rem;
  padding: 14px;
  margin-top: 12px;
  border-radius: 6px;
  text-align: center;
}

/* ===== Interstitial "Searching..." progress bar (autoAdvanceMs slides) ===== */
.interstitial-wrapper {
  margin: 18px auto 24px;
  max-width: 480px;
  padding: 0 10px;
}

.interstitial-track {
  width: 100%;
  height: 14px;
  background: #e5e5e5;
  border-radius: 7px;
  overflow: hidden;
}

.interstitial-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #1e90ff, #2eaef1);
  border-radius: 7px;
}

/* ===== TCPA disclaimer area — matches lp14 original styling ===== */
#disclaimer {
  font-size: 9pt;
  color: #8a8a8a;
  margin: 10px auto;
  text-align: center;
}

@media (min-width: 768px) {
  #disclaimer {
    max-width: 450px;
  }
}

#disclaimer label {
  font-weight: normal;
  margin: 0;
}

/* Force gray link color — overrides style.css's global "a:link, a:visited..." rule
   which (due to broken comma syntax) makes all links white. */
#disclaimer a,
#disclaimer a:link,
#disclaimer a:visited,
#disclaimer a:hover,
#disclaimer a:active {
  color: #8a8a8a !important;
  text-decoration: underline;
}

/* ===== Honeypot field (hide both the input and its mb-3 wrapper) ===== */
.hp-field,
.mb-3:has(> .hp-field),
.mb-3:has(> input[name="FullName"]) {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  height: 1px !important;
  width: 1px !important;
  margin: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ===== Mobile tweaks ===== */
@media screen and (max-width: 650px) {
  .form-step { padding: 15px 15px 10px; }
  .form-step h2 { font-size: 18pt !important; }
  .form-step h3 { font-size: 11pt !important; }
  .bttn { font-size: 1.05rem; padding: 10px; }
  .form-step .btn-primary,
  .form-step .btn-success { font-size: 1.1rem; padding: 12px; }
}