.produzione .titolo-riga
{
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: nowrap;
}

/* i titoli lunghi non devono spingere il pulsante fuori dal
   contenitore (i flex item non si restringono sotto la larghezza
   del proprio contenuto finche' min-width resta 'auto') */
.produzione .titolo-riga .titolo-produzione
{
	min-width: 0;
	margin: 0;
}

/* selettore volutamente specifico: sul sito ci sono gia' regole
   generiche sui pulsanti dentro .produzione (es. il play sulla
   copertina, visibile solo in hover) che altrimenti nasconderebbero
   anche questo */
.produzione .titolo-riga .btn-condividi
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: static;
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	background: none;
	color: inherit;
	opacity: .6;
	visibility: visible;
	transform: none;
	cursor: pointer;
	flex-shrink: 0;
}

.produzione .titolo-riga .btn-condividi:hover
{
	opacity: 1;
}

.produzione .titolo-riga .btn-condividi svg
{
	width: 18px;
	height: 18px;
	display: block;
}

.modal-condividi
{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, .55);
	z-index: 10000;
	align-items: center;
	justify-content: center;
	padding: 30px;
	box-sizing: border-box;
}

.modal-condividi.is-open
{
	display: flex;
}

.modal-condividi-box
{
	position: relative;
	width: min(420px, 100%);
	max-height: 90vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 16px;
	padding: 30px;
	box-sizing: border-box;
}

.modal-condividi-close
{
	position: absolute;
	top: 14px;
	right: 14px;
	width: 32px;
	height: 32px;
	border: none;
	background: none;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: inherit;
}

.modal-condividi-titolo
{
	font-weight: 700;
	font-size: 18px;
	padding-right: 32px;
	margin-bottom: 24px;
}

.modal-condividi-azioni
{
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.modal-condividi-btn
{
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 14px 16px;
	border: 1px solid #e2e2e2;
	border-radius: 10px;
	background: none;
	color: inherit;
	text-decoration: none;
	font: inherit;
	font-size: 15px;
	text-align: left;
	cursor: pointer;
	box-sizing: border-box;
}

.modal-condividi-btn svg
{
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.modal-condividi-facebook svg { color: #1877F2; }
.modal-condividi-whatsapp svg { color: #25D366; }

html.gg-modal-lock,
body.gg-modal-lock
{
	overflow: hidden;
}

@media (max-width: 768px)
{
	.modal-condividi
	{
		padding: 0;
	}

	.modal-condividi-box
	{
		width: 100vw;
		height: 100vh;
		max-height: 100vh;
		border-radius: 0;
	}
}


/* ---------- BARRA STICKY: filtri + controller */

#filtri-wrapper
{
	display: flex;
	align-items: stretch;
	gap: 12px;
}

/* order: il JS, chiudendo il pannello, rimette #filtri come ultimo figlio
   di #filtri-wrapper; con order restano comunque filtri-sx / controller-dx */
#filtri { order: 1; flex: 0 0 clamp(220px, 24%, 320px); min-width: 0; }

/* nella barra il riquadro filtri si allunga all'altezza del controller:
   l'header lo riempie, cosi' "Filtri (vedi)" resta centrato in verticale */
#filtri-wrapper > #filtri #filtri-header { flex: 1 1 auto; }

/* pannello filtri aperto: l'header del sito (su mobile ha uno z-index
   enorme) deve finire sotto al pannello a schermo intero */
html.gg-filtri-lock #header, body.gg-filtri-lock #header { z-index: 0; }


/* ---------- RIQUADRO PLAYLIST (contesto: nome + esci) */

.playlist-contesto { display:inline-flex; align-items:center; gap:12px; max-width:100%; margin-top:6px; padding:8px 10px 8px 18px; border-radius:999px; background:#2a2a2a; color:#fff !important; font-size:48px !important; box-sizing:border-box; }
.playlist-contesto-label { flex-shrink:0; font-size:.5em; text-transform:uppercase; letter-spacing:.08em; opacity:.7; }
.playlist-contesto-nome { min-width:0; font-weight:700; overflow-wrap:anywhere; }
.playlist-contesto-esci { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:1.1em; height:1.1em; border-radius:50%; background:rgba(255,255,255,.12); color:#f0c020 !important; text-decoration:none; line-height:1; }
.playlist-contesto-esci:hover { background:rgba(255,255,255,.22); color:#f0c020 !important; }
@media (max-width: 768px)
{
	.playlist-contesto {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"label esci"
			"nome  nome";
		width: 100%;
		max-width: 100%;
		gap: 4px 12px;
		padding: 12px 16px;
		border-radius: 18px;
		font-size: 32px !important;
	}
	.playlist-contesto-label {
		grid-area: label;
		display: block;
	}
	.playlist-contesto-nome {
		grid-area: nome;
		line-height: 1.25;
	}
	.playlist-contesto-esci {
		grid-area: esci;
		justify-self: end;
		align-self: start;
	}
}


/* ---------- CONTROLLER */

.gg-controller { order:2; flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:20px; background:#2a2a2a; color:#fff; box-shadow:0px 0px 10px rgba(0,0,0,0.30); box-sizing:border-box; }

/* desktop: i tasti diventano figli diretti del controller (tutti in fila),
   il brano in ascolto prende lo spazio centrale, condividi va in fondo */
.gg-ctrl-tasti { display:contents; }
.gg-ctrl-prev, .gg-ctrl-play, .gg-ctrl-next, .gg-ctrl-casuale { order:1; }
.gg-ctrl-ora { order:2; }
.gg-ctrl-condividi { order:3; }

.gg-ctrl-btn { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:none; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; cursor:pointer; transition:background-color .2s ease, color .2s ease, transform .15s ease, opacity .2s ease; }
.gg-ctrl-btn svg { display:block; width:20px; height:20px; }
.gg-ctrl-btn:hover:not(:disabled) { background:rgba(255,255,255,.22); }
.gg-ctrl-btn:active:not(:disabled) { transform:scale(.94); }
.gg-ctrl-btn:disabled { opacity:.35; cursor:default; }

.gg-ctrl-btn.gg-ctrl-play { width:50px; height:50px; background:#f0c020; color:#222; }
.gg-ctrl-btn.gg-ctrl-play:hover:not(:disabled) { background:#f5cd3c; }
.gg-ctrl-play svg { width:24px; height:24px; }
.gg-ctrl-ico-play, .gg-ctrl-ico-pausa { display:flex; }
.gg-ctrl-ico-pausa { display:none; }
.gg-controller.is-playing .gg-ctrl-ico-play { display:none; }
.gg-controller.is-playing .gg-ctrl-ico-pausa { display:flex; }
.gg-controller.is-loading .gg-ctrl-play { animation:ggCtrlPulse 1s ease-in-out infinite; }

/* casuale: interruttore, icona gialla quando acceso */
.gg-ctrl-casuale { margin-left:6px; }
.gg-ctrl-casuale.is-on { color:#f0c020; }

/* produzione + traccia correnti: sempre due righe ("-" se non c'e' nulla).
   width:0 + flex:1: non allargano la barra, prendono lo spazio che resta
   e troncano con i puntini */
.gg-ctrl-ora { flex:1 1 0; width:0; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:2px; margin:0 6px; padding:0 0 0 12px; border-left:1px solid rgba(255,255,255,.12); }
.gg-ctrl-produzione, .gg-ctrl-traccia { display:block; max-width:100%; padding:1px 0; border:none; background:none; color:inherit; font:inherit; line-height:1.3; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
.gg-ctrl-produzione { font-size:15px; font-weight:400; }
.gg-ctrl-traccia { font-size:17px; font-weight:700; color:#f0c020; }
.gg-ctrl-produzione:disabled, .gg-ctrl-traccia:disabled { cursor:default; opacity:.5; }
.gg-ctrl-produzione:hover:not(:disabled), .gg-ctrl-traccia:hover:not(:disabled) { text-decoration:underline; text-underline-offset:3px; }

/* vai alla produzione / alla traccia: lampeggio di evidenza */
.produzione.gg-evidenzia { animation:ggEvidenzia 1.8s ease-out; }
.playlist-track.gg-evidenzia { animation:ggEvidenziaRiga 1.8s ease-out; }

@keyframes ggCtrlPulse { 0%, 100% { opacity:1; } 50% { opacity:.55; } }
@keyframes ggEvidenziaRiga
{
	0%   { box-shadow:inset 0 0 0 0 rgba(42,42,42,0); }
	15%  { box-shadow:inset 0 0 0 2px #2a2a2a; }
	65%  { box-shadow:inset 0 0 0 2px #2a2a2a; }
	100% { box-shadow:inset 0 0 0 0 rgba(42,42,42,0); }
}
@keyframes ggEvidenzia
{
	0%   { box-shadow:0 0 0 0 rgba(42,42,42,0), 0 0 10px rgba(0,0,0,.30); }
	15%  { box-shadow:0 0 0 6px #2a2a2a, 0 0 10px rgba(0,0,0,.30); }
	65%  { box-shadow:0 0 0 6px #2a2a2a, 0 0 10px rgba(0,0,0,.30); }
	100% { box-shadow:0 0 0 0 rgba(42,42,42,0), 0 0 10px rgba(0,0,0,.30); }
}

@media (prefers-reduced-motion: reduce)
{
	.gg-controller.is-loading .gg-ctrl-play, .produzione.gg-evidenzia, .playlist-track.gg-evidenzia { animation:none; }
}

@media (max-width: 768px)
{
	/* una sola riga: filtri compatti (icona + contatore) a sinistra, controller a destra */
	#filtri-wrapper { flex-wrap:nowrap; gap:8px; }

	/* compatto SOLO finche' il pannello sta nella barra: aperto, #filtri viene
	   spostato su <body> e torna al layout normale a schermo intero */
	#filtri-wrapper > #filtri { flex:0 0 56px; border-radius:16px; }
	#filtri-wrapper > #filtri #filtri-header { position:relative; flex:1 1 auto; min-height:52px; padding:0; }
	#filtri-wrapper > #filtri #filtri-header-title { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:0; }
	#filtri-wrapper > #filtri #filtri-header-title::before { content:''; width:24px; height:24px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/%3E%3C/svg%3E") center / contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/%3E%3C/svg%3E") center / contain no-repeat; }
	/* il contatore resta come badge informativo (il reset si fa dal pannello) */
	#filtri-wrapper > #filtri #filtri-header-reset { position:absolute; top:5px; right:5px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; justify-content:center; font-size:11px; line-height:18px; pointer-events:none; box-sizing:border-box; }
	#filtri-wrapper > #filtri .filtri-header-reset-icon { display:none; }

	.gg-controller { flex-wrap:wrap; gap:8px; padding:6px; border-radius:16px; }
	.gg-ctrl-tasti { display:flex; flex:1 1 100%; gap:6px; }
	.gg-ctrl-btn { flex:1 1 0; width:auto; min-width:0; height:44px; border-radius:12px; }
	.gg-ctrl-btn.gg-ctrl-play { flex:1.3 1 0; width:auto; height:44px; }
	.gg-ctrl-casuale { margin-left:0; }
	.gg-ctrl-ora { flex:1 1 100%; width:auto; margin:0; padding:0 6px 4px; border-left:none; }
}