.cmtsfwc-FilterPanel { position: fixed; top: 0; left: 0; width: 480px; height: 100vh; background: white; transform: translateX(-100%); transition: transform 0.3s ease; overflow-y: auto; z-index: 1000000; display: flex; flex-direction: column; } .cmtsfwc-ModalOverlay.active .cmtsfwc-FilterPanel { transform: translateX(0); } .cmtsfwc-Filter-items { flex: 1; display: flex; flex-direction: column; height: 100%; } .cmtsfwc-Filter-itemsHeader { display: flex; align-items: flex-end; justify-content: space-between; background: white; flex-shrink: 0; padding: 30px 60px; } .ais-RefinementList-showMore { padding: 0; } .cmtsfwc-Filter-itemsHeader h3 { margin: 0; font-size: 18px; font-weight: 600; color: #333; } .cmtsfwc-Filter-itemsHeader .clear-filters { margin-left: 10px; padding: 5px 10px; font-weight: 400; border: none; cursor: pointer; color: #999999; background: transparent; font-size: 14px; transition: background 0.3s ease; } .cmtsfwc-Filter-itemsHeader .clear-filters:hover { color: #333333b3; } .cmtsfwc-Filter-itemsHeaderCloseIcon { width: 24px; height: 24px; cursor: pointer; color: #666; transition: color 0.3s ease; } .cmtsfwc-Filter-itemsHeaderCloseIcon:hover { color: #333; } .cmtsfwc-Filter-itemsContent { flex: 1; padding: 0 60px; } .cmtsfwc-Filter-itemsFooter { padding: 30px 60px !important; background: white; flex-shrink: 0; } .cmtsfwc-FilterPanel .cmtsfwc-Filter-itemsFooter button:hover { box-shadow: rgba(0, 0, 0, 0.15) 0px -2px 0px inset; background-color: rgb(30, 30, 30) !important; color: #ffffff; } .cmtsfwc-Filter-itemsContent .ais-Panel { border-bottom: 1px solid #eee; } .cmtsfwc-Filter-itemsContent .ais-Panel:last-child { border-bottom: none; } .vesna-panel-expanded .vesna-panel-body { max-height: max-content !important; overflow: visible !important; transition: max-height 0.3s ease !important; } .vesna-panel-expanded .ais-Panel-header::before { content: "\2212"; position: relative; left: 0; font-size: 16px; font-weight: 600; } .cmtsfwc-Filter-itemsContent .ais-Panel-header { display: flex; align-items: center; width: 100%; padding: 0; cursor: pointer; border-radius: 5px; transition: background 0.2s ease-in-out; position: relative; } .cmtsfwc-Filter-itemsContent .ais-Panel-collapseButton { background: none; border: none; cursor: pointer; padding: 0 !important; color: #666; transition: transform 0.3s ease; } .cmtsfwc-Filter-itemsContent .ais-Panel--collapsed .ais-Panel-collapseButton { transform: rotate(-90deg); } .cmtsfwc-Filter-itemsContent .ais-Panel-body { padding: 0 20px 20px; transition: max-height 0.3s ease; overflow: hidden; } .cmtsfwc-Filter-itemsContent .ais-Panel--collapsed .ais-Panel-body { max-height: 0; padding: 0 20px; } .clear-filter { font-size: 14px !important; color: #999 !important; cursor: pointer; } .clear-filter:hover { color: #333333b3 !important; } @media (max-width: 768px) { .cmtsfwc-FilterPanel { width: 100%; } } .mega-menu-container { width: 100%; } .mega-menu-container .category-header { gap: 10px; } .category-loading { padding: 20px; text-align: center; color: #666; font-style: italic; } .vesna-panel { border-bottom: 1px solid #eee; background: white; } .vesna-panel:last-child { border-bottom: none; } .vesna-panel-header { display: flex; align-items: center; width: 100%; padding: 0; cursor: pointer; border-radius: 5px; transition: background 0.2s ease-in-out; position: relative; margin-bottom: 2px; } .vesna-panel-toggle { background: none; border: none; cursor: pointer; padding: 0; color: #666; transition: transform 0.3s ease; } .vesna-panel-body { max-height: 275px; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; } .price-range-container { padding: 20px 0; } .price-loading { padding: 20px; text-align: center; color: #666; font-style: italic; font-size: 14px; } .ais-RangeSlider { position: relative; flex-grow: 1; } .ais-RangeSlider .rheostat { overflow: visible; margin-top: 40px; margin-bottom: 40px } .ais-RangeSlider .rheostat-background { height: 2px; top: 5px; width: 100% } .ais-RangeSlider .rheostat-handle { margin-left: 0; top: -7px } .ais-RangeSlider .rheostat-background { position: relative; background-color: #ccc; border: 1px solid #ccc; } .ais-RangeSlider .rheostat-progress { position: absolute; top: 5px; height: 2px; background-color: #000; } .rheostat-handle { position: relative; z-index: 1; width: 25px; height: 25px; background-color: #fff; border: 2px solid #000; border-radius: 50%; cursor: -webkit-grab; cursor: grab } .rheostat-marker { margin-left: -1px; position: absolute; width: 1px; height: 5px; background-color: #aaa } .rheostat-marker--large { height: 9px } .rheostat-value { padding-top: 15px } .rheostat-tooltip, .rheostat-value { position: absolute; text-align: center; -webkit-transform: translateX(-50%); transform: translateX(-50%) } .rheostat-handle-lower .rheostat-tooltip { position: fixed; left: 0% !important; transform: translate(80%, -130%); background: #f5f5f5; color: #000; padding: 4px 8px; font-weight: 500; font-size: 14px; border-radius: 4px; white-space: nowrap; opacity: 1; transition: opacity 0.2s ease-in-out; border-radius: 20px; cursor: default; } .rheostat-handle-upper .rheostat-tooltip { position: fixed; right: 0% !important; transform: translate(-60%, -130%); background: #f5f5f5; color: #000; padding: 4px 8px; font-weight: 500; font-size: 14px; border-radius: 4px; white-space: nowrap; opacity: 1; transition: opacity 0.2s ease-in-out; border-radius: 20px; cursor: default; } .rheostat-handle-upper { position: relative; } .rheostat-handle:hover .rheostat-tooltip, .rheostat-handle:active .rheostat-tooltip { opacity: 1; } */ [class^=ais-] { font-size: 1rem; box-sizing: border-box } a[class^=ais-] { text-decoration: none; pointer-events: all; } .rheostat-handle-upper .rheostat-tooltip::before { content: "do "; font-size: inherit; color: inherit; } .rheostat-handle-upper .rheostat-tooltip::after { content: " RSD"; font-size: inherit; color: inherit; } .rheostat-handle-lower .rheostat-tooltip::before { content: "od "; font-size: inherit; color: inherit; } .rheostat-handle-lower .rheostat-tooltip::after { content: " RSD"; font-size: inherit; color: inherit; }