:root {
    --bs-primary: #0d6efd;
    --bs-gray-300: #e9ecef;
    --bs-gray-500: #adb5bd;
}

.price-range-widget {
    /* You can set a max-width for responsiveness */
    max-width: 400px;
    margin: auto;
}

/* 1. Histogram */
.histogram-visual {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 60px; /* Adjust height of histogram */
    width: 100%;
    /* Padding to align histogram bars with slider thumbs */
    padding: 0 12px; 
    box-sizing: border-box;
}

.histo-bar {
    width: 4%; /* Width of each bar */
    height: var(--bar-height, 10%); /* Height set from inline style */
    background-color: var(--bs-primary);
    border-radius: 3px 3px 0 0;
    opacity: 0.6; /* Softer look */
}

/* 2. Dual Range Slider */
.multi-range-slider {
    position: relative;
    /* Height to accommodate the thumb */
    height: 30px; 
}

.slider-visual {
    position: absolute;
    top: 13px; /* Center it: (30px height / 2) - (4px track / 2) */
    left: 12px; /* Match thumb radius */
    right: 12px; /* Match thumb radius */
    height: 4px;
    z-index: 1; /* Behind the inputs */
}

.slider-track {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--bs-gray-300); /* BS light gray */
    border-radius: 3px;
}

.slider-progress {
    position: absolute;
    height: 100%;
    background-color: var(--bs-primary); /* BS primary color */
    border-radius: 3px;
    /* 'left' and 'right' will be set by JavaScript */
    left: 0%;
    right: 0%;
}

/* Styling the <input type="range"> */
.multi-range-slider input[type="range"] {
    /* Reset default appearance */
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    
    /* Layout */
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0;
    /* Make input track transparent to clicks */
    pointer-events: none; 
    z-index: 2; /* Inputs on top of visual track */
}

/* Hide the default track */
.multi-range-slider input[type="range"]::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    height: 4px;
    background: transparent;
}
.multi-range-slider input[type="range"]::-moz-range-track {
    -moz-appearance: none;
    height: 4px;
    background: transparent;
}

/* Style the thumb (handle) */
.multi-range-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    
    /* Style */
    height: 24px;
    width: 24px;
    background-color: #fff;
    border: 1px solid var(--bs-gray-500);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    
    /* Layout */
    /* (Track height / 2) - (Thumb height / 2) */
    margin-top: -10px; 
    
    /* Make thumb clickable */
    pointer-events: auto; 
    cursor: grab;
}

.multi-range-slider input[type="range"]::-moz-range-thumb {
    appearance: none;
    height: 24px;
    width: 24px;
    background-color: #fff;
    border: 1px solid var(--bs-gray-500);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    pointer-events: auto;
    cursor: grab;
}

/* Active/grabbing state */
.multi-range-slider input[type="range"]:active::-webkit-slider-thumb {
    cursor: grabbing;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25); /* Bootstrap focus */
}
.multi-range-slider input[type="range"]:active::-moz-range-thumb {
    cursor: grabbing;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
}