/* ==========================================================================
   WR Universal Facet Rail  (csr-includes/facets/facet-rail.css)
   --------------------------------------------------------------------------
   Reusable, page-agnostic styling for the grouped filter rail rendered by
   facet-rail.js (window.WRFacetRail). Drop the stylesheet on any page, give a
   container the class `wrf-rail`, and mount the rail into it.

   THEMING: every color/spacing knob is a CSS custom property declared on the
   `.wrf-rail` root, so a host page themes the rail by overriding these vars in
   its own scope (e.g. `.promo2 .wrf-rail { --wrf-accent: var(--red); }`).
   Markup contract (built by facet-rail.js) is documented in README.md.
   ========================================================================== */

.wrf-rail {
  --wrf-accent:    #CF1C3C;
  --wrf-text:      #1F2937;
  --wrf-text-dk:   #111827;
  --wrf-muted:     #6B7280;
  --wrf-line:      #E5E7EB;
  --wrf-line-2:    #d8dbe0;
  --wrf-grey:      #F0F1F3;
  --wrf-grey-2:    #fbfbfc;
  --wrf-bg:        #ffffff;
  --wrf-radius:    8px;

  font-family: inherit;
  color: var(--wrf-text);
}
.wrf-rail * { box-sizing: border-box; }

/* ---- universal block (always visible, sits on top) ---------------------- */
.wrf-universal { background: var(--wrf-grey); border-bottom: 1px solid var(--wrf-line); }
.wrf-ublabel {
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--wrf-muted); padding: 12px 16px 4px;
}

/* ---- a single facet (a collapsible <details>) --------------------------- */
.wrf-facet { border-bottom: 1px solid var(--wrf-line); }
.wrf-facet[hidden], .wrf-facet.wrf-hidden { display: none; }
.wrf-facet > summary {
  list-style: none; cursor: pointer; padding: 12px 16px;
  font-weight: 700; font-size: 13px; color: var(--wrf-text-dk);
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.wrf-facet > summary::-webkit-details-marker { display: none; }
.wrf-facet > summary .wrf-cv { color: var(--wrf-muted); transition: transform .2s; font-size: 11px; }
.wrf-facet[open] > summary .wrf-cv { transform: rotate(180deg); }
.wrf-opts { padding: 0 16px 12px; max-height: 260px; overflow-y: auto; }

/* an option row */
.wrf-fo {
  display: flex; align-items: center; gap: 9px; padding: 5px 0;
  font-size: 13px; color: var(--wrf-text); cursor: pointer;
}
.wrf-fo input { width: 15px; height: 15px; accent-color: var(--wrf-accent); flex-shrink: 0; margin: 0; }
.wrf-fo .wrf-lbl { flex: 1; }
.wrf-fo .wrf-n { font-size: 11.5px; color: var(--wrf-muted); }
.wrf-fo.wrf-zero { opacity: .4; }
.wrf-fo.wrf-hideable { display: none; }
.wrf-opts.wrf-expanded .wrf-fo.wrf-hideable { display: flex; }

.wrf-showmore {
  background: none; border: 0; color: var(--wrf-accent);
  font-size: 12px; font-weight: 700; cursor: pointer; padding: 6px 0 0;
}

/* ---- namespace group: wraps several facets ------------------------------ */
.wrf-nsgroup { border-bottom: 2px solid var(--wrf-line); }
.wrf-nsgroup.wrf-hidden { display: none; }
.wrf-nshead {
  cursor: pointer; padding: 13px 16px; background: var(--wrf-grey-2);
  display: flex; justify-content: space-between; align-items: center;
}
.wrf-nshead .wrf-nm { font-size: 13.5px; font-weight: 800; color: var(--wrf-text-dk); }
.wrf-nshead .wrf-meta { display: flex; align-items: center; gap: 8px; }
.wrf-nshead .wrf-cnt {
  font-size: 11px; color: var(--wrf-muted); background: var(--wrf-grey);
  padding: 2px 7px; border-radius: 20px;
}
.wrf-nshead .wrf-cv { color: var(--wrf-muted); transition: transform .2s; font-size: 11px; }
.wrf-nsgroup.wrf-open .wrf-nshead .wrf-cv { transform: rotate(180deg); }
.wrf-nsbody { display: none; }
.wrf-nsgroup.wrf-open .wrf-nsbody { display: block; }
.wrf-nsgroup .wrf-facet:last-child { border-bottom: 0; }

/* optional "dim" reveal mode (config revealMode:'dim') instead of hiding */
.wrf-nsgroup.wrf-dim { opacity: .55; }
.wrf-nsgroup.wrf-dim .wrf-nshead .wrf-nm::after {
  content: " \00b7 not in current type"; font-weight: 600; color: var(--wrf-muted); font-size: 11px;
}

/* ---- active-filter chips (rendered into the host's chips container) ------ */
.wrf-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; background: var(--wrf-bg);
  border: 1px solid var(--wrf-line-2); border-radius: 20px; padding: 5px 9px 5px 11px;
}
.wrf-chip .wrf-chip-grp { color: var(--wrf-muted); font-weight: 600; }
.wrf-chip button {
  border: 0; background: none; font-size: 14px; color: var(--wrf-muted);
  line-height: 1; cursor: pointer; padding: 0;
}
.wrf-chip button:hover { color: var(--wrf-accent); }