.my-shop-toggle-filters{ display:flex; flex-wrap:wrap; gap:8px; width:100%; margin-bottom:16px; direction:rtl; align-items:stretch; } .my-shop-toggle-filters .search-switch, .my-shop-toggle-filters .search-switch-reset{ display:flex; align-items:center; justify-content:space-between; gap:9px; padding:9px 11px; border:1px solid #e5e7eb; border-radius:12px; background:#fff; cursor:pointer; transition:all .22s ease; user-select:none; min-width:170px; flex:1 1 calc(33.333% - 8px); box-sizing:border-box; text-decoration:none; } .my-shop-toggle-filters .search-switch:hover, .my-shop-toggle-filters .search-switch-reset:hover{ border-color:#cfd4dc; box-shadow:0 3px 10px rgba(0,0,0,.045); text-decoration:none; } .my-shop-toggle-filters .search-switch-label, .my-shop-toggle-filters .search-switch-reset-label{ flex:1 1 auto; font-size:13px; line-height:1.7; color:#1f2937; font-weight:500; } .my-shop-toggle-filters .search-switch-control{ width:44px; height:24px; border-radius:999px; background:#d1d5db; position:relative; transition:all .22s ease; flex:0 0 44px; } .my-shop-toggle-filters .search-switch-control span{ position:absolute; top:3px; right:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 2px 7px rgba(0,0,0,.16); transition:all .22s ease; display:block; } .my-shop-toggle-filters .search-switch.active{ border-color:#16a34a; background:#f0fdf4; } .my-shop-toggle-filters .search-switch.active .search-switch-control{ background:#22c55e; } .my-shop-toggle-filters .search-switch.active .search-switch-control span{ right:23px; } .my-shop-toggle-filters .search-switch-reset{ border-color:#fecaca; background:#fff7f7; } .my-shop-toggle-filters .search-switch-reset:hover{ border-color:#fca5a5; background:#fff1f2; } .my-shop-toggle-filters .search-switch-reset .search-switch-reset-label{ color:#b91c1c; text-align:center; } @media (max-width: 1024px){ .my-shop-toggle-filters .search-switch, .my-shop-toggle-filters .search-switch-reset{ flex:1 1 calc(50% - 8px); min-width:unset; } } @media (max-width: 767px){ .my-shop-toggle-filters{ gap:7px; margin-bottom:14px; } .my-shop-toggle-filters .search-switch, .my-shop-toggle-filters .search-switch-reset{ flex:1 1 100%; padding:8px 10px; border-radius:11px; } .my-shop-toggle-filters .search-switch-label, .my-shop-toggle-filters .search-switch-reset-label{ font-size:12.5px; } .my-shop-toggle-filters .search-switch-control{ width:42px; height:23px; flex:0 0 42px; } .my-shop-toggle-filters .search-switch-control span{ width:17px; height:17px; top:3px; right:3px; } .my-shop-toggle-filters .search-switch.active .search-switch-control span{ right:22px; } }