.form-container-unique {
    background: #1F2D69;
    box-shadow: none;
}

.form-heading-unique {
    color: #fff
}

.form-group-unique select,
.form-group-unique input,
.form-group-unique input::placeholder,
.form-group-unique label {
    color: #fff;
    opacity: 1;
}

.form-group-unique input {
    border: 1px solid #ffffff;
}

.form-group-unique select {
    padding: 10px;
    font-size: 16px;
    outline: none;
    border-radius: 7.64px;
    border: 1.273px solid rgba(20, 47, 87, 0.09);
    border: 1.273px solid #fff;
    background: rgba(196, 203, 215, 0.10);
    display: block;
    height: 56.027px;
    width: 100%;
    color: #fff;
}

.form-group-unique select option {
    color: #1F2D69;
    background-color: #ffffff;
}

/* Windows fix: ensure dropdown text is visible when opened */
.form-group-unique select:focus,
.form-group-unique select:active {
    color: #1F2D69 !important;
    background-color: #ffffff !important;
}

.form-group-unique input[type="radio"] {
    height: 0px;
    width: auto;
    position: absolute;
    appearance: none;
    opacity: 0;
}

.form-group-unique label:has(input[type="radio"]) {
    background: #1F2D69;
    color: white;
    padding: 8px 12px;
    opacity: 1;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
    color: #FFF;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    border-radius: 24px;
    background: transparent;
    min-height: 47px;
    width: 250px;
    text-align: center;
    transition: all .3s ease-in-out;
    max-width: 50vw;
    border: 1px solid #ffffff;
    line-height: 1.5em;
}

.form-group-unique label.btn-transition:has(input:disabled),
.form-group-unique label.btn-transition:has(input:disabled):hover {
    background: darkgray;
    cursor: not-allowed;
}

.form-group-unique:disabled {
    pointer-events: none;
}

.form-group-unique label:has(input[type="radio"]:checked),
.form-group-unique label:has(input[type="radio"]):hover {
    color: #3B7ADE;
    background: #fff;
}

.form-container-unique {
    display: flex;
    flex-direction: row;
}

.flex-row {
    display: flex;
    flex-flow: wrap;
    gap: 10px;
    justify-content: center;
    min-width: 100%;
}

.flex-row.col-2 label {
    width: calc(25% - 10px) !important;
}

.form-content-unique {
    transition: all .25s ease-in-out !important;
    position: relative;
    display: block !important;
    min-width: 100%;
    left: 0%;
}

.form-content-unique:not(.active-unique) {
    left: 100%;
    display: none !important;
}

.slide-out {
    position: relative;
    left: -100% !important;
}

.slide-right {
    position: relative;
    left: 100% !important;
}

.slide-in {
    position: relative;
    left: -100% !important;
}

.slide-steady {
    left: 0% !important
}

.no-transition {
    transition: none !important;
}

.button-container-unique {
    position: relative;
    min-height: 40px;
}

.button-container-unique .btn-transition-back {
    position: absolute;
    padding: 0px;
    left: 0;
    min-width: 0;
    width: auto;
    background: transparent;
    color: #fff;
}

.button-container-unique .btn-transition-back:hover {
    background: transparent;
}

.button-container-unique button.btn-transition {
    width: 360px;
    max-width: 50vw;
}

input.is-invalid {
    border-color: #ff474c;
}

input.is-invalid::placeholder {
    color: #ff474c;
}

select.is-invalid {
    border-color: #ff474c;
    color: #ff474c;
}

.type-label:has(.secure) {
    position: relative;
}

.secure {
    color: #90ee90;
    position: absolute;
    right: 15px;
    top: 20px;
    /* calc(50% - 9px); */
    font-weight: 700;
    pointer-events: none;
    font-size: 14px;
    display: flex;
    gap: 4px;
}

.secure i {
    font-size: 80%;
    margin: auto;
}

.form-heading-unique {
    font-size: 36px;
}

.form-heading-unique.body-text {
    font-size: 28px;
    text-transform: none;
}

section.mortgage-loan::before {
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
}

.quote-subheader {
    margin-top: 0px !important;
    margin-bottom: 65px;
    font-size: 22px !important;
    font-weight: 400 !important;
    padding-bottom: 0px !important;
    text-align: center;
    display: block;
}

@media (min-width: 768px) {
    .quote-subheader {
        margin-top: -5px !important;
    }
}

.form-content-unique p {
    color: white;
}

.complete p {
    text-align: center;
    display: block;
    margin-bottom: 20px;
    font-size: 21px;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5em;
}

@media (max-width: 767px) {
    .button-container-unique {
        display: flex;
        justify-content: flex-end;
    }
}

@media only screen and (max-width: 701px) {
    .form-heading-unique {
        font-size: 22px;
    }

    .button-container-unique .btn-transition-back {
        left: 5px;
    }
}

.underlined {
    position: relative;
    font-style: italic;
}

.underlined svg {
    position: absolute;
    top: 80%;
    /* max-width: 130%; */
    left: -15%;
    transform: scale(.7);
    transform-origin: left;
}

#progress {
    margin: 20px;
    width: 540px;
    height: 8px;
    margin: 10px auto auto;
}

@media (max-width: 767px) {
    .underlined svg {
        max-width: 110px;
        top: 25px;
    }

    #progress {
        width: 300px;
    }
}

.btn-transition-back i {
    margin-right: 10px;
}

.button-container-unique {
    margin-top: 25px;
}

iframe {
    margin: 0px auto 30px auto;
}

@media (max-width: 1200px) {
    iframe {
        width: 100% !important;
        height: calc(42vw);
    }
}

@media (max-width: 767px) {
    iframe {
        width: 100% !important;
        height: calc(51vw);
    }
}

.type-label:has(.is-invalid):after {
    content: 'Please fill out this field';
    background: #ff474c;
    color: white;
    padding: 3px;
    text-align: center;
    margin: auto;
    position: relative;
    display: flex;
    text-align: center;
    justify-content: center;
    margin-top: 10px;
    font-size: 14px;
    border-radius: 7.64px;
    padding: 7px 0px 10px;
    width: 260px;
}

.type-label:has(.is-invalid):has(input[type=email]):after {
    content: 'Please provide a valid email address';
}

.type-label:has(.is-invalid):has(input[name="first_name"]):after {
    content: 'Please enter your first name';
}

.type-label:has(.is-invalid):has(input[name="last_name"]):after {
    content: 'Please enter your last name';
}

.type-label:has(.is-invalid):has(input[name="phone"]):after {
    content: 'Please enter a valid phone number';
}

.type-label:has(input[name="home_value"].is-invalid):after {
    content: 'Double check the value entered';
}

h2.completed {
    margin-top: 15vh;
}

@media (max-width: 767px) {
    h2.completed {
        margin-top: 10vh;
    }

    h2.completed br {
        display: none;
    }

    .complete p {
        font-size: 18px;
    }
}

.currency {
    position: relative;
}

.currency-symbol {
    position: absolute;
    top: 17px;
    left: 30px;
    color: white;
    pointer-events: none;
;
}

.currency input {
    padding-left: 45px;
}

#step-5-na-unique p,
#step-5-na-unique ul {
    max-width: 510px;
    margin: auto auto 15px auto;
}

#step-5-na-unique li {
    list-style: disc;
    margin-left: 20px;
    color: #fff;
}

#step-5-na-unique li p {
    margin-bottom: 0px;
}

.page-14902 .header-call {
    display: none !important;
}

.mortgage-loan-content h1 {
    color: #FFF;
    text-align: center;
    font-family: "Plus Jakarta Sans";
    font-size: 44px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: none;
    padding-bottom: 20px;
    padding-top: 80px;
}

body {
    background: #1F2D69;
}

.form-container-unique {
    background: #1F2D69;
    box-shadow: none;
}

.form-heading-unique {
    color: #fff
}

.form-group-unique select,
.form-group-unique input,
.form-group-unique input::placeholder,
.form-group-unique label {
    color: #fff;
    opacity: 1;
}

.form-group-unique input {
    border: 1px solid #ffffff;
}

.form-group-unique select {
    padding: 10px;
    font-size: 16px;
    outline: none;
    border-radius: 7.64px;
    border: 1.273px solid rgba(20, 47, 87, 0.09);
    border: 1.273px solid #fff;
    background: rgba(196, 203, 215, 0.10);
    display: block;
    height: 56.027px;
    width: 100%;
    color: #fff;
}

.form-group-unique select option {
    color: #1F2D69;
    background-color: #ffffff;
}

/* Windows fix: ensure dropdown text is visible when opened */
.form-group-unique select:focus,
.form-group-unique select:active {
    color: #1F2D69 !important;
    background-color: #ffffff !important;
}

.form-group-unique input[type="radio"] {
    height: 0px;
    width: auto;
    position: absolute;
    appearance: none;
    opacity: 0;
}

.form-group-unique label:has(input[type="radio"]) {
    background: #1F2D69;
    color: white;
    padding: 8px 12px;
    opacity: 1;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
    color: #FFF;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    border-radius: 24px;
    background: transparent;
    min-height: 47px;
    width: 250px;
    text-align: center;
    transition: all .3s ease-in-out;
    max-width: 50vw;
    border: 1px solid #ffffff;
    line-height: 1.5em;
}

.form-group-unique label.btn-transition:has(input:disabled),
.form-group-unique label.btn-transition:has(input:disabled):hover {
    background: darkgray;
    cursor: not-allowed;
}

.form-group-unique:disabled {
    pointer-events: none;
}

.form-group-unique label:has(input[type="radio"]:checked),
.form-group-unique label:has(input[type="radio"]):hover {
    color: #3B7ADE;
    background: #fff;
}

.form-container-unique {
    display: flex;
    flex-direction: row;
}

.flex-row {
    display: flex;
    flex-flow: wrap;
    gap: 10px;
    justify-content: center;
    min-width: 100%;
}

.flex-row.col-2 label {
    width: calc(25% - 10px) !important;
}

.form-content-unique {
    transition: all .25s ease-in-out !important;
    position: relative;
    display: block !important;
    min-width: 100%;
    left: 0%;
}

.form-content-unique:not(.active-unique) {
    left: 100%;
    display: none !important;
}

.slide-out {
    position: relative;
    left: -100% !important;
}

.slide-right {
    position: relative;
    left: 100% !important;
}

.slide-in {
    position: relative;
    left: -100% !important;
}

.slide-steady {
    left: 0% !important
}

.no-transition {
    transition: none !important;
}

.button-container-unique {
    position: relative;
    min-height: 40px;
}

.button-container-unique .btn-transition-back {
    position: absolute;
    padding: 0px;
    left: 0;
    min-width: 0;
    width: auto;
    background: transparent;
    color: #fff;
}

.button-container-unique .btn-transition-back:hover {
    background: transparent;
}

.button-container-unique button.btn-transition {
    width: 360px;
    max-width: 50vw;
}

input.is-invalid {
    border-color: #ff474c;
}

input.is-invalid::placeholder {
    color: #ff474c;
}

select.is-invalid {
    border-color: #ff474c;
    color: #ff474c;
}

.type-label:has(.secure) {
    position: relative;
}

.secure {
    color: #90ee90;
    position: absolute;
    right: 15px;
    top: 20px;
    /* calc(50% - 9px); */
    font-weight: 700;
    pointer-events: none;
    font-size: 14px;
    display: flex;
    gap: 4px;
}

.secure i {
    font-size: 80%;
    margin: auto;
}

.form-heading-unique {
    font-size: 36px;
}

.form-heading-unique.body-text {
    font-size: 28px;
    text-transform: none;
}

section.mortgage-loan::before {
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
}

.quote-subheader {
    margin-top: 0px !important;
    margin-bottom: 65px;
    font-size: 22px !important;
    font-weight: 400 !important;
    padding-bottom: 0px !important;
    text-align: center;
    display: block;
}

@media (min-width: 768px) {
    .quote-subheader {
        margin-top: -5px !important;
    }
}

.form-content-unique p {
    color: white;
}

.complete p {
    text-align: center;
    display: block;
    margin-bottom: 20px;
    font-size: 21px;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5em;
}

@media (max-width: 767px) {
    .button-container-unique {
        display: flex;
        justify-content: flex-end;
    }
}

@media only screen and (max-width: 701px) {
    .form-heading-unique {
        font-size: 22px;
    }

    .button-container-unique .btn-transition-back {
        left: 5px;
    }
}

.underlined {
    position: relative;
    font-style: italic;
}

.underlined svg {
    position: absolute;
    top: 80%;
    /* max-width: 130%; */
    left: -15%;
    transform: scale(.7);
    transform-origin: left;
}

#progress {
    margin: 20px;
    width: 540px;
    height: 8px;
    margin: 10px auto auto;
}

@media (max-width: 767px) {
    .underlined svg {
        max-width: 110px;
        top: 25px;
    }

    #progress {
        width: 300px;
    }
}

.btn-transition-back i {
    margin-right: 10px;
}

.button-container-unique {
    margin-top: 25px;
}

iframe {
    margin: 0px auto 30px auto;
}

@media (max-width: 1200px) {
    iframe {
        width: 100% !important;
        height: calc(42vw);
    }
}

@media (max-width: 767px) {
    iframe {
        width: 100% !important;
        height: calc(51vw);
    }
}

.type-label:has(.is-invalid):after {
    content: 'Please fill out this field';
    background: #ff474c;
    color: white;
    padding: 3px;
    text-align: center;
    margin: auto;
    position: relative;
    display: flex;
    text-align: center;
    justify-content: center;
    margin-top: 10px;
    font-size: 14px;
    border-radius: 7.64px;
    padding: 7px 0px 10px;
    width: 260px;
}

.type-label:has(.is-invalid):has(input[type=email]):after {
    content: 'Please provide a valid email address';
}

.type-label:has(.is-invalid):has(input[name="first_name"]):after {
    content: 'Please enter your first name';
}

.type-label:has(.is-invalid):has(input[name="last_name"]):after {
    content: 'Please enter your last name';
}

.type-label:has(.is-invalid):has(input[name="phone"]):after {
    content: 'Please enter a valid phone number';
}

.type-label:has(input[name="home_value"].is-invalid):after {
    content: 'Double check the value entered';
}

h2.completed {
    margin-top: 15vh;
}

@media (max-width: 767px) {
    h2.completed {
        margin-top: 10vh;
    }

    h2.completed br {
        display: none;
    }

    .complete p {
        font-size: 18px;
    }
}

.currency {
    position: relative;
}

.currency-symbol {
    position: absolute;
    top: 17px;
    left: 30px;
    color: white;
    pointer-events: none;
;
}

.currency input {
    padding-left: 45px;
}

#step-5-na-unique p,
#step-5-na-unique ul {
    max-width: 510px;
    margin: auto auto 15px auto;
}

#step-5-na-unique li {
    list-style: disc;
    margin-left: 20px;
    color: #fff;
}

#step-5-na-unique li p {
    margin-bottom: 0px;
}

.page-14902 .header-call {
    display: none !important;
}

.mortgage-loan-content h1 {
    color: #FFF;
    text-align: center;
    font-family: "Plus Jakarta Sans";
    font-size: 44px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: none;
    padding-bottom: 20px;
    padding-top: 80px;
}

.field-error {
    display: inline-block;
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    padding: 4px 8px;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
}

.instant-quote-section {
    background-color: #1F2D69 !important;
    padding-top: 50px;  /* optional – to give breathing room */
    padding-bottom: 50px;
}

/* Option 2: darker background behind the form, but keep layout intact */
#instant-quote-wrapper {
    background-color: #1F2D69;
}

/* Option 3: only affect the inner container */
.instant-quote-main {
    background-color: #1F2D69;
}

/* Make outer panel navy or transparent */
.choose-form-calculate {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Make the form steps navy as well */
.form-content-unique {
    background-color: #1F2D69 !important;
    border: none !important;
}

/* Remove the light blue interior */
.form-content-unique .type-label,
.form-content-unique .quote-subheader,
.form-content-unique .form-heading-unique,
.form-content-unique .form-group-unique,
.form-content-unique .button-container-unique {
    background-color: transparent !important;
}

/* Optional: make text light so it's readable */
.form-content-unique,
.form-content-unique * {
    color: #fff !important;
}

/* EXCEPTION: Windows dropdown fix - must come AFTER the wildcard rule above */
.form-content-unique .form-group-unique select:focus,
.form-content-unique .form-group-unique select:active,
.form-content-unique .form-group-unique select:hover,
.form-content-unique .form-group-unique select:focus option,
.form-content-unique .form-group-unique select:active option,
.form-content-unique .form-group-unique select option {
    color: #1F2D69 !important;
    background-color: #ffffff !important;
}

/* The wrapper that holds all steps */
.form-container-unique {
    background-color: #1F2D69 !important;
    position: relative;
    overflow: hidden; /* Prevent white slide background from showing */
}

/* Each step */
.form-content-unique {
    background-color: #1F2D69 !important;
}

.form-group-unique input,
.form-group-unique select {
    border: 1px solid #ffffff !important;
    background-color: rgba(255,255,255,0.08) !important;  /* optional, for subtle contrast */
    color: #ffffff !important;
}

/* Override for select when focused/active (Windows compatibility) */
.form-group-unique select:focus,
.form-group-unique select:active,
.form-group-unique select:hover {
    color: #1F2D69 !important;
    background-color: #ffffff !important;
}

/* Make placeholder text white */
.form-group-unique input::placeholder,
.form-group-unique select::placeholder {
    color: #ffffff !important;
    opacity: 0.7 !important; /* optional: adjust visibility */
}

/* Safari/Firefox support (because they use different pseudo-elements) */
.form-group-unique input::-webkit-input-placeholder,
.form-group-unique select::-webkit-input-placeholder {
    color: #ffffff !important;
    opacity: 0.7 !important;
}
.form-group-unique input:-ms-input-placeholder,
.form-group-unique select:-ms-input-placeholder {
    color: #ffffff !important;
    opacity: 0.7 !important;
}
.form-group-unique input::-ms-input-placeholder,
.form-group-unique select::-ms-input-placeholder {
    color: #ffffff !important;
    opacity: 0.7 !important;
}

/* Ensure currency wrapper positions elements correctly */
.type-label.currency {
    position: relative;
}

/* Position the $ symbol on the left */
.currency-symbol {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #ffffff;
    font-size: 16px;
    pointer-events: none; /* so clicks go to input */
}

/* Add left padding to input so text doesn't overlap the $ */
.type-label.currency input {
    padding-left: 32px !important;  /* adjust as needed */
}

/* Reduce top padding on mobile for instant quote section */
@media (max-width: 767px) {
    .instant-quote-section {
        padding-top: 0px !important;
    }
    
    /* Reduce the large top padding on the inner section */
    .instant-quote-main > section {
        padding-top: 0px !important;
    }

    .quote-subheader {
        font-size: 1.2rem !important;
    }

    .form-container-unique {
        margin-bottom: -20px !important;
        padding-bottom: 0 !important;
    }

    /* Show progress bar on mobile */
    #progress {
        display: block !important;
    }
}