/* ==========================================================================
   slots-filters.css — polished, interactive filter UI for /slots/
   Scoped to .slots-hub. Brand tokens come from brand.css (--brand, --ink, --line).
   Owned by slots/index.html only. Do not @import elsewhere.
   ========================================================================== */

:root{
  --sf-brand:#ff6310;
  --sf-brand-dark:#e44e00;
  --sf-tint:#fff1e8;
  --sf-purple:#7c5cff;
  --sf-ink:#19191d;
  --sf-line:#ececf0;
}

/* ---- sidebar shell ---- */
.slots-hub .filter-bar{
  background:#fff;
  border:1px solid var(--sf-line);
  border-radius:16px;
  padding:18px;
  box-shadow:0 1px 2px rgba(25,25,29,.04);
}

/* ---- search ---- */
.slots-hub .filter-search input{
  border:1.5px solid var(--sf-line);
  border-radius:10px;
  transition:border-color .15s,box-shadow .15s;
}
.slots-hub .filter-search input:focus{
  border-color:var(--sf-brand);
  box-shadow:0 0 0 3px rgba(255,99,16,.15);
}

/* ---- accordion facet ---- */
.slots-hub .facet{
  margin:0;
  border-top:1px solid var(--sf-line);
  padding:12px 0;
}
.slots-hub .facet:first-of-type{border-top:0;padding-top:4px}
.slots-hub .facet:last-child{padding-bottom:0}

.slots-hub .facet-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;
  background:none;border:0;padding:6px 0;margin:0;
  cursor:pointer;
  font-family:'Poppins',sans-serif;font-weight:700;
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:#777;
  transition:color .15s;
}
.slots-hub .facet-toggle:hover{color:var(--sf-ink)}
.slots-hub .facet-toggle:focus-visible{
  outline:none;color:var(--sf-ink);
  box-shadow:0 0 0 3px rgba(255,99,16,.18);border-radius:6px;
}
.slots-hub .facet-toggle .facet-name{display:inline-flex;align-items:center;gap:8px}
/* count of selected in this group */
.slots-hub .facet-selected{
  display:none;
  background:var(--sf-brand);color:#fff;
  font-size:.66rem;font-weight:700;line-height:1;
  min-width:17px;height:17px;border-radius:999px;
  align-items:center;justify-content:center;padding:0 5px;
}
.slots-hub .facet.has-active .facet-selected{display:inline-flex}
.slots-hub .facet-caret{
  width:16px;height:16px;flex:0 0 auto;
  transition:transform .2s ease;color:#bbb;
}
.slots-hub .facet.collapsed .facet-caret{transform:rotate(-90deg)}

.slots-hub .facet-body{
  margin-top:10px;
  overflow:hidden;
}
.slots-hub .facet.collapsed .facet-body{display:none}

/* ---- chips / pills ---- */
.slots-hub .chips{display:flex;flex-wrap:wrap;gap:8px}
.slots-hub .chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;min-height:34px;
  border:1.5px solid var(--sf-line);
  background:#fafafa;
  border-radius:999px;
  font-size:.84rem;font-weight:500;color:#444;
  cursor:pointer;user-select:none;white-space:nowrap;
  transition:border-color .15s,background .15s,color .15s,transform .15s,box-shadow .15s;
}
.slots-hub .chip:hover{
  border-color:var(--sf-brand);
  background:var(--sf-tint);
  transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(255,99,16,.12);
}
.slots-hub .chip:focus-visible{
  outline:none;
  border-color:var(--sf-brand);
  box-shadow:0 0 0 3px rgba(255,99,16,.22);
}
/* count badge per pill */
.slots-hub .chip-count{
  font-size:.72rem;font-weight:600;color:#999;
  background:#eee;border-radius:999px;padding:1px 7px;line-height:1.5;
  transition:background .15s,color .15s;
}
.slots-hub .chip:hover .chip-count{background:#fff;color:var(--sf-brand-dark)}
/* check glyph, hidden until active */
.slots-hub .chip-check{display:none;width:13px;height:13px;flex:0 0 auto}
/* zero-match pills dimmed but still usable */
.slots-hub .chip.is-empty{opacity:.4}
.slots-hub .chip.is-empty:hover{transform:none;box-shadow:none}

/* selected/active state — filled brand */
.slots-hub .chip[aria-pressed="true"]{
  background:var(--sf-brand);
  border-color:var(--sf-brand);
  color:#fff;font-weight:600;
  opacity:1;
}
.slots-hub .chip[aria-pressed="true"]:hover{
  background:var(--sf-brand-dark);border-color:var(--sf-brand-dark);
  box-shadow:0 3px 10px rgba(255,99,16,.3);
}
.slots-hub .chip[aria-pressed="true"] .chip-check{display:inline-block}
.slots-hub .chip[aria-pressed="true"] .chip-count{
  background:rgba(255,255,255,.25);color:#fff;
}

/* ---- ghost clear button (sidebar) ---- */
.slots-hub .btn-clear{
  flex:0 0 auto;
  padding:8px 4px;
  border:0;background:none;
  font:inherit;font-weight:600;font-size:.85rem;
  color:var(--sf-brand-dark);
  cursor:pointer;
  border-radius:8px;
  transition:color .15s,background .15s;
}
.slots-hub .btn-clear:hover{color:var(--sf-brand);text-decoration:underline}
.slots-hub .btn-clear:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,99,16,.2)}
.slots-hub .btn-clear[hidden]{display:none}

/* ---- results meta: summary + sort ---- */
.slots-hub .results-meta{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;margin-bottom:14px;
}
.slots-hub .results-count{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.05rem;color:var(--sf-ink)}
.slots-hub .results-count span{color:var(--sf-brand)}

.slots-hub .sort-wrap{display:inline-flex;align-items:center;gap:8px}
.slots-hub .sort-wrap label{font-size:.82rem;color:#777;font-weight:600}
.slots-hub .sort-select{
  appearance:none;-webkit-appearance:none;
  padding:9px 34px 9px 12px;min-height:40px;
  border:1.5px solid var(--sf-line);border-radius:10px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center;
  font:inherit;font-size:.88rem;font-weight:600;color:#444;cursor:pointer;
  transition:border-color .15s,box-shadow .15s;
}
.slots-hub .sort-select:focus{outline:none;border-color:var(--sf-brand);box-shadow:0 0 0 3px rgba(255,99,16,.15)}

/* ---- active filter chips row (above grid) ---- */
.slots-hub .active-filters{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-bottom:18px;
}
.slots-hub .active-filters[hidden]{display:none}
.slots-hub .af-label{font-size:.8rem;color:#888;font-weight:600;margin-right:2px}
.slots-hub .af-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 7px 5px 12px;
  background:var(--sf-tint);
  border:1px solid color-mix(in srgb, var(--sf-brand) 28%, var(--sf-line));
  border-radius:999px;
  font-size:.8rem;font-weight:600;color:var(--sf-brand-dark);
}
.slots-hub .af-chip .af-cat{color:#b07a55;font-weight:500;text-transform:capitalize}
.slots-hub .af-x{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border:0;border-radius:50%;
  background:rgba(255,99,16,.18);color:var(--sf-brand-dark);
  font-size:1rem;line-height:1;cursor:pointer;padding:0;
  transition:background .15s,color .15s;
}
.slots-hub .af-x:hover{background:var(--sf-brand);color:#fff}
.slots-hub .af-x:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,99,16,.3)}
.slots-hub .af-clear{
  border:0;background:none;font:inherit;font-size:.8rem;font-weight:600;
  color:#888;cursor:pointer;text-decoration:underline;padding:4px 6px;border-radius:6px;
}
.slots-hub .af-clear:hover{color:var(--sf-brand-dark)}
.slots-hub .af-clear:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,99,16,.2)}

/* ---- mobile: drawer + fab counts ---- */
@media(max-width:899px){
  .slots-hub .results-meta{flex-direction:row;align-items:center}
  .slots-hub .sort-select{min-height:44px}
  .slots-hub .chip{min-height:40px;padding:9px 14px} /* bigger tap targets */
  .slots-hub .af-x{width:22px;height:22px}
  .slots-hub .filter-bar{box-shadow:none}
}