/**
 * LRE Member Directory Filter Styles
 *
 * Provides only the styles specific to the member directory filter elements
 * that LRE Core's filters.css does not already cover. All filter chrome
 * (dropdowns, buttons, pills, multiselect component) is inherited from
 * filters.css which is enqueued by LRE Core on pages that contain
 * LRE filter elements.
 *
 * If LRE Core is not active, the multiselect styles defined here provide
 * a minimal fallback sufficient for the dropdown to function.
 *
 * @package Listapage\LREMembers
 * @since   1.0.0-beta-6.0.0
 */

/* ==========================================================================
   Reset Bricks element wrappers
   (mirrors the pattern in LRE Core's filters.css for the new element names)
   ========================================================================== */

.brxe-lremembersearch,
.brxe-lrememberindustry,
.brxe-lrememberapply,
.brxe-lrememberreset {
    display: block !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Allow the reset button's display to be toggled by JS. */
.brxe-lrememberreset {
    display: block; /* overridden inline by JS */
}

/* ==========================================================================
   Query container loading state
   ========================================================================== */

/* Applied to the parent element of .brxe-{queryId} items while fetch is
   in progress. Mirrors [data-lre-query-container].lre-filtering from Core. */
.lre-filtering {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 200ms ease-out;
}

/* ==========================================================================
   No-results placeholder
   ========================================================================== */

.lre-member-no-results {
    padding: 40px 20px;
    text-align: center;
    color: var(--lre-filter-text-light, #6b7280);
    font-size: 15px;
}