/* ===== Sidebar filter widget ===== */
.cpf-filter-widget { font-family: inherit !important; max-width: 300px !important; }

.cpf-search-wrap { position: relative !important; margin-bottom: 20px !important; }
.cpf-search-box { display: flex !important; align-items: center !important; background: var(--cpf-surface, #f5f5f7) !important; border-radius: 30px !important; padding: 10px 16px !important; gap: 8px !important; }
.cpf-search-icon { color: #888 !important; flex-shrink: 0 !important; cursor: pointer !important; }
.cpf-search-input { border: none !important; background: transparent !important; outline: none !important; width: 100% !important; font-size: 14px !important; }
.cpf-search-loader { display: none !important; flex-shrink: 0 !important; width: 16px !important; height: 16px !important; border: 2px solid rgba(0,0,0,.15) !important; border-top-color: var(--cpf-primary, #1970A2) !important; border-radius: 50% !important; box-sizing: border-box !important; animation: cpf-spin .6s linear infinite !important; }
.cpf-search-loader.cpf-loader-visible { display: inline-block !important; }
@keyframes cpf-spin { to { transform: rotate(360deg); } }
.cpf-search-suggestions { position: absolute !important; top: calc(100% + 6px) !important; left: 0 !important; right: 0 !important; background: #fff !important; border-radius: 12px !important; box-shadow: 0 8px 24px rgba(0,0,0,.12) !important; max-height: 320px !important; overflow-y: auto !important; z-index: 50 !important; display: none; }
.cpf-suggestion-item { display: flex !important; align-items: center !important; gap: 10px !important; padding: 10px 14px !important; text-decoration: none !important; color: #222 !important; border-bottom: 1px solid #f0f0f0 !important; }
.cpf-suggestion-item:last-child { border-bottom: none !important; }
.cpf-suggestion-item:hover { background: #f8f8f8 !important; }
.cpf-suggestion-item img { width: 36px !important; height: 36px !important; object-fit: cover !important; border-radius: 6px !important; flex-shrink: 0 !important; }
.cpf-suggestion-noimg { width: 36px !important; height: 36px !important; border-radius: 6px !important; background: #eee !important; flex-shrink: 0 !important; }
.cpf-suggestion-info { display: flex !important; flex-direction: column !important; font-size: 13px !important; }
.cpf-suggestion-title { font-weight: 500 !important; }
.cpf-suggestion-price { color: var(--cpf-primary, #1970A2) !important; font-size: 12px !important; }
.cpf-no-results { padding: 14px !important; font-size: 13px !important; color: #999 !important; }

.cpf-filter-title { font-size: 18px !important; font-weight: 600 !important; margin-bottom: 16px !important; }
.cpf-accordion { border-bottom: 1px solid #eee !important; padding: 14px 0 !important; }
.cpf-accordion-head { width: 100% !important; background: var(--cpf-surface, #f5f5f7) !important; border: none !important; border-radius: 10px !important; padding: 12px 16px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; }
.cpf-chevron { transition: transform .2s !important; font-size: 13px !important; color: #888 !important; }
.cpf-accordion-head.cpf-active .cpf-chevron { transform: rotate(180deg) !important; }
.cpf-accordion-body { padding-top: 12px !important; }

.cpf-cat-list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.cpf-cat-sub { padding-left: 20px !important; margin-top: 4px !important; }
.cpf-cat-item { position: relative !important; padding: 6px 0 !important; }
.cpf-checkbox { display: flex !important; align-items: center !important; gap: 8px !important; cursor: pointer !important; font-size: 14px !important; padding-right: 22px !important; }
.cpf-checkbox input { accent-color: var(--cpf-primary, #1970A2) !important; width: 16px !important; height: 16px !important; flex-shrink: 0 !important; }
.cpf-checkbox em { margin-left: auto !important; font-style: normal !important; color: #999 !important; font-size: 12px !important; }
.cpf-toggle-sub { position: absolute !important; right: 0 !important; top: 6px !important; border: none !important; background: none !important; cursor: pointer !important; font-size: 16px !important; transition: transform .2s !important; color: #888 !important; }
.cpf-toggle-sub.cpf-rotated { transform: rotate(90deg) !important; }

.cpf-price-slider { position: relative !important; height: 30px !important; margin: 10px 0 !important; }
.cpf-slider-track { position: absolute !important; top: 13px !important; left: 0 !important; right: 0 !important; height: 4px !important; background: #e5e5e5 !important; border-radius: 2px !important; }
.cpf-slider-range { position: absolute !important; top: 13px !important; height: 4px !important; background: var(--cpf-primary, #1970A2) !important; border-radius: 2px !important; }
.cpf-range { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; margin: 0 !important; background: none !important; pointer-events: none !important; -webkit-appearance: none !important; appearance: none !important; height: 30px !important; }
.cpf-range::-webkit-slider-thumb { pointer-events: all !important; -webkit-appearance: none !important; appearance: none !important; width: 18px !important; height: 18px !important; border-radius: 50% !important; background: #fff !important; border: 2px solid var(--cpf-primary, #1970A2) !important; cursor: pointer !important; margin-top: 6px !important; }
.cpf-range::-moz-range-thumb { pointer-events: all !important; width: 18px !important; height: 18px !important; border-radius: 50% !important; background: #fff !important; border: 2px solid var(--cpf-primary, #1970A2) !important; cursor: pointer !important; }
.cpf-price-inputs { display: flex !important; gap: 12px !important; margin-top: 10px !important; }
.cpf-price-inputs div { flex: 1 !important; }
.cpf-price-inputs label { display: block !important; font-size: 12px !important; color: #888 !important; margin-bottom: 4px !important; }
.cpf-price-inputs input { width: 100% !important; padding: 8px 10px !important; border: 1px solid #e5e5e5 !important; border-radius: 8px !important; font-size: 13px !important; box-sizing: border-box !important; }

.cpf-apply-btn { width: 100% !important; background: var(--cpf-primary, #1970A2) !important; color: #fff !important; border: none !important; padding: 12px !important; border-radius: 10px !important; font-weight: 600 !important; cursor: pointer !important; margin-top: 10px !important; font-size: 14px !important; }
.cpf-apply-btn:hover { opacity: .9 !important; }
.cpf-clear-btn { display: block !important; text-align: center !important; margin-top: 10px !important; font-size: 13px !important; color: #888 !important; text-decoration: none !important; }
.cpf-clear-btn:hover { color: var(--cpf-primary, #1970A2) !important; }

/* ===== Top filter bar ===== */
.cpf-topbar { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; flex-wrap: wrap !important; gap: 14px !important; padding: 14px 0 !important; border-bottom: 1px solid #eee !important; }
.cpf-results-count { font-size: 14px !important; color: #333 !important; display: block !important; margin-bottom: 8px !important; }
.cpf-applied-filters { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; }
.cpf-applied-label { font-size: 13px !important; color: #888 !important; margin-right: 4px !important; }
.cpf-filter-pill { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: var(--cpf-surface, #f5f5f7) !important; border: 1px solid #e0e0e0 !important; border-radius: 20px !important; padding: 6px 12px !important; font-size: 12px !important; font-weight: 600 !important; color: #333 !important; text-decoration: none !important; }
.cpf-filter-pill:hover { background: #eee !important; }
.cpf-pill-x { font-size: 14px !important; color: #999 !important; }
.cpf-topbar-right { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 14px !important; }
.cpf-sortby-label { color: #666 !important; }

/* Custom sort-by dropdown */
.cpf-custom-select { position: relative !important; min-width: 170px !important; font-size: 13px !important; }
.cpf-select-trigger { width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; padding: 8px 12px !important; border-radius: 8px !important; border: 1px solid #e0e0e0 !important; background: #fff !important; cursor: pointer !important; font-size: 13px !important; color: #222 !important; }
.cpf-select-arrow { flex-shrink: 0 !important; transition: transform .2s !important; color: #888 !important; }
.cpf-custom-select.cpf-select-open .cpf-select-arrow { transform: rotate(180deg) !important; }
.cpf-select-options { list-style: none !important; margin: 0 !important; padding: 6px !important; position: absolute !important; top: calc(100% + 6px) !important; right: 0 !important; min-width: 100% !important; background: #fff !important; border-radius: 10px !important; box-shadow: 0 8px 24px rgba(0,0,0,.14) !important; z-index: 50 !important; display: none !important; }
.cpf-custom-select.cpf-select-open .cpf-select-options { display: block !important; }
.cpf-select-option { padding: 8px 10px !important; border-radius: 6px !important; cursor: pointer !important; white-space: nowrap !important; color: #333 !important; }
.cpf-select-option:hover { background: var(--cpf-surface, #f5f5f7) !important; }
.cpf-select-option.cpf-selected { background: var(--cpf-primary, #1970A2) !important; color: #fff !important; }

/* ===== Mobile filter toggle button (top bar) ===== */
.cpf-mobile-filter-btn { display: none !important; align-items: center !important; gap: 6px !important; background: var(--cpf-surface, #f5f5f7) !important; border: 1px solid #e0e0e0 !important; border-radius: 8px !important; padding: 8px 14px !important; font-size: 13px !important; font-weight: 600 !important; color: #222 !important; cursor: pointer !important; order: -1 !important; }
.cpf-mobile-filter-btn:hover { background: #eee !important; }

/* ===== Mobile close (X) button inside sidebar widget ===== */
.cpf-mobile-close { display: none !important; }

/* ===== Overlay backdrop behind the mobile off-canvas panel ===== */
.cpf-mobile-overlay { display: none !important; position: fixed !important; inset: 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: rgba(0, 0, 0, .5) !important; z-index: 99998 !important; }
.cpf-mobile-overlay.cpf-mobile-open { display: block !important; }

@media (max-width: 600px) {
	.cpf-topbar { flex-direction: column !important; align-items: flex-start !important; }

	/* Show the "Filter" icon button in the top bar on mobile only */
	.cpf-mobile-filter-btn { display: inline-flex !important; }

	/* Sidebar widget: fixed off-canvas panel, hidden off the right edge
	   by default. Sliding it to translateX(0) reveals it moving from
	   right -> left into view, while staying pinned to the right side
	   of the screen. */
	.cpf-filter-widget {
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: auto !important;
		width: 82% !important;
		max-width: 320px !important;
		height: 100vh !important;
		height: 100dvh !important;
		margin: 0 !important;
		background: #fff !important;
		z-index: 99999 !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch !important;
		padding: 20px !important;
		box-sizing: border-box !important;
		box-shadow: -6px 0 24px rgba(0, 0, 0, .18) !important;
		transform: translateX(100%) !important;
		transition: transform .3s ease !important;
	}
	.cpf-filter-widget.cpf-mobile-open {
		transform: translateX(0) !important;
	}

	.cpf-mobile-close {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		position: absolute !important;
		top: 12px !important;
		right: 12px !important;
		width: 32px !important;
		height: 32px !important;
		border: none !important;
		background: var(--cpf-surface, #f5f5f7) !important;
		border-radius: 50% !important;
		font-size: 20px !important;
		line-height: 1 !important;
		color: #333 !important;
		cursor: pointer !important;
	}

	/* body scroll lock while the off-canvas panel is open */
	body.cpf-mobile-noscroll { overflow: hidden !important; }
}