/* Homepage Filter Responsiveness Overrides */

/* --- COMPACT ROW LAYOUT: 800px to 1099.98px --- */
@media screen and (min-width: 760px) and (max-width: 1099.98px) {
    #mobileStickySearchContainer {
        display: none !important;
    }

    .filterMain .filter-row-main {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-end !important;
        gap: 5px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    .filterMain .filter-row-main>div {
        flex: 1 1 0px !important;
        max-width: none !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
        width: auto !important;
        min-width: 0 !important;
        position: relative !important;
    }

    .filterMain .filter-row-main label {
        font-size: 11px !important;
        margin-bottom: 4px !important;
        white-space: nowrap !important;
        display: block !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .filterMain .filter-row-main select,
    .filterMain .filter-row-main input[type="text"] {
        height: 38px !important;
        padding: 5px 6px !important;
        font-size: 12px !important;
        width: 100% !important;
        border: 1px solid #585858 !important;
        border-radius: 5px !important;
    }

    .filterMain .filter-row-main .mbl-home-search-btn {
        display: flex !important;
        /* OVERRIDE display: none !important from style.css */
        align-items: center !important;
        justify-content: center !important;
        height: 38px !important;
        line-height: 38px !important;
        padding: 0 5px !important;
        font-size: 13px !important;
        margin-top: 0 !important;
        width: 100% !important;
        white-space: nowrap !important;
    }
}

/* --- TAB BOX WIDTH INCREASE: 769px to 834px --- */
@media screen and (min-width: 769px) and (max-width: 834px) {
    section.filterMain {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    section.filterMain .container-fluid {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    section.filterMain .tabBoxMain {
        padding: 45px 10px !important;
        width: 100% !important;
    }
}

/* --- TAB BOX WIDTH SLIGHT DECREASE: 835px to 1000px --- */
@media screen and (min-width: 835px) and (max-width: 1000px) {
    section.filterMain {
        width: 95% !important;
        margin: -220px auto 0 !important; /* Center with original negative margin */
    }

    section.filterMain .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    section.filterMain .tabBoxMain {
        padding: 45px 30px !important;
        width: 100% !important;
    }
}

/* --- FULL ROW LAYOUT (Original Design): 1100px and above --- */
@media screen and (min-width: 1100px) {
    #mobileStickySearchContainer {
        display: none !important;
    }

    .filterMain .filter-row-main {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-end !important;
        gap: 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    .filterMain .filter-row-main>div {
        flex: 1 1 0px !important;
        max-width: none !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        position: relative !important;
    }

    .filterMain .filter-row-main label {
        font-size: 18px !important;
        margin-bottom: 12px !important;
        white-space: nowrap !important;
        display: block !important;
    }

    .filterMain .filter-row-main select,
    .filterMain .filter-row-main input[type="text"] {
        height: 51px !important;
        padding: 0 10px !important;
        font-size: 14px !important;
        width: 100% !important;
        border: 1px solid #585858 !important;
        border-radius: 5px !important;
    }

    .filterMain .filter-row-main .mbl-home-search-btn {
        display: flex !important;
        /* OVERRIDE display: none !important from style.css */
        align-items: center !important;
        justify-content: center !important;
        height: 51px !important;
        line-height: 51px !important;
        padding: 0 20px !important;
        font-size: 16px !important;
        margin-top: 0 !important;
        width: 100% !important;
    }

    .filter-row-main .results-found-container {
        font-size: 18px !important; /* Larger font size for desktop */
    }
}

/* --- COMMON STYLES --- */
@media screen and (min-width: 760px) {

    /* Force ALL labels in the row to have 0 margin top and consistent behavior */
    .filterMain .filter-row-main label {
        margin-top: 0 !important;
        margin-bottom: 8px !important;
        /* Standardized bottom margin */
        height: auto !important;
        min-height: 1.2em !important;
        line-height: 1.2 !important;
        display: block !important;
        visibility: visible !important;
    }

    /* Ensure the parent columns have no bottom margin */
    .filterMain .filter-row-main>div {
        margin-bottom: 0 !important;
    }

    /* Ensure no margins on inputs/buttons are pushing them up/down */
    .filterMain .filter-row-main select,
    .filterMain .filter-row-main input,
    .filterMain .filter-row-main button {
        margin-bottom: 0 !important;
        margin-top: 0 !important;
    }

    .filter-row-main .results-found-container {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        white-space: nowrap !important;
        font-size: 15px !important;
        /* Responsive font size for tablets */
        font-weight: 500 !important;
        margin-top: 10px !important;
        /* Matches the mt-2 or requested margin */
        text-align: center !important;
        color: #009d9a !important;
    }

    .mobile_filter {
        margin-top: 0 !important;
    }
}

@media screen and (max-width: 759.98px) {
    .filterMain .filter-row-main {
        flex-wrap: wrap !important;
    }

    .filterMain .filter-row-main>div {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 10px !important;
    }
}