.btn-success {
    color: #fff;
    background-color: #a72828;
    border-color: #28a745;
}


@layer demo,countdown;

@layer countdown {
	.countdown {
		width: fit-content;
		display: inline-grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		gap: 1rem;
	}

	.countdown>.part {
		display: grid;
		gap: .5rem;
	}

	.countdown>.part>.number {
		aspect-ratio: 1;
		display: grid;
		place-items: center;
		border-radius: 50%;
		border: 1px solid;
		font-size: 1.5rem;
		position: relative;
	}

	.countdown>.part.days {
		--num: 365;
	}

	.countdown>.part.hours {
		--num: 24;
	}

	.countdown>.part:where(.minutes,.seconds) {
		--num: 60;
	}

	.countdown>.part>.number::after {
		content: "";
		position: absolute;
		inset: calc(var(--border-size) * -0.5);
		border-radius: inherit;
		--degree: calc(360deg / var(--num) * (var(--num) - var(--value,0)));
		background-image: conic-gradient(var(--accent) var(--degree),transparent calc(var(--degree) + .1deg));
		--border-size: 4px;
		--mask-image: radial-gradient(100% 100%, transparent calc(50% - var(--border-size)), black calc(50% - var(--border-size) + 1px));
		-webkit-mask-image: var(--mask-image);
		mask-image: var(--mask-image);
	}

	.countdown>.part>.text {
		text-align: center;
		opacity: .75;
	}
}

@layer demo {
	* {
		box-sizing: border-box;
	}

	body {
		font-family: system-ui,sans-serif;
		text-align: center;
	}

	h2 {
		margin-top: 4rem;
	}
}

/* testo animato */
.animated {
	font-family: 'Charm', cursive;
	margin: -30px 0px 15px;
	padding: 0;
	font-size: 4rem;
	background: url('https://harmonydrop.com/themes/harmonydrop/img/linea-verde.png') no-repeat;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	animation: moveBg 90s linear infinite;
	-webkit-animation: moveBg 90s linear infinite;
}

.animated2 {
	font-family: 'Charm', cursive;
	margin: 0px 0px 15px;
	font-size: 4rem;
	background: url('https://harmonydrop.com/themes/harmonydrop/img/linea-gialla.png') no-repeat;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	animation: moveBg 90s linear infinite;
	-webkit-animation: moveBg 90s linear infinite;
}

        /* Text Background Animation */
@keyframes moveBg {
	0% {
		background-position: 0% 30%;
	}

	100% {
		background-position: 100% 50%;
	}
}

/* Pro Expiry Status Box Styles */
.pro-expiry-status-box {padding: 12px 18px;margin-bottom: 20px;border-radius: 6px;border-left: 5px solid;background: rgba(0, 0, 0, 0.03);box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);transition: all 0.3s ease;}
.pro-expiry-status-box:hover {box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);transform: translateX(2px);}
.pro-expiry-status-box strong {color: #333;font-weight: 600;margin-right: 8px;}
.pro-expiry-active {border-left-color: #28a745;background: rgba(40, 167, 69, 0.08);}
.pro-expiry-warning {border-left-color: #ffc107;background: rgba(255, 193, 7, 0.12);}
.pro-expiry-expired {border-left-color: #dc3545;background: rgba(220, 53, 69, 0.12);}
.pro-expiry-lifetime {border-left-color: #17a2b8;background: rgba(23, 162, 184, 0.08);}
body.night-mode .pro-expiry-status-box, .night-mode .pro-expiry-status-box {background: rgba(255, 255, 255, 0.05);box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);}
body.night-mode .pro-expiry-status-box:hover, .night-mode .pro-expiry-status-box:hover {box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);}
body.night-mode .pro-expiry-status-box strong, .night-mode .pro-expiry-status-box strong {color: #f8f9fa;}
body.night-mode .pro-expiry-active, .night-mode .pro-expiry-active {border-left-color: #4caf50;background: rgba(76, 175, 80, 0.15);}
body.night-mode .pro-expiry-warning, .night-mode .pro-expiry-warning {border-left-color: #ffb300;background: rgba(255, 179, 0, 0.18);}
body.night-mode .pro-expiry-expired, .night-mode .pro-expiry-expired {border-left-color: #f44336;background: rgba(244, 67, 54, 0.18);}
body.night-mode .pro-expiry-lifetime, .night-mode .pro-expiry-lifetime {border-left-color: #00bcd4;background: rgba(0, 188, 212, 0.15);}
@media (max-width: 768px) {.pro-expiry-status-box {padding: 10px 14px;font-size: 14px;} .pro-expiry-status-box strong {display: block;margin-bottom: 4px;}}

/* Subscription Page - Progress Wrapper */
.subscription-progress-wrapper {margin: 20px 0;}

/* === MODAL FIX: solo la registrazione resta laterale, tutti gli altri modal tornano centrati === */
.modal.show:not(.modal-register):not(#track_users_modal) {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 1rem !important;
	overflow-y: auto !important;
}
.modal.show:not(.modal-register):not(#track_users_modal) .modal-dialog {
	position: relative !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	transform: none !important;
	margin: 0 auto !important;
	max-height: calc(100vh - 2rem) !important;
	overflow: visible !important;
	z-index: 1060 !important;
	opacity: 1 !important;
	visibility: visible !important;
}
/* Share/embed modal: forza larghezza 800px nel flex container */
#share_music_modal .modal-dialog {
	width: min(800px, calc(100vw - 2rem)) !important;
	max-width: min(800px, calc(100vw - 2rem)) !important;
}
.modal.show:not(.modal-register):not(#track_users_modal) .modal-content {
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
}
.modal.show.modal-register .modal-dialog {
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	left: auto !important;
	margin: 0 !important;
	z-index: 1060 !important;
}
@media (max-width: 565px) {
	.modal.show:not(.modal-register):not(#track_users_modal) {
		padding: 0.75rem !important;
	}
	.modal.show:not(.modal-register):not(#track_users_modal) .modal-dialog {
		max-width: calc(100vw - 1.5rem) !important;
		max-height: calc(100vh - 1.5rem) !important;
	}
	.modal.show:not(.modal-register):not(#track_users_modal) .modal-content {
		max-height: calc(100vh - 1.5rem);
	}
}

/* ── Premium Song Dropdown Menu ── */
.opts_song .dropdown-menu,
.harmony-rk7ym5 .dropdown-menu,
.recommended-list .dropdown-menu,
.list-recommended .dropdown-menu,
.s_lsongs_child .dropdown-menu,
.dropdown-menu-right {
	background: rgba(10, 12, 18, 0.97) !important;
	backdrop-filter: blur(16px) !important;
	-webkit-backdrop-filter: blur(16px) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 12px !important;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5) !important;
	padding: 6px 0 !important;
	width: 220px !important; /* Locked width footprint to prevent widening */
	min-width: 220px !important;
	max-width: 220px !important;
	overflow: hidden !important;
}

.opts_song .dropdown-menu ul li a,
.harmony-rk7ym5 .dropdown-menu ul li a,
.recommended-list .dropdown-menu ul li a,
.list-recommended .dropdown-menu ul li a,
.s_lsongs_child .dropdown-menu ul li a,
.dropdown-menu-right ul li a,
.dropdown-menu-right a {
	display: block !important;
	color: rgba(255, 255, 255, 0.85) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	padding: 10px 16px !important;
	text-decoration: none !important;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
	border-radius: 8px !important;
	margin: 2px 8px !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
}

.opts_song .dropdown-menu ul li a:hover,
.harmony-rk7ym5 .dropdown-menu ul li a:hover,
.recommended-list .dropdown-menu ul li a:hover,
.list-recommended .dropdown-menu ul li a:hover,
.s_lsongs_child .dropdown-menu ul li a:hover,
.dropdown-menu-right ul li a:hover,
.dropdown-menu-right a:hover {
	background: rgba(0, 180, 255, 0.12) !important;
	color: #00b4ff !important;
	padding-left: 22px !important; /* Slide content slightly right */
	padding-right: 10px !important; /* Decrease right padding to keep total box width exactly constant */
}

/* Highlight delete actions in red */
.dropdown-menu a[onclick*="RemoveAlbumSong"],
.dropdown-menu a[onclick*="delete-song"],
.dropdown-menu a[onclick*="DeleteSong"],
.dropdown-menu a[onclick*="openAdminDeleteSongModal"],
.dropdown-menu a[data-target="#delete-song"] {
	color: #ff4a4a !important;
}

.dropdown-menu a[onclick*="RemoveAlbumSong"]:hover,
.dropdown-menu a[onclick*="delete-song"]:hover,
.dropdown-menu a[onclick*="DeleteSong"]:hover,
.dropdown-menu a[onclick*="openAdminDeleteSongModal"]:hover,
.dropdown-menu a[data-target="#delete-song"]:hover {
	background: rgba(255, 74, 74, 0.15) !important;
	color: #ff4a4a !important;
}