/**
 * cajl-filter-dropdown — styles the <select> that replaces an Elementor Taxonomy
 * Filter widget's label list (see assets/js/cajl-filter-dropdown.js).
 *
 * The native .e-filter list is hidden ONLY once JS has built the <select> (the
 * `--enhanced` marker class), so a JS failure leaves the working native list
 * visible (graceful degradation). Scoped under .cajl-filter-dropdown.
 */

/* Hide the native clickable labels once the dropdown is in place. The
 * `--enhanced` marker sits on the .e-filter (a <search> element) itself and the
 * <select> is injected inside it, so we hide the .e-filter-item children (not
 * .e-filter — that would hide our <select> too).
 *
 * `!important` + the extra `.e-filter` class are required: Elementor's own
 * stylesheet sets `display: flex` on `.e-filter-item` and loads AFTER this file,
 * so a plain rule of equal specificity loses. We only hide once `--enhanced` is
 * present, so it still degrades to the native list if the JS doesn't run. */
.e-filter.cajl-filter-dropdown--enhanced .e-filter-item {
    display: none !important;
}

/* The injected dropdown. Kept minimal — let the theme/Elementor own the colors. */
.cajl-filter-dropdown-select {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0.5em 2.2em 0.5em 0.75em;
    font: inherit;
    line-height: 1.4;
    color: inherit;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    /* Native arrow + room for it (override Elementor's appearance resets). */
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    appearance: menulist;
}

.cajl-filter-dropdown-select:focus {
    outline: 2px solid rgba(0, 0, 0, 0.25);
    outline-offset: 1px;
}