.price-filter-section {
width: 100%;
margin-bottom: 15px;
}
.price-filter-section.separate-fields {
display: flex;
flex-direction: column;
gap: 10px; grid-column: unset;
max-width: unset;
} .price-filter-section.range-slider {
background: #f8f8f8;
padding: 15px;
border-radius: 8px;
border: 1px solid #e0e0e0;
grid-column: span 2;
width: 100%;
max-width: calc(100%);
margin-bottom: 15px;
}
.price-range-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 5px;
}
.price-range-label {
flex-shrink: 0;
}
.price-range-label label {
font-size: 14px;
font-weight: 500;
color: #555555;
margin: 0;
}
.price-range-inputs {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
width: 100%;
}
.price-range-inputs small {
font-size: 12px;
color: #888888;
margin: 0;
}
.price-range-inputs span {
color: #999;
font-weight: 500;
margin: 0 5px;
}
.price-input-wrapper {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
.price-input-wrapper label {
font-size: 14px;
font-weight: 500;
color: #555555;
margin: 0;
}
.range-price-input {
width: 100%;
padding: 8px;
border: 1px solid #d0d0d0;
border-radius: 4px;
text-align: center;
font-size: 14px;
font-weight: 400;
color: #333333;
background: #ffffff;
transition: all 0.3s ease;
} #range-min-price {
width: 120px;
padding: 8px;
border: 1px solid #d0d0d0;
border-radius: 4px;
text-align: center;
font-size: 14px;
}
#range-max-price {
width: 120px;
padding: 8px;
border: 1px solid #d0d0d0;
border-radius: 4px;
text-align: center;
font-size: 14px;
}
#range-min-price {
padding: 0px;
}
#range-max-price {
padding: 0px;
} #range-min-price-top {
padding: 2px 8px;
width: 32%;
}
#range-max-price-top {
padding: 2px 8px;
width: 32%;
} #slider-min,
#slider-max {
padding: 0;
}
.range-price-input:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.price-input-wrapper small {
display: block;
text-align: center;
color: #666;
font-size: 11px;
margin-top: 3px;
font-weight: 400;
} .range-slider-wrapper {
position: relative;
padding: 8px 4px 8px;
margin-bottom: 4px;
}
.range-slider-track {
position: relative;
height: 4px;
background: #e0e0e0;
border-radius: 3px;
margin: 0;
}
.range-slider-range {
position: absolute;
height: 100%;
background: #2c3e50;
border-radius: 3px;
transition: all 0.15s ease;
} .range-slider-input {
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
left: 0;
pointer-events: none;
-webkit-appearance: none;
appearance: none;
background: transparent;
height: 4px;
cursor: pointer;
margin: 0;
} .range-slider-input::-webkit-slider-thumb {
pointer-events: all;
}
.range-slider-input::-moz-range-thumb {
pointer-events: all;
} .range-slider-input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: #2c3e50;
cursor: pointer;
border: 3px solid #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease, box-shadow 0.2s ease;
position: relative;
z-index: 10;
margin-top: 0;
}
.range-slider-input::-webkit-slider-thumb:hover {
background: #2c3e50;
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(44, 62, 80, 0.4);
}
.range-slider-input::-webkit-slider-thumb:active {
background: #2c3e50;
transform: scale(1.2);
box-shadow: 0 4px 16px rgba(44, 62, 80, 0.6);
} .range-slider-input::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: #2c3e50;
cursor: pointer;
border: 3px solid #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease, box-shadow 0.2s ease;
position: relative;
z-index: 10;
}
.range-slider-input::-moz-range-thumb:hover {
background: #2c3e50;
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(44, 62, 80, 0.4);
}
.range-slider-input::-moz-range-thumb:active {
background: #2c3e50;
transform: scale(1.2);
box-shadow: 0 4px 16px rgba(44, 62, 80, 0.6);
} .range-slider-input::-webkit-slider-runnable-track {
-webkit-appearance: none;
appearance: none;
height: 4px;
background: transparent;
border: none;
}
.range-slider-input::-moz-range-track {
height: 4px;
background: transparent;
border: none;
} #slider-min {
z-index: 1;
}
#slider-max {
z-index: 2;
} #slider-min:active,
#slider-min:focus {
z-index: 3;
} #slider-max:active,
#slider-max:focus {
z-index: 3;
} @media (max-width: 768px) {
.price-range-inputs {
gap: 8px;
}
.range-price-input {
padding: 6px;
font-size: 13px;
}
.price-input-wrapper small {
font-size: 10px;
}
.range-slider-input::-webkit-slider-thumb {
width: 16px;
height: 16px;
}
.range-slider-input::-moz-range-thumb {
width: 16px;
height: 16px;
}
.price-filter-section.range-slider {
padding: 12px;
grid-column: span 1; max-width: 100%;
}
}
@media (max-width: 480px) {
.price-range-inputs {
grid-template-columns: 1fr;
gap: 10px;
}
.price-range-inputs span {
display: none;
}
.price-input-wrapper small {
text-align: left;
}
} .range-price-input.updating {
background: #f0f7ff;
}