/* ============================================================
   WooCommerce Default Filter Widgets — Custom Style
   Dán vào Appearance → Customize → Additional CSS
   hoặc enqueue trong functions.php
   ============================================================ */

/* ── Biến dùng chung ── */
:root {
  --sf-black:      #111111;
  --sf-border:     #e0e0e0;
  --sf-label-size: 12px;
  --sf-item-size:  14px;
  --sf-ease:       0.2s ease;
}

/* ════════════════════════════════════════════
   WIDGET WRAPPER — xoá background/padding mặc định
   ════════════════════════════════════════════ */
.cat-filter-panel__body .widget,
.cat-filter-panel__body .woocommerce-widget-layered-nav,
.cat-filter-panel__body .wc-block-components-filter-wrapper {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* ════════════════════════════════════════════
   WIDGET TITLE (SIZE / COLOR / IN STOCK / CATEGORY)
   ════════════════════════════════════════════ */
.cat-filter-panel__body .widget-title,
.cat-filter-panel__body .widgettitle,
.cat-filter-panel__body h3,
.cat-filter-panel__body .wc-block-components-filter-wrapper > h3,
.cat-filter-panel__body legend {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-family: inherit !important;
  font-size: var(--sf-label-size) !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--sf-black) !important;
  margin: 0 !important;
  padding: 18px 0 !important;
  border-bottom: 1px solid var(--sf-border) !important;
  cursor: pointer;
  user-select: none;
}

/* Chevron icon tự thêm qua ::after */
.cat-filter-panel__body .widget-title::after,
.cat-filter-panel__body .widgettitle::after,
.cat-filter-panel__body .wc-block-components-filter-wrapper > h3::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform var(--sf-ease);
  flex-shrink: 0;
}
.cat-filter-panel__body .widget.is-collapsed .widget-title::after,
.cat-filter-panel__body .widget.is-collapsed .widgettitle::after {
  transform: rotate(-90deg);
}

/* ════════════════════════════════════════════
   COLLAPSIBLE BODY
   ════════════════════════════════════════════ */
.cat-filter-panel__body .sf-body {
  overflow: hidden;
  max-height: 1000px;
  transition: max-height 0.25s ease, opacity 0.2s ease;
  opacity: 1;
}
.cat-filter-panel__body .widget.is-collapsed .sf-body {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

/* ════════════════════════════════════════════
   LAYERED NAV LIST (Filter by Attribute / Category)
   ════════════════════════════════════════════ */
.cat-filter-panel__body .woocommerce-widget-layered-nav-list,
.cat-filter-panel__body .product-categories {
  list-style: none !important;
  padding: 12px 0 18px !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px 8px !important;
}

/* Ẩn count "(12)" */
.cat-filter-panel__body .woocommerce-widget-layered-nav-list__item .count,
.cat-filter-panel__body .product-categories .count {
  display: none !important;
}

/* Link item */
.cat-filter-panel__body .woocommerce-widget-layered-nav-list__item a,
.cat-filter-panel__body .product-categories li a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: var(--sf-item-size) !important;
  color: var(--sf-black) !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
}

/* Custom checkbox box trước link */
.cat-filter-panel__body .woocommerce-widget-layered-nav-list__item a::before,
.cat-filter-panel__body .product-categories li a::before {
  content: '' !important;
  display: inline-flex !important;
  flex-shrink: 0 !important;
  width: 18px !important;
  height: 18px !important;
  border: 1.5px solid #bbb !important;
  border-radius: 3px !important;
  background: #fff !important;
  transition: background var(--sf-ease), border-color var(--sf-ease) !important;
}

/* Checked state — item được chọn có class "chosen" */
.cat-filter-panel__body .woocommerce-widget-layered-nav-list__item--chosen a::before,
.cat-filter-panel__body .product-categories .current-cat > a::before {
  background: var(--sf-black) !important;
  border-color: var(--sf-black) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolyline points='2 6 5 9 10 3' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-size: 10px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Hover */
.cat-filter-panel__body .woocommerce-widget-layered-nav-list__item a:hover::before,
.cat-filter-panel__body .product-categories li a:hover::before {
  border-color: #888 !important;
}

/* ════════════════════════════════════════════
   IN STOCK (Filter Products by Stock widget)
   ════════════════════════════════════════════ */
.cat-filter-panel__body .wc-block-stock-filter,
.cat-filter-panel__body .woocommerce-widget-in-stock {
  padding: 12px 0 18px !important;
}

/* Checkbox items dạng list */
.cat-filter-panel__body .wc-block-stock-filter__list,
.cat-filter-panel__body .wc-block-checkbox-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px 8px !important;
}

/* Style label chứa checkbox */
.cat-filter-panel__body .wc-block-checkbox-list__item label,
.cat-filter-panel__body .wc-block-stock-filter__list label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: var(--sf-item-size) !important;
  color: var(--sf-black) !important;
  cursor: pointer !important;
}

/* Ẩn checkbox native */
.cat-filter-panel__body .wc-block-checkbox-list__item input[type="checkbox"],
.cat-filter-panel__body .wc-block-stock-filter__list input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  border: 1.5px solid #bbb !important;
  border-radius: 3px !important;
  background: #fff !important;
  cursor: pointer !important;
  transition: background var(--sf-ease), border-color var(--sf-ease) !important;
  position: relative !important;
}

.cat-filter-panel__body .wc-block-checkbox-list__item input[type="checkbox"]:checked,
.cat-filter-panel__body .wc-block-stock-filter__list input[type="checkbox"]:checked {
  background: var(--sf-black) !important;
  border-color: var(--sf-black) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolyline points='2 6 5 9 10 3' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-size: 10px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Ẩn count badge */
.cat-filter-panel__body .wc-filter-element-label-list-count {
  display: none !important;
}

/* ════════════════════════════════════════════
   COLOR SWATCHES
   Dùng với plugin như "Variation Swatches for WooCommerce"
   hoặc widget layered nav có swatch add-on
   ════════════════════════════════════════════ */
.cat-filter-panel__body .swatches-list,
.cat-filter-panel__body .wvs-term-item {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px 18px !important;
  padding: 8px 0 18px !important;
  list-style: none !important;
  margin: 0 !important;
}

.cat-filter-panel__body .wvs-term-item a,
.cat-filter-panel__body .swatches-list li a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
}

/* Swatch circle */
.cat-filter-panel__body .wvs-term-item .swatch-color,
.cat-filter-panel__body .wvs-term-item span[style*="background"],
.cat-filter-panel__body .swatches-list .swatch {
  display: block !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 2px solid transparent !important;
  outline: 3px solid transparent !important;
  outline-offset: 2px !important;
  transition: outline-color var(--sf-ease) !important;
}

.cat-filter-panel__body .wvs-term-item a:hover .swatch-color,
.cat-filter-panel__body .wvs-term-item.chosen .swatch-color {
  outline-color: var(--sf-black) !important;
}

/* Color label dưới swatch */
.cat-filter-panel__body .wvs-term-item .term-name,
.cat-filter-panel__body .swatches-list .swatch-label {
  font-size: 12px !important;
  color: #666 !important;
  text-align: center !important;
}

/* ════════════════════════════════════════════
   PRICE RANGE SLIDER
   ════════════════════════════════════════════ */
.cat-filter-panel__body .price_slider_wrapper {
  padding: 8px 0 18px !important;
}
.cat-filter-panel__body .price_slider_amount {
  font-size: 13px !important;
  color: var(--sf-black) !important;
}
.cat-filter-panel__body .price_slider_amount .button {
  background: var(--sf-black) !important;
  color: #fff !important;
  border: none !important;
  padding: 6px 14px !important;
  border-radius: 3px !important;
  font-size: 12px !important;
  cursor: pointer !important;
}

/* ════════════════════════════════════════════
   ACTIVE FILTERS / REMOVE TAGS
   ════════════════════════════════════════════ */
.cat-filter-panel__body .woocommerce-widget-layered-nav-filters ul {
  list-style: none !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.cat-filter-panel__body .woocommerce-widget-layered-nav-filters li a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 10px !important;
  background: #f2f2f2 !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  color: var(--sf-black) !important;
  text-decoration: none !important;
}

/* ════════════════════════════════════════════
   Responsive
   ════════════════════════════════════════════ */
@media (max-width: 420px) {
  .cat-filter-panel__body .woocommerce-widget-layered-nav-list,
  .cat-filter-panel__body .product-categories,
  .cat-filter-panel__body .wc-block-stock-filter__list,
  .cat-filter-panel__body .wc-block-checkbox-list {
    grid-template-columns: 1fr !important;
  }
}