.zarin-shop-filter-wrap{ width:100%; margin:0 0 18px; direction:rtl; text-align:right; font-family:inherit !important; line-height:1.5; -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; } .zarin-shop-filter-scroll{ width:100%; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; scrollbar-color:#ddd #f7f7f7; -webkit-overflow-scrolling:touch; } .zarin-shop-filter-scroll::-webkit-scrollbar{height:3px} .zarin-shop-filter-scroll::-webkit-scrollbar-track{background:#f7f7f7;border-radius:999px} .zarin-shop-filter-scroll::-webkit-scrollbar-thumb{background:#ddd;border-radius:999px} .zarin-shop-filter-tabs{ list-style:none; margin:0; padding:0; display:inline-flex; align-items:center; gap:8px; min-width:max-content; } .zarin-shop-filter-tab{ display:inline-flex; align-items:center; flex:0 0 auto; } .zarin-shop-filter-link{ appearance:none; border:1px solid #ececec; background:#fff; color:#4b5563; margin:0; padding:0 16px; min-height:40px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; font-size:14px; font-weight:500; line-height:1; cursor:pointer; box-shadow:none !important; outline:none !important; text-decoration:none; transition:all .16s ease; } .zarin-shop-filter-link:hover{ background:#fff8df; border-color:#ffd86a; color:#7a5600; box-shadow:none !important; } .zarin-shop-filter-tab.is-active .zarin-shop-filter-link{ background:#fff1b8; border-color:#ffb900; color:#6d4e00; box-shadow:none !important; } .zarin-shop-filter-link:focus, .zarin-shop-filter-link:active{ outline:none !important; box-shadow:none !important; } .zarin-shop-filter-text{font:inherit} .zarin-filter-shop{ position:relative; transition:opacity .16s ease; will-change:contents,opacity; } .zarin-filter-shop.is-loading{ opacity:.72; pointer-events:none; } button.zarin-shop-filter-link { background: #f7f8fa; border: 0px solid #000; color: #4a4a4a; font-size: 15px; padding: 18px; transition: 0.3s all; outline: none !important; } .zarin-shop-filter-wrap { margin: 0px; } button.zarin-shop-filter-link:hover { background: #f0f2f6 !important; color: rgb(74 74 74 / 75%) !important; } button.zarin-shop-filter-link:focus, button.zarin-shop-filter-link:focus-visible { background: #f0f2f6 !important; color: #4a4a4a !important; outline: none !important; } button.zarin-shop-filter-link:active { background: #eceff4 !important; color: #4a4a4a !important; } .zarin-shop-filter-tab.is-active .zarin-shop-filter-link, button.zarin-shop-filter-link.selected, button.zarin-shop-filter-link.active { color: #ffb900 !important; background: #ffb9001c !important; } .zarin-shop-filter-tab.is-active .zarin-shop-filter-link:hover, .zarin-shop-filter-tab.is-active .zarin-shop-filter-link:focus, .zarin-shop-filter-tab.is-active .zarin-shop-filter-link:focus-visible, button.zarin-shop-filter-link.selected:hover, button.zarin-shop-filter-link.selected:focus, button.zarin-shop-filter-link.selected:focus-visible, button.zarin-shop-filter-link.active:hover, button.zarin-shop-filter-link.active:focus, button.zarin-shop-filter-link.active:focus-visible { color: #ffb900 !important; background: #ffb9001c !important; } @media (max-width:991px){ .zarin-shop-filter-wrap{margin-bottom:16px} .zarin-shop-filter-link{min-height:38px;padding:0 14px;font-size:13px} } @media (max-width:767px){ .zarin-shop-filter-wrap{margin-bottom:14px} .zarin-shop-filter-tabs{gap:7px} .zarin-shop-filter-link{min-height:36px;padding:0 13px;font-size:12px;border-radius:7px} } @media (max-width:480px){ .zarin-shop-filter-link{min-height:35px;padding:0 12px;font-size:11.5px;border-radius:7px} }