/* ═══════════════════════════════════════════════════════
   KAZOKU — MEGA FILTER PRO
   Based on actual rendered HTML from .mfilter-box-268
   Color / accent only — no layout overrides
   Tokens: style.css :root
═══════════════════════════════════════════════════════ */

.mfilter-light-theme .mfilter-option.mfilter-tb-as-tr::before {
  display: none !important;
}

.mfilter-heading-text {
  margin-left: 0 !important;
}

.mfilter-light-theme .mfilter-search {
    margin: 0;
}

.mfilter-box .box-heading {
    display: none;
}

/* ── Box heading ── */
.mfilter-box .box-heading {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted, #9099b0);
  background: var(--white, #fff);
  border-bottom: 1px solid var(--border, #e2e4e9);
}

/* ── Copper top accent ── */
.mfilter-box {
  border-top: 2px solid var(--copper, #BC7C56) !important;
}

/* ── Selected filter chips ── */
.mfilter-selected-filters-cnt a {
  color: var(--copper, #BC7C56);
  background: rgba(188, 124, 86, 0.07);
  border-bottom-color: transparent;
  text-decoration: none;
  font-size: 11px;
}

.mfilter-selected-filters-cnt a:hover {
  color: var(--indigo, #1A233E);
}

.mfilter-selected-filters-cnt a > span.mfilter-close i {
  background: none !important;
}

/* ── Heading ── */
.mfilter-light-theme .mfilter-heading {
  background: var(--white, #fff);
  color: var(--indigo, #1A233E);
  font-weight: 400;
}

.mfilter-light-theme .mfilter-heading-content {
  border-bottom-color: var(--border, #e2e4e9);
  padding: 10px 5px;
}

.mfilter-light-theme .mfilter-heading-text > span {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--indigo, #1A233E);
  padding-left: 0;
}

/* Replace sprite icon with CSS +/− */
.mfilter-light-theme .mfilter-heading .mfilter-head-icon {
  background: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Default state: open → chevron-up */
.mfilter-light-theme .mfilter-heading .mfilter-head-icon::before {
  font-family: 'bootstrap-icons';
  content: '\F286';
  font-size: 13px;
  color: var(--copper, #BC7C56);
  line-height: 1;
  font-style: normal;
  font-weight: normal;
  display: block;
  transition: color 0.18s;
}

/* Collapsed state → chevron-down */
.mfilter-light-theme .mfilter-heading.mfilter-collapsed .mfilter-head-icon::before {
  content: '\F282';
}

/* ── Opts container ── */
.mfilter-light-theme .mfilter-opts-container {
  border: none;
}

/* ── Row separator ── */
.mfilter-light-theme .mfilter-tb-as-td {
  border-top-color: var(--border, #e2e4e9);
}

/* ── Row hover — pseudo, no layout shift ── */
.mfilter-light-theme .mfilter-option.mfilter-tb-as-tr {
  cursor: pointer;
  position: relative;
}

.mfilter-light-theme .mfilter-option.mfilter-tb-as-tr::before {
  content: unset !important;
}

.mfilter-light-theme .mfilter-option.mfilter-tb-as-tr:hover::before {
  background: var(--steel, #F4F5F7);
}

.mfilter-light-theme .mfilter-option.mfilter-tb-as-tr > .mfilter-tb-as-td {
  position: relative;
  z-index: 1;
}

/* Kill gradient hover from style2.css */
.mfilter-light-theme .mfilter-tb-as-tr:hover {
  background: transparent !important;
  background-image: none !important;
}

/* ── Disabled row ── */
.mfilter-light-theme .mfilter-disabled {
  opacity: 0.35;
}

/* ── Checkbox ── */
.mfilter-col-input input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--border, #e2e4e9);
  border-radius: 0;
  background: var(--input-bg, #FAFAFA);
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  transition: background 0.15s, border-color 0.15s;
  outline: none;
  flex-shrink: 0;
}

.mfilter-col-input input[type="checkbox"]:focus,
.mfilter-col-input input[type="checkbox"]:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Both :checked state AND .mfilter-input-active wrapper (mfilter's own active class) */
.mfilter-col-input input[type="checkbox"]:checked,
.mfilter-input-active input[type="checkbox"] {
  background: var(--indigo, #1A233E);
  border-color: var(--indigo, #1A233E);
}

.mfilter-col-input input[type="checkbox"]:checked::after,
.mfilter-input-active input[type="checkbox"]::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: 1.5px solid var(--white, #fff);
  border-left: none;
  border-top: none;
  transform: rotate(45deg);
}

/* ── Label ── */
.mfilter-light-theme label.mfilter-tb-as-td {
  color: var(--text-mid, #5a6275);
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-weight: 300;
  cursor: pointer;
}

.mfilter-light-theme .mfilter-disabled label.mfilter-tb-as-td {
  color: var(--text-muted, #9099b0);
}

.mfilter-light-theme .mfilter-option.mfilter-tb-as-tr:hover label.mfilter-tb-as-td {
  color: var(--indigo, #1A233E);
}

/* Active row — mfilter marks .mfilter-input-active on the col-input div */
.mfilter-light-theme .mfilter-option.mfilter-tb-as-tr:has(.mfilter-input-active) label.mfilter-tb-as-td {
  color: var(--indigo, #1A233E);
  font-weight: 400;
}

/* ── Counter badge ── */
.mfilter-box .mfilter-counter {
  background: var(--steel, #F4F5F7);
  color: var(--text-muted, #9099b0);
  border-radius: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  padding: 5px;
    line-height: 1em;
}

/* Kill blue arrow */
.mfilter-box .mfilter-counter::after,
.mfilter-box-268.mfilter-direction-rtl .mfilter-counter::after {
  display: none !important;
}

/* Active/removable counter — mfilter adds .mfilter-close when filter is active */
.mfilter-box .mfilter-counter.mfilter-close {
    background: var(--indigo, #1A233E);
    color: var(--white, #fff);
    cursor: pointer;
    width: auto;
    padding: 5px;
    text-indent: 0;
    text-align: center;
    font-size: 13px;
    line-height: 1em;
}

.mfilter-box .mfilter-counter.mfilter-close:hover {
  background: var(--copper, #BC7C56);
}

.mfilter-light-theme .mfilter-disabled .mfilter-counter {
  display: none;
}

/* ── Price inputs ── */
#mfilter-opts-price-min,
#mfilter-opts-price-max {
  border-color: var(--border, #e2e4e9) !important;
  border-radius: 0 !important;
  background: var(--input-bg, #FAFAFA) !important;
  color: var(--text, #1A233E) !important;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-weight: 300;
  box-shadow: none !important;
}

#mfilter-opts-price-min:focus,
#mfilter-opts-price-max:focus {
  border-color: var(--copper, #BC7C56) !important;
  outline: none;
}

/* ── Price slider — sprite replacement ── */
.mfilter-light-theme .mfilter-price-slider {
  background: none !important;
}

.mfilter-light-theme #mfilter-price-slider {
  background: var(--border, #e2e4e9) !important;
  border: none !important;
  border-radius: 0 !important;
}

.mfilter-light-theme #mfilter-price-slider .ui-slider-range {
  background: var(--copper, #BC7C56) !important;
  border: none !important;
}

.mfilter-light-theme #mfilter-price-slider .ui-slider-handle {
  background: var(--white, #fff) !important;
  border: 2px solid var(--copper, #BC7C56) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: grab !important;
  transition: border-color 0.18s, transform 0.12s !important;
}

.mfilter-light-theme #mfilter-price-slider .ui-slider-handle:hover,
.mfilter-light-theme #mfilter-price-slider .ui-slider-handle:focus {
  border-color: var(--indigo, #1A233E) !important;
  transform: scale(1.2);
}

.ui-widget-content { border: none; background: none; }
.ui-state-default  { border: none; background: none; }
.ui-corner-all     { border-radius: 0; }

/* ── Search input ── */
#mfilter-opts-search {
  border-color: var(--border, #e2e4e9) !important;
  border-radius: 0 !important;
  background: var(--input-bg, #FAFAFA) !important;
  color: var(--text, #1A233E) !important;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-weight: 300;
  box-shadow: none !important;
}

#mfilter-opts-search:focus {
  border-color: var(--copper, #BC7C56) !important;
  outline: none;
}

#mfilter-opts-search::placeholder {
  color: var(--text-muted, #9099b0);
}

/* ── iScroll scrollbar ── */
.mfilter-iscroll > .scroll-element .iScrollIndicator {
  background-color: var(--text-muted, #9099b0);
}

.mfilter-iscroll > .scroll-element:hover .iScrollIndicator {
    background-color: var(--indigo, #1A233E);
}


.mfilter-light-theme .mfilter-slider-slider .ui-slider-handle, .mfilter-light-theme #mfilter-price-slider .ui-slider-handle {
    width: 15px !important;
    height: 15px !important;
}





/* ═══════════════════════════════════════════════════════
   KAZOKU — MOBILE FILTER DRAWER
   File: kz-filter-mobile.css
   Prefix: mfp-
   Effect: slide-in from left + backdrop fade
═══════════════════════════════════════════════════════ */

.show_mfp-wrapper { display: none; }

.mfilter-heading .mfilter-head-icon {
    position: absolute;
    right: 10px;
}

@media (max-width: 767px) {
  .mfilter-free-button {
    display: none;
  }

  .mfilter-free-container {
    width: 100%;
  }

  /* ── Floating trigger ── */
  .show_mfp-wrapper {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 990;
    pointer-events: none;
    transition: opacity 0.22s, transform 0.22s;
    display: block;
    z-index: 99999;
  }

  body.mfp-active .show_mfp-wrapper {
    opacity: 1;
    transform: translateX(-50%) translateY(8px);
  }

  #show_mfp {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: var(--indigo, #1A233E);
    color: var(--white, #fff);
    border: none;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 4px 20px rgba(26, 35, 62, 0.35);
    transition: background 0.18s, transform 0.12s;
    white-space: nowrap;
  }

  #show_mfp:hover  { background: var(--indigo-mid, #232e50); }
  #show_mfp:active { transform: scale(0.97); }

  #show_mfp .fa-filter {
    font-size: 12px;
    color: var(--copper, #BC7C56);
  }

  #show_mfp .mfp-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--copper, #BC7C56);
    color: var(--white, #fff);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1;
  }

  /* ── Backdrop ── */
    .mfilter-free-container {
        background: #fff !important;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        padding: 0;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        max-width: 300px;
    }
  .mfilter-free-container.mfp-open {
    opacity: 1 !important;
    pointer-events: auto !important;
    margin-left: 0 !important;
  }

  /* ── Drawer panel — slide from left ── */
  .mfilter-free-container .mfilter-box {
      width: 100%;
      height: 100% !important;
      max-height: 100% !important;
      background: var(--white, #fff) !important;
      transform: translateX(-100%);
      transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1) !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      scrollbar-width: thin;
      scrollbar-color: var(--text-muted, #9099b0) transparent;
      padding: 0 10px;
  }

  .mfilter-free-container .mfilter-box::-webkit-scrollbar { width: 3px; }
  .mfilter-free-container .mfilter-box::-webkit-scrollbar-thumb {
    background: var(--text-muted, #9099b0);
  }

  .mfilter-free-container .mfilter-box::-webkit-scrollbar-thumb:hover {
    background: var(--indigo, #1A233E);
  }

  .mfilter-free-container.mfp-open .mfilter-box {
    transform: translateX(0) !important;
  }

  /* ── Injected close bar ── */
  .mfp-close-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 12px;
    background: var(--white, #fff);
    border-bottom: 1px solid var(--border, #e2e4e9);
    margin-bottom: 4px;
  }

  .mfp-close-bar__label {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--indigo, #1A233E);
  }

  .mfp-close-bar__btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border, #e2e4e9);
    background: transparent;
    cursor: pointer;
    color: var(--text-muted, #9099b0);
    font-size: 15px;
    line-height: 1;
    padding: 0;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
  }

  .mfp-close-bar__btn:hover {
    color: var(--white, #fff);
    background: var(--indigo, #1A233E);
    border-color: var(--indigo, #1A233E);
  }

  body.mfp-active { overflow: hidden; }

  .mfilter-free-container [id^="mfilter-free-container-"] {
  padding: 0;
}

}