/* ============================================================
   Partner Logos – infinite marquee
   ============================================================ */

.solcar-logos {
	--solcar-logos-speed: 30s;
	position: relative;
	width: 100%;
	overflow: hidden;
}

.solcar-logos-track {
	--solcar-logo-gap: 60px;
	display: flex;
	width: max-content;
	will-change: transform;
	animation: solcar-marquee var(--solcar-logos-speed, 30s) linear infinite;
}

/* right direction reverses the animation */
.solcar-logos.is-right .solcar-logos-track {
	animation-direction: reverse;
}

/* pause the whole strip on hover */
.solcar-logos:hover .solcar-logos-track {
	animation-play-state: paused;
}

.solcar-logos-set {
	display: flex;
	align-items: center;
	gap: var(--solcar-logo-gap, 60px);
	/* spacing between the two sets equals the gap too */
	padding-right: var(--solcar-logo-gap, 60px);
}

.solcar-logo {
	--solcar-logo-h: 60px;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--solcar-logo-h, 60px);
	width: var(--solcar-logo-w, auto);
	min-width: 0;
}

.solcar-logo img {
	height: 100%;
	width: var(--solcar-logo-w, auto);
	max-width: none;
	object-fit: contain;
	display: block;
	transition: filter .3s ease, opacity .3s ease;
}

/* greyscale idle state */
.solcar-logos.is-grayscale .solcar-logo img {
	filter: grayscale(1);
}

/* on hover, only the hovered logo regains color */
.solcar-logos.is-grayscale .solcar-logo:hover img {
	filter: grayscale(0);
}

@keyframes solcar-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.solcar-logos-empty {
	padding: 24px;
	text-align: center;
	color: #888;
	border: 1px dashed #bbb;
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.solcar-logos-track { animation: none; }
}