:root {
	--player-background: transparent !important; /* <<< QUESTA RIGA RENDE TRASPARENTE LO SFONDO DEL PLAYER */

	--player-text-primary: #e0e0e0; /* Grigio chiaro per testi principali e artista */
	--player-text-secondary: #dfdfdf; /* Grigio/lilla per testi secondari */
	--player-accent-main: #00948d; /* Colore AltroStile principale */
	--player-accent-light: #00afaa; /* Tonalità più chiara per il bordo del pulsante */
	--player-controls-background: #003835; /* Verde molto scuro */

	/* === MODIFICA RICHIESTA: Larghezza Player === */
	--player-content-width-vertical: 400px; /* IMPOSTATA A 400px COME RICHIESTO */

	--player-padding: 15px; /* Padding generale del player */
	--border-radius: 8px;
	--play-button-size-vertical: 75px;

	/* === ICONA VOLUME: Usiamo la tua dimensione e prepariamo per JS === */
	--icon-volume-size: 22px; /* Basato sul tuo frammento dove l'icona era 22px, puoi ridurlo se necessario */

	--volume-slider-track-color: #ffffff; /* Bianco per traccia slider */
	--volume-slider-thumb-color: var(--player-accent-main);
	--album-art-padding-side: 13%; /* Padding laterale per copertina */
	--album-art-padding-top: 13%;    /* Padding superiore per copertina */
	--footer-logo-max-height: 35px; /* Mantenuto dal tuo codice */
}

body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background-color: transparent !important; /* <<< MODIFICA CRUCIALE: FONDO TRASPARENTE */
	margin: 0;
	padding: 0; /* <<< MODIFICA CRUCIALE: Rimuovi padding per evitare cornici */
	box-sizing: border-box;
	/* Se il player è l'unico contenuto e deve riempire l'iframe,
	   display:flex qui potrebbe non essere necessario se l'iframe si adatta al player.
	   Puoi provare a commentare le 3 righe seguenti se il centraggio non è un problema
	   all'interno della pagina index.html stessa. */
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}

#custom-azuracast-player.layout-vertical {
	background-color: var(--player-background); /* Deve usare la variabile trasparente */
	/* ...altri stili del player... */
	/* Rimuovi o commenta box-shadow se non la vuoi su sfondo trasparente */
	/* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); */
}

/* Se anche la sezione dei controlli deve essere trasparente, modifica qui: */
#custom-azuracast-player.layout-vertical #player-controls {
	background-color: var(--player-controls-background); /* Attualmente verde scuro */
	/* Per trasparenza: */
	/* background-color: transparent; */
	/* Oppure semi-trasparenza: */
	/* background-color: rgba(0, 56, 53, 0.7); */ /* Verde scuro al 70% di opacità */
	/* ...altri stili dei controlli... */
}
.player-album-art-container {
	width: 100%;
	padding: var(--album-art-padding-top) var(--album-art-padding-side) 0 var(--album-art-padding-side);
	box-sizing: border-box;
	background-color: transparent;
}

#custom-azuracast-player.layout-vertical #player-album-art {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	border-radius: calc(var(--border-radius) / 3.5); /* Come nel tuo codice */
}

#custom-azuracast-player.layout-vertical #player-track-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: calc(100% - (2 * var(--album-art-padding-side)));
	margin: 0 auto;
	gap: 8px;
}

#custom-azuracast-player.layout-vertical #player-station-logo {
	width: 100%;
	max-height: 60px;
	height: auto;
	object-fit: contain;
}

#custom-azuracast-player.layout-vertical #player-track-title,
#custom-azuracast-player.layout-vertical #player-track-artist {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
}
#custom-azuracast-player.layout-vertical #player-track-title {
	font-size: 1.1em;
	font-weight: bold;
	color: var(--player-text-primary);
}
#custom-azuracast-player.layout-vertical #player-track-artist {
	font-size: 0.9em;
	color: var(--player-text-primary);
}

#custom-azuracast-player.layout-vertical #player-controls {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	background-color: var(--player-controls-background);
	padding: var(--player-padding);
	border-radius: var(--border-radius);
	width: 100%;
	box-sizing: border-box;
	margin-top: 10px;
}

#custom-azuracast-player.layout-vertical #player-play-pause-btn {
	width: var(--play-button-size-vertical);
	height: var(--play-button-size-vertical);
	background-color: var(--player-accent-main);
	color: white;
	border: 5px solid var(--player-accent-light);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
	flex-shrink: 0;
	box-sizing: border-box;
}
#custom-azuracast-player.layout-vertical #player-play-pause-btn:hover {
	background-color: var(--player-accent-light);
	border-color: var(--player-accent-main);
}
#custom-azuracast-player.layout-vertical #player-play-pause-btn svg {
	width: calc(var(--play-button-size-vertical) * 0.45);
	height: calc(var(--play-button-size-vertical) * 0.45);
	fill: white;
}
	
	#custom-azuracast-player.layout-vertical #player-controls .volume-control-container {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0;
		width: 90%;
		max-width: 260px;
	}
	
	#custom-azuracast-player.layout-vertical #player-controls .volume-control-container .icon-volume {
		color: var(--player-text-secondary);
		width: var(--icon-volume-size) !important;
		height: var(--icon-volume-size) !important;
		min-width: var(--icon-volume-size);
		min-height: var(--icon-volume-size);
		flex-shrink: 0;
		margin-right: 10px;
		cursor: pointer;
		fill: currentColor;
	}
	
	#custom-azuracast-player.layout-vertical #player-volume-slider {
		-webkit-appearance: none;
		appearance: none;
		flex-grow: 1;
		height: 8px;
		background: var(--volume-slider-track-color);
		border-radius: 4px;
		cursor: pointer;
		outline: none;
	}
#custom-azuracast-player.layout-vertical #player-volume-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 26px; /* Tua modifica */
	height: 26px; /* Tua modifica */
	background: var(--volume-slider-thumb-color);
	border-radius: 50%;
	cursor: pointer;
	border: 2px solid var(--player-background);
}
#custom-azuracast-player.layout-vertical #player-volume-slider::-moz-range-thumb {
	width: 16px; /* Mantenuto come nel tuo codice, puoi cambiare a 26px se preferisci */
	height: 16px;
	background: var(--volume-slider-thumb-color);
	border-radius: 50%;
	cursor: pointer;
	border: 2px solid var(--player-background);
}
#custom-azuracast-player.layout-vertical #player-volume-slider::-moz-range-track {
	width: 100%;
	height: 8px; /* Mantenuto, puoi cambiare a 5px se preferisci */
	background: var(--volume-slider-track-color);
	border-radius: 4px; /* Mantenuto, puoi cambiare a 6px se preferisci */
	cursor: pointer;
}
/* === FINE SEZIONE CONTROLLO VOLUME === */


/* Footer per Layout Verticale - USO I SELETTORI CORRETTI CHE HAI IDENTIFICATO */
#custom-azuracast-player.layout-vertical #player-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding-top: var(--player-padding);
	margin-top: auto;
	width: 100%;
	border-top: 1px solid var(--player-controls-background);
}

/* Selettore CORRETTO come da tua analisi:.footer-text è figlio di #player-footer */
#custom-azuracast-player.layout-vertical #player-footer .footer-text {
	font-size: 0.75em;
	color: var(--player-text-secondary);
	width: calc(var(--player-content-width-vertical) - (var(--player-content-width-vertical) * var(--album-art-padding-side) * 2) - 30px);
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--player-accent-main);
	box-sizing: border-box;
}

/* Selettore CORRETTO come da tua analisi:.footer-logos-container è figlio di #player-footer */
#custom-azuracast-player.layout-vertical #player-footer .footer-logos-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: calc(var(--player-content-width-vertical) - (var(--player-content-width-vertical) * var(--album-art-padding-side) * 2) - 30px);
	margin: 0 auto;
}

/* Selettore CORRETTO come da tua analisi:.footer-logo-link è figlio di.footer-logos-container */
#custom-azuracast-player.layout-vertical #player-footer .footer-logos-container .footer-logo-link {
	display: block;
	width: 100%;
	line-height: 0;
}

/* Selettore CORRETTO come da tua analisi:.footer-logo è figlio di.footer-logo-link */
#custom-azuracast-player.layout-vertical #player-footer .footer-logos-container .footer-logo-link .footer-logo {
	display: block;
	width: 100%;
	height: auto;
	max-height: var(--footer-logo-max-height); /* Usa la variabile da :root (35px) */
	object-fit: contain;
}