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

.immediate-assistance {
    text-align: left;
    color:  #1D315F;
    font-weight:  bold;
    font-size: 20px;
    line-height: 22px;
    margin-bottom: 40px;

}

.immediate-assistance a {
    color:  #1D315F;
    text-decoration: underline;
}

.verify-cyan-bg {
    background-color: #EBEDF2;
    background-size: cover;
    min-height: 300px;
    width: 100%;
}

.verify-background {
    background-color: #E3EDF8;
    padding: 40px;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.form-group {
    margin: 5px 0;
    flex: 1;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.turnstile-container {
    align-items: center;
    margin-top: 40px;
} 

.half-width {
    flex: 0 0 calc(50% - 20px);
}

.full-width {
    flex: 0 0 100%;
}

.verify-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.verify-form {
    display: flex;
    flex-direction: column;
}

.verify-title {
    text-align: center;
    font-size: 40px;
    line-height: 44px;
    font-weight: 900;
    margin-bottom: 2rem;
    color: #1D315F;
}

.verify-subtitle {
    text-align: center;
    font-size: 16px;
    color: #0F75BC;
    font-weight: bold;
    margin-bottom:  25px;
    font-variant-ligatures: none;
}

.form-grid {
    display: flex;
    flex-direction: column;
}

.form-control {
    padding: 0.75rem;
    border-radius: 10px;
    font-weight: normal;
    color: #58595B;
    width: 100%;
}

.form-control::placeholder {
    color: #0F75BC;
    opacity: 1; /* Ensure full opacity */
}

.btn-submit-form {
    background-color: #ffffff;
    color: #2C7ABA;
    border: 2px solid #2C7ABA;
    padding: 10px 40px;
    width: 300px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 4px;
    margin: 30px auto;
    display: block;
    transition: background-color 0.3s ease;
}

.btn-submit-form:hover {
    background-color: #0056b3;
}

.button-group {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.button-text {
    font-size: 25px;
    font-weight: bold;
    color: #fff;
}

.verify-disclaimer {
    font-size: 14px;
    margin-top: .8rem;
    color: black;
    text-align: left;
}

.verify-disclaimer a {
    color: inherit;
    text-decoration: none;
}

.verify-disclaimer br.space-after {
    content: '';
    display: block;
}

.verify-disclaimer br.space-after::after {
    content: '';
    display: block;
    height: 15px;
}

.dropdown-container {
    position: relative;
}

.dropdown-container select {
    cursor: pointer;
    color: #58595B;
}

.dropdown-container option {
    color: #58595B;
}

/* Generic dropdown arrow for all OTHER dropdowns */
.dropdown-container::after {
    content: "";
    position: absolute;
    top: 22px;
    right: 20px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #1D315F;
    pointer-events: none;
}

.mobile-only {
    display: none;
}

.terms-link, .privacy-link {
    font-weight: bold;
    text-decoration: underline;
    color: inherit;
    cursor: pointer;
}

.terms-link:hover, .privacy-link:hover {
    text-decoration: none;
}

.home-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    margin: 0 auto;
    width: 80%;
}

.feature {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 10px;
}

.feature-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 5px;
}

.icon {
    color: black;
    font-size: 24px;
    margin-bottom: 5px;
}

.features-section {
    padding: 30px 150px;
}

.features-section h2 {
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    margin: 20px;
}

.feature-text {
    font-size: 24px;
    line-height: 1.2;
    color: black;
}

.mobile-only {
    display: none;
}

.desktop-only {
    display: inline;
}

/* Multi-Step Form Styles */
.step-container {
    display: none;
}

.step-container.active {
    display: block;
}

/* Progress Tracker */
.progress-tracker {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto 60px;
    width: 600px;
    position: relative;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
    z-index: 1;
}

.step-connector {
    position: absolute;
    top: 5px;
    left: 55%;
    width: 90%;
    height: 3px;
    background-color: #B5D0E9;
    z-index: -1;
}

.progress-step:last-child .step-connector {
    display: none;
}

.step-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #B5D0E9;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.progress-step.active .step-dot {
    background-color: #0F75BC;
    transform: scale(1.2);
}

.progress-step.completed .step-dot {
    background-color: #0F75BC;
}

.progress-step.completed .step-connector {
    background-color: #0F75BC;
}

.step-label {
    font-size: 14px;
    font-weight: 600;
    color: #B5D0E9;
    text-align: center;
}

.progress-step.active .step-label {
    color: #0F75BC;
}

.progress-step.completed .step-label {
    color: #0F75BC;
}

/* Debt Slider Styles */
.debt-slider-wrapper {
    margin: 40px 0;
    text-align: center;
}

.debt-amount-display {
    font-size: 24px;
    font-weight: 900;
    color: #0F75BC;
    margin-bottom: 10px;
    position: relative;
    text-align: left;
    transition: left 0.15s ease;
    max-width: 100px;
}

.debt-slider {
    width: 100%;
    height: 20px;
    border-radius: 20px;
    border: 1px solid #1D315F;
    background: linear-gradient(to right, #0F75BC 0%, #0F75BC 50%, #B5D0E9 50%, #B5D0E9 100%);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    transition: background 0.3s ease;
}

/* Range slider thumb styling */
#debtSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #1D315F;
    border: none;
    cursor: pointer;
}

#debtSlider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #1D315F;
    border: none;
    cursor: pointer;
}

#debtSlider::-ms-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #1D315F;
    border: none;
    cursor: pointer;
}
.slider-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    color: #1D315F;
    font-size: 14px;
}

.debt-requirement {
    margin-top: 20px;
    color: #D9312E;
    font-size: 14px;
    font-weight: 600;
}

/* Radio Group Styles */
.radio-group {
    display: flex;
    gap: 50px;
    justify-content: center;
    margin: 40px 0;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 15px 20px;
    border-radius: 8px;
    border: 1px solid #D3D3D3;
}

.radio-option input[type="radio"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.radio-label {
    font-size: 18px;
    font-weight: 600;
    color: #1D315F;
}

/* State Dropdown */
.state-dropdown {
    font-size: 18px;
    padding: 15px;
    max-width: 400px;
    margin: 20px auto;
}

/* Next/Continue Buttons */
.btn-next {
    background-color: #ffffff;
    color: #2C7ABA;
    border: 2px solid #2C7ABA;
    padding: 10px 40px;
    width: 300px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 4px;
    margin: 30px auto;
    display: block;
    transition: background-color 0.3s ease;
}

.btn-next:hover {
    background-color: #0056b3;
}

/* Error State */
input.error,
select.error {
    border-color: #D9312E !important;
    background-color: #FEE;
}

.validation-error {
    display: block;
    color: #D9312E;
    font-size: 14px;
    margin-top: 5px;
}

/* Step 3: State Dropdown Container */
.step-container[data-step="3"] .dropdown-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 30px auto;
}

/* State Dropdown Field */
.step-container[data-step="3"] .state-dropdown {
    width: 100%;
    padding: 15px 50px 15px 20px; /* Extra right padding for arrow */
    font-size: 16px;
    font-weight: 400;
    color: #0F75BC;
    background-color: #ffffff;
    border: 1px solid #D3D3D3;
    border-radius: 8px;
    appearance: none; 
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.step-container[data-step="3"] .state-dropdown:focus {
    outline: none;
    border-color: #007bff;
}

.step-container[data-step="3"] .state-dropdown option {
    color: #333;
    font-weight: 400;
}

.step-container[data-step="3"] .state-dropdown option:first-child {
    color: #999; /* Lighter color for placeholder */
}

.step-container[data-step="3"] .dropdown-container::after {
    content: ''; 
    border: none; 
    width: 14px; 
    height: 10px; 
    right: 20px;
    top: 50px; 
    transform: translateY(-50%); 
    background-image: url('../images/dropdown_arrow.png');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    position: absolute;
}

/* Step 4: Personal Information Form */
.step-container[data-step="4"] {
    max-width: 500px;
    margin: 0 auto;
}

.form-container-step4 {
    width: 100%;
    max-width: 420px;
    margin: 0 auto 30px;
}

.form-container-step4 .form-group {
    margin-bottom: 15px;
}

.form-container-step4 .form-control {
    width: 100%;
    padding: 14px 18px;
    font-size: 15px;
    color: #1D315F;
    background-color: #ffffff;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    transition: border-color 0.2s ease;
}

.form-container-step4 .form-control::placeholder {
    color: #0F75BC;
    opacity: 1; /* Ensure full opacity */
}

.form-container-step4 .form-control:focus {
    outline: none;
    border-color: #0F75BC;
}

/* Phone Input with Flag */
.phone-input-wrapper {
    position: relative;
}

.phone-prefix {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 5px;
    pointer-events: none;
    z-index: 2;
}

.flag-icon {
    font-size: 18px;
    line-height: 1;
}

.country-code {
    font-size: 15px;
    color: #1D315F;
    font-weight: 500;
}

.phone-input {
    padding-left: 70px !important; /* Make room for flag and country code */
}

/* Consent Disclaimer */
.consent-disclaimer {
    font-size: 12px;
    line-height: 1.5;
    color: #0F75BC;
    text-align: center;
    margin: 20px 0;
    padding: 0 10px;
}


/* Button styling for step 4 */
.step-container[data-step="4"] .btn-next {
    margin-top: 10px;
}

/* Step 5: Verify Address Form */
.step-container[data-step="5"] {
    max-width: 520px;
    margin: 0 auto;
}

.form-container-step5 {
    width: 100%;
    max-width: 460px;
    margin: 0 auto 30px;
}

.form-container-step5 .form-group {
    margin-bottom: 12px;
}

.form-container-step5 .form-control {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    color: #1D315F;
    background-color: #ffffff;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    transition: border-color 0.2s ease;
}

.form-container-step5 .form-control::placeholder {
    color: #0F75BC;
    opacity: 1;
}

.form-container-step5 .form-control:focus {
    outline: none;
    border-color: #0F75BC;
}

/* Two Column Layout for Name and City/Zip */
.form-row-two-col {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.form-row-two-col .form-group {
    flex: 1;
    margin-bottom: 0;
}

/* State Dropdown */
.state-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230F75BC' d='M1.41 0L6 4.58 10.59 0 12 1.42l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
    padding-right: 40px;
    cursor: pointer;
}

.flatpickr-wrapper {
    position: relative;
    width: 100%;
}

.calendar-toggle-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-icon-img {
    width: 20px;
    height: 20px;
    pointer-events: none;
}

/* Date Input Styling */
.form-container-step5 input[type="date"] {
    cursor: pointer;
}

.form-container-step5 input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(38%) sepia(78%) saturate(1200%) hue-rotate(180deg);
}

/* Credit Consent Disclaimer */
.credit-consent-disclaimer {
    font-size: 11px;
    line-height: 1.4;
    color: #0F75BC;
    text-align: center;
    margin: 20px 0;
    padding: 0 10px;
}

/* Button styling for step 5 */
.step-container[data-step="5"] .btn-next {
    margin-top: 10px;
}

.step-container[data-step="6"] input[name="SSN"] {
    padding: 14px;
}

input[name="SSN"]::placeholder {
    color: #0F75BC;
    opacity: 1; /* Ensures consistent color across browsers */
}

/* ==========================================
   TRUSTPILOT BAR
   ========================================== */

.trustpilot-bar {
    background-color: #E0EAF569;
    padding: 1.5rem 2rem;
}

.trustpilot-bar-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.trustpilot-bar-container p {
    color: #4a5568;
    font-size: 0.95rem;
    margin: 0;
}

.trustpilot-bar-container strong {
    color: #1D315F;
    font-weight: 700;
}

/* REMOVES THE LABEL ABOVE INPUT BOXES */
label[for='FirstName'] {
    display: none;
}

label[for='LastName'] {
    display: none;
}

label[for='Email'] {
    display: none;
}

label[for='Phone'] {
    display: none;
}

label[for='CellOptional'] {
    display: none;
}

label[for='Address'] {
    display: none;
}

label[for='City'] {
    display: none;
}

label[for='State'] {
    display: none;
}

label[for='Zip'] {
    display: none;
}

label[for='LoanAmount'] {
    display: none;
}
/************************/

/*  MOBILE OPTIMIZATION */
@media only screen and (max-width: 768px) {
    .content {
        background-color: #F7F9FD;
        margin-top: 30px !important;
        font-family: 'Source Sans Pro', sans-serif;

    }
    
    .verify-background {
        padding: 30px 12px;
    }

    .verify-container {
        margin: 0;
        padding: 1.5rem 1rem;
    }

    .verify-title {
        font-size: 40px;
        line-height: 45px;
        margin-bottom: 20px;
        text-align: center;
    }

    .immediate-assistance {
        font-size: 18px;
        line-height: 22px;
        margin-bottom: 16px;
    }

    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .half-width, .full-width {
        flex: 0 0 100%; /* Make all input fields take full width */
        max-width: 100%; /* Ensure elements do not exceed their container's width */
    }

    .btn-submit-form {
        width: 100%;
        min-width: 0;
        margin-top: 22px;
        margin-bottom: 20px;
    }

    .verify-form {
        padding: 20px 10px 10px 10px;
    }

    .verify-subtitle {
        font-size: 22px;
        line-height: 25px;
        padding-right: 10px;
        margin-bottom: 16px;
        text-align: center;
    }

    .verify-disclaimer {
        font-size: 14px;
        padding: 0 8px;
        margin: 0;
    }

    .verify-disclaimer br.space-after::after {
        height: 40px;
    }

    .form-control {
        font-size: 18px;
        text-align: left;
    }

    .form-control::placeholder {
        font-size: 18px;
        text-align: left;
    }

    .mobile-only {
        display: inline;
    }

    .dropdown-container select {
        text-align-last: left;
        -moz-text-align-last: left;
        color: #58595B;
        text-align: left;
    }

    .home-features {
        grid-template-columns: 1fr;
        margin: 0 auto;
    }

    .features-section {
        padding: 20px;
        margin-top: 0;
    }

    .features-section h2 {
        font-size: 24px;
    }

    .features-section h3 {
        font-size: 20px;
    }

    .feature-one {
        margin-left: 10px;
    }

    .desktop-only {
        display: none;
    }

    .mobile-only {
        display: inline;
    }

}


/* Mobile Optimizations for Progress Tracker */
@media only screen and (max-width: 768px) {
    .progress-tracker {
        margin: 0 0 40px 0;
        width: auto;
    }
    
    .step-label {
        font-size: 12px;
    }
    
    .radio-group {
        align-items: center;
    }
    
    .btn-next {
        width: 100%;
        padding: 15px 20px;
        font-size: 18px;
    }
    
    .state-dropdown {
        max-width: 100%;
    }
    
    .consent-disclaimer {
        text-align: left;
    }
}