/* Global settings */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html, body {
	font-family: 'Arial', sans-serif;
	background-color: #1a1a1a; /* Nero come sfondo */
	color: #f5f5f5; /* Testo chiaro */
	height: 100%;
	margin: 0;
	padding: 0;
	overflow-x: hidden; /* Disabilita lo scroll orizzontale */
}

body {
	display: flex;
	justify-content: center;
	padding: 20px; /* Padding per evitare sbordamenti */
}

.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 400px;
}

/* Rendi il contenitore del player e della playlist scrollabile verticalmente */
.player-container, .playlist-container {
	background-color: #262626;
	border-radius: 15px;
	padding: 20px;
	width: 100%;
	max-width: 400px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* Aggiungi un'ombra per dare un aspetto moderno */
}



.cover-image {
	width: 100%;
	max-width: 300px;
	border-radius: 10px;
	margin-bottom: 20px;
}

.podcast-title {
	font-size: 24px;
	margin-bottom: 20px;
	text-align: center;
	color: #f5f5f5;
}

/* Controls styling */
.controls {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin-bottom: 15px;
}

/* Allinea i pulsanti Play e Stop su una linea */
.control-buttons {
	display: flex;
	justify-content: space-between;
	width: 100%;
	max-width: 200px;
	margin-bottom: 15px;
}

.control-btn {
	background-color: #f5f5f5;
	border: none;
	padding: 10px 20px;
	border-radius: 30px;
	font-size: 16px;
	color: #1a1a1a;
	cursor: pointer;
	transition: background-color 0.3s;
	width: 45%; /* Assicura che i pulsanti occupino lo spazio orizzontale in modo uniforme */
}

.control-btn:hover {
	background-color: #ff3333; /* Rosso acceso al passaggio del mouse */
}

.progress-bar {
	width: 100%;
	margin-bottom: 10px;
}

/* Allinea il tempo corrente e la durata su una linea */
.time-info {
	display: flex;
	justify-content: space-between;
	width: 100%;
	font-size: 14px;
	color: #d3d3d3;
}

/* Playlist Styling */
.playlist-container {
	background-color: #333333;
	border-radius: 15px;
	padding: 20px;
	margin-top: 10px;
	width: 100%;
}

.playlist-container h3 {
	color: #f5f5f5;
	font-size: 20px;
	margin-bottom: 10px;
	text-align: center;
}

.playlist {
	list-style: none;
	padding: 0;
	max-height: 300px; /* Limita l'altezza della playlist */
	overflow-y: auto; /* Rendi la playlist scrollabile verticalmente */
}

.playlist li {
	background-color: #444;
	padding: 10px;
	margin-bottom: 10px;
	border-radius: 8px;
	cursor: pointer;
	color: #f5f5f5;
	transition: background-color 0.3s;
}

.playlist li:hover {
	background-color: #ff3333; /* Rosso acceso al passaggio del mouse */
}

/* Media Queries for Mobile */
@media (max-width: 600px) {
	.player-container, .playlist-container {
		max-width: 100%;
		padding: 15px;
	}

	.cover-image {
		max-width: 100%;
	}

	.controls {
		flex-direction: column;
	}

	.progress-bar {
		margin: 15px 0;
		width: 100%;
	}

	.control-btn {
		margin-bottom: 10px;
		width: 100%;
	}
}



.playlist-container{
	margin-bottom: 20px;
}