/* ============================================================================
   WHI Lead Form Module - self-contained form styles
   (scoped under .step-pform so it won't clash with the host page)
   ========================================================================== */

.step-pform { box-sizing: border-box; }
.step-pform *, .step-pform *::before, .step-pform *::after { box-sizing: border-box; }

.step { display: none; }
.step.active { display: block; }

.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  position: relative;
}
.form-row label {
  width: 40%;
  font-size: 18px;
  color: #8ec1c5;
  font-weight: 700;
  font-family: 'Omnes', sans-serif;
}
.input-box { width: 60%; }
.input-box-full { width: 100%; }

.step-pform input {
  border: 2px solid #073236;
  border-radius: 4px;
  height: 3.125rem;
  padding: .75rem;
  width: 100%;
  font-size: 16px;
  font-family: 'Omnes', sans-serif;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.step-pform input::placeholder { color: #495057; }

/* ---- Validation states ---- */
.step-pform input.is-invalid,
.step-pform select.is-invalid {
  border-color: #ef4444 !important;
  background-color: #fff5f5;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .18);
}
.step-pform input.is-valid,
.step-pform select.is-valid {
  border-color: #18a758 !important;
  box-shadow: 0 0 0 3px rgba(24, 167, 88, .12);
}

.error {
  color: #ef6666 !important;
  letter-spacing: .5px;
  font-size: 12px;
  display: none;
  margin-top: 6px;
  text-align: left;
  position: relative !important;
  font-family: 'Omnes', sans-serif;
  font-weight: 600;
}
.error.show { display: block; }
.error.text-right { text-align: right; right: 0; }

.step-pform button {
/*  background-color: #18a758;*/
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 18px;
  cursor: pointer;
  border-radius: 3px;
  width: 100%;
  line-height: 1.5;
  font-family: 'Omnes', sans-serif;
}
.step-pform .secondary { background: transparent !important; font-size: 14px; }
.step-pform button:hover { opacity: .8; }
.step-pform button:disabled { opacity: .55; cursor: not-allowed; }

.small-text { font-size: 12px; margin-top: 10px; color: #fff; font-family: 'Omnes', sans-serif; }

.required { font-size: 32px; color: #18a758; line-height: 1; vertical-align: top; margin-left: 5px; }

.custom-radio { text-align: right; }
label.radio-option {
  display: inline-block; margin-right: 16px; padding: 0 !important;
  cursor: pointer; font-size: 16px; width: auto; color: #fff;
  font-family: 'Omnes', sans-serif;
}
.radio-option { display: flex; align-items: center; gap: 8px; cursor: pointer; color: #fff; font-size: 14px; }
.radio-option input { display: none; }
.circle {
  width: 20px; height: 20px; background-color: #eee; border-radius: 50%;
  position: relative; display: inline-block; margin-right: 7px; top: 5px;
}
.radio-option input:checked + .circle { background-color: #f9a401; }
.radio-option input:checked + .circle::after {
  content: ""; width: 10px; height: 10px; background: #fff; border-radius: 50%;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}

.step-pform {
  background-color: #083336;
  border-radius: 5px;
  max-width: 540px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.step-pform h2 {
  margin: 0 0 30px; padding-top: 30px; display: block;
  color: #fff !important; font-size: 2rem; text-align: center;
}
.form-boxes { padding: 0 60px; }
.form-actions {
  overflow: auto; text-align: right; background: #042a2d;
  padding: 16px 24px; margin-top: 30px;
}

.select-css {
  color: #444; line-height: 1.3; padding: .6em 1.4em .5em .8em;
  width: 100%; max-width: 100%; margin: 0; border: 1px solid #aaa; border-radius: .5em;
  -moz-appearance: none; -webkit-appearance: none; appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 292.4 292.4'><path fill='%23042a2d' d='M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z'/></svg>");
  background-repeat: no-repeat, repeat; background-position: right .7em top 50%, 0 0;
  background-size: .65em auto, 100%; font-weight: 700; font-size: 16px; display: block;
  font-family: 'Omnes', sans-serif;
}
.select-css:focus { border-color: #aaa; color: #222; outline: 0; box-shadow: 0 0 0 3px rgba(59,153,252,.6); }
.select-css.is-invalid { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,.18); }
.select-css option { font-weight: 400; }

/* ---- Loader overlay ---- */
#lf_loader {
  position: fixed; inset: 0; width: 100%; height: 100%;
  background: rgba(255,255,255,0.92) !important; z-index: 99999;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.lf-spinner {
  width: 50px; height: 50px; border: 5px solid #ddd; border-top: 5px solid #18A758 !important;
  border-radius: 50%; animation: lfspin 1s linear infinite; margin-bottom: 13px;
}
@keyframes lfspin { 100% { transform: rotate(360deg); } }

#lf_success {
  margin-top: 15px; padding: 12px 16px; border-radius: 6px; font-size: 14px; font-weight: 500;
  color: #155724; background-color: #d4edda; border: 1px solid #c3e6cb;
}
#lf_error {
  margin: 0 60px 16px; padding: 12px 16px; border-radius: 6px; font-size: 14px; font-weight: 500;
  color: #4d061c; background-color: #edd4d8; border: 1px solid #e8102a;
}

@media (max-width:991px) {
  .form-row { display: block; }
  .input-box { width: 100%; }
  .step-pform { margin: 0 auto; }
  .form-boxes { padding: 0 30px; }
  .custom-radio { text-align: left; }
  .error.text-right { text-align: right; right: unset; }
  #lf_error { margin: 0 30px 16px; }
}

@media (max-width:767px) { 
 
.step-pform h2 {
    font-size: 24px;
    margin-bottom: 13px;
	 padding-top: 17px;
}
.form-row {
    margin-bottom: 10px;
}

.form-actions {
    margin-top: 14px;
}
.hero-wrapper .trustpilot-widget {
    height: 117px;
}	

}







