/* Панель */
.xsort-area{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  width:100%; box-sizing:border-box;
  background:#2b2b2b; color:#ccc;
  padding:12px 16px; border-radius:8px; margin-bottom:12px;
  font: 13px/32px Arial, sans-serif;
}
/* заполнитель, чтобы увести счётчик вправо */
.xsort-filler{ flex:1 }
/* правый счётчик */
.xsort-count{ margin-left:auto; }
.xsort-count>div{
  line-height:30px; color:#e6e6e6; opacity:.9; white-space:nowrap;
}

/* Кнопки фильтров */
.xsort-div{
  position:relative; cursor:pointer;
  height:32px; line-height:32px; padding:0 40px 0 14px;
  background:#424242; color:#e6e6e6;
  border:1px solid #565656; border-radius:6px;
  transition:.15s ease-in-out;
}
.xsort-div:hover{ background:#515151; border-color:#777; }
.xsort-active{ outline:2px solid #FFB114; outline-offset:0; }

/* Стрелка */
.xsort-selected:after{
  content:""; position:absolute; right:12px; top:50%;
  width:0; height:0; margin-top:-3px;
  border:6px solid transparent; border-top-color:#e6e6e6;
}

/* Кнопка «Сбросить» (иконка) */
.xsort-div-clearall{
  width:36px; padding:0; background-position:50% 50%;
  background-repeat:no-repeat; background-size:16px 16px;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23e6e6e6" viewBox="0 0 16 16"><path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/><path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/></svg>');
}

/* Выпадающий список */
.xsort-ul{
  position:absolute; top:100%; left:0; z-index:999;
  display:none; margin:6px 0 0; padding:0; list-style:none;
  min-width:220px; max-height:420px; overflow:auto;
  background:#3a3a3a; border:1px solid #555; border-radius:8px;
  box-shadow:0 10px 18px rgba(0,0,0,.35);
}
.xsort-ul li{
  position:relative; padding:0 36px 0 14px; line-height:32px;
  color:#ddd; border-bottom:1px solid #4a4a4a; white-space:nowrap;
}
.xsort-ul li:last-child{ border-bottom:0 }
.xsort-ul li:hover{ background:#4f4f4f; color:#fff }
.xsort-ul li.current{ background:#454545; color:#fff; font-weight:600 }
.xsort-ul li.current:after{
  content:""; position:absolute; right:8px; top:50%; width:6px; height:6px;
  margin-top:-3px; border-radius:50%; background:#FFB114;
}

/* Адаптив */
@media (max-width: 768px){
  .xsort-div{ padding:0 34px 0 12px }
  .xsort-ul{ min-width:180px }
  .xsort-count>div{ font-size:12px }
}
/* Сжимаем зазор между строками */
.xsort-area.xsort-default{ padding-bottom: 6px; margin-bottom: 0; }
.xsort-area.xsort-advanced{ padding-top: 6px; margin-top: 0; }