/**
 * IPTV Product Options — Premium Platforms carousel.
 *
 * Every class is prefixed `iptvpo-pcar` so it cannot collide with the other
 * stylesheets. Colours are derived from the theme's own text colour, so the
 * section sits naturally on light or dark backgrounds.
 */

/*
 * Light-first by design.
 *
 * Until 1.6.4 this file was authored dark-first, with the light palette hidden
 * behind `@media (prefers-color-scheme: light)`. That keys off the VISITOR'S
 * operating system, not the site. A visitor browsing a light storefront with
 * their phone in dark mode therefore got white-on-white cards — the platform
 * logos disappeared entirely and the arrows turned dark brown.
 *
 * The storefront is a light design, so the light palette is now the default and
 * dark is the opt-in override, applied only when the THEME asks for it via a
 * `.iptvpo-fe-dark` ancestor or `[data-theme="dark"]`.
 */
.iptvpo-pcar {
	--pc-accent: var(--iptvpo-accent, #5b6cff);
	--pc-accent-rgb: var(--iptvpo-accent-rgb, 91, 108, 255);
	--pc-radius: var(--iptvpo-fe-radius, 18px);
	--pc-gap: var(--iptvpo-fe-gap, 12px);
	--pc-line: rgba(20, 22, 45, 0.12);
	--pc-surface: rgba(255, 255, 255, 0.72);
	--pc-card: rgba(255, 255, 255, 0.85);
	--pc-nav: rgba(255, 255, 255, 0.94);
	--pc-nav-shadow: 0 4px 14px rgba(20, 22, 45, 0.16);
	--pc-ease: cubic-bezier(0.22, 1, 0.36, 1);

	box-sizing: border-box;
	margin-block: 2em;
	text-align: center;
	container-type: inline-size;
}

.iptvpo-pcar *,
.iptvpo-pcar *::before,
.iptvpo-pcar *::after {
	box-sizing: border-box;
}

/* Opt in from a dark theme, never from the visitor's OS preference. */
.iptvpo-fe-dark .iptvpo-pcar,
[data-theme="dark"] .iptvpo-pcar {
	--pc-line: rgba(255, 255, 255, 0.14);
	--pc-surface: rgba(255, 255, 255, 0.06);
	--pc-card: rgba(255, 255, 255, 0.05);
	--pc-nav: rgba(30, 20, 14, 0.55);
	--pc-nav-shadow: none;
}

/* -------------------------------------------------------------------------
 * Heading
 * ---------------------------------------------------------------------- */

.iptvpo-pcar__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 20px;
	margin-block-end: 1em;
	border: 1px solid rgba(var(--pc-accent-rgb), 0.35);
	border-radius: 999px;
	font-size: 0.82em;
	font-weight: 620;
	letter-spacing: 0.01em;
	color: var(--pc-accent);
	background: rgba(var(--pc-accent-rgb), 0.1);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.iptvpo-pcar__badge svg {
	flex: none;
}

.iptvpo-pcar__title {
	margin: 0 0 0.4em;
	font-size: clamp( 1.6em, 4vw, 2.6em );
	font-weight: 750;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: inherit;
}

.iptvpo-pcar__title-accent {
	color: var(--pc-accent);
}

.iptvpo-pcar__lead {
	max-inline-size: 62ch;
	margin: 0 auto 1.1em;
	font-size: 0.94em;
	line-height: 1.6;
	opacity: 0.72;
}

.iptvpo-pcar__rule {
	display: block;
	inline-size: 120px;
	block-size: 2px;
	margin: 0 auto 1.6em;
	border-radius: 999px;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(var(--pc-accent-rgb), 0.85),
		transparent
	);
}

/* -------------------------------------------------------------------------
 * Frame
 * ---------------------------------------------------------------------- */

.iptvpo-pcar__frame {
	position: relative;
	padding: 22px 18px;
	border: 1px solid var(--pc-line);
	border-radius: calc( var(--pc-radius) + 10px );
	background: var(--pc-surface);
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
}

/* Track ------------------------------------------------------------------ */

.iptvpo-pcar__track {
	display: flex;
	gap: var(--pc-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
}

.iptvpo-pcar__track::-webkit-scrollbar {
	display: none;
}

.iptvpo-pcar__track:focus-visible {
	outline: 2px solid var(--pc-accent);
	outline-offset: 4px;
	border-radius: var(--pc-radius);
}

/* A list that already fits needs no scrolling affordances. */
.iptvpo-pcar.is-static .iptvpo-pcar__track {
	justify-content: center;
	flex-wrap: wrap;
}

.iptvpo-pcar.is-static .iptvpo-pcar__nav,
.iptvpo-pcar.is-static .iptvpo-pcar__dots {
	display: none;
}

/* Slides ----------------------------------------------------------------- */

.iptvpo-pcar__slide {
	flex: 0 0 auto;
	inline-size: 132px;
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-snap-align: start;
}

.iptvpo-pcar__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	block-size: 100%;
	padding: 18px 12px 14px;
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
	background: var(--pc-card);
	transition: transform 0.3s var(--pc-ease), border-color 0.3s var(--pc-ease),
		box-shadow 0.3s var(--pc-ease), background 0.3s var(--pc-ease);
}

.iptvpo-pcar__card:hover {
	transform: translateY(-4px);
	border-color: rgba(var(--pc-accent-rgb), 0.45);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

/* Logo ------------------------------------------------------------------- */

.iptvpo-pcar__logo {
	display: grid;
	place-items: center;
	inline-size: 58px;
	block-size: 58px;
	flex: none;
	overflow: hidden;
	border-radius: 15px;
}

.iptvpo-pcar__logo .iptvpo-libicon {
	inline-size: 100%;
	block-size: 100%;
	min-inline-size: 0;
	border: 0;
	border-radius: 15px;
	box-shadow: none;
}

.iptvpo-pcar__logo .iptvpo-libicon__img {
	padding: 0;
	object-fit: cover;
}

.iptvpo-pcar__logo .iptvpo-libicon--mono {
	font-size: 17px;
}

/* Text ------------------------------------------------------------------- */

.iptvpo-pcar__name {
	font-size: 0.86em;
	font-weight: 660;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.iptvpo-pcar__tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-inline-size: 100%;
	padding: 4px 10px;
	border: 1px solid var(--pc-line);
	border-radius: 999px;
	font-size: 0.66em;
	font-weight: 560;
	line-height: 1.3;
	opacity: 0.8;
}

.iptvpo-pcar__tag svg {
	flex: none;
	opacity: 0.9;
}

.iptvpo-pcar__tag span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Navigation
 * ---------------------------------------------------------------------- */

.iptvpo-pcar__nav {
	position: absolute;
	inset-block-start: 50%;
	z-index: 3;
	display: grid;
	place-items: center;
	inline-size: 40px;
	block-size: 40px;
	padding: 0;
	transform: translateY(-50%);
	border: 1px solid var(--pc-line);
	border-radius: 50%;
	color: inherit;
	cursor: pointer;
	background: var(--pc-nav);
	box-shadow: var(--pc-nav-shadow);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: background 0.22s var(--pc-ease), border-color 0.22s var(--pc-ease),
		transform 0.22s var(--pc-ease);
}

.iptvpo-pcar__nav:hover {
	border-color: rgba(var(--pc-accent-rgb), 0.6);
	color: var(--pc-accent);
	transform: translateY(-50%) scale(1.08);
}

.iptvpo-pcar__nav:focus-visible {
	outline: 2px solid var(--pc-accent);
	outline-offset: 3px;
}

/*
 * The arrows hang outside the frame, which only works when the frame is not
 * flush against the edge of a narrow column. Themes that render the summary in
 * a tight column clipped them over the first and last card, so the frame keeps
 * a gutter and the arrows sit in it.
 */
.iptvpo-pcar__nav--prev {
	inset-inline-start: -20px;
}

.iptvpo-pcar__nav--next {
	inset-inline-end: -20px;
}

/*
 * Container queries let the carousel react to the column it is placed in
 * rather than the viewport, which is what actually matters inside a product
 * summary. Below 560px of available width the arrows move inside the frame and
 * the frame reserves a gutter so they never cover a logo.
 */
@container (max-width: 560px) {
	.iptvpo-pcar__frame {
		padding-inline: 42px;
	}

	.iptvpo-pcar__nav {
		inline-size: 34px;
		block-size: 34px;
	}

	.iptvpo-pcar__nav--prev {
		inset-inline-start: 4px;
	}

	.iptvpo-pcar__nav--next {
		inset-inline-end: 4px;
	}
}

/* The chevron icon points down, so rotate it into place. */
.iptvpo-pcar__nav--prev svg {
	transform: rotate(90deg);
}

.iptvpo-pcar__nav--next svg {
	transform: rotate(-90deg);
}

[dir="rtl"] .iptvpo-pcar__nav--prev svg {
	transform: rotate(-90deg);
}

[dir="rtl"] .iptvpo-pcar__nav--next svg {
	transform: rotate(90deg);
}

/* Dots ------------------------------------------------------------------- */

.iptvpo-pcar__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-block-start: 1.2em;
}

.iptvpo-pcar__dot {
	inline-size: 8px;
	block-size: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: currentColor;
	opacity: 0.28;
	transition: opacity 0.25s var(--pc-ease), inline-size 0.25s var(--pc-ease),
		background 0.25s var(--pc-ease);
}

.iptvpo-pcar__dot:hover {
	opacity: 0.55;
}

.iptvpo-pcar__dot.is-active {
	inline-size: 22px;
	border-radius: 999px;
	opacity: 1;
	background: var(--pc-accent);
}

.iptvpo-pcar__dot:focus-visible {
	outline: 2px solid var(--pc-accent);
	outline-offset: 3px;
}

.iptvpo-pcar__count {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */

@container (max-width: 700px) {
	.iptvpo-pcar__slide {
		inline-size: 116px;
	}
}

@media screen and (max-width: 782px) {
	.iptvpo-pcar__frame {
		padding: 18px 12px;
		border-radius: var(--pc-radius);
	}

	.iptvpo-pcar__slide {
		inline-size: 116px;
	}

	.iptvpo-pcar__logo {
		inline-size: 50px;
		block-size: 50px;
	}

	/*
	 * The arrows must stay inside the viewport on narrow screens, but pulling
	 * them in used to park them on top of the first and last cards, hiding the
	 * logos underneath. Reserve a gutter for them instead so they sit beside
	 * the track rather than over it.
	 */
	.iptvpo-pcar__nav {
		inline-size: 34px;
		block-size: 34px;
	}

	.iptvpo-pcar__frame {
		padding-inline: 42px;
	}

	.iptvpo-pcar__nav--prev {
		inset-inline-start: 4px;
	}

	.iptvpo-pcar__nav--next {
		inset-inline-end: 4px;
	}
}

@media screen and (max-width: 480px) {
	.iptvpo-pcar__slide {
		inline-size: 104px;
	}

	.iptvpo-pcar__lead {
		font-size: 0.86em;
	}
}

/* -------------------------------------------------------------------------
 * Motion, contrast & fallbacks
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.iptvpo-pcar__track {
		scroll-behavior: auto;
	}

	.iptvpo-pcar__card,
	.iptvpo-pcar__nav,
	.iptvpo-pcar__dot {
		transition: none;
	}

	.iptvpo-pcar__card:hover {
		transform: none;
	}

	.iptvpo-pcar__nav:hover {
		transform: translateY(-50%);
	}
}

/* Without backdrop-filter the translucent surfaces need to become opaque. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.iptvpo-pcar__frame {
		background: #fff;
	}

	.iptvpo-pcar__nav {
		background: #fff;
	}

	.iptvpo-fe-dark .iptvpo-pcar__frame,
	.iptvpo-fe-dark .iptvpo-pcar__nav,
	[data-theme="dark"] .iptvpo-pcar__frame,
	[data-theme="dark"] .iptvpo-pcar__nav {
		background: rgba(30, 20, 14, 0.92);
	}
}

@media (forced-colors: active) {
	.iptvpo-pcar__card,
	.iptvpo-pcar__nav,
	.iptvpo-pcar__tag {
		border: 1px solid CanvasText;
	}

	.iptvpo-pcar__dot {
		border: 1px solid CanvasText;
	}
}

.iptvpo-pcar,
.iptvpo-pcar__frame,
.iptvpo-pcar__track {
	max-inline-size: 100%;
	min-inline-size: 0;
}