/* ============================================================
   MediaVault — Player (layout + specificità)
   I token condivisi sono in frontend-tokens.css.
   ============================================================ */

.mv-player-wrapper {
	/* Variabili player-specifiche */
	--mv-thumb-w: 96px;
	--mv-thumb-ph: rgba(255, 255, 255, 0.06);
	--mv-playlist-width: 35%;
	--mv-pw: 35;

	display: grid;
	grid-template-columns: minmax(0, calc(100% - var(--mv-playlist-width))) minmax(0, var(--mv-playlist-width));
	gap: var(--mv-gap);
	padding: var(--mv-pad);
	background: var(--mv-bg);
	border-radius: var(--mv-radius);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28), var(--mv-ring);
	font-family: var(--mv-font);
}

/* ---------------- Tema chiaro ---------------- */
/* Il container mantiene la propria identità scura anche sul tema chiaro
   (stile YouTube: player nero su pagina bianca). Cambia solo l'ombra,
   più morbida per non pesare sulla pagina chiara. */

body:not(.options_dark_skin) .mv-player-wrapper {
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16), var(--mv-ring);
}

/* ---------------- Player ---------------- */

.mv-player-wrapper lite-youtube {
	width: 100%;
	max-width: none;
	border-radius: var(--mv-radius-sm);
	overflow: hidden;
	transform: translateZ(0);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Niente gradiente/titolo YouTube sul poster (fonte di percezione "si oscura") */
.mv-player-wrapper lite-youtube::before {
	content: none;
}

/* Il play button è un <button> a tutta area: il tema forza un bg opaco
   su button:hover scurendo il poster. Lo teniamo trasparente. */
.mv-player-wrapper lite-youtube > .lty-playbtn,
.mv-player-wrapper lite-youtube > .lyt-playbtn {
	background-color: transparent !important;
}

/* Guardia anti-scurimento: vale solo PRIMA dell'attivazione.
   Dopo il click lite-youtube nasconde bottone/gradiente via opacity:0
   e non deve essere sovrascritto. */
.mv-player-wrapper lite-youtube:not(.lyt-activated):not(.lty-activated) {
	filter: none !important;
	opacity: 1 !important;
}

.mv-player-wrapper lite-youtube > iframe {
	border-radius: var(--mv-radius-sm);
}

/* Modalità stack: playlist sotto il player a tutta larghezza */
.mv-player-wrapper.mv-player-stack {
	grid-template-columns: minmax(0, 1fr);
}

.mv-player-wrapper.mv-player-stack .mv-playlist-container {
	aspect-ratio: auto;
	max-height: 405px;
}

/* Nessuna playlist: collassa a colonna singola */
.mv-player-wrapper.mv-player-no-playlist {
	grid-template-columns: 1fr !important;
}

/* ---------------- Playlist ---------------- */

/* Altezza = altezza del player: rapporto (pw/(100-pw))*(16/9).
   Richiede --mv-pw (numero senza %) impostato dal PHP. */
.mv-playlist-container {
	position: relative;
	min-width: 0;
	min-height: 0;
	aspect-ratio: calc(var(--mv-pw) / (100 - var(--mv-pw)) * 16 / 9);
	max-height: 520px;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-gutter: stable;
	padding-right: 2px;

	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
	transition: scrollbar-color 0.25s var(--mv-ease);
}

.mv-playlist-container:hover {
	scrollbar-color: var(--mv-accent) transparent;
}

.mv-playlist-container::-webkit-scrollbar {
	width: 4px;
}

.mv-playlist-container::-webkit-scrollbar-track {
	background: transparent;
	border-radius: 50px;
}

.mv-playlist-container::-webkit-scrollbar-thumb {
	background: transparent;
	border-radius: 50px;
}

.mv-playlist-container:hover::-webkit-scrollbar-thumb {
	background: var(--mv-accent);
}

.mv-playlist {
	list-style: none;
	margin: 0;
	padding: 2px;
	display: grid;
	gap: 2px;
	align-content: start;
}

.mv-playlist-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 6px 5px 10px;
	border-radius: var(--mv-radius-sm);
	cursor: pointer;
	color: var(--mv-text);
	isolation: isolate;
	transition: background 0.15s ease-out;
}

/* Barra accent: vive nella gola di padding a sinistra dell'item,
   staccata dalla thumbnail. */
.mv-playlist-item::before {
	content: "";
	position: absolute;
	left: 1px;
	top: 24%;
	bottom: 24%;
	width: 3px;
	border-radius: 3px;
	background: var(--mv-accent-bright);
	transform: scaleY(0);
	transition: transform 0.22s var(--mv-ease);
	z-index: 1;
}

.mv-playlist-item:hover {
	background: var(--mv-hover-bg);
}

.mv-playlist-item.active {
	background: var(--mv-active-bg);
}

.mv-playlist-item.active::before {
	transform: scaleY(1);
}

.mv-playlist-item:focus-visible {
	outline: 2px solid var(--mv-accent-bright);
	outline-offset: -2px;
}

/* Thumbnail */

.mv-playlist-thumb {
	width: var(--mv-thumb-w);
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
	height: auto;
	border-radius: 6px;
	background: var(--mv-thumb-ph);
	flex-shrink: 0;
	transition: filter 0.15s ease-out, box-shadow 0.15s ease-out;
}

.mv-playlist-item:hover .mv-playlist-thumb {
	filter: brightness(1.08);
}

.mv-playlist-item.active .mv-playlist-thumb {
	box-shadow: 0 0 0 2px var(--mv-accent);
}

/* Testi */

.mv-playlist-text {
	min-width: 0;
	justify-self: start;
}

.mv-playlist-item h3 {
	font-family: inherit;
	font-size: 12px !important;
	line-height: 1.3 !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--mv-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 0.15s ease-out;
}

.mv-playlist-item p {
	font-size: 11px !important;
	line-height: 1.35 !important;
	margin: 2px 0 0;
	color: var(--mv-muted);
	transition: color 0.15s ease-out;
}

/* Colori testo blindati: il tema applica i suoi colori heading anche qui */
.mv-player-wrapper .mv-playlist-item h3 {
	color: var(--mv-text) !important;
}

.mv-player-wrapper .mv-playlist-item p {
	color: var(--mv-muted) !important;
}

.mv-player-wrapper .mv-playlist-item.active h3 {
	color: #FFFFFF !important;
}

@media (prefers-reduced-motion: reduce) {
	.mv-playlist-item,
	.mv-playlist-thumb,
	.mv-playlist-item h3,
	.mv-playlist-item::before {
		transition: none !important;
		animation: none !important;
	}
}

/* ---------------- Mobile ---------------- */

@media screen and (max-width: 767px) {
	.mv-player-wrapper {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		padding-top: var(--mv-pad);
		border-radius: 12px;
	}

	.mv-playlist-container {
		aspect-ratio: auto;
		max-height: none;
		margin: 0;
		overflow-y: hidden;
		overflow-x: auto;
		scrollbar-width: none;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
	}

	.mv-playlist-container::-webkit-scrollbar {
		display: none;
	}

	.mv-playlist {
		grid-auto-flow: column dense;
		gap: 8px;
		padding-bottom: 4px;
	}

	.mv-playlist-item {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		width: 190px;
		scroll-snap-align: start;
		padding: 8px;
		border-radius: 12px;
	}

	.mv-playlist-item::before {
		left: 8px;
		right: 8px;
		top: -2px;
		bottom: auto;
		width: auto;
		height: 3px;
		transform: scaleX(0);
	}

	.mv-playlist-item.active::before {
		transform: scaleX(1);
	}

	.mv-playlist-thumb {
		width: 100%;
		max-width: none;
	}

	.mv-playlist-item h3 {
		font-size: 11px !important;
	}

	.mv-playlist-item p {
		font-size: 10px !important;
	}
}