/**
 * IPTV Product Options — shared library icon styles.
 *
 * `LibraryRenderer` emits `.iptvpo-libicon` in five different places
 * (statistics, features, platforms, quality, the carousel). Until 1.6.1 these
 * classes were defined only in frontend.css, so any block rendered without
 * that sheet showed an invisible icon. This file is the single definition and
 * is enqueued as a dependency of every frontend stylesheet.
 */

.iptvpo-libicon {
	--iptvpo-icon-accent: var(--iptvpo-accent, #5b6cff);
	--iptvpo-icon-accent-rgb: var(--iptvpo-accent-rgb, 91, 108, 255);

	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	flex: none;
	box-sizing: border-box;
	overflow: hidden;
	border-radius: 13px;
	line-height: 0;

	/* Themes that add ::before/::after decoration to spans must not cover it. */
	opacity: 1;
	visibility: visible;
}

.iptvpo-libicon::before,
.iptvpo-libicon::after {
	content: none;
}

/* Uploaded image ---------------------------------------------------------- */

.iptvpo-libicon--image {
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(125, 125, 145, 0.18);
}

/*
 * Theme-proofing.
 *
 * Storefront themes style every `img` on the page, and lazy-load scripts hide
 * images behind `opacity: 0` until their observer fires. These icons are 40px
 * and frequently sit inside a hidden popup or an off-screen carousel slide,
 * where that observer may never fire — the logo would then stay invisible
 * forever. `!important` is used deliberately and narrowly: it is scoped to this
 * one class, which only ever appears inside our own icon wrapper, and it is the
 * only way to beat rules such as `.woocommerce img { height: auto !important }`.
 */
.iptvpo-libicon__img {
	inline-size: 100% !important;
	block-size: 100% !important;
	max-inline-size: 100% !important;
	max-block-size: 100% !important;
	min-inline-size: 0 !important;
	min-block-size: 0 !important;
	margin: 0 !important;
	padding: 5px;
	display: block !important;
	object-fit: contain;
	box-sizing: border-box !important;

	/* Defeat lazy-load reveal animations that never run in a hidden popup. */
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	filter: none !important;
	clip-path: none !important;
	position: static !important;
	inset: auto !important;
	float: none !important;
	aspect-ratio: auto !important;
	transition: none !important;
	animation: none !important;
}

/* Inline SVG glyph -------------------------------------------------------- */

.iptvpo-libicon--glyph {
	/* The item's own colour when set, otherwise the theme accent. */
	color: #fff;
	background: var(--iptvpo-item-color, var(--iptvpo-icon-accent));
}

/* Icons::get() paints with currentColor, so the glyph must inherit it. */
.iptvpo-libicon--glyph svg,
.iptvpo-libicon svg {
	inline-size: 55%;
	block-size: 55%;
	color: inherit;
	stroke: currentColor;
	fill: none;
	display: block;
}

/* Initials monogram ------------------------------------------------------- */

.iptvpo-libicon--mono {
	color: #fff;
	background: var(--iptvpo-item-color, var(--iptvpo-icon-accent));
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
}

/* Placeholder ------------------------------------------------------------- */

.iptvpo-libicon--empty {
	color: rgba(125, 125, 145, 0.75);
	background: rgba(125, 125, 145, 0.1);
	border: 1px dashed rgba(125, 125, 145, 0.4);
}

/* -------------------------------------------------------------------------
 * Contextual sizing
 *
 * Each block gives the icon a slot; the icon fills it rather than imposing
 * its own 44px, which is what caused the admin overlap in 1.5.1.
 * ---------------------------------------------------------------------- */

.iptvpo-stat-card__icon .iptvpo-libicon,
.iptvpo-fe-feature .iptvpo-libicon,
.iptvpo-choice .iptvpo-libicon,
.iptvpo-pcar__logo .iptvpo-libicon,
.iptvpo-fepill__ui .iptvpo-libicon,
.iptvpo-pill__ui .iptvpo-libicon {
	inline-size: 100%;
	block-size: 100%;
	min-inline-size: 0;
	border: 0;
	box-shadow: none;
}

/* The statistics tile already provides its own tinted background, so the
   glyph must not paint a second solid block on top of it. */
.iptvpo-stat-card__icon .iptvpo-libicon--glyph {
	color: inherit;
	background: transparent;
}

.iptvpo-stat-card__icon .iptvpo-libicon--mono {
	color: inherit;
	background: transparent;
	font-size: 0.72rem;
}

.iptvpo-stat-card__icon .iptvpo-libicon svg {
	inline-size: 20px;
	block-size: 20px;
}

/* Feature rows keep the coloured tile, just smaller. */
.iptvpo-fe-feature .iptvpo-libicon {
	border-radius: 11px;
}

.iptvpo-fe-feature .iptvpo-libicon svg {
	inline-size: 17px;
	block-size: 17px;
}

.iptvpo-fe-feature .iptvpo-libicon--mono {
	font-size: 0.68rem;
}

/* Selector pills. */
.iptvpo-fepill__ui .iptvpo-libicon,
.iptvpo-pill__ui .iptvpo-libicon {
	border-radius: 7px;
}

.iptvpo-fepill__ui .iptvpo-libicon svg,
.iptvpo-pill__ui .iptvpo-libicon svg {
	inline-size: 13px;
	block-size: 13px;
}

.iptvpo-fepill__ui .iptvpo-libicon--mono,
.iptvpo-pill__ui .iptvpo-libicon--mono {
	font-size: 0.55rem;
}

/* Platform logos in the carousel fill their tile edge to edge. */
.iptvpo-pcar__logo .iptvpo-libicon {
	border-radius: 15px;
}

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

.iptvpo-pcar__logo .iptvpo-libicon--mono {
	font-size: 1.05rem;
}

.iptvpo-pcar__logo .iptvpo-libicon svg {
	inline-size: 26px;
	block-size: 26px;
}

/* -------------------------------------------------------------------------
 * Contrast & motion
 * ---------------------------------------------------------------------- */

/*
 * 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-libicon--image,
[data-theme="dark"] .iptvpo-libicon--image {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.16);
}

@media (forced-colors: active) {
	.iptvpo-libicon {
		border: 1px solid CanvasText;
	}

	.iptvpo-libicon svg {
		stroke: CanvasText;
	}
}