/**
 * Visual Filter carousel styles.
 *
 * Swiper's own CSS (already loaded by Elementor core, `swiper` handle)
 * does the actual slide layout/sizing — this file only makes room for the
 * prev/next nav buttons and makes sure the existing JetSmartFilters item
 * markup fills its new slide instead of keeping whatever fixed width it
 * had in the original (non-carousel) row layout.
 */
.wcvm-visual-filter-carousel {
	--swiper-navigation-size: 22px;
	--swiper-navigation-color: #333;

	padding: 0 40px 22px;
}

/*
 * A plain custom track + fill, not Swiper's own `scrollbar` module.
 * Confirmed live: that module sizes its drag handle to
 * `(visible slides / total slides)` of the track — correct for "how much
 * content is visible," but what was actually wanted is a small segment
 * showing *which single brand is selected* (see
 * `updateActiveIndicator()` in visual-filter-carousel.js). Also sidesteps
 * a second issue hit along the way: Elementor's bundled `swiper.min.css`
 * (v8) hardcodes `.swiper-scrollbar-drag { background: rgba(0,0,0,0.5) }`
 * as a literal value rather than reading Swiper's own documented
 * `--swiper-scrollbar-drag-bg-color` variable, so that module's color
 * couldn't be reliably restyled anyway. See TROUBLESHOOTING.md.
 */
.wcvm-visual-filter-carousel__scrollbar {
	position: absolute;
	left: 40px;
	right: 40px;
	bottom: 0;
	height: 4px;
	border-radius: 2px;
	background: #e5e7eb;
	overflow: hidden;
}

.wcvm-visual-filter-carousel__scrollbar-fill {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: 2px;
	background: #2563eb;
	opacity: 0;
	transition: left 0.3s ease, opacity 0.2s ease;
}

.wcvm-visual-filter-carousel__scrollbar-fill.is-visible {
	opacity: 1;
}

.wcvm-visual-filter-carousel .swiper-slide {
	height: auto;
	display: flex;
	/*
	 * Confirmed live: without this, the slide's own inline width (set by
	 * Swiper's JS) was overridden by its child's default flex-item
	 * `min-width: auto` — the same "won't shrink below content's natural
	 * size" behavior as the <fieldset> bug this carousel already had to
	 * work around (see TROUBLESHOOTING.md), just one level deeper (this
	 * slide is itself a flex container for the item inside it). Every
	 * slide rendered at the item's natural ~200px content width regardless
	 * of the configured slidesPerView/viewport.
	 */
	min-width: 0;
}

/*
 * Confirmed live (Playwright): the above rule alone never won the cascade.
 * JetSmartFilters ships its own `.jet-filter .swiper .swiper-slide {
 * min-width: 200px }` (specificity 0,3,0, loaded via
 * jet-smart-filters/assets/css/public.css, which WordPress enqueues AFTER
 * this file on every page checked live). Matching that specificity exactly
 * (via a repeated-class selector) still lost, because with equal
 * specificity the LAST-loaded rule wins the cascade, and JetSmartFilters'
 * stylesheet always loads after this one. `!important` is the only
 * reliable way to override a same-or-higher-specificity third-party rule
 * whose load order this plugin doesn't control (and which could change on
 * a JetSmartFilters update). See TROUBLESHOOTING.md.
 */
.wcvm-visual-filter-carousel .swiper-slide {
	min-width: 0 !important;
}

.wcvm-visual-filter-carousel .swiper-slide > * {
	width: 100%;
	min-width: 0;
}

.wcvm-visual-filter-carousel__nav {
	width: 32px;
	height: 32px;
	margin-top: -16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.15 );
}

.wcvm-visual-filter-carousel__nav.swiper-button-disabled {
	opacity: 0.35;
}

@media ( max-width: 480px ) {
	.wcvm-visual-filter-carousel {
		padding: 0 32px 22px;
	}

	.wcvm-visual-filter-carousel__scrollbar {
		left: 32px;
		right: 32px;
	}
}