.mf-filter { 
    box-sizing: border-box;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mf-filter-group { 
  overflow: hidden;
  border-radius: 2px;
}

.mf-filter-header { 
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
  cursor:pointer; 
  font-weight:600; 
  padding:11px 14px; 
  background-color:var(--mt-color__primary);
  color: #fff;
}

.mf-filter-body { 
  padding:10px 12px; 
  background:#fff;
  border: 1px solid var(--mt-color__primary);
}

.mf-filter-body.active { 
  display:block; 
}

.mf-search { 
  width:100%; 
  box-sizing:border-box; 
  padding:8px 10px; 
  border:1px solid #eaeaea; 
  margin-bottom:8px; 
}

.mf-options { 
  max-height:250px; 
  overflow:auto; 
  padding-right:4px; 
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mf-options label { 
  display:flex; 
  align-items:center; 
  gap:8px; 
  padding:6px 0; 
  cursor:pointer; 
}

.mf-option {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.mf-option.active,
.mf-option:hover {
    border: 1px solid #0f86ff;
    padding: 2px;
    border-radius: 2px;
    background-color: #ecf6ff;
}
.mf-options input { 
  accent-color:#0c63e4; 
}

.mf-option img {
    width: 30px;
    height: 30px;
    border-radius: 2px;
}
span.mf-title {
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 0.01rem;
    display: flex;
    align-items: center;
    gap: 6px;
}
.mf-title img {
  height: 30px;
  width: auto;
  border-radius: 2px;
}
.mf-caret { 
  transition: transform .2s; 
}

.mf-caret svg { 
    width: 12px;
    height: auto;
    fill: #fff;
}

.mf-caret.open { 
  transform: rotate(180deg); 
}

.mf-apply { 
  width:100%; 
  padding:10px; 
  border-radius:2px; 
  background:var(--mt-color__primary); 
  border:none; 
  cursor:pointer; 
  font-weight:600; 
  line-height: unset;
}
.mf-apply svg {
    fill: #fff;
}
.mf-apply:disabled { 
  color: #1d2128 !important; 
  cursor:not-allowed; 
}

.mf-apply:disabled svg { 
    fill: #1d2128 !important;
}

.mf-results { 
  margin-top:20px; 
}

.mf-filter .mf-search {
    height: 36px;
    padding-inline: 12px;
    border-width: 1px;
    border-radius: 4px;
    padding-block: 5px;
}