/**
 * Bricks Static Filter — styles
 *
 * Cards hidden by the filter fade out softly.
 * The no-results message uses a neutral style that can be overridden in Bricks.
 */

/* Hidden state — use opacity + scale so CSS Grid reflows naturally */
[data-bsf-post-id].bsf-hidden {
  display: none !important;
}

/* When no item matches, collapse the (now empty) loop container so its leftover
   height + row-gap don't leave a large void above the "no results" message. */
.bsf-results-empty {
  display: none !important;
}

/* Optional: smooth transition before hiding (progressive enhancement).
   Uncomment if you prefer a fade rather than instant hide. */
/*
[data-bsf-post-id] {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
[data-bsf-post-id].bsf-hidden {
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
}
*/

/* ---------------------------------------------------------------------------
 * filter-search icon overlay guard.
 *
 * Bricks positions the search/clear icon with `position:absolute; left:0; right:0`.
 * An <svg> icon keeps its intrinsic ~20px width, so it sits to one side and the
 * rest of the input stays clickable. But an ICON-FONT <i> is a normal element:
 * with both left:0 and right:0 it stretches to fill the ENTIRE input, covering
 * it. Because that icon carries role="button" (the Clear control), every mouse
 * click then lands on the icon instead of focusing the field — the search bar
 * "feels like a button" and you cannot click to type.
 *
 * Constrain the icon-font so it behaves like the SVG (shrink to its glyph, one
 * side). Scoped to icon-font <i> only — SVG icons are untouched (no regression).
 * ------------------------------------------------------------------------- */
.brxe-filter-search > i.icon {
  right: auto;
  width: max-content;
}

/* Filter options with zero matching results */
label.bsf-option-empty {
  opacity: 0.4;
  pointer-events: none; /* prevents selecting an option that would return nothing */
}

/* No-results message */
.bsf-no-results {
  width: 100%;
  padding: 2rem 0;
  text-align: center;
  color: currentColor;
  opacity: 0.6;
  font-style: italic;
}

/* Active filter chips (rendered into filter-active-filters elements).
   Neutral defaults — override freely in your theme / Bricks. */
.bsf-active-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.25em 0.6em;
  border-radius: 999px;
  background: var(--base-ultra-light, #f1f1f4);
  color: var(--primary, inherit);
  font-size: var(--text-xs, 0.8rem);
  line-height: 1.4;
}
.bsf-active-filter__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 1.1em;
  line-height: 1;
  cursor: pointer;
}
.bsf-active-filter__remove:hover,
.bsf-active-filter__remove:focus-visible {
  background: rgba(0, 0, 0, 0.08);
}