/**
 * IPTV Product Options — product type selector and details.
 *
 * Scoped under .iptvpo-selector / .iptvpo-iptv-details so nothing collides
 * with the other stylesheets. Logical properties keep RTL working.
 */

.iptvpo-selector,
.iptvpo-iptv-details,
.iptvpo-rating {
	--iptvpo-fe-accent: var(--iptvpo-accent, #5b6cff);
	--iptvpo-fe-accent-rgb: var(--iptvpo-accent-rgb, 91, 108, 255);
	--iptvpo-fe-radius: var(--iptvpo-fe-radius, 18px);
	--iptvpo-fe-gap: var(--iptvpo-fe-gap, 10px);
	--iptvpo-fe-line: rgba(125, 125, 145, 0.2);
	--iptvpo-fe-surface: rgba(255, 255, 255, 0.6);
	--iptvpo-fe-ease: cubic-bezier(0.22, 1, 0.36, 1);

	box-sizing: border-box;
}

.iptvpo-selector *,
.iptvpo-iptv-details *,
.iptvpo-rating * {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * Rating badge
 * ---------------------------------------------------------------------- */

.iptvpo-rating {
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
	margin-block: 0 1em;
}

.iptvpo-rating__stars {
	position: relative;
	display: inline-block;
	line-height: 0;
	flex: none;
}

.iptvpo-rating__bg,
.iptvpo-rating__fill {
	display: flex;
	gap: 2px;
	white-space: nowrap;
}

.iptvpo-rating__bg {
	color: rgba(125, 125, 145, 0.3);
}

.iptvpo-rating__fill {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	overflow: hidden;
	color: #f5a524;
}

.iptvpo-rating__bg svg,
.iptvpo-rating__fill svg {
	fill: currentColor;
	flex: none;
}

.iptvpo-rating__value {
	font-size: 0.95em;
	font-weight: 700;
	color: #f5a524;
}

.iptvpo-rating__note {
	font-size: 0.78em;
	opacity: 0.65;
}

/* -------------------------------------------------------------------------
 * Selector
 * ---------------------------------------------------------------------- */

.iptvpo-selector {
	display: grid;
	gap: 1.15em;
	margin-block: 1.2em;
	padding: 20px;
	border: 1px solid var(--iptvpo-fe-line);
	border-radius: calc(var(--iptvpo-fe-radius) + 4px);
	background: var(--iptvpo-fe-surface);
	backdrop-filter: blur(18px) saturate(175%);
	-webkit-backdrop-filter: blur(18px) saturate(175%);
	box-shadow: 0 2px 10px rgba(20, 22, 45, 0.05), 0 16px 40px rgba(20, 22, 45, 0.07);
}

.iptvpo-selector__group {
	display: grid;
	gap: 8px;
}

.iptvpo-selector__title {
	margin: 0;
	font-size: 0.82em;
	font-weight: 680;
	letter-spacing: 0.045em;
	text-transform: uppercase;
	opacity: 0.62;
	line-height: 1.3;
}

.iptvpo-selector__hint {
	margin: -4px 0 0;
	font-size: 0.8em;
	opacity: 0.6;
}

/* Duration options ------------------------------------------------------ */

.iptvpo-selector__options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
	gap: var(--iptvpo-fe-gap);
}

.iptvpo-tier-opt {
	position: relative;
	display: block;
	cursor: pointer;
}

.iptvpo-tier-opt input {
	position: absolute;
	opacity: 0;
	inline-size: 1px;
	block-size: 1px;
	margin: 0;
	pointer-events: none;
}

.iptvpo-tier-opt__ui {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	block-size: 100%;
	padding: 15px 12px 13px;
	text-align: center;
	border: 2px solid var(--iptvpo-fe-line);
	border-radius: var(--iptvpo-fe-radius);
	background: rgba(255, 255, 255, 0.7);
	transition: all 0.24s var(--iptvpo-fe-ease);
}

.iptvpo-tier-opt:hover .iptvpo-tier-opt__ui {
	border-color: rgba(var(--iptvpo-fe-accent-rgb), 0.45);
	transform: translateY(-2px);
}

.iptvpo-tier-opt input:checked + .iptvpo-tier-opt__ui {
	border-color: var(--iptvpo-fe-accent);
	background: linear-gradient(150deg,
		rgba(var(--iptvpo-fe-accent-rgb), 0.13),
		rgba(var(--iptvpo-fe-accent-rgb), 0.04));
	box-shadow: 0 6px 18px rgba(var(--iptvpo-fe-accent-rgb), 0.2);
}

.iptvpo-tier-opt input:focus-visible + .iptvpo-tier-opt__ui {
	outline: 2px solid var(--iptvpo-fe-accent);
	outline-offset: 2px;
}

.iptvpo-tier-opt__flag {
	position: absolute;
	inset-block-start: -10px;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 0.6em;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
	background: linear-gradient(120deg, #f2994a, #f2c94c);
	box-shadow: 0 3px 10px rgba(242, 153, 74, 0.4);
}

[dir="rtl"] .iptvpo-tier-opt__flag {
	transform: translateX(50%);
}

.iptvpo-tier-opt__label {
	font-size: 0.9em;
	font-weight: 640;
}

.iptvpo-tier-opt__price {
	font-size: 1.12em;
	font-weight: 750;
	letter-spacing: -0.02em;
	color: var(--iptvpo-fe-accent);
}

.iptvpo-tier-opt__price .amount,
.iptvpo-tier-opt__price bdi {
	color: inherit;
}

.iptvpo-tier-opt__save {
	padding: 1px 8px;
	border-radius: 999px;
	font-size: 0.66em;
	font-weight: 680;
	color: #12844b;
	background: rgba(18, 183, 106, 0.15);
}

/* Connection options ---------------------------------------------------- */

.iptvpo-selector__conns {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.iptvpo-conn-opt {
	cursor: pointer;
}

.iptvpo-conn-opt input {
	position: absolute;
	opacity: 0;
	inline-size: 1px;
	block-size: 1px;
	margin: 0;
	pointer-events: none;
}

.iptvpo-conn-opt__ui {
	display: grid;
	place-items: center;
	inline-size: 52px;
	block-size: 52px;
	border: 2px solid var(--iptvpo-fe-line);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.7);
	transition: all 0.22s var(--iptvpo-fe-ease);
}

.iptvpo-conn-opt__num {
	font-size: 1.15em;
	font-weight: 720;
	line-height: 1;
}

.iptvpo-conn-opt:hover .iptvpo-conn-opt__ui {
	border-color: rgba(var(--iptvpo-fe-accent-rgb), 0.45);
}

.iptvpo-conn-opt input:checked + .iptvpo-conn-opt__ui {
	color: #fff;
	border-color: transparent;
	background: linear-gradient(150deg,
		rgba(var(--iptvpo-fe-accent-rgb), 1),
		rgba(var(--iptvpo-fe-accent-rgb), 0.82));
	box-shadow: 0 5px 16px rgba(var(--iptvpo-fe-accent-rgb), 0.34);
}

.iptvpo-conn-opt input:focus-visible + .iptvpo-conn-opt__ui {
	outline: 2px solid var(--iptvpo-fe-accent);
	outline-offset: 2px;
}

.iptvpo-conn-opt.is-unavailable {
	cursor: not-allowed;
	opacity: 0.32;
}

.iptvpo-conn-opt.is-unavailable .iptvpo-conn-opt__ui {
	border-style: dashed;
}

/* Pills ----------------------------------------------------------------- */

.iptvpo-selector__pills {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.iptvpo-fepill {
	cursor: pointer;
}

.iptvpo-fepill input {
	position: absolute;
	opacity: 0;
	inline-size: 1px;
	block-size: 1px;
	margin: 0;
	pointer-events: none;
}

.iptvpo-fepill__ui {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 15px;
	border: 2px solid var(--iptvpo-fe-line);
	border-radius: 999px;
	font-size: 0.85em;
	font-weight: 560;
	background: rgba(255, 255, 255, 0.7);
	transition: all 0.22s var(--iptvpo-fe-ease);
}

.iptvpo-fepill__ui .iptvpo-libicon {
	inline-size: 22px;
	block-size: 22px;
	border-radius: 7px;
	border: 0;
}

.iptvpo-fepill:hover .iptvpo-fepill__ui {
	border-color: rgba(var(--iptvpo-fe-accent-rgb), 0.45);
}

.iptvpo-fepill input:checked + .iptvpo-fepill__ui {
	border-color: var(--iptvpo-fe-accent);
	background: rgba(var(--iptvpo-fe-accent-rgb), 0.1);
	font-weight: 650;
}

.iptvpo-fepill input:focus-visible + .iptvpo-fepill__ui {
	outline: 2px solid var(--iptvpo-fe-accent);
	outline-offset: 2px;
}

/* Device select --------------------------------------------------------- */

.iptvpo-selector__select {
	inline-size: 100%;
	max-inline-size: 340px;
	padding: 11px 14px;
	border: 2px solid var(--iptvpo-fe-line);
	border-radius: 13px;
	font-family: inherit;
	font-size: 0.9em;
	background: rgba(255, 255, 255, 0.85);
}

.iptvpo-selector__select:focus {
	outline: none;
	border-color: var(--iptvpo-fe-accent);
	box-shadow: 0 0 0 3px rgba(var(--iptvpo-fe-accent-rgb), 0.16);
}

/* Footer ---------------------------------------------------------------- */

.iptvpo-selector__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-block-start: 14px;
	border-block-start: 2px solid var(--iptvpo-fe-line);
}

.iptvpo-selector__price {
	display: flex;
	align-items: baseline;
	gap: 9px;
	flex-wrap: wrap;
}

.iptvpo-selector__price-label {
	font-size: 0.8em;
	font-weight: 620;
	opacity: 0.6;
}

.iptvpo-selector__price-value {
	font-size: 1.75em;
	font-weight: 760;
	letter-spacing: -0.03em;
	color: var(--iptvpo-fe-accent);
	font-variant-numeric: tabular-nums;
}

.iptvpo-selector__price-value .amount,
.iptvpo-selector__price-value bdi {
	color: inherit;
}

.iptvpo-selector__price-was {
	font-size: 0.95em;
	text-decoration: line-through;
	opacity: 0.45;
}

.iptvpo-selector__price-was[hidden] {
	display: none;
}

.iptvpo-selector__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 14px 28px;
	border: 0;
	border-radius: 999px;
	font-family: inherit;
	font-size: 1em;
	font-weight: 680;
	color: #fff;
	cursor: pointer;
	background: linear-gradient(150deg,
		rgba(var(--iptvpo-fe-accent-rgb), 1),
		rgba(var(--iptvpo-fe-accent-rgb), 0.82));
	box-shadow: 0 6px 20px rgba(var(--iptvpo-fe-accent-rgb), 0.38);
	transition: transform 0.22s var(--iptvpo-fe-ease), box-shadow 0.22s var(--iptvpo-fe-ease);
}

.iptvpo-selector__cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(var(--iptvpo-fe-accent-rgb), 0.48);
}

.iptvpo-selector__cta:active {
	transform: scale(0.98);
}

.iptvpo-selector__cta:focus-visible {
	outline: 3px solid rgba(var(--iptvpo-fe-accent-rgb), 0.4);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * Details block
 * ---------------------------------------------------------------------- */

.iptvpo-iptv-details {
	display: grid;
	gap: 1.35em;
	margin-block: 1.6em;
	clear: both;
}

.iptvpo-quality-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.iptvpo-quality {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin: 0;
	padding: 9px 16px;
	list-style: none;
	border-radius: 13px;
	color: #fff;
	background: var(--iptvpo-item-color, var(--iptvpo-fe-accent));
	box-shadow: 0 4px 12px color-mix(in srgb, var(--iptvpo-item-color, #5b6cff) 35%, transparent);
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.iptvpo-quality {
		box-shadow: 0 4px 12px rgba(20, 22, 45, 0.18);
	}
}

.iptvpo-quality__name {
	font-size: 0.95em;
	font-weight: 720;
	line-height: 1.2;
}

.iptvpo-quality__desc {
	font-size: 0.7em;
	opacity: 0.85;
}

/* -------------------------------------------------------------------------
 * Responsive, dark mode & accessibility
 * ---------------------------------------------------------------------- */

@media screen and (max-width: 600px) {
	.iptvpo-selector {
		padding: 16px;
	}

	.iptvpo-selector__options {
		grid-template-columns: repeat(auto-fit, minmax(102px, 1fr));
	}

	.iptvpo-selector__footer {
		flex-direction: column;
		align-items: stretch;
	}

	.iptvpo-selector__cta {
		inline-size: 100%;
	}

	.iptvpo-conn-opt__ui {
		inline-size: 46px;
		block-size: 46px;
	}
}

/*
 * Dark styling is opt-in from the THEME, not from the visitor's operating
 * system. Keying off prefers-color-scheme painted white-on-white on light
 * storefronts whenever the visitor had their phone in dark mode.
 */
.iptvpo-fe-dark .iptvpo-selector,
[data-theme="dark"] .iptvpo-selector,
.iptvpo-fe-dark .iptvpo-iptv-details,
[data-theme="dark"] .iptvpo-iptv-details {
	--iptvpo-fe-line: rgba(255, 255, 255, 0.15);
	--iptvpo-fe-surface: rgba(255, 255, 255, 0.06);
}

.iptvpo-fe-dark .iptvpo-tier-opt__ui,
[data-theme="dark"] .iptvpo-tier-opt__ui,
.iptvpo-fe-dark .iptvpo-conn-opt__ui,
[data-theme="dark"] .iptvpo-conn-opt__ui,
.iptvpo-fe-dark .iptvpo-fepill__ui,
[data-theme="dark"] .iptvpo-fepill__ui,
.iptvpo-fe-dark .iptvpo-selector__select,
[data-theme="dark"] .iptvpo-selector__select {
	background: rgba(255, 255, 255, 0.07);
}

.iptvpo-no-glass .iptvpo-selector {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	background: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.iptvpo-tier-opt__ui,
	.iptvpo-conn-opt__ui,
	.iptvpo-fepill__ui,
	.iptvpo-selector__cta {
		transition: none;
	}

	.iptvpo-tier-opt:hover .iptvpo-tier-opt__ui,
	.iptvpo-selector__cta:hover {
		transform: none;
	}
}

@media (forced-colors: active) {
	.iptvpo-tier-opt__ui,
	.iptvpo-conn-opt__ui,
	.iptvpo-fepill__ui,
	.iptvpo-quality {
		border: 1px solid CanvasText;
	}

	.iptvpo-selector__cta {
		border: 1px solid ButtonText;
	}
}

.iptvpo-selector,
.iptvpo-iptv-details,
.iptvpo-selector__options,
.iptvpo-quality-row {
	max-inline-size: 100%;
	min-inline-size: 0;
}