/* ══════════════════════════════════════════════════════════════
   MoonLight_X — MLX Filter Widgets CSS
   Classes: mlx-fw-* (fw = filter widget)
   ══════════════════════════════════════════════════════════════ */

/* ── Widget wrapper ─────────────────────────────────────────── */
.mlx-widget-filter { margin-bottom: 0; }

/* ── Checkbox list ──────────────────────────────────────────── */
.mlx-fw-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.mlx-fw-list--swatches {
  flex-direction: row;
  flex-wrap: wrap;
  gap: .5rem;
}

.mlx-fw-list__item { margin: 0; }

/* ── Checkbox label ─────────────────────────────────────────── */
.mlx-fw-checkbox {
  display: flex;
  align-items: center;
  gap: .625rem;
  cursor: pointer;
  font-size: .875rem;
  color: var(--mlx-text-muted, #555);
  padding: .35rem 0;
  transition: color .15s;
  user-select: none;
}

.mlx-fw-checkbox:hover { color: var(--mlx-color-primary, #0a0a0a); }
.mlx-fw-checkbox input { display: none; }

/* ── Checkbox box ───────────────────────────────────────────── */
.mlx-fw-checkbox__box {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 1.5px solid #bbb;
  border-radius: 3px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
}

.mlx-fw-checkbox input:checked ~ .mlx-fw-checkbox__box {
  background: var(--mlx-color-accent, #e84545);
  border-color: var(--mlx-color-accent, #e84545);
}

.mlx-fw-checkbox input:checked ~ .mlx-fw-checkbox__box::after {
  content: '';
  display: block;
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}

/* ── Label + count ──────────────────────────────────────────── */
.mlx-fw-checkbox__label { flex: 1; }
.mlx-fw-checkbox__count {
  color: var(--mlx-text-subtle, #aaa);
  font-size: .75rem;
  margin-left: auto;
}

/* ── Color swatch ───────────────────────────────────────────── */
.mlx-fw-checkbox--swatch {
  padding: 0;
  gap: 0;
}

.mlx-fw-checkbox__swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  outline: 1.5px solid rgba(0,0,0,.12);
  outline-offset: 1px;
  flex-shrink: 0;
  transition: outline-color .15s, transform .15s;
}

.mlx-fw-checkbox--swatch input:checked ~ .mlx-fw-checkbox__swatch {
  outline-color: var(--mlx-color-accent, #e84545);
  transform: scale(1.12);
}

/* ── Price slider ───────────────────────────────────────────── */
.mlx-fw-price { display: flex; flex-direction: column; gap: .875rem; }

.mlx-fw-price__slider { position: relative; height: 24px; }

.mlx-fw-price__track {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  background: #e0e0e0;
  border-radius: 2px;
}

.mlx-fw-price__range {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--mlx-color-accent, #e84545);
  border-radius: 2px;
  pointer-events: none;
}

.mlx-fw-price__input {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 4px;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
  margin: 0;
}

.mlx-fw-price__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--mlx-color-accent, #e84545);
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  cursor: pointer;
  pointer-events: auto;
  transition: transform .15s;
}

.mlx-fw-price__input::-webkit-slider-thumb:hover { transform: scale(1.15); }
.mlx-fw-price__input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--mlx-color-accent, #e84545);
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  cursor: pointer;
  pointer-events: auto;
}

.mlx-fw-price__labels {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  font-weight: 500;
}

.mlx-fw-price__label { color: var(--mlx-text, #1a1a1a); }
.mlx-fw-price__sep   { color: var(--mlx-text-subtle, #aaa); }

/* ── In-stock toggle ────────────────────────────────────────── */
.mlx-fw-stock-toggle {
  display: flex;
  align-items: center;
  gap: .625rem;
  cursor: pointer;
  user-select: none;
  font-size: .875rem;
  color: var(--mlx-text-muted, #555);
}

.mlx-fw-stock-toggle input { display: none; }

.mlx-fw-stock-toggle__track {
  flex-shrink: 0;
  width: 36px;
  height: 20px;
  border-radius: 20px;
  background: #ddd;
  position: relative;
  transition: background .2s;
}

.mlx-fw-stock-toggle__track::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: left .2s;
}

.mlx-fw-stock-toggle input:checked ~ .mlx-fw-stock-toggle__track {
  background: var(--mlx-color-accent, #e84545);
}

.mlx-fw-stock-toggle input:checked ~ .mlx-fw-stock-toggle__track::after {
  left: calc(100% - 17px);
}

/* ── Active filters widget ──────────────────────────────────── */
.mlx-fw-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem;
}

.mlx-fw-active__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  flex: 1;
  min-width: 0;
}

.mlx-fw-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .625rem .25rem .5rem;
  background: var(--mlx-surface, #f5f5f5);
  border: 1px solid var(--mlx-border, #e5e5e5);
  border-radius: 9999px;
  font-size: .75rem;
  font-weight: 500;
  color: var(--mlx-text, #1a1a1a);
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mlx-fw-chip__remove {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: .875rem;
  line-height: 1;
  color: var(--mlx-text-subtle, #aaa);
  transition: color .15s;
}

.mlx-fw-chip__remove:hover { color: var(--mlx-color-accent, #e84545); }

.mlx-fw-active__clear {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: .75rem;
  font-weight: 600;
  color: var(--mlx-color-accent, #e84545);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity .15s;
}

.mlx-fw-active__clear:hover { opacity: .75; }

/* ── Dark mode ──────────────────────────────────────────────── */
[data-theme="dark"] .mlx-fw-checkbox { color: var(--mlx-text-muted) !important; }
[data-theme="dark"] .mlx-fw-checkbox:hover { color: var(--mlx-text) !important; }
[data-theme="dark"] .mlx-fw-checkbox__box {
  background: var(--mlx-input-bg) !important;
  border-color: var(--mlx-input-border) !important;
}
[data-theme="dark"] .mlx-fw-checkbox input:checked ~ .mlx-fw-checkbox__box {
  background: var(--mlx-color-accent, #e84545) !important;
  border-color: var(--mlx-color-accent, #e84545) !important;
}
[data-theme="dark"] .mlx-fw-checkbox__count { color: var(--mlx-text-subtle) !important; }
[data-theme="dark"] .mlx-fw-checkbox__swatch { outline-color: var(--mlx-border); }

[data-theme="dark"] .mlx-fw-price__track { background: var(--mlx-border) !important; }
[data-theme="dark"] .mlx-fw-price__input::-webkit-slider-thumb {
  background: var(--mlx-bg-card) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.4) !important;
}
[data-theme="dark"] .mlx-fw-price__label { color: var(--mlx-text) !important; }
[data-theme="dark"] .mlx-fw-price__sep   { color: var(--mlx-text-subtle) !important; }

[data-theme="dark"] .mlx-fw-stock-toggle { color: var(--mlx-text-muted) !important; }
[data-theme="dark"] .mlx-fw-stock-toggle__track { background: var(--mlx-border) !important; }
[data-theme="dark"] .mlx-fw-stock-toggle input:checked ~ .mlx-fw-stock-toggle__track {
  background: var(--mlx-color-accent, #e84545) !important;
}

[data-theme="dark"] .mlx-fw-chip {
  background: var(--mlx-surface) !important;
  border-color: var(--mlx-border) !important;
  color: var(--mlx-text) !important;
}
[data-theme="dark"] .mlx-fw-chip__remove { color: var(--mlx-text-subtle) !important; }

/* ═══════════════════════════════════════════════════════════════════
   ATTRIBUTE SWATCHES — .mlx-fw-swatches
   Replaces old .mlx-fw-list--swatches + .mlx-fw-checkbox--swatch
═══════════════════════════════════════════════════════════════════ */

.mlx-fw-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 0 6px;
}

/* ── Individual swatch ───────────────────────────────────────── */
.mlx-fw-swatch {
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.mlx-fw-swatch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.mlx-fw-swatch__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 2px solid transparent;
  outline: 1.5px solid rgba(0,0,0,.12);
  outline-offset: 1px;
  transition: outline-color .15s, transform .15s, border-color .15s;
  overflow: hidden;
  flex-shrink: 0;
}

/* ── SHAPES ──────────────────────────────────────────────────── */
/* Circle (default) */
.mlx-fw-swatches--circle .mlx-fw-swatch__inner,
.mlx-fw-swatch--circle  .mlx-fw-swatch__inner   { border-radius: 50%; }

/* Rounded */
.mlx-fw-swatches--rounded .mlx-fw-swatch__inner,
.mlx-fw-swatch--rounded   .mlx-fw-swatch__inner  { border-radius: 6px; }

/* Square */
.mlx-fw-swatches--square .mlx-fw-swatch__inner,
.mlx-fw-swatch--square   .mlx-fw-swatch__inner   { border-radius: 2px; }

/* ── Label swatch (no color/image defined) ────────────────────── */
.mlx-fw-swatch--label .mlx-fw-swatch__inner {
  background: var(--mlx-bg-subtle, #f5f5f5);
  border: 1.5px solid var(--mlx-border, #ddd);
  outline: none;
}

.mlx-fw-swatch__text {
  font-size: .6875rem;
  font-weight: 600;
  color: #444;
  line-height: 1;
  white-space: nowrap;
}

/* ── Active / checked state ──────────────────────────────────── */
.mlx-fw-swatch.is-active .mlx-fw-swatch__inner,
.mlx-fw-swatch input:checked ~ .mlx-fw-swatch__inner {
  outline-color: var(--mlx-color-accent, #e84545);
  outline-width: 2px;
  transform: scale(1.1);
}

.mlx-fw-swatch--label.is-active .mlx-fw-swatch__inner,
.mlx-fw-swatch--label input:checked ~ .mlx-fw-swatch__inner {
  background: var(--mlx-color-primary, #0a0a0a);
  border-color: var(--mlx-color-primary, #0a0a0a);
  outline: none;
  transform: scale(1.05);
}
.mlx-fw-swatch--label.is-active .mlx-fw-swatch__text {
  color: #fff;
}

/* ── Hover ────────────────────────────────────────────────────── */
.mlx-fw-swatch:hover .mlx-fw-swatch__inner {
  outline-color: var(--mlx-color-primary, #0a0a0a);
  transform: scale(1.08);
}

/* ── Count badge ─────────────────────────────────────────────── */
.mlx-fw-swatch__count {
  font-size: .625rem;
  color: var(--mlx-text-subtle, #aaa);
  line-height: 1;
}

/* ── Image swatch ─────────────────────────────────────────────── */
.mlx-fw-swatch--image .mlx-fw-swatch__inner {
  background-size: cover;
  background-position: center;
}

/* ── Size variants (set via JS or parent class) ───────────────── */
.mlx-fw-swatches--s  .mlx-fw-swatch__inner { width: 24px; height: 24px; }
.mlx-fw-swatches--m  .mlx-fw-swatch__inner { width: 32px; height: 32px; }
.mlx-fw-swatches--l  .mlx-fw-swatch__inner { width: 40px; height: 40px; }
.mlx-fw-swatches--xl .mlx-fw-swatch__inner { width: 48px; height: 48px; }

/* Dark mode */
[data-theme="dark"] .mlx-fw-swatch__inner   { outline-color: rgba(255,255,255,.15); }
[data-theme="dark"] .mlx-fw-swatch--label .mlx-fw-swatch__inner { background: var(--mlx-bg-card, #222); border-color: rgba(255,255,255,.15); }
[data-theme="dark"] .mlx-fw-swatch__text   { color: #ccc; }

/* ── Active filters — server-side URL mode ─────────────────────── */
.mlx-fw-active--url {
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.mlx-fw-active--url .mlx-fw-active__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  flex: 1;
}
/* Chip as link (URL mode) */
a.mlx-fw-chip {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .25rem .625rem;
  background: var(--mlx-color-primary, #0a0a0a);
  color: #fff;
  font-size: .75rem;
  font-weight: 500;
  border-radius: 4px;
  text-decoration: none;
  transition: background .15s;
}
a.mlx-fw-chip:hover { background: var(--mlx-color-accent, #e84545); }
.mlx-fw-chip__x { font-size: 1rem; line-height: 1; opacity: .75; }
a.mlx-fw-chip:hover .mlx-fw-chip__x { opacity: 1; }

/* Clear all as link */
.mlx-fw-active__clear--link {
  display: inline-block;
  font-size: .8125rem;
  color: #888;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s;
}
.mlx-fw-active__clear--link:hover { color: var(--mlx-color-accent, #e84545); }

[data-theme="dark"] a.mlx-fw-chip { background: var(--mlx-surface-2, #333); }

/* ═══════════════════════════════════════════════════════════════════
   FILTER SECTION IMPROVEMENTS
══════════════════════════════════════════════════════════════════ */

/* ── Section wrapper (bg + radius per widget) ─────────────────── */
.mlx-filter-section-wrap {
  margin-bottom: .75rem;
  overflow: hidden;
}

/* ── Collapsible section toggle button ───────────────────────── */
.mlx-fw-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0 0 .625rem;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mlx-color-primary, #0a0a0a);
  cursor: pointer;
  border-bottom: 1px solid var(--mlx-border, #eee);
  margin-bottom: .625rem;
}
.mlx-fw-section-toggle svg {
  transition: transform .2s;
  flex-shrink: 0;
}
.mlx-fw-section-toggle.is-collapsed svg { transform: rotate(-90deg); }
.mlx-fw-section-body.is-hidden { display: none; }

/* ── Category children expand button ────────────────────────── */
.mlx-fw-list__item { position: relative; }
.mlx-fw-cat-expand {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #888;
  transition: color .15s, transform .2s;
  line-height: 1;
}
.mlx-fw-cat-expand:hover { color: var(--mlx-color-primary, #0a0a0a); }
.mlx-fw-list__item.is-open > .mlx-fw-cat-expand { transform: translateY(-50%) rotate(180deg); }
.mlx-fw-list--children {
  padding-left: 1rem;
  margin-top: .25rem;
  border-left: 2px solid var(--mlx-border, #eee);
}
.mlx-fw-list__item.has-children > .mlx-fw-checkbox { padding-right: 1.5rem; }
.mlx-fw-list__item.is-active > .mlx-fw-checkbox .mlx-fw-checkbox__label { font-weight: 600; }
.mlx-fw-list__item.is-active > .mlx-fw-checkbox { color: var(--mlx-color-primary, #0a0a0a); }

/* ── Price filter button ──────────────────────────────────────── */
.mlx-fw-price-filter-btn {
  display: block;
  width: 100%;
  margin-top: .75rem;
  padding: .5rem 1rem;
  background: var(--mlx-color-primary, #0a0a0a);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
  text-align: center;
}
.mlx-fw-price-filter-btn:hover { background: var(--mlx-color-accent, #e84545); }

/* ── Hover highlight in category list ────────────────────────── */
.mlx-fw-list__item:hover > .mlx-fw-checkbox .mlx-fw-checkbox__label {
  color: var(--mlx-color-primary, #0a0a0a);
}
.mlx-fw-list__item.is-active > label .mlx-fw-checkbox__box {
  background: var(--mlx-color-primary, #0a0a0a);
  border-color: var(--mlx-color-primary, #0a0a0a);
}

/* Dark mode */
[data-theme="dark"] .mlx-fw-section-toggle { color: var(--mlx-text, #f0f0f0); border-color: var(--mlx-border); }
[data-theme="dark"] .mlx-fw-list--children { border-color: var(--mlx-border); }