/* range slider styles */

.range-slider {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}

.range-slider.dragging {
  cursor: ew-resize;
}

.range-slider > input {
  border: none;
  outline: none;
  background: var(--gray-color);
  font-size: 1.5rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  min-width: 64px;
}

.range {
  width: 100%;
  display: grid;
  position: relative;
  z-index: 5;
}

.range input {
  grid-row: 2;
  grid-column: 1;
  pointer-events: none;
  appearance: none;
  background: transparent;
}

.range input::-webkit-slider-thumb {
  pointer-events: auto;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--main-theme-color);
  border-radius: 50%;
  cursor: pointer;
}

.slider {
  position: absolute;
  height: 6px;
  width: 100%;
  background: #e0e0e0;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 5px;
  overflow: hidden;
  z-index: -1;
}

.progress {
  position: absolute;
  height: 100%;
  background: var(--main-theme-color);
  cursor: ew-resize;
}

.price-range-text {
  display: flex;
  justify-content: space-between;
  
  width: 100%;
  font-weight: 600;
  font-size: 12px;
  color: #333;
}

.filter_btn {
    font-weight: 700;
    width: 100% !important;
    transition: none !important;
}

.filter_btn:disabled {
    background-color: #e0e0e0;
    color: #666;              
    border-color: #e0e0e0;
    cursor: not-allowed;
    opacity: 1;  
    pointer-events: none;
    transition: none !important;
}