.vov-filters{background:#fff;border:1px solid #ECECEC;border-radius:14px;padding:18px;font-size:14px}
.vov-filters__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.vov-filters__head h3{margin:0;font-size:16px;font-weight:700}
.vov-filters__reset{font-size:12px;color:#888;text-decoration:underline;cursor:pointer}
.vov-filter{border:none;padding:14px 0;margin:0;border-top:1px solid #F0F0F0}
.vov-filter:first-of-type{border-top:none}
.vov-filter legend{font-weight:600;padding:0;margin-bottom:8px;font-size:14px}
.vov-filter legend small{color:#999;font-weight:400}
.vov-filter__range{display:flex;gap:8px;align-items:center}
.vov-filter__range input{flex:1;min-width:0;height:36px;border:1px solid #E1E1E1;border-radius:8px;padding:0 10px;font-size:13px}
.vov-filter__list{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow:auto;padding-right:4px}
.vov-filter__opt{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;line-height:1.3}
.vov-filter__opt input{accent-color:#F26522;cursor:pointer}
.vov-filter__opt span{flex:1}
.vov-filter__opt em{font-style:normal;color:#A0A0A0;font-size:12px}
.vov-filters__apply{margin-top:14px;width:100%;background:#F26522;color:#fff;border:none;border-radius:10px;height:44px;font-weight:600;cursor:pointer;transition:.15s}
.vov-filters__apply:hover{background:#d8551b} .vov-products-loading{position:relative;opacity:.5;pointer-events:none;transition:.2s}
.vov-products-loading::after{content:"";position:absolute;inset:0;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 50 50"><circle cx="25" cy="25" r="20" fill="none" stroke="%23F26522" stroke-width="4" stroke-linecap="round" stroke-dasharray="80" stroke-dashoffset="60"><animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1s" repeatCount="indefinite"/></circle></svg>') center 80px no-repeat} .vov-filters-loading {
opacity: .65;
pointer-events: none;
}
.vov-products-loading {
position: relative;
min-height: 160px;
opacity: .45;
pointer-events: none;
transition: opacity .2s ease;
}
.vov-products-loading::before {
content: "Načítavam...";
position: absolute;
z-index: 20;
left: 50%;
top: 45px;
transform: translateX(-50%);
background: #fff;
color: #222;
padding: 10px 16px;
border-radius: 10px;
box-shadow: 0 8px 28px rgba(0,0,0,.14);
font-size: 14px;
font-weight: 600;
}
.vov-products-loading::after {
content: "";
position: absolute;
z-index: 19;
inset: 0;
background: rgba(255,255,255,.5);
}
.filter-range {
position: relative;
}
.range-slider {
position: relative;
height: 28px;
margin: 8px 8px 10px;
cursor: pointer;
}
.range-track,
.range-fill {
position: absolute;
top: 50%;
height: 4px;
transform: translateY(-50%);
border-radius: 999px;
}
.range-track {
left: 0;
right: 0;
background: #e5e5e5;
}
.range-fill {
left: 0;
right: 0;
background: #F26522;
}
.range-handle {
position: absolute;
top: 50%;
width: 18px;
height: 18px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: #fff;
border: 3px solid #F26522;
box-shadow: 0 2px 8px rgba(0,0,0,.18);
cursor: grab;
touch-action: none;
z-index: 2;
}
.range-handle:active {
cursor: grabbing;
}
.range-inputs {
display: flex;
align-items: center;
gap: 8px;
}
.range-inputs input[type="number"] {
width: 90px;
min-width: 0;
height: 36px;
border: 1px solid #E1E1E1;
border-radius: 8px;
padding: 0 10px;
font-size: 13px;
}
.range-inputs .dash,
.range-inputs .cur {
color: #777;
}
.range-reset {
display: inline-block;
margin: 0 0 8px;
font-size: 12px;
color: #888;
text-decoration: underline;
}