/**
 * Universal Shop — faceted filter panel + applied-filter chips (Stage F5).
 *
 * Bootstrap 5 utilities/components handle layout wherever they already
 * cover the need; custom rules below are only for the checkbox/radio/color
 * value indicators and the range slider, which have no Bootstrap primitive.
 *
 * Every `--us-*` design token below carries an explicit fallback value
 * (`var(--us-accent, #0d6efd)`, never bare `var(--us-accent)`) — bugfix
 * from owner testing: site.css scopes those tokens to `.us-shop` (the
 * COMPONENT's own page wrapper), but mod_universalshop_filter renders in a
 * template module position, a SIBLING of `.us-shop`, not a descendant — the
 * bare var() resolved to nothing there, silently invalidating every
 * declaration that used it (an invalid `border: 2px solid var(--x))`
 * collapses the whole shorthand to `0 none`, which is why the range slider
 * handles were literally invisible, not just wrong-colored).
 */

/* ---- Applied filter chips (rendered by the page, ToR §5.3) ---------------- */

.us-filter-chips-region:empty {
  display: none;
}

.us-filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.us-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 999px;
  background: var(--bs-body-bg, #fff);
  color: inherit;
  text-decoration: none;
  font-size: 0.85rem;
}

.us-filter-chip:hover {
  border-color: var(--us-accent, #0d6efd);
  color: var(--us-accent, #0d6efd);
}

.us-filter-chip-close {
  font-weight: 700;
  line-height: 1;
}

/* ---- Panel ------------------------------------------------------------------ */

.us-filter-panel {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.us-filter-panel-empty {
  color: #6c757d;
  font-size: 0.9rem;
}

/* Reset link — owner decision after live testing (2026-07-29): NOT next to
   the chips (ToR §5.3 default) — top and bottom of the panel instead, so it
   reads as "reset the whole filter", not "remove one more chip". */
.us-filter-reset-link {
  display: block;
  font-size: 0.85rem;
  color: var(--us-accent, #0d6efd);
  text-decoration: underline;
}

.us-filter-reset-link--top {
  margin-bottom: 0.75rem;
}

.us-filter-reset-link--bottom {
  margin-top: 0.5rem;
}

.us-filter-facet {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
}

.us-filter-facet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font-weight: 600;
  text-align: left;
}

.us-filter-facet-caret {
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.us-filter-facet--collapsed .us-filter-facet-caret {
  transform: rotate(-45deg);
}

.us-filter-facet--collapsed .us-filter-facet-body {
  display: none;
}

.us-filter-facet-body {
  margin-top: 0.5rem;
}

.us-filter-facet-placeholder {
  color: #6c757d;
  font-size: 0.85rem;
  font-style: italic;
  margin: 0;
}

/* ---- Value lists (checkbox / radio / color) -------------------------------- */

.us-filter-values {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: none;
}

/* Bugfix (owner testing): this used to be SHORTER (16rem) than the default
   unexpanded list already was, so clicking "Show more" visibly SHRANK the
   block instead of growing it. Generously larger than the default
   `filter_values_min` rows now — a scrollbar only appears for genuinely
   long lists near `filter_values_max`. */
.us-filter-values--expanded {
  max-height: 32rem;
  overflow-y: auto;
}

.us-filter-value {
  margin-bottom: 0.375rem;
}

.us-filter-value-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
  font-size: 0.9rem;
}

.us-filter-value-indicator {
  position: relative;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid rgba(0, 0, 0, 0.35);
  background: var(--bs-body-bg, #fff);
}

.us-filter-value-indicator--checkbox {
  border-radius: 3px;
}

.us-filter-value-indicator--radio {
  border-radius: 50%;
}

.us-filter-value-link.is-selected .us-filter-value-indicator {
  background: var(--us-accent, #0d6efd);
  border-color: var(--us-accent, #0d6efd);
}

/* Explicit checkmark / dot glyph — a solid-colored box alone read as "just
   changed color", not clearly "checked" (owner testing finding). */
.us-filter-value-link.is-selected .us-filter-value-indicator--checkbox::after {
  content: "";
  position: absolute;
  left: 2px;
  top: -1px;
  width: 5px;
  height: 8px;
  border: solid var(--bs-body-bg, #fff);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.us-filter-value-link.is-selected .us-filter-value-indicator--radio::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--bs-body-bg, #fff);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.us-filter-value-label {
  flex: 1 1 auto;
}

.us-filter-value-count {
  color: #6c757d;
  font-size: 0.8rem;
}

.us-filter-swatch {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.15);
}

.us-filter-swatch.is-selected {
  box-shadow: 0 0 0 2px var(--bs-body-bg, #fff), 0 0 0 4px var(--us-accent, #0d6efd);
}

.us-filter-show-more,
.us-filter-show-less {
  border: 0;
  background: transparent;
  color: var(--us-accent, #0d6efd);
  font-size: 0.85rem;
  padding: 0.25rem 0;
}

/* ---- Range widget ------------------------------------------------------------ */

.us-filter-range-inputs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.us-filter-range-input {
  width: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.us-filter-range-slider {
  position: relative;
  height: 1.25rem;
  margin: 0 0.5rem;
}

.us-filter-range-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.12);
  border-radius: 999px;
}

.us-filter-range-fill {
  position: absolute;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  background: var(--us-accent, #0d6efd);
  border-radius: 999px;
}

.us-filter-range-handle {
  position: absolute;
  top: 50%;
  width: 1.1rem;
  height: 1.1rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid var(--us-accent, #0d6efd);
  background: var(--bs-body-bg, #fff);
  padding: 0;
  cursor: grab;
  touch-action: none;
}

.us-filter-range-handle:active {
  cursor: grabbing;
}

.us-filter-range-handle:focus-visible {
  outline: 2px solid var(--us-accent, #0d6efd);
  outline-offset: 2px;
}

/* ---- Loading state (Stage F5 §5.4) -------------------------------------------- */

.us-filter-loading {
  opacity: 0.55;
  pointer-events: none;
}

.us-filter-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 20vh;
  background: rgba(255, 255, 255, 0.35);
}

@media (prefers-color-scheme: dark) {
  .us-filter-overlay {
    background: rgba(0, 0, 0, 0.35);
  }
}