.filter-component{position:relative;display:inline-block}.filter-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;background:#fff;border:2px solid #e5e7eb;border-radius:8px;color:#374151;font-weight:500;cursor:pointer;transition:all .3s ease;position:relative}.filter-btn:hover{border-color:#d1d5db;background:#f9fafb}.filter-btn--active,.filter-btn[aria-expanded=true]{border-color:#3b82f6;background:#eff6ff;color:#1e40af}.filter-btn__content{display:flex;align-items:center;gap:8px}.filter-btn__icon{position:relative;display:flex;align-items:center}.filter-icon{transition:transform .2s ease}.filter-btn--active .filter-icon{transform:rotate(15deg)}.filter-btn__badge{position:absolute;top:-6px;right:-6px;background:#ef4444;color:#fff;border-radius:10px;min-width:18px;height:18px;font-size:.7rem;font-weight:600;display:flex;align-items:center;justify-content:center;animation:badge-pulse 2s infinite}@keyframes badge-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.filter-btn__chevron{transition:transform .3s ease}.filter-btn[aria-expanded=true] .filter-btn__chevron{transform:rotate(180deg)}.filter-panel{position:absolute;top:100%;left:0;margin-top:8px;min-width:280px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 10px 25px #00000026;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .3s ease;z-index:1000}.filter-panel[aria-hidden=false]{opacity:1;visibility:visible;transform:translateY(0)}.filter-panel__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #f3f4f6}.filter-panel__title{font-size:1rem;font-weight:600;color:#111827;margin:0}.filter-panel__clear{background:none;border:none;color:#6b7280;font-size:.875rem;cursor:pointer;padding:4px 8px;border-radius:4px;transition:color .2s ease}.filter-panel__clear:hover{color:#374151}.filter-panel__content{max-height:300px;overflow-y:auto;padding:16px 20px}.filter-panel__message{text-align:center;color:#6b7280;font-size:.9rem;margin:0;padding:20px 0}.filter-options{display:flex;flex-direction:column;gap:12px}.filter-option{display:flex;align-items:center;gap:12px;cursor:pointer;padding:8px 0;-webkit-user-select:none;user-select:none}.filter-option input[type=checkbox],.filter-option input[type=radio]{display:none}.filter-option__checkmark{width:18px;height:18px;border:2px solid #d1d5db;border-radius:4px;position:relative;transition:all .2s ease;flex-shrink:0}.filter-option input:checked+.filter-option__checkmark{background:#3b82f6;border-color:#3b82f6}.filter-option input:checked+.filter-option__checkmark:after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.filter-options--price .filter-option__checkmark{border-radius:50%}.filter-options--price input:checked+.filter-option__checkmark:after{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;background:#fff;border-radius:50%;transform:translate(-50%,-50%)}.filter-option__label{font-size:.9rem;color:#374151;flex:1}.filter-option__count{font-size:.8rem;color:#9ca3af}.filter-options--color{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.filter-option--color{flex-direction:column;text-align:center;gap:8px;padding:12px 8px;border:1px solid #f3f4f6;border-radius:8px;transition:all .2s ease}.filter-option--color:hover{border-color:#d1d5db}.filter-option--color input:checked~.filter-option__color-swatch{transform:scale(1.1);box-shadow:0 0 0 2px #3b82f6}.filter-option__color-swatch{width:24px;height:24px;border-radius:50%;border:2px solid #f3f4f6;transition:all .2s ease}.filter-panel__footer{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-top:1px solid #f3f4f6;background:#f9fafb;border-bottom-left-radius:12px;border-bottom-right-radius:12px}.filter-panel__apply{background:#3b82f6;color:#fff;border:none;padding:8px 16px;border-radius:6px;font-weight:500;cursor:pointer;transition:background .2s ease}.filter-panel__apply:hover{background:#2563eb}.filter-panel__results{font-size:.875rem;color:#6b7280}@media (max-width: 768px){.filter-panel{position:fixed;top:auto;bottom:0;left:0;right:0;margin:0;border-radius:16px 16px 0 0;transform:translateY(100%);max-height:70vh}.filter-panel[aria-hidden=false]{transform:translateY(0)}.filter-options--color{grid-template-columns:repeat(3,1fr)}}.filter-btn,.filter-panel{font-family:inherit;font-size:.875rem}@media (max-width: 480px){.filter-btn{padding:8px 12px;font-size:.8rem}.filter-panel{min-width:250px;left:50%;transform:translate(-50%) translateY(-10px)}.filter-panel[aria-hidden=false]{transform:translate(-50%) translateY(0)}}
/*# sourceMappingURL=/cdn/shop/t/1/assets/component-filter-button.css.map */