body {
	font-family: 'Inter', sans-serif;
	background-color: #f0f2f5;
}
.podcast-card {
	border: 1px solid transparent;
	transition: all 0.35s ease-in-out;
	display: flex;
	flex-direction: column;
}
.podcast-card:hover {
	transform: translateY(-12px) rotate(-2deg);
	box-shadow: 0 25px 30px -10px rgba(0, 0, 0, 0.2);
	border-color: #6366f1;
}
.active-lang {
	background-image: linear-gradient(to right, #6366f1, #818cf8);
	color: white;
	box-shadow: 0 4px 15px -5px rgba(99, 102, 241, 0.5);
}
.lang-btn {
	transition: all 0.3s ease;
}
.play-btn, .summarize-btn {
	background-size: 200% auto;
	transition: all 0.4s ease;
}
.play-btn {
	 background-image: linear-gradient(to right, #4f46e5, #6366f1, #818cf8);
}
.play-btn:hover {
	background-position: right center;
	transform: scale(1.05);
}
.summarize-btn {
	background-color: #f0abfc;
	color: #701a75;
}
.summarize-btn:hover {
	background-color: #e879f9;
	transform: scale(1.05);
}

/* Player Styles */
#player-container {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
	transform: translateY(110%);
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#player-container.active {
	transform: translateY(0);
}
/* Custom progress bar styling */
input[type=range] {
	-webkit-appearance: none;
	width: 100%;
	background: transparent;
}
input[type=range]:focus {
	outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 6px;
	cursor: pointer;
	background: #e2e8f0;
	border-radius: 9999px;
}
input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 16px;
	width: 16px;
	border-radius: 50%;
	background: #4f46e5;
	cursor: pointer;
	margin-top: -5px; /* Center the thumb on the track */
	transition: background 0.2s ease;
}
input[type=range]:hover::-webkit-slider-thumb {
	background: #3730a3;
}

/* Summary Modal Styles */
#summary-modal {
	transition: opacity 0.3s ease;
}
.loader {
	border: 4px solid #f3f3f3;
	border-top: 4px solid #6366f1;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	animation: spin 1s linear infinite;
}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

#mobile-menu { display: none; }

/* Dropdown menu styles */
.dropdown {
	display: none;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.group:hover .dropdown {
	display: block;
	opacity: 1;
	transform: translateY(0);
	margin-top: -0px;
}