/* Основной контейнер слайдера (трек) */
.noUi-target {
  background: #ffffff !important;
  border: 1px solid #000000 !important;
  box-shadow: none !important;
  
  /* --- Новые стили для тонкости --- */
  height: 6px !important; /* Делаем трек тоньше */
  border-radius: 3px !important; /* Закругляем концы трека */
}

/* Область между ползунками */
.noUi-connects {
  background: transparent !important; /* Убираем фон, чтобы был виден основной трек */
  border-radius: 3px !important;
}

/* Заполненная область (выбранный диапазон) */
.noUi-connect {
  background: #000000 !important;
  border-radius: 3px !important;
}

/* Сами ползунки (ручки) */
.noUi-handle {
  border: 2px solid #000000 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  cursor: pointer !important;

  /* --- Новые стили для круглой формы --- */
  border-radius: 50% !important; /* Делаем ползунок идеально круглым */
  width: 16px !important; /* Задаем ширину */
  height: 16px !important; /* Задаем высоту, равную ширине для круга */
  top: -5px !important; /* Центрируем ползунок по вертикали относительно трека */
  right: -8px !important; /* Центрируем ползунок по горизонтали */
}

/* Убираем стандартные вертикальные линии внутри ползунков для чистого вида */
.noUi-handle:before,
.noUi-handle:after {
  display: none !important;
}

/* Всплывающие подсказки (если используются) */
.noUi-tooltip {
  background: #000000 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 3px !important;
}


/* 1. Стилизация контейнера, в котором находится select */
.facetwp-type-sort {
  position: relative; /* Необходимо для позиционирования стрелки */
  display: inline-block; /* Чтобы блок не растягивался на всю ширину */
  width: 200px; /* Задайте нужную ширину */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Современный шрифт */
}

/* 2. Стилизация самого поля select */
.facetwp-type-sort select {
  display: block; /* Растягиваем select на всю ширину контейнера */
  width: 100%;
  padding: 10px 35px 10px 15px; /* Отступы: сверху, справа (место для стрелки), снизу, слева */
  font-size: 16px;
  line-height: 1.4;
  color: #333; /* Цвет текста */
  background-color: #ffffff; /* Белый фон */
  border: 1px solid #ccc; /* Светло-серая рамка, как на скриншоте */
  border-radius: 4px; /* Небольшое скругление углов */
  
  /* --- Магия для скрытия стандартной стрелки --- */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  
  cursor: pointer; /* Курсор в виде руки */
}

/* 3. Создание кастомной стрелки */
.facetwp-type-sort::after {
  content: ''; /* Обязательно для псевдоэлемента */
  position: absolute;
  top: 50%;
  right: 15px; /* Отступ справа */
  transform: translateY(-50%); /* Выравниваем по вертикали */
  
  /* Рисуем стрелку с помощью границ */
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #666; /* Цвет и толщина стрелки */
  
  pointer-events: none; /* Чтобы стрелка не мешала клику по select */
}

/* 4. Стилизация при наведении курсора (опционально) */
.facetwp-type-sort:hover select {
  border-color: #aaa; /* Затемняем рамку при наведении */
}

/* 5. Стилизация для состояния фокуса (когда select выбран) */
.facetwp-type-sort select:focus {
  outline: none; /* Убираем стандартную обводку в Chrome и др. */
  border-color: #007cba; /* Добавляем свою обводку, например, синюю */
  box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.2); /* Легкая тень для акцента */
}

.facetwp-facet {
    margin-bottom: 0 !important;
}

.facetwp-facet.facetwp-facet-frequency.facetwp-type-slider {
    width: 100%;
}

.facetwp-facet.facetwp-facet-reset.facetwp-type-reset {
    text-align: center;
}