/* =========================================================================
 * UrduPaper — Live Media (TV + Radio) page templates.
 *
 * Variables come from inc/live-media.php's inline <style id="upaper-live-media-vars">:
 *   --lm-accent  — admin-picked accent colour
 *   --lm-radius  — card corner radius
 *   --lm-shadow  — card shadow ramp
 *
 * Dark mode kicks in via either:
 *   - data-upaper-live-theme="dark" on <html> (admin forced "Always dark")
 *   - prefers-color-scheme: dark (admin "Auto", visitor's OS in dark mode)
 *
 * Layout switching:
 *   .lm-cols-auto | .lm-cols-2 | .lm-cols-3 | .lm-cols-4 | .lm-cols-5
 *   .lm-card-tile | .lm-card-cinema | .lm-card-minimal     (TV)
 *   .lm-card-card | .lm-card-compact | .lm-card-list       (Radio)
 *
 * Everything is namespaced under `.upaper-live-page` so the theme's global
 * styles (especially the bootstrap grid + the Urdu-font reset) don't leak in.
 * ========================================================================= */

.upaper-live-page {
	--lm-bg: #ffffff;
	--lm-bg-soft: #f7f7f9;
	--lm-card-bg: #ffffff;
	--lm-text: #18181b;
	--lm-muted: #71717a;
	--lm-border: #e5e7eb;
	--lm-border-strong: #d4d4d8;
	--lm-accent-text: #ffffff;
	--lm-live-red: #dc2626;
	--lm-accent: #dc2626;
	--lm-radius: 16px;
	--lm-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.08);

	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--lm-text);
	background: var(--lm-bg);
	max-width: 1400px;
	margin: 0 auto;
	padding: 40px 24px 80px;
	box-sizing: border-box;
}

html[data-upaper-live-theme="dark"] .upaper-live-page,
.upaper-live-page {
	box-sizing: border-box;
}

html[data-upaper-live-theme="dark"] .upaper-live-page {
	--lm-bg: #0a0a0a;
	--lm-bg-soft: #18181b;
	--lm-card-bg: #18181b;
	--lm-text: #fafafa;
	--lm-muted: #a1a1aa;
	--lm-border: #27272a;
	--lm-border-strong: #3f3f46;
}

@media (prefers-color-scheme: dark) {
	html:not([data-upaper-live-theme]) .upaper-live-page {
		--lm-bg: #0a0a0a;
		--lm-bg-soft: #18181b;
		--lm-card-bg: #18181b;
		--lm-text: #fafafa;
		--lm-muted: #a1a1aa;
		--lm-border: #27272a;
		--lm-border-strong: #3f3f46;
	}
}

.upaper-live-page * {
	box-sizing: border-box;
}

/* =========================================================================
 * Page header — shared between TV + Radio
 * ========================================================================= */

.upaper-live-page .lm-page-header {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	margin-bottom: 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--lm-border);
	flex-wrap: wrap;
}

.upaper-live-page .lm-page-header-inner {
	flex: 1;
	min-width: 280px;
	display: flex;
	flex-direction: row-reverse;
	gap: 8px;
}

.upaper-live-page .lm-page-title {
	margin: 0;
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 700;
	line-height: 1.1;
	color: var(--lm-text);
	letter-spacing: -0.02em;
}

.upaper-live-page .lm-page-intro {
	color: var(--lm-muted);
	font-size: 15px;
	line-height: 1.6;
	max-width: 65ch;
}

.upaper-live-page .lm-page-intro p {
	margin: 0;
}

.upaper-live-page .lm-page-header-aside {
	display: flex;
	align-items: center;
	gap: 12px;
}

.upaper-live-page .lm-channel-count {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--lm-muted);
	padding: 8px 14px;
	background: var(--lm-bg-soft);
	border: 1px solid var(--lm-border);
	border-radius: 999px;
}

/* Live pulse — circular dot with expanding ring, used on the TV header. */
.upaper-live-page .lm-live-pulse {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 12px;
	height: 12px;
	position: relative;
	margin-bottom: 4px;
}

.upaper-live-page .lm-live-pulse-dot {
	width: 12px;
	height: 12px;
	background: var(--lm-live-red);
	border-radius: 50%;
	position: relative;
	z-index: 1;
}

.upaper-live-page .lm-live-pulse-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--lm-live-red);
	animation: lmPulse 1.6s ease-out infinite;
}

@keyframes lmPulse {
	0%   { transform: scale(1);   opacity: 0.8; }
	100% { transform: scale(2.8); opacity: 0;   }
}

.upaper-live-page .lm-radio-pulse {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: var(--lm-accent);
	color: #fff;
	border-radius: 12px;
	margin-bottom: 8px;
}

.upaper-live-page .lm-radio-pulse .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

/* =========================================================================
 * Empty state — shared
 * ========================================================================= */

.upaper-live-page .lm-empty {
	background: var(--lm-bg-soft);
	border: 1px dashed var(--lm-border-strong);
	border-radius: var(--lm-radius);
	padding: 60px 30px;
	text-align: center;
	color: var(--lm-muted);
}

.upaper-live-page .lm-empty .dashicons {
	font-size: 48px;
	width: 48px;
	height: 48px;
	margin-bottom: 12px;
	color: var(--lm-muted);
	opacity: 0.6;
}

.upaper-live-page .lm-empty h2 {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 600;
	color: var(--lm-text);
}

.upaper-live-page .lm-empty p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	max-width: 480px;
	margin: 0 auto;
}

.upaper-live-page .lm-empty a {
	color: var(--lm-accent);
	font-weight: 600;
}

/* =========================================================================
 * Body content — admin's page-editor copy, rendered below the grid
 * ========================================================================= */

.upaper-live-page .lm-body-content {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--lm-border);
	font-size: 15px;
	line-height: 1.7;
	color: var(--lm-text);
}

.upaper-live-page .lm-body-content p {
	margin: 0 0 14px;
}

/* =========================================================================
 * Group heading (Radio "group by language/tags")
 * ========================================================================= */

.upaper-live-page .lm-group-heading {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 36px 0 16px;
	font-size: 18px;
	font-weight: 600;
	color: var(--lm-text);
	padding-bottom: 8px;
	border-bottom: 1px solid var(--lm-border);
}

.upaper-live-page .lm-group-heading:first-of-type {
	margin-top: 0;
}

.upaper-live-page .lm-group-heading small {
	font-size: 12px;
	font-weight: 500;
	color: var(--lm-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* =========================================================================
 * LIVE TV — playlist layout (player + channel list)
 *
 * Two-column grid: player flexes to fill, channel list is a fixed 360px on
 * the LEFT visual side. Inside an RTL page we force `direction: ltr` on the
 * playlist wrapper so the columns stay where the admin expects regardless
 * of the surrounding theme direction — Urdu text within children still
 * renders correctly because the Urdu spans/labels carry their own direction.
 *
 * Live/offline badge, pulse dot, and shared LIVE animation keyframes live
 * here too (used both in the player meta + in each list item).
 * ========================================================================= */

.upaper-live-tv .lm-tv-playlist {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 20px;
	align-items: start;
	direction: ltr;
}

@media (max-width: 1023px) {
	.upaper-live-tv .lm-tv-playlist {
		grid-template-columns: 1fr;
	}
}

/* Shared LIVE pulse — small white dot on a red pill. */
.upaper-live-tv .lm-live-dot {
	width: 8px;
	height: 8px;
	background: #fff;
	border-radius: 50%;
	animation: lmBlink 1.6s ease-in-out infinite;
	display: inline-block;
}
@keyframes lmBlink {
	50% { opacity: 0.3; }
}

/* --- PLAYER (right column) ---------------------------------------------- */

.upaper-live-tv .lm-tv-player {
	background: var(--lm-card-bg);
	border: 1px solid var(--lm-border);
	border-radius: var(--lm-radius);
	overflow: hidden;
	box-shadow: var(--lm-shadow);
	order: 2;
}

@media (max-width: 1023px) {
	.upaper-live-tv .lm-tv-player {
		order: 1; /* player on top when stacked */
	}
}

.upaper-live-tv .lm-tv-player-frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
}

.upaper-live-tv .lm-tv-player-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.upaper-live-tv .lm-tv-player-meta {
	padding: 18px 22px;
	border-top: 1px solid var(--lm-border);
	background: linear-gradient(180deg, var(--lm-card-bg), color-mix(in srgb, var(--lm-accent) 3%, var(--lm-card-bg)));
}

.upaper-live-tv .lm-tv-player-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	background: var(--lm-live-red);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	border-radius: 6px;
	text-transform: uppercase;
	box-shadow: 0 2px 8px rgba(220,38,38,0.4);
	margin-bottom: 10px;
}

.upaper-live-tv .lm-tv-player-badge[hidden] {
	display: none;
}

.upaper-live-tv .lm-tv-player-channel {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	color: var(--lm-text);
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.upaper-live-tv .lm-tv-player-title {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--lm-muted);
}

/* --- CHANNEL LIST (left column) ----------------------------------------- */

.upaper-live-tv .lm-tv-list {
	background: var(--lm-card-bg);
	border: 1px solid var(--lm-border);
	border-radius: var(--lm-radius);
	box-shadow: var(--lm-shadow);
	overflow: hidden;
	order: 1;
	/* Match the player's intrinsic height on desktop so the list and the
	   player visually bottom-align. The 16:9 player + meta band ≈ 360px
	   wide ÷ (16/9) + meta = ~270px; let it grow with the viewport up to
	   a comfortable cap. */
	display: flex;
	flex-direction: column;
	max-height: clamp(520px, 75vh, 820px);
	position: sticky;
	top: 20px;
}

@media (max-width: 1023px) {
	.upaper-live-tv .lm-tv-list {
		order: 2; /* list below player when stacked */
		position: static;
		max-height: 60vh;
	}
}

.upaper-live-tv .lm-tv-list-head {
	flex-shrink: 0;
	padding: 14px 16px;
	border-bottom: 1px solid var(--lm-border);
	background: var(--lm-bg-soft);
}

.upaper-live-tv .lm-tv-list-head h3 {
	margin: 0 0 10px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--lm-text);
}

.upaper-live-tv .lm-tv-list-head h3 .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	color: var(--lm-accent);
}

.upaper-live-tv .lm-tv-list-head h3 small {
	margin-left: auto;
	font-size: 11px;
	font-weight: 600;
	color: var(--lm-muted);
	background: var(--lm-card-bg);
	padding: 2px 8px;
	border-radius: 999px;
	border: 1px solid var(--lm-border);
	letter-spacing: 0;
}

.upaper-live-tv .lm-tv-list-search {
	position: relative;
	display: flex;
	align-items: center;
}

.upaper-live-tv .lm-tv-list-search .dashicons {
	position: absolute;
	left: 10px;
	font-size: 14px;
	width: 14px;
	height: 14px;
	color: var(--lm-muted);
	pointer-events: none;
}

.upaper-live-tv .lm-tv-list-search input {
	width: 100%;
	padding: 8px 12px 8px 32px;
	border: 1px solid var(--lm-border);
	border-radius: 8px;
	background: var(--lm-card-bg);
	font-size: 13px;
	color: var(--lm-text);
	font-family: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.upaper-live-tv .lm-tv-list-search input:focus {
	outline: none;
	border-color: var(--lm-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--lm-accent) 20%, transparent);
}

.upaper-live-tv .lm-tv-list-items {
	flex: 1;
	margin: 0;
	padding: 6px;
	list-style: none;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
	scrollbar-color: var(--lm-border-strong) transparent;
}

.upaper-live-tv .lm-tv-list-items::-webkit-scrollbar { width: 6px; }
.upaper-live-tv .lm-tv-list-items::-webkit-scrollbar-track { background: transparent; }
.upaper-live-tv .lm-tv-list-items::-webkit-scrollbar-thumb {
	background: var(--lm-border-strong);
	border-radius: 3px;
}

.upaper-live-tv .lm-tv-list-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.upaper-live-tv .lm-tv-list-item .lm-tv-list-btn {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 12px;
	align-items: center;
	width: 100%;
	padding: 8px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: inherit;
	text-align: left;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
	margin-bottom: 4px;
}

.upaper-live-tv .lm-tv-list-item .lm-tv-list-btn[aria-disabled="true"] {
	cursor: not-allowed;
}

.upaper-live-tv .lm-tv-list-item.is-live:not(.is-active) .lm-tv-list-btn:hover,
.upaper-live-tv .lm-tv-list-item.is-live:not(.is-active) .lm-tv-list-btn:focus-visible {
	background: var(--lm-bg-soft);
	outline: none;
}

.upaper-live-tv .lm-tv-list-item.is-active .lm-tv-list-btn {
	background: color-mix(in srgb, var(--lm-accent) 12%, var(--lm-card-bg));
	border: 1px solid color-mix(in srgb, var(--lm-accent) 50%, transparent);
	padding: 7px;
	transform: none;
}

.upaper-live-tv .lm-tv-list-item.is-offline {
	opacity: 0.5;
}

/* Thumb — 16:9 mini, with a tiny live play overlay. */
.upaper-live-tv .lm-tv-list-thumb {
	position: relative;
	width: 80px;
	height: 45px;
	border-radius: 6px;
	overflow: hidden;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.upaper-live-tv .lm-tv-list-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.upaper-live-tv .lm-tv-list-thumb .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
	color: rgba(255,255,255,0.4);
}

.upaper-live-tv .lm-tv-list-playicon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.4);
	color: #fff;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.upaper-live-tv .lm-tv-list-item.is-live:hover .lm-tv-list-playicon {
	opacity: 1;
}

.upaper-live-tv .lm-tv-list-item.is-active .lm-tv-list-playicon {
	opacity: 1;
	background: color-mix(in srgb, var(--lm-accent) 70%, rgba(0,0,0,0.4));
}

/* Meta */
.upaper-live-tv .lm-tv-list-meta {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.upaper-live-tv .lm-tv-list-name-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}

.upaper-live-tv .lm-tv-list-name {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--lm-text);
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.upaper-live-tv .lm-tv-list-livebadge,
.upaper-live-tv .lm-tv-list-offlinebadge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 1px 6px;
	border-radius: 4px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	flex-shrink: 0;
}

.upaper-live-tv .lm-tv-list-livebadge {
	background: var(--lm-live-red);
	color: #fff;
}

.upaper-live-tv .lm-tv-list-livebadge .lm-live-dot {
	width: 5px;
	height: 5px;
}

.upaper-live-tv .lm-tv-list-offlinebadge {
	background: var(--lm-bg-soft);
	color: var(--lm-muted);
	border: 1px solid var(--lm-border);
}

.upaper-live-tv .lm-tv-list-title {
	margin: 0;
	font-size: 11.5px;
	color: var(--lm-muted);
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.upaper-live-tv .lm-tv-list-empty {
	margin: 16px;
	padding: 16px;
	text-align: center;
	font-size: 13px;
	color: var(--lm-muted);
	background: var(--lm-bg-soft);
	border-radius: 8px;
}

/* =========================================================================
 * LIVE RADIO — hero player + station grid
 *
 * Top of the page: a large "now playing" hero card with vinyl-style
 * artwork, station name, animated visualizer, and transport controls
 * (prev / play-pause / next). Below it, the existing station-grid
 * (re-used from earlier iterations) renders the full catalogue. Click a
 * card → loads it into the hero. Click prev/next → cycles through the
 * grid order in DOM sequence.
 * ========================================================================= */

/* ---- HERO PLAYER ------------------------------------------------------- */

.upaper-live-radio .lm-hero-player {
	position: relative;
	overflow: hidden;
	border-radius: var(--lm-radius);
	background: linear-gradient(135deg, #1a1a1f 0%, #0a0a0c 100%);
	box-shadow: 0 4px 24px rgba(0,0,0,0.15), 0 16px 60px rgba(0,0,0,0.2);
	color: #fff;
	margin-bottom: 36px;
	min-height: 320px;
	/* Content here is English ("Now Playing", station names, codec/bitrate);
	   force LTR so the layout reads artwork-on-left, text-on-right regardless
	   of the surrounding RTL theme. Urdu spans inside (if any) resolve their
	   own direction via Unicode bidi. */
	direction: ltr;
	text-align: left;
}

/* Backdrop — the station's favicon, blurred and tinted, so the hero
   subtly takes on the brand colour of whatever's playing. */
.upaper-live-radio .lm-hero-backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.55;
	overflow: hidden;
}
.upaper-live-radio .lm-hero-backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		135deg,
		rgba(10, 10, 12, 0.85) 0%,
		rgba(10, 10, 12, 0.65) 35%,
		rgba(10, 10, 12, 0.9) 100%
	);
}
.upaper-live-radio .lm-hero-backdrop img {
	position: absolute;
	inset: -40px;
	width: calc(100% + 80px);
	height: calc(100% + 80px);
	object-fit: cover;
	filter: blur(48px) saturate(140%);
	transform: scale(1.4);
}

.upaper-live-radio .lm-hero-inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 260px 1fr 320px;
	gap: 36px;
	padding: 36px 40px;
	align-items: center;
}

/* Two-column at narrower widths — Up Next becomes a full-width strip
   below the controls. <768px collapses to a single column entirely. */
@media (max-width: 1180px) {
	.upaper-live-radio .lm-hero-inner {
		grid-template-columns: 260px 1fr;
	}
	.upaper-live-radio .lm-hero-upnext {
		grid-column: 1 / -1;
	}
}
@media (max-width: 940px) {
	.upaper-live-radio .lm-hero-inner {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 28px 22px;
		text-align: center;
	}
}

/* Vinyl disc artwork — rotates only while playing. */
.upaper-live-radio .lm-hero-artwork {
	display: flex;
	align-items: center;
	justify-content: center;
}

.upaper-live-radio .lm-hero-disc {
	position: relative;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background:
		radial-gradient(circle at center, rgba(255,255,255,0.04) 0%, transparent 60%),
		conic-gradient(from 0deg, #1a1a1d, #2c2c30, #1a1a1d, #2c2c30, #1a1a1d);
	box-shadow:
		0 0 0 1px rgba(255,255,255,0.06),
		0 10px 30px rgba(0,0,0,0.5),
		inset 0 0 40px rgba(0,0,0,0.4);
}

@media (max-width: 768px) {
	.upaper-live-radio .lm-hero-disc { width: 180px; height: 180px; margin: 0 auto; }
}

/* Concentric ridges ("grooves") — the ONLY part that rotates while
   playing, so the centre favicon stays pinned and readable. */
.upaper-live-radio .lm-hero-disc-grooves {
	position: absolute;
	inset: 18px;
	border-radius: 50%;
	background: repeating-radial-gradient(
		circle at center,
		rgba(255,255,255,0.05) 0px,
		rgba(255,255,255,0.05) 1px,
		transparent 1px,
		transparent 5px
	);
}

/* Centre image — the station favicon mounted like an LP label.
   Centred via top/left + translate (NOT `inset: 50%`, which conflicts
   with width/height and pushed the box off-centre). */
.upaper-live-radio .lm-hero-disc-img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50%;
	height: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--lm-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	box-shadow: 0 0 0 4px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.4);
	z-index: 1;
}

.upaper-live-radio .lm-hero-disc-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.upaper-live-radio .lm-hero-disc-img .dashicons {
	font-size: 42px;
	width: 42px;
	height: 42px;
	color: rgba(255,255,255,0.95);
}

.upaper-live-radio .lm-hero-disc-spindle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	transform: translate(-50%, -50%);
	background: #18181b;
	border-radius: 50%;
	z-index: 2;
	box-shadow: 0 0 0 2px rgba(0,0,0,0.4);
}

/* Continuous rotation — the whole disc spins like a real turntable. The
   concentric grooves are radially symmetric (rotation invisible on their
   own), so it's the disc's conic-gradient body that carries the visible
   motion. Always on; idles slowly when paused, speeds up while playing.

   The centre label counter-rotates at the same speed so the station logo
   stays upright + readable instead of tumbling. Its keyframe carries the
   translate(-50%,-50%) centring offset since animating `transform` would
   otherwise wipe it. */
.upaper-live-radio .lm-hero-disc {
	animation: lmSpin 16s linear infinite;
}
.upaper-live-radio .lm-hero-disc-img {
	animation: lmSpinLabel 16s linear infinite;
}
.upaper-live-radio .lm-hero-player.is-playing .lm-hero-disc,
.upaper-live-radio .lm-hero-player.is-playing .lm-hero-disc-img {
	animation-duration: 6s;
}

@keyframes lmSpinLabel {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to   { transform: translate(-50%, -50%) rotate(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.upaper-live-radio .lm-hero-disc,
	.upaper-live-radio .lm-hero-disc-img {
		animation: none;
	}
}

/* Hero info column ----------------------------------------------------- */

.upaper-live-radio .lm-hero-info {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.upaper-live-radio .lm-hero-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: rgba(255,255,255,0.55);
}

@media (max-width: 768px) {
	.upaper-live-radio .lm-hero-eyebrow { justify-content: center; }
}

.upaper-live-radio .lm-hero-onair {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	background: var(--lm-live-red);
	color: #fff;
	border-radius: 999px;
	font-size: 10px;
	box-shadow: 0 2px 8px rgba(220,38,38,0.4);
}

.upaper-live-radio .lm-hero-onair[hidden] { display: none; }

.upaper-live-radio .lm-hero-onair-dot {
	width: 6px;
	height: 6px;
	background: #fff;
	border-radius: 50%;
	animation: lmBlink 1.6s ease-in-out infinite;
}

.upaper-live-radio .lm-hero-name {
	margin: 0;
	font-size: clamp(24px, 3.4vw, 38px);
	font-weight: 700;
	color: #fff;
	line-height: 1.15;
	letter-spacing: -0.015em;
	text-align: left;
}

.upaper-live-radio .lm-hero-tags {
	margin: 0;
	font-size: 13px;
	color: rgba(255,255,255,0.55);
	line-height: 1.5;
	min-height: 1.2em;
}

/* Visualiser — 28 bars spanning the full info column. Each bar has a
   unique animation-delay AND animation-duration so the motion never
   syncs up into a single pulsing block. Three keyframe variants
   (lmHeroBars1/2/3) give different "frequency envelopes" so the bars
   look like they're responding to genuinely different bins of a
   spectrum — the result reads as music-following even though it's
   pure CSS (true Web Audio analysis isn't viable for radio-browser
   streams: most don't expose CORS headers, so MediaElementAudioSource
   produces silence on the analyser node). */
.upaper-live-radio .lm-hero-visualizer {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 3px;
	height: 44px;
	margin-top: 6px;
	width: 100%;
	max-width: 480px;
}
@media (max-width: 1200px) {
	.upaper-live-radio .lm-hero-name {
		font-size: clamp(22px, 4vw, 28px);
	}
	.upaper-live-radio .lm-hero-inner {
		grid-template-columns: 260px 1fr;
	}
	.upaper-live-radio .lm-hero-disc {
		width: 260px;
		height: 260px;
	}
	.upaper-live-radio .lm-hero-visualizer { max-width: 100%; }
}
@media (max-width: 1024px) {
	.upaper-live-radio .lm-hero-visualizer { justify-content: center; }
	.upaper-live-radio .lm-hero-inner {
		grid-template-columns: 1fr;
	}
	.upaper-live-radio .lm-hero-info {
		align-items: center;
	}
}
@media (max-width: 480px) {
	.upaper-live-radio .lm-hero-inner {
        grid-template-columns: 100%;
    }
	.upaper-live-radio .lm-hero-disc {
		width: 200px;
		height: 200px;
	}
}

.upaper-live-radio .lm-hero-visualizer span {
	display: block;
	flex: 1;
	min-width: 3px;
	max-width: 6px;
	border-radius: 2px;
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--lm-accent) 80%, #fff 20%) 0%,
		var(--lm-accent) 60%,
		color-mix(in srgb, var(--lm-accent) 80%, #000 20%) 100%
	);
	height: 18%;
	transform-origin: bottom center;
	opacity: 0.55;
	transition: opacity 0.25s ease, height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.upaper-live-radio .lm-hero-player.is-playing .lm-hero-visualizer span {
	opacity: 1;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(0.4, 0, 0.4, 1);
}

/* Three keyframes — different "frequency bin" feel. The multi-step
   waveform (not a simple 0/50/100% sine) makes bars stutter and pop
   irregularly, which is what real spectrum analysers do. */
@keyframes lmHeroBars1 {
	0%   { transform: scaleY(0.15); }
	18%  { transform: scaleY(0.85); }
	33%  { transform: scaleY(0.35); }
	48%  { transform: scaleY(0.95); }
	68%  { transform: scaleY(0.25); }
	82%  { transform: scaleY(0.65); }
	100% { transform: scaleY(0.20); }
}
@keyframes lmHeroBars2 {
	0%   { transform: scaleY(0.30); }
	22%  { transform: scaleY(0.55); }
	40%  { transform: scaleY(1.00); }
	55%  { transform: scaleY(0.20); }
	70%  { transform: scaleY(0.75); }
	88%  { transform: scaleY(0.40); }
	100% { transform: scaleY(0.30); }
}
@keyframes lmHeroBars3 {
	0%   { transform: scaleY(0.45); }
	15%  { transform: scaleY(0.20); }
	30%  { transform: scaleY(0.90); }
	50%  { transform: scaleY(0.55); }
	72%  { transform: scaleY(0.85); }
	90%  { transform: scaleY(0.30); }
	100% { transform: scaleY(0.45); }
}

/* Per-bar timings — 28 unique (delay, duration, keyframe) tuples.
   Generated to look semi-random; durations cluster around 0.7-1.3s
   which is the "audio rhythm" range. */
.upaper-live-radio .lm-hero-visualizer span:nth-child(1)  { height: 24%; animation: lmHeroBars1 0.92s -0.10s; }
.upaper-live-radio .lm-hero-visualizer span:nth-child(2)  { height: 58%; animation: lmHeroBars2 1.08s -0.45s; }
.upaper-live-radio .lm-hero-visualizer span:nth-child(3)  { height: 40%; animation: lmHeroBars3 0.78s -0.20s; }
.upaper-live-radio .lm-hero-visualizer span:nth-child(4)  { height: 82%; animation: lmHeroBars1 1.22s -0.60s; }
.upaper-live-radio .lm-hero-visualizer span:nth-child(5)  { height: 52%; animation: lmHeroBars2 0.86s -0.05s; }
.upaper-live-radio .lm-hero-visualizer span:nth-child(6)  { height: 72%; animation: lmHeroBars3 1.14s -0.32s; }
.upaper-live-radio .lm-hero-visualizer span:nth-child(7)  { height: 32%; animation: lmHeroBars1 0.74s -0.55s; }
.upaper-live-radio .lm-hero-visualizer span:nth-child(8)  { height: 64%; animation: lmHeroBars2 1.30s -0.18s; }
.upaper-live-radio .lm-hero-visualizer span:nth-child(9)  { height: 48%; animation: lmHeroBars3 0.96s -0.70s; }
.upaper-live-radio .lm-hero-visualizer span:nth-child(10) { height: 78%; animation: lmHeroBars1 1.06s -0.25s; }
.upaper-live-radio .lm-hero-visualizer span:nth-child(11) { height: 36%; animation: lmHeroBars2 0.82s -0.40s; }
.upaper-live-radio .lm-hero-visualizer span:nth-child(12) { height: 90%; animation: lmHeroBars3 1.18s -0.08s; }
.upaper-live-radio .lm-hero-visualizer span:nth-child(13) { height: 44%; animation: lmHeroBars1 1.00s -0.50s; }
.upaper-live-radio .lm-hero-visualizer span:nth-child(14) { height: 68%; animation: lmHeroBars2 0.88s -0.15s; }
.upaper-live-radio .lm-hero-visualizer span:nth-child(15) { height: 28%; animation: lmHeroBars3 1.26s -0.65s; }
.upaper-live-radio .lm-hero-visualizer span:nth-child(16) { height: 62%; animation: lmHeroBars1 0.94s -0.28s; }
.upaper-live-radio .lm-hero-visualizer span:nth-child(17) { height: 84%; animation: lmHeroBars2 1.10s -0.42s; }
.upaper-live-radio .lm-hero-visualizer span:nth-child(18) { height: 38%; animation: lmHeroBars3 0.76s -0.02s; }
.upaper-live-radio .lm-hero-visualizer span:nth-child(19) { height: 70%; animation: lmHeroBars1 1.16s -0.36s; }
.upaper-live-radio .lm-hero-visualizer span:nth-child(20) { height: 54%; animation: lmHeroBars2 0.98s -0.58s; }
.upaper-live-radio .lm-hero-visualizer span:nth-child(21) { height: 26%; animation: lmHeroBars3 0.80s -0.22s; }
.upaper-live-radio .lm-hero-visualizer span:nth-child(22) { height: 76%; animation: lmHeroBars1 1.04s -0.48s; }
.upaper-live-radio .lm-hero-visualizer span:nth-child(23) { height: 46%; animation: lmHeroBars2 0.90s -0.12s; }
.upaper-live-radio .lm-hero-visualizer span:nth-child(24) { height: 88%; animation: lmHeroBars3 1.20s -0.62s; }
.upaper-live-radio .lm-hero-visualizer span:nth-child(25) { height: 34%; animation: lmHeroBars1 0.84s -0.30s; }
.upaper-live-radio .lm-hero-visualizer span:nth-child(26) { height: 60%; animation: lmHeroBars2 1.12s -0.06s; }
.upaper-live-radio .lm-hero-visualizer span:nth-child(27) { height: 42%; animation: lmHeroBars3 0.72s -0.52s; }
.upaper-live-radio .lm-hero-visualizer span:nth-child(28) { height: 80%; animation: lmHeroBars1 1.08s -0.38s; }

/* Transport controls --------------------------------------------------- */

.upaper-live-radio .lm-hero-controls {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 18px;
}

@media (max-width: 768px) {
	.upaper-live-radio .lm-hero-controls { justify-content: center; }
}

.upaper-live-radio .lm-hero-btn {
	border: 0;
	padding: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255,255,255,0.08);
	color: #fff;
	transition: background 0.18s ease, transform 0.18s ease, color 0.18s ease;
	position: relative;
}

.upaper-live-radio .lm-hero-btn:hover,
.upaper-live-radio .lm-hero-btn:focus-visible {
	background: rgba(255,255,255,0.18);
	transform: scale(1.05);
	outline: none;
}

/* Control icons are Dashicons glyphs — size them per button. The dashicons
   base CSS sets 20px width/height/font-size, so all three must be set to
   resize cleanly. `display` is left at the dashicons default (inline-block)
   so the .is-playing / .is-muted display toggles win cleanly. */
.upaper-live-radio .lm-hero-prev .dashicons,
.upaper-live-radio .lm-hero-next .dashicons {
	font-size: 26px;
	width: 26px;
	height: 26px;
}
.upaper-live-radio .lm-hero-play .dashicons {
	font-size: 34px;
	width: 34px;
	height: 34px;
}
.upaper-live-radio .lm-hero-mute .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.upaper-live-radio .lm-hero-prev,
.upaper-live-radio .lm-hero-next {
	width: 44px;
	height: 44px;
}

.upaper-live-radio .lm-hero-play {
	width: 64px;
	height: 64px;
	background: var(--lm-accent);
	color: #fff;
	box-shadow: 0 6px 18px color-mix(in srgb, var(--lm-accent) 40%, transparent);
}

.upaper-live-radio .lm-hero-play:hover,
.upaper-live-radio .lm-hero-play:focus-visible {
	background: var(--lm-accent);
	transform: scale(1.08);
	box-shadow: 0 8px 24px color-mix(in srgb, var(--lm-accent) 55%, transparent);
}

/* Pause icon hidden by default; show when player.is-playing. Loading
   spinner takes over both when buffering. */
.upaper-live-radio .lm-hero-pause-icon,
.upaper-live-radio .lm-hero-spinner { display: none; }

.upaper-live-radio .lm-hero-player.is-playing .lm-hero-play-icon  { display: none; }
.upaper-live-radio .lm-hero-player.is-playing .lm-hero-pause-icon { display: block; }

.upaper-live-radio .lm-hero-player.is-loading .lm-hero-play-icon,
.upaper-live-radio .lm-hero-player.is-loading .lm-hero-pause-icon { display: none; }
.upaper-live-radio .lm-hero-player.is-loading .lm-hero-spinner {
	display: block;
	width: 28px;
	height: 28px;
	border: 3px solid rgba(255,255,255,0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: lmSpin 0.8s linear infinite;
}

.upaper-live-radio [data-lm-hero-audio] {
	display: none;
}

/* ---- VOLUME control ---------------------------------------------------- */

.upaper-live-radio .lm-hero-volume {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-left: 14px;
	padding-left: 14px;
	border-left: 1px solid rgba(255,255,255,0.12);
}

.upaper-live-radio .lm-hero-mute {
	width: 36px;
	height: 36px;
	position: relative;
}

/* Toggle which speaker icon is shown — muted state shows the slashed one. */
.upaper-live-radio .lm-hero-mute .lm-hero-mute-icon { display: none; }
.upaper-live-radio .lm-hero-player.is-muted .lm-hero-mute .lm-hero-vol-icon { display: none; }
.upaper-live-radio .lm-hero-player.is-muted .lm-hero-mute .lm-hero-mute-icon { display: block; }

/* Slim horizontal range slider, styled identically across WebKit and
   Firefox via separate vendor-prefixed pseudo-elements (CSS doesn't yet
   let us style a single ::range-thumb selector cross-browser). Track is
   the same height as the visualiser bars for visual harmony. */
.upaper-live-radio .lm-hero-vol-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 90px;
	height: 4px;
	background: rgba(255,255,255,0.18);
	border-radius: 2px;
	outline: none;
	cursor: pointer;
	margin: 0;
	direction: ltr; /* keep the slider direction consistent regardless of page RTL */
}

.upaper-live-radio .lm-hero-vol-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 14px;
	height: 14px;
	background: var(--lm-accent);
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0,0,0,0.4);
	transition: transform 0.15s ease;
}

.upaper-live-radio .lm-hero-vol-slider::-webkit-slider-thumb:hover {
	transform: scale(1.2);
}

.upaper-live-radio .lm-hero-vol-slider::-moz-range-thumb {
	width: 14px;
	height: 14px;
	background: var(--lm-accent);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.upaper-live-radio .lm-hero-vol-slider::-moz-range-track {
	background: rgba(255,255,255,0.18);
	border-radius: 2px;
	height: 4px;
}

/* Volume bar fades in only on hover/focus of the control cluster — keeps
   the controls row visually compact at rest. Override on touch devices
   where there's no hover state by always showing it (see media query). */
@media (max-width: 768px) {
	.upaper-live-radio .lm-hero-volume {
		margin-left: 0;
		padding-left: 0;
		border-left: 0;
		margin-top: 12px;
		justify-content: center;
		flex-basis: 100%;
	}
}
@media (max-width: 480px) {
	.upaper-live-radio .lm-hero-prev, .upaper-live-radio .lm-hero-next {
		width: 24px;
		height: 24px;
	}
	.upaper-live-radio .lm-hero-play {
		width: 32px;
		height: 32px;
	}
	.upaper-live-radio .lm-hero-mute {
		width: 28px;
		height: 28px;
		position: relative;
	}
	.upaper-live-radio .lm-hero-volume {
		margin-top: 0;
	}
}
/* ---- UP NEXT panel ----------------------------------------------------- */

.upaper-live-radio .lm-hero-upnext {
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 14px;
	padding: 18px 16px;
	min-width: 0; /* prevents grid blowout on long station names */
	align-self: stretch;
	display: flex;
	flex-direction: column;
}

.upaper-live-radio .lm-hero-upnext-title {
	margin: 0 0 12px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: rgba(255,255,255,0.55);
}

.upaper-live-radio .lm-hero-upnext-title .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
	color: var(--lm-accent);
}

.upaper-live-radio .lm-hero-upnext-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	/* Always vertical — a 3-row stack reads cleanly whether the panel is
	   the hero's right sidebar (≥1180px) or a full-width strip below the
	   controls (<1180px). A horizontal scroll truncated the labels into
	   "...6.2 / ...bps" on mid-range desktops. */
	flex-direction: column;
	gap: 4px;
	flex: 1;
}

.upaper-live-radio .lm-hero-upnext-item {
	display: grid;
	grid-template-columns: 36px 1fr;
	gap: 10px;
	align-items: center;
	padding: 8px;
	border-radius: 8px;
	cursor: pointer;
	border: 0;
	background: transparent;
	color: #fff;
	font-family: inherit;
	text-align: left;
	width: 100%;
	transition: background 0.15s ease, transform 0.15s ease;
}

.upaper-live-radio .lm-hero-upnext-item:hover,
.upaper-live-radio .lm-hero-upnext-item:focus-visible {
	background: rgba(255,255,255,0.08);
	outline: none;
}

.upaper-live-radio .lm-hero-upnext-fav {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: rgba(255,255,255,0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}

.upaper-live-radio .lm-hero-upnext-fav img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 4px;
}

.upaper-live-radio .lm-hero-upnext-fav .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	color: rgba(255,255,255,0.45);
}

.upaper-live-radio .lm-hero-upnext-name {
	font-size: 13px;
	font-weight: 600;
	color: rgba(255,255,255,0.85);
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.upaper-live-radio .lm-hero-upnext-meta {
	font-size: 11px;
	color: rgba(255,255,255,0.5);
	line-height: 1.2;
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.upaper-live-radio .lm-hero-upnext-text {
	min-width: 0;
	display: flex;
	flex-direction: column;
}


/* ---- LISTING (search + section heading above the grid) ---------------- */

.upaper-live-radio .lm-radio-listing {
	margin-top: 0;
	/* English UI affordances ("All stations", search placeholder, codec
	   strings, country names). Force LTR for the same reason the hero
	   does — Urdu station names inside spans resolve their own bidi. */
	direction: ltr;
	text-align: left;
}

.upaper-live-radio .lm-radio-listing-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.upaper-live-radio .lm-radio-listing-head h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--lm-text);
}

.upaper-live-radio .lm-radio-listing-head h3 .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
	color: var(--lm-accent);
}

.upaper-live-radio .lm-radio-listing-head h3 small {
	font-size: 11px;
	font-weight: 600;
	color: var(--lm-muted);
	background: var(--lm-bg-soft);
	padding: 2px 8px;
	border-radius: 999px;
	border: 1px solid var(--lm-border);
	letter-spacing: 0;
}

.upaper-live-radio .lm-radio-listing-search {
	position: relative;
	display: flex;
	align-items: center;
	width: 240px;
	max-width: 100%;
}

.upaper-live-radio .lm-radio-listing-search .dashicons {
	position: absolute;
	left: 10px;
	font-size: 14px;
	width: 14px;
	height: 14px;
	color: var(--lm-muted);
	pointer-events: none;
}

.upaper-live-radio .lm-radio-listing-search input {
	width: 100%;
	padding: 8px 12px 8px 32px;
	border: 1px solid var(--lm-border);
	border-radius: 8px;
	background: var(--lm-card-bg);
	font-size: 13px;
	color: var(--lm-text);
	font-family: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.upaper-live-radio .lm-radio-listing-search input:focus {
	outline: none;
	border-color: var(--lm-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--lm-accent) 20%, transparent);
}

.upaper-live-radio .lm-radio-listing-empty {
	margin: 16px 0;
	padding: 24px;
	text-align: center;
	font-size: 14px;
	color: var(--lm-muted);
	background: var(--lm-bg-soft);
	border-radius: 8px;
}

/* ---- STATION GRID (existing cards, with .is-active state) ------------- */

.upaper-live-radio .lm-radio-grid {
	display: grid;
	gap: 16px;
	margin-bottom: 28px;
}

.upaper-live-radio.lm-cols-auto .lm-radio-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.upaper-live-radio.lm-cols-2    .lm-radio-grid { grid-template-columns: repeat(2, 1fr); }
.upaper-live-radio.lm-cols-3    .lm-radio-grid { grid-template-columns: repeat(3, 1fr); }
.upaper-live-radio.lm-cols-4    .lm-radio-grid { grid-template-columns: repeat(4, 1fr); }
.upaper-live-radio.lm-cols-5    .lm-radio-grid { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 760px) {
	.upaper-live-radio .lm-radio-grid { grid-template-columns: 1fr !important; }
}

.upaper-live-radio .lm-radio-card {
	display: grid;
	/* 3-column row: play button · favicon · meta. The "homepage" link
	   that used to occupy a fourth column is now absolutely positioned in
	   the card's top-right corner so it stops stealing meta width. */
	grid-template-columns: 48px 44px 1fr;
	gap: 12px;
	align-items: center;
	padding: 14px 16px;
	background: var(--lm-card-bg);
	border: 1px solid var(--lm-border);
	border-radius: var(--lm-radius);
	box-shadow: var(--lm-shadow);
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	position: relative;
	/* Whole card is clickable — pointer cursor regardless of which child
	   is hovered. The home <a> inside resets its own cursor. */
	cursor: pointer;
}

.upaper-live-radio .lm-radio-card:hover {
	transform: translateY(-2px);
	border-color: var(--lm-accent);
	box-shadow: 0 4px 12px rgba(0,0,0,.06), 0 16px 32px rgba(0,0,0,.1);
}

/* Active = currently loaded in the hero player. Visual cue is a coloured
   border + tinted background; the play/pause state itself is shown on the
   hero, not on the card. */
.upaper-live-radio .lm-radio-card.is-active {
	border-color: var(--lm-accent);
	background: linear-gradient(135deg, var(--lm-card-bg), color-mix(in srgb, var(--lm-accent) 10%, var(--lm-card-bg)));
}

.upaper-live-radio .lm-radio-card.is-active .lm-radio-play {
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--lm-accent) 25%, transparent);
}

.upaper-live-radio .lm-radio-play {
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: var(--lm-accent);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
	flex-shrink: 0;
}

/* Card play buttons render a pure-CSS triangle via ::after rather than
   an inline SVG. Multiple SVG-rendering quirks (theme svg overrides,
   path fill cascade, browser cache mismatches) made the SVG approach
   unreliable in this surface; a CSS border-triangle has no such
   failure modes — it's the same mechanism CSS-tricks tooltips have
   used since 2010. The template still emits both SVGs (kept for
   downstream consumers), they're hidden here.
   Sizes: default 16px arrow inside a 48px button; compact 12px inside
   the smaller 40px button (~30% of the button — visually balanced). */
.upaper-live-radio .lm-radio-play .lm-radio-play-icon,
.upaper-live-radio .lm-radio-play .lm-radio-pause-icon {
	display: none !important;
}

.upaper-live-radio .lm-radio-play::after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent transparent transparent #fff;
	border-width: 10px 0 10px 16px;
	margin-left: 4px; /* optical centring — triangles read as right-heavy */
}

.upaper-live-radio .lm-radio-play:hover {
	transform: scale(1.08);
}

/* Card buttons stay as "play" iconography only — pause is owned by the
   hero. Hide the secondary pause SVG that the template still emits for
   shape compatibility. */
.upaper-live-radio .lm-radio-pause-icon { display: none; }

@keyframes lmSpin { to { transform: rotate(360deg); } }

.upaper-live-radio .lm-radio-favicon {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--lm-bg-soft);
	border: 1px solid var(--lm-border);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}

.upaper-live-radio .lm-radio-favicon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 4px;
}

.upaper-live-radio .lm-radio-favicon .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
	color: var(--lm-muted);
}

.upaper-live-radio .lm-radio-meta {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	/* The theme is RTL and propagates `text-align: right` from a parent
	   rule, so even with `direction: ltr` on the listing wrapper the names
	   end up flush to the right edge of the card. Force left here so the
	   name sits next to the favicon. */
	text-align: left;
	align-items: flex-start;
}

.upaper-live-radio .lm-radio-name {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--lm-text);
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	padding-right: 28px; /* leave room for the absolute-positioned home link */
	text-align: left;
}

.upaper-live-radio .lm-radio-tags {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}

.upaper-live-radio .lm-radio-tag {
	font-size: 9.5px;
	font-weight: 600;
	padding: 2px 7px;
	background: var(--lm-bg-soft);
	border: 1px solid var(--lm-border);
	color: var(--lm-muted);
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
	/* Cap individual pill width — radio-browser tag strings can include
	   the full station name (e.g. "RADIO PAK FILMI") which would otherwise
	   take a whole row. Ellipsize so the tag row stays compact. */
	max-width: 96px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.upaper-live-radio .lm-radio-specs {
	display: flex;
	gap: 10px;
	font-size: 11px;
	color: var(--lm-muted);
}

.upaper-live-radio .lm-radio-spec {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* Homepage link — pinned to the card's top-right corner instead of
   competing with the meta column for inline space. Subtle by default,
   gains the accent colour on hover so it's discoverable. */
.upaper-live-radio .lm-radio-home {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--lm-muted);
	text-decoration: none;
	border-radius: 6px;
	background: var(--lm-bg-soft);
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
	opacity: 0.7;
	z-index: 2;
}

.upaper-live-radio .lm-radio-card:hover .lm-radio-home {
	opacity: 1;
}

.upaper-live-radio .lm-radio-home:hover {
	background: var(--lm-accent);
	color: #fff;
	transform: scale(1.08);
}

.upaper-live-radio .lm-radio-home .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

/* Radio — compact style: smaller chrome (40px play, 36px favicon,
   tighter padding, single-line names) but the play arrow keeps the
   same 16px size as the default cards so the affordance reads at the
   same visual weight regardless of card style. */
.upaper-live-radio.lm-card-compact .lm-radio-card {
	grid-template-columns: 40px 36px 1fr;
	padding: 10px 14px;
}
/* Compact keeps the original 40px button (smaller chrome to match the
   tighter card density) but inherits the SAME 16px arrow size as the
   default cards — proportionally a touch larger inside the smaller
   button, which reads as a more prominent affordance without
   over-shrinking the chrome. */
.upaper-live-radio.lm-card-compact .lm-radio-play { width: 40px; height: 40px; }
.upaper-live-radio.lm-card-compact .lm-radio-favicon { width: 36px; height: 36px; border-radius: 8px; }
.upaper-live-radio.lm-card-compact .lm-radio-tags,
.upaper-live-radio.lm-card-compact .lm-radio-specs,
.upaper-live-radio.lm-card-compact .lm-radio-home { display: none; }
.upaper-live-radio.lm-card-compact .lm-radio-name {
	font-size: 14px;
	-webkit-line-clamp: 1;
	padding-right: 0;
}

/* Radio — list style: single dense column */
.upaper-live-radio.lm-card-list .lm-radio-grid {
	grid-template-columns: 1fr !important;
	gap: 6px;
}
.upaper-live-radio.lm-card-list .lm-radio-card {
	border-radius: 10px;
	padding: 10px 14px;
}

