/* Filters boven het productgrid; zie includes/mlb-product-filter.php.
   Uiterlijk gelijk aan de JetSmartFilters-checkboxes die ze vervangen. */

.mlb-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 20px;
}

.mlb-filter__option {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    gap: 5px;
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    color: var(--e-global-color-text, #555555);
    cursor: pointer;
}

.mlb-filter__option[hidden] {
    display: none;
}

/* Het echte vakje is onzichtbaar, zodat de invoerstijl van thema en Elementor-kit
   er niets aan verandert; het getekende vakje ernaast is wat de bezoeker ziet. */
.mlb-filter__input {
    position: absolute;
    width: 0;
    height: 0;
    margin: 0;
    opacity: 0;
}

.mlb-filter__box {
    position: relative;
    flex: none;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.mlb-filter__input:checked + .mlb-filter__box {
    background: #ccc;
}

.mlb-filter__input:checked + .mlb-filter__box::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.mlb-filter__input:focus-visible + .mlb-filter__box {
    outline: 2px solid #0085f2;
    outline-offset: 2px;
}

/* Elementor geeft de loop-items zelf een display; zonder !important wint dat van [hidden]. */
.e-loop-item[hidden] {
    display: none !important;
}

.mlb-filter-empty {
    margin: 20px 0;
}