/*
  list-search.css: the search box above a public listing (the shared partial _ListSearch.cshtml,
  docs/modules/02-website.md §6b), on every listing that registers one. Loaded by the public layout.
  The box and its button are the template's own (.widget-area .widget_search, in the markup): only the
  frame around it, the count and the empty state are ours. Tokens only (StyleRules), logical properties
  only, so Arabic and dark mode need nothing extra.
*/

/* Centred above the list, with the result count under it. */
.bfau-list-search {
  max-inline-size: 32rem;
  margin-inline: auto;
  margin-block-end: 2rem;
}

.bfau-list-search .widget_search {
  margin-block-end: 0.75rem;
}

.bfau-list-search .widget_search form .search-field {
  text-align: start;
}

.bfau-list-search-count {
  margin: 0;
  text-align: center;
  color: var(--bfau-text-muted);
}

/* Nothing matches: the same quiet state as an empty list. */
.bfau-list-search-empty {
  padding-block: 3rem;
  text-align: center;
  color: var(--bfau-text-muted);
}

.bfau-list-search-empty .bx {
  display: block;
  margin-block-end: 0.75rem;
  font-size: 3rem;
  color: var(--bfau-primary-text);
  opacity: 0.6;
}

.bfau-list-search-empty p {
  margin: 0;
  color: var(--bfau-text-muted);
}

.bfau-list-search-reset {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-block-end: 1.5rem;
  color: var(--bfau-link);
  font-weight: 600;
}

/* A hidden item or group stays hidden whatever the template's own display rule for it is (the FAQ's
   accordion items are display: block at a higher specificity). */
[data-bfau-search-item][hidden],
[data-bfau-search-group][hidden],
.bfau-list-search-count[hidden],
.bfau-list-search-empty[hidden] {
  display: none !important;
}