/* Circular Progress bar */
.progress_container {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f6f7f9;
  position: absolute;
  top: -236px;
  left: 42%;
  z-index: 100;
}
.elementor-field-type-acceptance label,
#form-field-email_acceptance + label {
    font-size: 16px !important;
}

#form-field-email_acceptance + label a:hover,
#form-field-acceptance + label a:hover {
    color: #4EAA5A !important;
}

.inner_progress {
  position: absolute !important;
  width: calc(100px - 20px) !important;
  height: calc(100px - 20px) !important;
  border-radius: 50% !important;
  background-color: #fff !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.error-msg,
#error_msg {
  color: red;
  font-size: 15px;
  opacity: 0;
}

.hide {
  display: none;
}

.inner_progress span {
  font-size: 20px !important;
  color: #000 !important;
  background-color: transparent !important;
  text-align: center;
}

#progress_value p {
  font-size: 11px !important;
  margin: 0;
}

.e-form__indicators {
  display: none !important;
}

.elementor-field-type-html:has(#error_msg),
.elementor-field-type-html:has(.error-msg) {
  margin-bottom: 0px !important;
}

/* Form Submmision */
.post_submmision {
  display: none;
}

#checking {
  display: none;
}

.heading {
  gap: 3px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.heading span {
  font-size: 16px;
  line-height: normal;
  color: var(--e-global-color-accent);
  font-style: italic;
  font-weight: 400;
}

.heading p {
  margin: 0px;
  font-size: 26px;
  font-weight: 600;
}

.elementor-field-type-step {
  justify-content: center;
}

.elementor-field-group-first_name input,
.elementor-field-group-last_name input,
#form-field-phone_number,
#form-field-email,
.elementor-field-group-ssn_no input,
.elementor-field-group-dob input,
.elementor-field-group-street_address input,
.elementor-field-group-zip_code input,
#form-field-property_street_address,
#form-field-property_zip_code,
#form-field-state,
#form-field-city {
  padding: 20px 35px !important;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  color: var(--e-global-color-f2b6217) !important;
  margin: 0 auto;
}

.elementor-field-type-radio input[type="radio"] {
  display: none !important;
}

.elementor-field-group-common_home_value .elementor-field-subgroup {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.elementor-field-group-ssn_no::after {
  background-image: url("/wp-content/uploads/2025/01/number.svg");
}

.elementor-field-group-street_address::after,
.elementor-field-group-property_street_address::after {
  background-image: url("/wp-content/uploads/2024/03/own-home.svg");
}

.elementor-field-group-zip_code::after,
.elementor-field-group-property_zip_code::after {
  background-image: url("/wp-content/uploads/2024/03/location-icon.svg");
}

.elementor-field-group-phone_number::after {
  background-image: url("/wp-content/uploads/2024/03/phone-icon.svg");
}
.elementor-field-group-email::after {
  background-image: url("/wp-content/uploads/2024/03/mail-icon.svg");
}

.elementor-field-group-common_mortgage_balance
  .elementor-field-option:has(input[type="radio"])
  label,
.elementor-field-group-common_home_value
  .elementor-field-option:has(input[type="radio"])
  label {
  border: 1px solid #d9d9d9;
  padding: 7px 20px;
  border-radius: 30px;
  width: 100%;
  display: block;
  text-align: center;
  cursor: pointer;
  color: var(--e-global-color-5ce0202);
  font-size: 13px !important;
}

.elementor-field-group-common_mortgage_balance
  .elementor-field-option:has(input[type="radio"])
  label:hover,
.elementor-field-group-common_home_value
  .elementor-field-option:has(input[type="radio"])
  label:hover {
  background-color: var(--e-global-color-accent);
  color: #fff;
  border: 1px solid var(--e-global-color-accent);
}

#mortgage_form input[type="text"]:focus,
input[type="number"]:focus {
  border-color: var(--e-global-color-accent) !important;
}

/* 
* Buttons
*/
.elementor-button:hover {
  background-position: left;
}

.e-form__buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.mortgage_form .elementor-field-type-previous button {
  background: 0 0 !important;
  color: #000 !important;
  padding: 0;
  min-height: 15px !important;
  font-weight: 400 !important;
  outline: 0 !important;
}

.elementor-field-type-previous button:hover {
  text-decoration: none;
}

.mortgage_form .elementor-field-type-next {
  width: 30%;
}

.mortgage_form button {
  width: 100%;
}

#form-field-mortgage_balance,
#form-field-home_value,
#form-field-outstanding_balance {
  border: none;
  background: 0 0;
  font-size: 28px;
  font-weight: 400;
  text-align: center;
  border: 1px solid #d9d9d9;
  color: var(--e-global-color-5ce0202) !important;
  padding: 15px;
  border-radius: 20px;
}

.elementor-field-group-mortgage_balance::before,
.elementor-field-group-home_value::before {
  content: "$";
  position: absolute;
  font-size: 22px;
  font-weight: 400;
  bottom: 20px;
  left: 24px;
  color: var(--e-global-color-5ce0202);
}

.elementor-field-group-home_value::after,
.elementor-field-group-mortgage_balance::after,
.elementor-field-group-first_name::after,
.elementor-field-group-last_name::after,
.elementor-field-group-dob::after,
.elementor-field-group-ssn_no::after,
.elementor-field-group-street_address::after,
.elementor-field-group-zip_code::after,
.elementor-field-group-property_street_address::after,
.elementor-field-group-property_zip_code::after {
  width: 40px;
  height: 34px;
  position: absolute;
  bottom: 16px;
  right: 20px;
  background-repeat: no-repeat;
  content: "";
  background-size: contain;
}

.elementor-field-group-street_address,
.elementor-field-group-zip_code,
.elementor-field-group-property_street_address,
.elementor-field-group-property_zip_code {
  position: relative;
}

.elementor-field-group-home_value::after,
.elementor-field-group-mortgage_balance::after {
  background-image: url("/wp-content/uploads/2024/03/cash-icon.svg");
}

.elementor-field-group-first_name::after,
.elementor-field-group-last_name::after {
  background-image: url("/wp-content/uploads/2024/03/user-icon.svg");
}
.elementor-field-group-dob::after {
  background-image: url("/wp-content/uploads/2024/03/calendar-icon.svg");
}

.elementor-field-group-ssn_no::after {
  background-image: url("/wp-content/uploads/2025/03/SSN.svg");
}

.elementor-field-group-common_mortgage_balance
  .elementor-field-option:has(input:checked),
.elementor-field-group-common_home_value
  .elementor-field-option:has(input:checked) {
  background-color: var(--e-global-color-accent);
  border-radius: 30px;
}

.elementor-field-group-common_mortgage_balance
  .elementor-field-option:has(input:checked)
  label,
.elementor-field-group-common_home_value
  .elementor-field-option:has(input:checked)
  label {
  color: #fff !important;
  border-color: var(--e-global-color-accent);
}

.elementor-field-group-common_mortgage_balance label,
.elementor-field-group-common_home_value label {
  font-weight: 400 !important;
}

/* Loan Type and Property Type Credit Score */
.elementor-field-group-loan_type .elementor-field-subgroup,
.elementor-field-group-property_type .elementor-field-subgroup,
.elementor-field-group-credit_score .elementor-field-subgroup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.elementor-field-group-loan_type label,
.elementor-field-group-property_type label,
.elementor-field-group-credit_score label {
  border: 1px solid #45BE55;
  border-radius: 5px;
  padding: 10px;
  display: flex !important;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
  text-align: center;

  font-size: 16px !important;
  line-height: normal !important;
  font-weight: 500 !important;
  padding: 15px 0px !important;
  width: 100%;
  text-align: center;
}

.elementor-field-group-loan_type label:hover,
.elementor-field-group-property_type label:hover,
.elementor-field-group-credit_score label:hover {
  border: 1px solid var(--e-global-color-accent);
  color: var(--e-global-color-accent) !important;
  background-color: #f7fcf8;
}

.elementor-field-group-loan_type
  .elementor-field-option:has(input:checked)
  label,
.elementor-field-group-property_type
  .elementor-field-option:has(input:checked)
  label,
.elementor-field-group-credit_score
  .elementor-field-option:has(input:checked)
  label {
  border: 1px solid var(--e-global-color-accent);
  background-color: #f7fcf8;
}

.elementor-field-group-loan_type .elementor-field-option label::before,
.elementor-field-group-property_type .elementor-field-option label::before,
.elementor-field-group-credit_score .elementor-field-option label::before {
  content: "";
  display: block;
  width: 50px;
  cursor: pointer;
  min-width: 60px;
  margin-bottom: 5px;
  height: 50px;
  position: relative;
  background-color: #00000080;
}

/* Loan Type */
.elementor-field-group-loan_type
  .elementor-field-option:nth-child(1)
  label::before {
  -webkit-mask: url("/wp-content/uploads/2025/12/Refinance-2.svg")
    no-repeat 50% 50%;
  mask: url("/wp-content/uploads/2025/12/Refinance-2.svg") no-repeat 50%
    50%;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--e-global-color-accent);
}

.elementor-field-group-loan_type
  .elementor-field-option:nth-child(2)
  label::before {
  -webkit-mask: url("/wp-content/uploads/2025/12/purchase.svg") no-repeat 50%
    50%;
  mask: url("/wp-content/uploads/2025/12/purchase.svg") no-repeat 50% 50%;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--e-global-color-accent);
}

/* Property Type */
.elementor-field-group-property_type
  .elementor-field-option:nth-child(1)
  label::before {
  -webkit-mask: url("/wp-content/uploads/2025/12/single-family.svg")
    no-repeat 50% 50%;
  mask: url("/wp-content/uploads/2025/12/single-family.svg") no-repeat 50%
    50%;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--e-global-color-accent);
}

.elementor-field-group-property_type
  .elementor-field-option:nth-child(2)
  label::before {
  -webkit-mask: url("/wp-content/uploads/2025/12/multifamily.svg")
    no-repeat 50% 50%;
  mask: url("/wp-content/uploads/2025/12/multifamily.svg") no-repeat 50%
    50%;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--e-global-color-accent);
}

.elementor-field-group-property_type
  .elementor-field-option:nth-child(3)
  label::before {
  -webkit-mask: url("/wp-content/uploads/2025/12/condominium-1.svg")
    no-repeat 50% 50%;
  mask: url("/wp-content/uploads/2025/12/condominium-1.svg") no-repeat 50%
    50%;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--e-global-color-accent);
}

.elementor-field-group-property_type
  .elementor-field-option:nth-child(4)
  label::before {
  -webkit-mask: url("/wp-content/uploads/2025/12/mobile-home.svg")
    no-repeat 50% 50%;
  mask: url("/wp-content/uploads/2025/12/mobile-home.svg") no-repeat 50%
    50%;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--e-global-color-accent);
}

/* Credit Score */

.elementor-field-group-credit_score
  .elementor-field-option:nth-child(1)
  label::before {
  -webkit-mask: url("/wp-content/uploads/2025/12/excellent-2.svg")
    no-repeat 50% 50%;
  mask: url("/wp-content/uploads/2025/12/excellent-2.svg") no-repeat 50%
    50%;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--e-global-color-accent);
}

.elementor-field-group-credit_score
  .elementor-field-option:nth-child(2)
  label::before {
  -webkit-mask: url("/wp-content/uploads/2025/12/good.svg")
    no-repeat 50% 50%;
  mask: url("/wp-content/uploads/2025/12/good.svg") no-repeat 50%
    50%;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--e-global-color-accent);
}

.elementor-field-group-credit_score
  .elementor-field-option:nth-child(3)
  label::before {
  -webkit-mask: url("/wp-content/uploads/2025/12/fair-2.svg")
    no-repeat 50% 50%;
  mask: url("/wp-content/uploads/2025/12/fair-2.svg") no-repeat 50%
    50%;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--e-global-color-accent);
}

.elementor-field-group-credit_score
  .elementor-field-option:nth-child(4)
  label::before {
  -webkit-mask: url("/wp-content/uploads/2025/12/poor.svg")
    no-repeat 50% 50%;
  mask: url("/wp-content/uploads/2025/12/poor.svg") no-repeat 50%
    50%;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--e-global-color-accent);
}

/***
* Range slider
****/
.interest-rate-text {
  margin: 0px;
  text-align: center;
}

.range-slider {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  column-gap: 20px;
  justify-content: space-evenly;
  align-items: center;
}

.range-slider input {
  flex: 1;
}

.range-slider span {
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
}

.range {
  position: relative;
  background: #fff0;
  overflow: hidden;
  color: var(--e-form-steps-indicator-progress-color);
  --thumb-height: 2em;
  --thumb-width: 2em;
  --track-height: 0.3em;
  --track-color: rgba(0, 0, 0, 0.2);
  --brightness-hover: 180%;
  --brightness-down: 80%;
  --clip-edges: 0.125em;
}

.range:active {
  cursor: grabbing;
}

/* === WebKit specific styles === */
.range,
.range::-webkit-slider-runnable-track,
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  transition: all ease 100ms;
  height: var(--thumb-height);
}

.range::-webkit-slider-runnable-track,
.range::-webkit-slider-thumb {
  position: relative;
}

.range::-webkit-slider-thumb {
  --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
  --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
  --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
  --clip-further: calc(100% + 1px);
  --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0
    100vmax currentColor;

  width: var(--thumb-width, var(--thumb-height));
  background: #ffffff;
  box-shadow: var(--box-fill);
  border: 0.25rem solid var(--e-form-steps-indicator-progress-color);
  border-radius: var(--thumb-width, var(--thumb-height));

  filter: brightness(100%);
  clip-path: polygon(
    100% -1px,
    var(--clip-edges) -1px,
    0 var(--clip-top),
    -100vmax var(--clip-top),
    -100vmax var(--clip-bottom),
    0 var(--clip-bottom),
    var(--clip-edges) 100%,
    var(--clip-further) var(--clip-further)
  );
}

.range:hover::-webkit-slider-thumb {
  filter: brightness(var(--brightness-hover));
  cursor: grab;
}

.range:active::-webkit-slider-thumb {
  filter: brightness(var(--brightness-down));
  cursor: grabbing;
}

.range::-webkit-slider-runnable-track {
  background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center /
    100% calc(var(--track-height) + 1px);
}

.range:disabled::-webkit-slider-thumb {
  cursor: not-allowed;
}

.elementor-field-type-html:has(.range-slider) {
  margin-bottom: 20px;
}

@media only screen and (max-width: 768px) {
  .elementor-field-group-common_mortgage_balance .elementor-field-subgroup,
  .elementor-field-group-common_home_value .elementor-field-subgroup {
    grid-template-columns: 1fr 1fr;
  }

  .elementor-field-group-common_mortgage_balance
    .elementor-field-option:has(input[type="radio"])
    label {
    padding: 7px 10px !important;
  }

  input[type="date"]::-webkit-inner-spin-button,
  input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
  }
}

@media (max-width: 430px) {
  .elementor-field-group-common_mortgage_balance
    .elementor-field-option:has(input[type="radio"])
    label {
    border-radius: 30px;
  }
}
