/**
 * FacetWP Filters Styles for index.php
 * 
 * On large screens (>= 1000px): Filters justify to match grid width
 * Below 1000px: Filters stack and are full width
 */

.fitem-filters {
    margin-bottom: 40px;
}

.fitem-filters .list-inline {
    display: flex !important;
    flex-wrap: wrap;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-left: 0 !important;
    gap: 20px;
}

.fitem-filters .list-inline > li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: none !important;
}

/* Global: Hide native select when fselect is active */
.fitem-filters .facetwp-fselect select {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Global: Override default 30% width for fs-wrap in filters */
.fitem-filters .facetwp-fselect .fs-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Large screens - justify to match grid width (3 columns) */
@media (min-width: 1000px) {
    .fitem-filters .list-inline {
        display: flex !important;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 30px;
        align-items: flex-start;
        width: 100%;
    }
    
    .fitem-filters .list-inline > li {
        display: block !important;
        flex: 1 1 0;
        min-width: 0;
        max-width: 100%;
    }
    
    /* Ensure FacetWP facets wrapper is properly sized */
    .fitem-filters .list-inline > li > .facetwp-facet {
        width: 100%;
        display: block;
    }
    
    /* Make sure dropdowns and selects have proper width - target only the select element */
    .fitem-filters .facetwp-facet select,
    .fitem-filters select {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        /* Ensure arrow background doesn't stretch */
        background-size: auto !important;
        background-repeat: no-repeat !important;
        background-position: right center !important;
    }
    
    /* Ensure wrapper divs are full width */
    .fitem-filters .facetwp-dropdown,
    .fitem-filters .facetwp-fselect {
        width: 100% !important;
        display: block;
    }
    
    /* Hide native select when fselect is active - comprehensive targeting */
    .fitem-filters .facetwp-fselect select,
    .fitem-filters .facetwp-fselect + select,
    .fitem-filters .list-inline > li:has(.facetwp-fselect) select,
    .fitem-filters .facetwp-facet[data-type="fselect"] select {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* Target select elements inside dropdown wrappers (not fselect) */
    .fitem-filters .facetwp-dropdown select {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        /* Ensure arrow background doesn't stretch */
        background-size: auto !important;
        background-repeat: no-repeat !important;
        background-position: right center !important;
    }
    
    /* Make sure fselect custom dropdown trigger is full width - override default 30% with higher specificity */
    .fitem-filters .facetwp-fselect .fs-wrap,
    .fitem-filters .list-inline > li .facetwp-fselect .fs-wrap,
    .fitem-filters .facetwp-facet .fs-wrap {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    
    .fitem-filters .facetwp-fselect .fs-label-wrap,
    .fitem-filters .list-inline > li .facetwp-fselect .fs-label-wrap,
    .fitem-filters .facetwp-facet .fs-label-wrap {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Below 1000px - stack and full width */
@media (max-width: 999px) {
    .fitem-filters .list-inline {
        flex-direction: column !important;
        gap: 15px;
    }
    
    .fitem-filters .list-inline > li {
        display: block !important;
        width: 100% !important;
    }
    
    /* Make FacetWP facets wrapper full width */
    .fitem-filters .list-inline > li > .facetwp-facet {
        width: 100% !important;
        display: block;
    }
    
    /* Ensure dropdowns and selects are full width - target only the select element */
    .fitem-filters .facetwp-facet select,
    .fitem-filters select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        /* Ensure arrow background doesn't stretch */
        background-size: auto !important;
        background-repeat: no-repeat !important;
        background-position: right center !important;
    }
    
    /* Ensure wrapper divs are full width */
    .fitem-filters .facetwp-dropdown,
    .fitem-filters .facetwp-fselect {
        width: 100% !important;
        display: block;
    }
    
    /* Hide native select when fselect is active - comprehensive targeting */
    .fitem-filters .facetwp-fselect select,
    .fitem-filters .facetwp-fselect + select,
    .fitem-filters .list-inline > li:has(.facetwp-fselect) select,
    .fitem-filters .facetwp-facet[data-type="fselect"] select {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* Target select elements inside dropdown wrappers (not fselect) */
    .fitem-filters .facetwp-dropdown select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        /* Ensure arrow background doesn't stretch */
        background-size: auto !important;
        background-repeat: no-repeat !important;
        background-position: right center !important;
    }
    
    /* Make sure fselect custom dropdown trigger is full width - override default 30% with higher specificity */
    .fitem-filters .facetwp-fselect .fs-wrap,
    .fitem-filters .list-inline > li .facetwp-fselect .fs-wrap,
    .fitem-filters .facetwp-facet .fs-wrap {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    
    .fitem-filters .facetwp-fselect .fs-label-wrap,
    .fitem-filters .list-inline > li .facetwp-fselect .fs-label-wrap,
    .fitem-filters .facetwp-facet .fs-label-wrap {
        width: 100% !important;
        max-width: 100% !important;
    }
}

.fs-option, .fs-search, .fs-optgroup-label {
	padding: 12px!important;
}

.fs-wrap.single .fs-option.selected {
	background-color: #eee!important;
}

.fs-wrap.single .fs-option:hover {
	background-color: #eee!important;
}

.fs-dropdown .fs-options {
	max-height: 500px!important;
}