/* Dynamic Playlist Player — Delahang compact edition */
:root {
	--dpp-red: #bd1038;
	--dpp-red-dark: #8f0b2c;
	--dpp-red-soft: #fff3f6;
	--dpp-red-wash: #fde6ed;
	--dpp-ink: #451721;
	--dpp-muted: #8f6973;
	--dpp-line: rgba(189, 16, 56, .16);
	--dpp-shadow: 0 14px 32px rgba(122, 9, 40, .12);
}

.dpp-playlist-container.dpp-modern-playlist {
	direction: rtl;
	margin: 1.25rem 0;
	padding: 1rem;
	background: linear-gradient(135deg, #fff 0%, var(--dpp-red-soft) 100%);
	border: 1px solid var(--dpp-line);
	border-radius: 22px;
	box-shadow: var(--dpp-shadow);
}

/* Compact playlist control capsule */
.dpp-playlist-container.dpp-modern-playlist .dpp-playlist-big-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .42rem;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 1rem auto;
	padding: .38rem;
	background: rgba(255,255,255,.92);
	border: 1px solid var(--dpp-line);
	border-radius: 999px;
	box-shadow: 0 10px 22px rgba(122, 9, 40, .08);
}
.dpp-playlist-container.dpp-modern-playlist .dpp-playlist-big-controls-wrap,
.dpp-playlist-container.dpp-modern-playlist .dpp-playlist-controls-wrap,
.dpp-playlist-container.dpp-modern-playlist .dpp-controls-wrap {
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
}
.dpp-playlist-container.dpp-modern-playlist .dpp-big-prev-wrapper,
.dpp-playlist-container.dpp-modern-playlist .dpp-big-next-wrapper,
.dpp-playlist-container.dpp-modern-playlist .dpp-big-play-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
}
.dpp-playlist-container.dpp-modern-playlist .dpp-big-prev-btn,
.dpp-playlist-container.dpp-modern-playlist .dpp-big-next-btn {
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--dpp-line);
	border-radius: 50%;
	background: #fff;
	color: var(--dpp-red-dark);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform .2s ease, background .2s ease, color .2s ease;
}
.dpp-playlist-container.dpp-modern-playlist .dpp-big-prev-btn svg,
.dpp-playlist-container.dpp-modern-playlist .dpp-big-next-btn svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}
.dpp-playlist-container.dpp-modern-playlist .dpp-big-play-btn {
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: linear-gradient(145deg, #da315b 0%, var(--dpp-red) 55%, var(--dpp-red-dark) 100%);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 10px 20px rgba(189, 16, 56, .28);
	transition: transform .2s ease, box-shadow .2s ease;
}
.dpp-playlist-container.dpp-modern-playlist .dpp-big-play-btn svg { fill: currentColor; }
.dpp-playlist-container.dpp-modern-playlist .dpp-big-prev-btn:hover,
.dpp-playlist-container.dpp-modern-playlist .dpp-big-next-btn:hover { background: var(--dpp-red-soft); transform: translateY(-1px); }
.dpp-playlist-container.dpp-modern-playlist .dpp-big-play-btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 24px rgba(189, 16, 56, .34); }
.dpp-playlist-container.dpp-modern-playlist .dpp-disabled { opacity: .38; pointer-events: none; }

.dpp-playlist-container.dpp-modern-playlist .dpp-playlist-tracks { display: flex; flex-direction: column; gap: .58rem; }
.dpp-playlist-container.dpp-modern-playlist .dpp-track-row {
	display: grid;
	grid-template-columns: 34px minmax(0,1fr) auto;
	gap: .7rem;
	align-items: center;
	padding: .58rem .68rem;
	background: rgba(255,255,255,.9);
	border: 1px solid rgba(189, 16, 56, .1);
	border-radius: 15px;
	transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.dpp-playlist-container.dpp-modern-playlist .dpp-track-row:hover { border-color: var(--dpp-line); background: #fff; transform: translateX(-2px); }
.dpp-playlist-container.dpp-modern-playlist .dpp-track-row.playing { background: linear-gradient(135deg, #fff 0%, #ffe8ef 100%); border-color: rgba(189, 16, 56, .28); }
.dpp-playlist-container.dpp-modern-playlist .dpp-track-number {
	width: 30px;
	height: 30px;
	margin: 0;
	border-radius: 10px;
	background: var(--dpp-red-soft);
	color: var(--dpp-red-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .83rem;
	font-weight: 800;
}
.dpp-playlist-container.dpp-modern-playlist .dpp-track-title {
	min-width: 0;
	color: var(--dpp-ink);
	font-size: .94rem;
	font-weight: 600;
	line-height: 1.75;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dpp-playlist-container.dpp-modern-playlist .dpp-track-actions { display: flex; gap: .38rem; }
.dpp-playlist-container.dpp-modern-playlist .dpp-track-actions button {
	width: 35px;
	height: 35px;
	padding: 0;
	border-radius: 11px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0;
	cursor: pointer;
	transition: transform .2s ease, background .2s ease, color .2s ease;
}
.dpp-playlist-container.dpp-modern-playlist .dpp-track-actions button svg { width: 17px; height: 17px; }
.dpp-playlist-container.dpp-modern-playlist .dpp-play-btn { background: var(--dpp-red); border: 1px solid var(--dpp-red); color: #fff; box-shadow: 0 6px 12px rgba(189,16,56,.18); }
.dpp-playlist-container.dpp-modern-playlist .dpp-play-btn svg { fill: currentColor; }
.dpp-playlist-container.dpp-modern-playlist .dpp-download-btn { background: #fff; border: 1px solid var(--dpp-line); color: var(--dpp-red-dark); }
.dpp-playlist-container.dpp-modern-playlist .dpp-download-btn svg { stroke: currentColor; fill: none; }
.dpp-playlist-container.dpp-modern-playlist .dpp-track-actions button:hover { transform: translateY(-1px); }
.dpp-playlist-container.dpp-modern-playlist .dpp-download-btn:hover { background: var(--dpp-red-soft); }
.dpp-playlist-container.dpp-modern-playlist .dpp-play-btn:hover { background: var(--dpp-red-dark); }

/* Floating player: clean light card, no 10-second skip controls */
.dpp-floating-player {
	position: fixed;
	z-index: 99999;
	left: 50%;
	right: auto;
	bottom: 16px;
	width: min(760px, calc(100% - 32px));
	padding: .8rem .95rem .75rem;
	background: linear-gradient(145deg, #fff 0%, #fff6f8 100%);
	color: var(--dpp-ink);
	border: 1px solid var(--dpp-line);
	border-radius: 22px;
	box-shadow: 0 20px 45px rgba(91, 11, 35, .2);
	display: flex;
	flex-direction: column;
	gap: .62rem;
	direction: rtl;
	transform: translate(-50%, calc(100% + 48px));
	transition: transform .28s ease;
}
.dpp-floating-player.active { transform: translate(-50%, 0); }
.dpp-player-header { display: grid; grid-template-columns: 34px minmax(0,1fr) 34px; align-items: center; gap: .5rem; }
.dpp-player-close {
	grid-column: 1;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--dpp-line);
	border-radius: 10px;
	background: #fff;
	color: var(--dpp-red-dark);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}
.dpp-player-title-wrap { grid-column: 2; min-width: 0; display: flex; align-items: center; justify-content: center; gap: .38rem; }
.dpp-music-icon { flex: 0 0 auto; width: 16px; height: 16px; fill: var(--dpp-red); }
.dpp-player-title { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; font-weight: 800; color: var(--dpp-ink); }
.dpp-player-controls { display: flex; align-items: center; justify-content: center; gap: .42rem; flex-wrap: nowrap; }
.dpp-player-controls button {
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--dpp-line);
	border-radius: 10px;
	background: #fff;
	color: var(--dpp-red-dark);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform .2s ease, background .2s ease, color .2s ease;
}
.dpp-player-controls button svg { width: 17px; height: 17px; fill: currentColor; }
.dpp-player-controls .dpp-play-pause-btn {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	border-color: var(--dpp-red);
	background: linear-gradient(145deg, #da315b, var(--dpp-red));
	color: #fff;
	box-shadow: 0 9px 16px rgba(189,16,56,.25);
}
.dpp-player-controls button:hover { background: var(--dpp-red-soft); transform: translateY(-1px); }
.dpp-player-controls .dpp-play-pause-btn:hover { background: linear-gradient(145deg, var(--dpp-red), var(--dpp-red-dark)); }
.dpp-player-controls button.is-active { background: var(--dpp-red-soft); color: var(--dpp-red); border-color: rgba(189,16,56,.3); }
.dpp-time-bar { display: flex; align-items: center; gap: .6rem; direction: ltr; }
.dpp-current-time,.dpp-duration { min-width: 36px; color: var(--dpp-muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.dpp-progress-bar { flex: 1; height: 6px; overflow: hidden; border-radius: 999px; background: #f9d7e0; cursor: pointer; }
.dpp-progress-filled { width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--dpp-red-dark), #e44369); }
.dpp-player-status { min-height: 0; margin: 0; color: var(--dpp-red-dark); font-size: .73rem; text-align: center; }
.dpp-player-status:empty { display: none; }

.dpp-playlist-container button:focus-visible,
.dpp-floating-player button:focus-visible,
.dpp-progress-bar:focus-visible { outline: 3px solid rgba(189,16,56,.28); outline-offset: 3px; }

@media (max-width: 640px) {
	.dpp-playlist-container.dpp-modern-playlist { padding: .78rem; border-radius: 18px; }
	.dpp-playlist-container.dpp-modern-playlist .dpp-playlist-big-controls { margin-bottom: .8rem; }
	.dpp-playlist-container.dpp-modern-playlist .dpp-track-row { grid-template-columns: 30px minmax(0,1fr) auto; padding: .52rem; gap: .48rem; }
	.dpp-playlist-container.dpp-modern-playlist .dpp-track-number { width: 28px; height: 28px; border-radius: 9px; font-size: .75rem; }
	.dpp-playlist-container.dpp-modern-playlist .dpp-track-title { font-size: .82rem; }
	.dpp-playlist-container.dpp-modern-playlist .dpp-track-actions { gap: .28rem; }
	.dpp-playlist-container.dpp-modern-playlist .dpp-track-actions button { width: 32px; height: 32px; border-radius: 10px; }
	.dpp-floating-player { bottom: 8px; width: calc(100% - 16px); padding: .7rem; border-radius: 18px; }
	.dpp-player-controls { gap: .28rem; }
	.dpp-player-controls button { width: 31px; height: 31px; border-radius: 9px; }
	.dpp-player-controls .dpp-play-pause-btn { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
	.dpp-playlist-container *, .dpp-floating-player { transition: none !important; }
}