/* VTV channel icons — seamless infinite loop */
.vtv-channels-slider {
	position: relative;
	overflow: hidden;
	background: #0f1219;
	padding: 26px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.vtv-channels-slider::before,
.vtv-channels-slider::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 60px;
	z-index: 2;
	pointer-events: none;
}

.vtv-channels-slider::before {
	left: 0;
	background: linear-gradient(90deg, #0f1219 0%, transparent 100%);
}

.vtv-channels-slider::after {
	right: 0;
	background: linear-gradient(270deg, #0f1219 0%, transparent 100%);
}

.vtv-channels-marquee {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	will-change: transform;
	animation: vtv-channels-scroll var(--vtv-scroll-duration, 35s) linear infinite;
}

.vtv-channels-marquee:hover {
	animation-play-state: paused;
}

.vtv-channels-group {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 14px;
	padding: 0 7px;
}

.vtv-channel-item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 130px;
	height: 72px;
	padding: 10px 18px;
	background: #1a2030;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
}

.vtv-channel-item img {
	display: block;
	max-width: 110px;
	max-height: 48px;
	width: auto;
	height: auto;
	object-fit: contain;
}

@keyframes vtv-channels-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(var(--vtv-scroll-end, -50%));
	}
}

@media (max-width: 575px) {
	.vtv-channel-item {
		min-width: 110px;
		height: 64px;
		padding: 8px 12px;
	}

	.vtv-channel-item img {
		max-height: 40px;
		max-width: 90px;
	}
}