#customfilter { margin-bottom: 20px; padding: 16px 18px 18px; background: #292929; border-radius: 6px; color: #e8e8e8; text-transform: none; }
#customfilter .fa { display: inline-block; height: auto; width: auto; line-height: 1; }
#customfilter .cf-header { display: flex; align-items: center; gap: 12px; }
#customfilter .cf-title { font-size: 15px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.4px; }
#customfilter .cf-clear-all { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; background: none; border: 1px solid #555555; color: #bbbbbb; font-size: 12px; line-height: 1; padding: 7px 12px; border-radius: 4px; cursor: pointer; }
#customfilter .cf-clear-all:hover { border-color: #b3352e; color: #ffffff; }
#customfilter .cf-clear-all .fa { font-size: 11px; }
#customfilter .cf-mobile-toggle { display: none; }
#customfilter .cf-selects { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-top: 14px; }
#customfilter .cf-field { position: relative; min-width: 0; }
#customfilter .cf-label { display: block; font-size: 12px; color: #9d9d9d; margin-bottom: 5px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#customfilter .cf-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; height: 38px; padding: 0 12px; background: #1e1e1e; border: 1px solid #4a4a4a; border-radius: 4px; color: #cfcfcf; font-size: 13px; cursor: pointer; text-align: left; }
#customfilter .cf-toggle:hover { border-color: #808080; color: #ffffff; }
#customfilter .cf-toggle .fa { font-size: 11px; color: #8a8a8a; transition: transform 0.15s; }
#customfilter .cf-field.cf-dropdown-open .cf-toggle { border-color: #93332e; }
#customfilter .cf-field.cf-dropdown-open .cf-toggle .fa { transform: rotate(180deg); }
#customfilter .cf-value { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 38px; padding: 0 12px; background: rgba(203, 13, 5, 0.12); border: 1px solid #93332e; border-radius: 4px; color: #ffffff; font-size: 13px; font-weight: bold; }
#customfilter .cf-value .cf-value-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#customfilter .cf-value .cf-remove { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #cccccc; font-size: 12px; padding: 4px; margin-right: -4px; }
#customfilter .cf-value .cf-remove:hover { color: #ffffff; }
#customfilter .cf-lockedbox { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px dashed #4a4a4a; border-radius: 4px; color: #6f6f6f; font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#customfilter .cf-lockedbox .fa { font-size: 11px; }
#customfilter .cf-dropdown { display: none; position: absolute; z-index: 30; top: 100%; left: 0; min-width: 100%; max-width: 280px; margin-top: 4px; background: #1e1e1e; border: 1px solid #555555; border-radius: 4px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45); }
#customfilter .cf-field.cf-dropdown-open .cf-dropdown { display: block; }
#customfilter .cf-search-wrap { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #3c3c3c; color: #8a8a8a; }
#customfilter .cf-search-wrap .fa { font-size: 12px; }
#customfilter .cf-search { flex: 1; min-width: 0; background: none; border: none; outline: none; box-shadow: none; color: #ffffff; font-size: 13px; padding: 0; }
#customfilter .cf-options { max-height: 260px; overflow-y: auto; margin: 0; padding: 4px 0; list-style: none; }
#customfilter .cf-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; font-size: 13px; color: #d6d6d6; cursor: pointer; }
#customfilter .cf-option:hover { background: #333333; color: #ffffff; }
#customfilter .cf-option .cf-option-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#customfilter .cf-count { color: #8a8a8a; font-size: 12px; }
#customfilter .cf-noresults { padding: 10px 12px; font-size: 12px; color: #8a8a8a; }
#customfilter .cf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
#customfilter .cf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: none; border: 1px solid #555555; border-radius: 4px; color: #cfcfcf; font-size: 13px; line-height: 1; cursor: pointer; }
#customfilter .cf-chip:hover { border-color: #999999; color: #ffffff; }
#customfilter .cf-chip.cf-on { background: #9e211b; border-color: #9e211b; color: #ffffff; font-weight: bold; }
#customfilter .cf-chip.cf-on .cf-count { color: #e5b5b2; }
#customfilter .cf-chip[disabled] { opacity: 0.35; cursor: default; }
#customfilter .cf-chip .fa { font-size: 12px; color: inherit; }
#customfilter .cf-section { margin-top: 14px; }
#customfilter .cf-section-label { display: block; font-size: 12px; color: #9d9d9d; text-transform: uppercase; }
#customfilter .cf-section .cf-chips { margin-top: 8px; }
#customfilter .cf-flags { border-top: 1px solid #3c3c3c; padding-top: 14px; }
#customfilter.cf-loading { opacity: 0.55; pointer-events: none; }
#product_list_content.cf-loading { pointer-events: none; }
.cf-spinner-wrap { display: flex; justify-content: center; align-items: center; min-height: 200px; width: 100%; list-style: none; }
.cf-spinner { width: 48px; height: 48px; border: 4px solid #e0e0e0; border-top-color: #333333; border-radius: 50%; animation: cf-spin 0.7s linear infinite; }
@keyframes cf-spin { to { transform: rotate(360deg); } }
@media (max-width: 991px) {
	#customfilter .cf-selects { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
	#customfilter { padding: 12px 14px 14px; }
	#customfilter .cf-mobile-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: none; border: 1px solid #555555; border-radius: 4px; color: #cccccc; cursor: pointer; }
	#customfilter .cf-mobile-toggle .fa { font-size: 12px; transition: transform 0.15s; }
	#customfilter.cf-open .cf-mobile-toggle .fa { transform: rotate(180deg); }
	#customfilter .cf-title { margin-right: auto; }
	#customfilter .cf-clear-all { margin-left: 0; }
	#customfilter .cf-body { display: none; }
	#customfilter.cf-open .cf-body { display: block; }
	#customfilter .cf-selects { grid-template-columns: 1fr 1fr; }
	#customfilter .cf-dropdown { max-width: none; }
}
@media (max-width: 480px) {
	#customfilter .cf-selects { grid-template-columns: 1fr; }
}