/**
 * Vehicle carousel — thumbnail strip + arrow treatment.
 * Colours come from the Elementor Kit globals so the Kit stays the single source of truth.
 * Scoped to .wdr-vehicle-carousel — nothing else on the site is affected.
 *
 * ⚠ Thumb rules are prefixed `.wdr-vc-thumbs .wdr-vc-thumb` ON PURPOSE. A bare `.wdr-vc-thumb`
 * (0,1,0) TIES with the theme reset's `[type="button"]{width:auto;padding:.5rem 1rem}` — an
 * attribute selector is also (0,1,0) — and that sheet loads later, so it won: the thumbs rendered
 * 184px wide instead of 78. Likewise `.wdr-vc-thumb img` (0,1,1) ties with Elementor's
 * `.elementor img{height:auto}`. The extra class outranks both without needing !important.
 */

/* ── thumbnails ─────────────────────────────────────────────────────────── */
.wdr-vc-thumbs {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--e-global-color-8913a83) transparent;
	padding-bottom: 6px;
}

.wdr-vc-thumbs::-webkit-scrollbar { height: 4px; }
.wdr-vc-thumbs::-webkit-scrollbar-thumb {
	background: var(--e-global-color-8913a83);
}

.wdr-vc-thumbs .wdr-vc-thumb {
	flex: 0 0 auto;
	width: 78px;
	height: 58px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	position: relative;
	opacity: .5;
	transition: opacity .25s ease;
	-webkit-appearance: none;
	appearance: none;
}

.wdr-vc-thumbs .wdr-vc-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wdr-vc-thumbs .wdr-vc-thumb:hover,
.wdr-vc-thumbs .wdr-vc-thumb:focus-visible {
	opacity: 1;
}

.wdr-vc-thumbs .wdr-vc-thumb.is-active {
	opacity: 1;
}

/* inset outline rather than a border: no layout shift between states */
.wdr-vc-thumbs .wdr-vc-thumb.is-active::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid var(--e-global-color-primary);
	pointer-events: none;
}

@media (max-width: 767px) {
	.wdr-vc-thumbs .wdr-vc-thumb { width: 62px; height: 46px; }
}

/* ── arrows ─────────────────────────────────────────────────────────────────
   image-carousel exposes only arrows_size / arrows_color — no background, no
   hover state — so this is a Rule 7 custom-CSS exception.

   ⚠ Every arrow rule includes `.swiper` ON PURPOSE. Elementor ships
   `.elementor-element .swiper .elementor-swiper-button{position:absolute;top:50%;
   transform:translateY(-50%)}` at specificity (0,3,0); a bare
   `.wdr-vehicle-carousel .elementor-swiper-button:hover` is ALSO (0,3,0), and
   Elementor's sheet loads later, so it won and the hover scale silently vanished.
   Adding `.swiper` makes these (0,4,0). (The arrows sit INSIDE the .swiper wrapper.)

   ⚠ Elementor centres the arrows with transform:translateY(-50%), so any transform
   here MUST re-declare it or they jump to the bottom. */
.wdr-vehicle-carousel .swiper .elementor-swiper-button {
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(20, 19, 15, .45);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	transition: background .25s ease, transform .25s ease, opacity .25s ease;
	opacity: 0;
}

/* reveal on hover/focus so the arrows never sit over the photo unprompted */
.wdr-vehicle-carousel:hover .swiper .elementor-swiper-button,
.wdr-vehicle-carousel:focus-within .swiper .elementor-swiper-button {
	opacity: 1;
}

.wdr-vehicle-carousel .swiper .elementor-swiper-button:hover {
	background: var(--e-global-color-primary);
	transform: translateY(-50%) scale(1.08);
}

.wdr-vehicle-carousel .swiper .elementor-swiper-button-prev { left: 14px; }
.wdr-vehicle-carousel .swiper .elementor-swiper-button-next { right: 14px; }

/* touch devices have no hover — keep the arrows visible there */
@media (hover: none) {
	.wdr-vehicle-carousel .swiper .elementor-swiper-button { opacity: 1; }
}