.cmtsfwc-ModalOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); display: flex; justify-content: flex-start; align-items: stretch; z-index: 9999; visibility: hidden; pointer-events: none; transition: visibility 0.3s; } .cmtsfwc-ModalOverlay.active { visibility: visible; pointer-events: auto; transition: visibility 0.3s; } .cmtsfwc-FilterPanel { position: relative; width: 480px; height: 100%; background-color: white; box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); transform: translateX(-100%); transition: transform 0.3s; overflow-y: auto; } .cmtsfwc-ModalOverlay.active .cmtsfwc-FilterPanel { transform: translateX(0); } .cmtsfwc-ModalOverlay, .cmtsfwc-FilterPanel { backface-visibility: hidden; -webkit-backface-visibility: hidden; } .cmtsfwc-Filter-items { display: flex; flex-direction: column; height: 100%; } .cmtsfwc-Filter-itemsClose { cursor: pointer; } .cmtsfwc-Filter-itemsHeader { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; position: sticky; top: 0; background: white; width: 100%; z-index: 100; padding: 30px 60px; } .cmtsfwc-Filter-itemsHeader h3, .cmtsfwc-Filter-itemsHeader .clear-filters { display: flex; align-items: center; } .cmtsfwc-Filter-itemsHeader .clear-filters { text-transform: initial; min-height: auto; line-height: 0; } .clear-filters { margin-left: 10px; padding: 5px 10px; font-weight: 400; border: none; cursor: pointer; color: #999999; background: transparent; font-size: 14px; } .cmtsfwc-Filter-itemsHeaderCloseIcon { margin-left: auto; cursor: pointer; } .cmtsfwc-FilterToggle-btn { background: none; border: none; box-shadow: none; cursor: pointer; padding: 0; gap: 7px; font-size: 14px; line-height: 20px; font-weight: 500; color: #000; } .cmtsfwc-Filter-items .cmtsfwc-Filter-itemsHeader h3 { font-weight: 500; font-size: 30px; line-height: 22px; margin-bottom: 0; } .cmtsfwc-Filter-items .cmtsfwc-Filter-itemsHeader svg { width: 24px; align-self: flex-start; color: #999999; } .cmtsfwc-Header { display: none; } .vesna-filter-panel { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: nowrap; padding-bottom: 35px; padding-top: 25px; } .vesna-filter-panel #filter-toggle-btn { order: 1; display: flex; align-items: center; gap: 10px; line-height: 0; } .cmtsfwc-MainPanel .cmtsfwc-Result-empty :is(.woocommerce-error, .woocommerce-info) { background-color: transparent; border-left: unset; } .vesna-filter-panel #filter-toggle-btn:hover { background-color: initial; } .vesna-filter-panel .vesna-filter-panel__sortby { display: flex; flex-direction: row; align-items: center; order: 4; width: 100%; position: relative; justify-content: right; min-width: 170px; } .vesna-filter-panel .vesna-filter-panel__sortby>span { font-size: 14px; line-height: 20px; font-weight: 500; font-family: 'Euclid Square'; } .vesna-sortby__toggle { padding: 0; background: none; font-size: 14px; gap: 10px; text-transform: none; color: #000; } .vesna-sortby__label { font-family: "EuclidSquare", Arial, Helvetica, sans-serif; font-weight: 500; color: #000; font-size: 15px; } .vesna-sortby__toggle:hover { background-color: transparent; } .vesna-sortby__dropdown { position: absolute; top: 100%; right: 0; z-index: 12; background: #fff; border: 1px solid #ddd; min-width: 170px; margin-top: 6px; padding: 0; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); } .vesna-sortby__dropdown .vesna-sortby__item { display: block; margin: 0; width: 100%; } .vesna-sortby__dropdown .vesna-sortby__item button { width: 100%; text-align: left; padding: 8px 12px; background: none; font-size: 14px; color: #000; text-transform: none; border: none; cursor: pointer; justify-content: start; transition: background 0.2s ease; font-weight: 400; } .vesna-sortby__dropdown .vesna-sortby__item button:hover, .vesna-sortby__dropdown .vesna-sortby__item button.is-active { background-color: #f5f5f5; } .vesna-filter-panel__product-count { font-size: 14px; line-height: 20px; font-weight: 400; color: rgba(0, 0, 0, 0.5); } .vesna-filter-panel .cmtsfwc-Stats { order: 3; text-align: center; justify-content: end; width: calc(100% + 11px); display: flex; position: relative; } .vesna-filter-panel .cmtsfwc-HitsPerPage { order: 4; } .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; } .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; } ul.ais-RefinementList-list { list-style: none; padding-left: 17px; margin-bottom: 0; } form.ais-SearchBox-form { padding-bottom: 15px; padding-top: 8px; } .ais-HierarchicalMenu-item.ais-HierarchicalMenu-item--selected>div { margin-bottom: 20px; } .ais-Panel-header:hover:not(:has(.clear-filter:hover)) span { color: #333333b3; } .ais-Panel-header:hover:has(.clear-filter:hover) span { color: inherit !important; } .ais-Panel-header:hover:has(.clear-filter:hover) .selected-filters-count { color: #ffffff !important; } .ais-Panel-header:hover:has(.clear-filter:hover)::before { color: inherit !important; } .ais-Panel-header:hover::before { color: #333333b3; } li.ais-RefinementList-item, li.ais-HierarchicalMenu-item { margin-bottom: 16px; pointer-events: none; list-style: none; } .cmtsfwc-Filter-customAttributes li.ais-RefinementList-item, .cmtsfwc-Filter-customAttributes li.ais-HierarchicalMenu-item { pointer-events: all; margin-bottom: 26px; } .ais-RefinementList-label { font-size: 14px; line-height: 18px; font-weight: 400; color: #000; pointer-events: all; cursor: pointer; } .ais-Panel-collapseButton { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; border: none; cursor: pointer; z-index: 2; justify-content: end; padding: 0; } .ais-Panel-header span { font-size: 18px; font-weight: 500; color: black; transition: color 0.3s ease; } .ais-Panel-collapseIcon { transition: transform 0.3s ease-in-out; } .ais-RefinementList-searchBox { padding-left: 17px } .ais-RefinementList-searchBox input[type="search"] { box-sizing: border-box; } .ais-SearchBox-form { position: relative; display: flex; align-items: center; } .ais-SearchBox-input { width: 100%; padding: 10px 40px 10px 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; } .ais-SearchBox-submit { position: absolute; right: 10px; background: transparent; border: none; cursor: pointer; padding: 0; transition: opacity 0.2s ease-in-out; } .ais-SearchBox-reset { position: absolute; right: 10px; background: transparent; border: none; cursor: pointer; padding: 0; opacity: 0; pointer-events: none; transition: opacity 0.2s ease-in-out; } .ais-SearchBox-submitIcon { height: 14px; width: 14px; } .ais-SearchBox-resetIcon { height: 14px; } .ais-SearchBox-reset.d-none { display: block !important; position: absolute !important; right: 10px !important; width: 30px !important; height: 30px !important; min-height: auto !important; padding: 0 !important; border: none !important; border-radius: 50% !important; background-color: #d9d9d9 !important; color: #000 !important; cursor: pointer !important; } .ais-SearchBox-submit.d-none { display: block !important; position: absolute !important; right: 10px !important; width: 30px !important; height: 30px !important; min-height: auto !important; padding: 0 !important; border: none !important; border-radius: 50% !important; color: #000 !important; cursor: pointer !important; } .ais-SearchBox-input:not(:placeholder-shown)~.ais-SearchBox-reset { opacity: 1; pointer-events: auto; } .ais-SearchBox-input:not(:placeholder-shown)~.ais-SearchBox-submit { opacity: 0; pointer-events: none; } .cmtsfwc-CurrentRefinements { display: none; } .cmtsfwc-ClearRefinements { display: none; } .ais-RefinementList-checkbox { margin-inline-end: 10px; } input[type="checkbox"].ais-RefinementList-checkbox:not(.cm-tsfwc-shortcode-tags-attribute-filters input[type="checkbox"]) { appearance: none; width: 24px; height: 24px; position: relative; cursor: pointer; } input[type="checkbox"].ais-RefinementList-checkbox:not(.cm-tsfwc-shortcode-tags-attribute-filters input[type="checkbox"])::before { content: "□"; position: absolute; left: 0; font-size: 24px; color: #000; } input[type="checkbox"].ais-RefinementList-checkbox:not(.cm-tsfwc-shortcode-tags-attribute-filters input[type="checkbox"]):checked::before { content: "■"; color: black; } .selected-filters-count { display: inline-block; border-radius: 20px; background: #FFC629; color: #ffffff !important; position: relative; left: 10px; line-height: 0; width: 20px; height: 20px; text-align: center; } .selected-filters-count>span { font-size: 12px !important; color: #ffffff !important; padding-top: 50%; padding-bottom: 50%; display: inline-block; } .clear-filter:hover { color: #333333b3 !important; } .vesna-filter-panel-circle { display: inline-block; line-height: 0px; border-radius: 50%; font-size: 12px; background-color: #FFC629; color: white; width: 20px; height: 20px; transition: visibility 0.3s, opacity 0.3s; opacity: 0; visibility: hidden; } .vesna-filter-panel-circle.visible { opacity: 1; visibility: visible; } .vesna-filter-panel-circle span { display: inline-block; padding-top: 50%; padding-bottom: 50%; } #filter-panel .cmtsfwc-Filter-itemsFooter { padding: 30px 60px; } #filter-panel .cmtsfwc-Filter-itemsFooter .vesna-product-count-button { text-align: center; padding-left: 15px; padding-right: 15px; padding-top: 16px; padding-bottom: 17px; width: 100%; background: #000; transition-duration: .25s; transition-property: color, background-color; transition-timing-function: ease-in-out; letter-spacing: 1.4px; max-width: 100%; text-transform: uppercase; font-weight: 400; font-size: 12px; height: 50px; line-height: 1.5; color: #fff; touch-action: manipulation; vertical-align: initial; } #filter-panel .cmtsfwc-Filter-itemsFooter .vesna-button-content { align-items: center; display: flex; justify-content: center; position: relative; } #filter-panel .cmtsfwc-Filter-itemsFooter .vesna-button-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; } #filter-panel .ais-RefinementList-noResults { font-size: 0; padding-left: 17px; } #filter-panel .ais-RefinementList-noResults::before { content: "Nema rezultata"; font-size: 1rem; } @media (min-width: 320px) and (max-width: 567px) { .cmtsfwc-Filter-itemsContent { padding: 0 20px; } .cmtsfwc-Filter-itemsHeader { padding: 30px 20px !important; } #filter-panel .cmtsfwc-Filter-itemsFooter { padding: 30px 20px !important; } } @media (min-width: 320px) and (max-width: 375px) { .cmtsfwc-Filter-customAttributes { padding-top: 20px; } } @media (max-width: 768px) { .ais-Panel-header span { font-size: 16px; } .rheostat-handle-lower .rheostat-tooltip { transform: translate(20%, -130%); } .cmtsfwc-Filter-customAttributes { padding-top: 25px; } .cmtsfwc-Filter-itemsContent { row-gap: 12px; } .rheostat-handle-upper .rheostat-tooltip { transform: translate(-20%, -130%); } .vesna-filter-panel { padding-top: 20px; } .vesna-filter-panel__product-count, .vesna-filter-panel .cmtsfwc-HitsPerPage { display: none; } .vesna-filter-panel .cmtsfwc-Stats { text-align: center; justify-content: center; display: none; } }