Place the Filter Reset Button inline with the Filter Fields

                        /* Desktop Styles (Default) */

/* Ensure the reset button is visible and reset margins/padding */
.reset-filters {
    display: inline-block !important; /* Make sure the reset button is displayed as an inline block */
    margin: 0; /* Remove any default margin */
    padding: 0 20px; /* Adjust horizontal padding as needed for better spacing */
    height: 40px; /* Match the height of the dropdowns for consistency */
    line-height: 40px; /* Vertically center text within the button */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    /* Adjust vertical position */
    margin-top: -2px; /* Move the button slightly up or down by changing this value to align perfectly */
    /* Alternatively, use transform for finer adjustments */
    /* transform: translateY(-2px); */
}

/* Set the main filter container to use full width and align items */
#divi_filter {
    display: flex; /* Use flexbox for easy alignment and layout */
    flex-wrap: wrap; /* Allow items to wrap to the next line if needed */
    align-items: center; /* Vertically center items within the container */
    width: 100%; /* Take full width of the parent container */
    box-sizing: border-box; /* Include padding and border in the element's total width */
    margin: 0; /* Remove any default margin */
    padding: 0; /* Remove any default padding */
}

/* Adjust the form to fill available space and align items */
#divi_filter form {
    display: flex; /* Use flexbox to align the form elements */
    flex: 1; /* Allow the form to grow and fill available space */
    flex-wrap: wrap; /* Wrap elements if needed */
    align-items: center; /* Vertically center items within the form */
    margin: 0; /* Remove any default margin */
    padding: 0; /* Remove any default padding */
}

/* Set each dropdown module to share space equally */
#divi_filter .divi-filter-containter .et_pb_module {
    flex: 1; /* Allow each dropdown to grow and share available space equally */
    min-width: 200px; /* Set a minimum width to ensure dropdowns are usable */
    margin-right: 20px; /* Add space between each dropdown module */
    box-sizing: border-box; /* Include padding and border in the element's total width */
}

/* Ensure the dropdowns have consistent height and vertical alignment */
.divi-filter-item select {
    height: 40px; /* Match the height of the reset button for consistency */
    margin: 0; /* Remove any default margin */
    padding: 0 10px; /* Add horizontal padding for better usability */
    box-sizing: border-box; /* Include padding and border in the element's total width */
}

/* Adjust the reset button container to align items */
#divi_filter .button_container {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically center the reset button within the container */
    margin-left: 20px; /* Add space to the left of the reset button */
    padding: 0; /* Remove any default padding */
    /* Remove margin-left: auto; if it pushes the button too far right */
    /* margin-left: auto; */
}

/* Remove any floating and alignment styles that may cause misalignment */
.button_container.align_reset_right {
    float: none; /* Remove floating to prevent misalignment */
    text-align: right; /* Align text to the right if needed */
    margin: 0; /* Remove any default margin */
}

/* Optional: Adjust the title (label) alignment */
.et_pb_contact_field_options_title {
    margin: 0 0 5px 0; /* Adjust margins to control spacing around the label */
    line-height: normal; /* Set line height to normal for consistent spacing */
}

/* Media Queries for Responsive Design */

/* Media query for smaller screens */
@media (max-width: 768px) {
    /* Stack elements vertically on smaller screens */
    #divi_filter {
        flex-direction: column; /* Change flex direction to stack elements vertically */
        align-items: stretch; /* Stretch items to take full width */
    }

    #divi_filter form {
        flex-direction: column; /* Stack form elements vertically */
    }

    #divi_filter .divi-filter-containter .et_pb_module {
        margin-right: 0; /* Remove right margin to avoid overflow */
        margin-bottom: 15px; /* Add space between dropdowns when stacked */
    }

    /* Center the reset button on smaller screens */
    #divi_filter .button_container {
        margin-left: 0; /* Remove left margin to center the button */
        align-self: center; /* Center the reset button within its container */
        margin-top: 10px; /* Add space above the reset button for better spacing */
        width: 100%; /* Ensure the button takes full width if needed */
    }

    /* Adjust widths to ensure elements fill the container */
    #divi_filter .divi-filter-containter .et_pb_module,
    #divi_filter .button_container {
        width: 100%; /* Make elements take full width of the container */
    }
}