/* ==========================================================================
   AUDIO DECK (dark) - shared jPlayer skin
   Used by the public listing page (inside the #media-carousel stage) and
   the myaccount edit-listing Media tab (standalone card). Everything is
   scoped under .audio-deck-dark; the page stylesheets only add layout
   around the deck (stage padding / height lock on listings).
   Expected markup (listing_enhanced.html / edit_listing.html):
     .jp-head-row  > ul.jp-controls + .jp-now-playing + .jp-volume-group
     .jp-progress-row > .jp-current-time + .jp-progress + .jp-duration
     .jp-playlist > ul > li
   Overrides the stock jp-* rules in listings.css and the async
   blue.monday skin - load this file after listings.css in the document.
   ========================================================================== */

.audio-deck-dark {
	background: #141211;
	border-radius: 20px;
	padding: 22px 26px;
}

.audio-deck-dark .jp-audio {
	border: none;
	background: transparent;
	font-size: 16px;
	line-height: 1.5;
	color: #d0cfcd;
}

.audio-deck-dark .jp-interface {
	background: transparent;
	width: auto;
	padding: 0;
}

/* head row: transport | now playing | volume */
.audio-deck-dark .jp-head-row {
	display: flex;
	align-items: center;
	gap: 22px;
}

.audio-deck-dark .jp-interface ul.jp-controls {
	display: flex;
	align-items: center;
	gap: 12px;
	width: auto;
	height: auto;
	margin: 0;
	flex-shrink: 0;
}

/* the anchors themselves are the flex items - the hidden play/pause twin
   would otherwise still be a zero-width item and double the gap beside
   the play circle */
.audio-deck-dark .jp-interface ul.jp-controls li {
	display: contents;
}

.audio-deck-dark .jp-interface ul.jp-controls a {
	margin: 0;
	background-color: transparent;
	background-position: center;
	background-repeat: no-repeat;
}

.audio-deck-dark .jp-interface ul.jp-controls a.jp-previous,
.audio-deck-dark .jp-interface ul.jp-controls a.jp-next {
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 50%;
	background-size: 16px 16px;
}

.audio-deck-dark .jp-interface ul.jp-controls a.jp-previous {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 6h2v12H7zM18 6v12l-8.5-6z'/%3E%3C/svg%3E");
}

.audio-deck-dark .jp-interface ul.jp-controls a.jp-next {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M15 6h2v12h-2zM6 6v12l8.5-6z'/%3E%3C/svg%3E");
}

.audio-deck-dark .jp-interface ul.jp-controls a.jp-previous:hover,
.audio-deck-dark .jp-interface ul.jp-controls a.jp-next:hover {
	border-color: rgba(255, 255, 255, 0.4);
	background-color: rgba(255, 255, 255, 0.06);
}

.audio-deck-dark .jp-interface ul.jp-controls a.jp-play,
.audio-deck-dark .jp-interface ul.jp-controls a.jp-pause {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background-color: #C06014;
	background-size: 24px 24px;
}

.audio-deck-dark .jp-interface ul.jp-controls a.jp-play {
	/* the triangle sits right-of-centre in its viewBox - that IS the
	   optical nudge */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5.5v13l10.5-6.5z'/%3E%3C/svg%3E");
}

.audio-deck-dark .jp-interface ul.jp-controls a.jp-pause {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 5h3.6v14H7zM13.4 5h3.6v14h-3.6z'/%3E%3C/svg%3E");
}

.audio-deck-dark .jp-interface ul.jp-controls a.jp-play:hover,
.audio-deck-dark .jp-interface ul.jp-controls a.jp-pause:hover {
	background-color: #9a4a0f;
}

.audio-deck-dark .jp-now-playing {
	flex: 1;
	min-width: 0;
}

.audio-deck-dark .jp-now-kicker {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #cf7a33;
}

.audio-deck-dark .jp-now-title {
	margin-top: 3px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.audio-deck-dark .jp-volume-group {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.audio-deck-dark .mutePosition {
	position: static;
	color: #948d86;
	font-size: 13px;
}

.audio-deck-dark .jp-volume-bar {
	width: 92px;
	height: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	cursor: pointer;
}

.audio-deck-dark .jp-volume-bar-value {
	position: relative;
	height: 4px;
	border-radius: 999px;
	background: #C06014;
}

.audio-deck-dark .jp-volume-bar-value::after {
	content: '';
	position: absolute;
	right: -5px;
	top: 50%;
	width: 11px;
	height: 11px;
	margin-top: -5.5px;
	border-radius: 50%;
	background: #fff;
}

/* progress row: current time | bar | duration */
.audio-deck-dark .jp-progress-row {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 22px;
}

.audio-deck-dark .jp-current-time,
.audio-deck-dark .jp-duration {
	float: none;
	width: auto;
	min-width: 34px;
	padding: 0;
	font-size: 12.5px;
	color: #948d86;
}

.audio-deck-dark .jp-duration {
	text-align: right;
}

.audio-deck-dark .jp-progress {
	flex: 1;
	height: 3px;
	margin-top: 0;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.18);
	overflow: visible;
	cursor: pointer;
}

.audio-deck-dark .jp-seek-bar {
	height: 100%;
	background: transparent;
}

.audio-deck-dark .jp-play-bar {
	position: relative;
	height: 100%;
	border-radius: 999px;
	background: #C06014;
}

.audio-deck-dark .jp-play-bar::after {
	content: '';
	position: absolute;
	right: -5px;
	top: 50%;
	width: 11px;
	height: 11px;
	margin-top: -5.5px;
	border-radius: 50%;
	background: #fff;
}

/* playlist: hairline rows, grey track numbers, EQ icon + status on the
   current row (status text flips via jPlayer's jp-state-playing class) */
.audio-deck-dark .jp-playlist {
	border-top: none;
	margin-top: 14px;
	background: transparent;	/* the async blue.monday skin paints #eee */
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.audio-deck-dark .jp-playlist::-webkit-scrollbar {
	width: 8px;
}

.audio-deck-dark .jp-playlist::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.18);
	border-radius: 999px;
}

.audio-deck-dark .jp-playlist ul {
	counter-reset: jp-track;
	font-size: 15px;
}

.audio-deck-dark .jp-playlist li {
	counter-increment: jp-track;
	margin: 0;
	padding: 0;
	border: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}

.audio-deck-dark .jp-playlist li:last-child {
	border-bottom: none;
}

.audio-deck-dark .jp-playlist li div {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 4px;
}

.audio-deck-dark .jp-playlist li div::before {
	content: counter(jp-track, decimal-leading-zero);
	flex-shrink: 0;
	width: 20px;
	font-size: 12.5px;
	letter-spacing: 0.04em;
	color: #77726d;
}

.audio-deck-dark .jp-playlist li.jp-playlist-current div::before {
	content: '';
	height: 14px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='%23cf7a33'%3E%3Crect x='1' y='9' width='3' height='5' rx='1'/%3E%3Crect x='5.5' y='5' width='3' height='9' rx='1'/%3E%3Crect x='10' y='2' width='3' height='12' rx='1'/%3E%3C/g%3E%3C/svg%3E") left center / 14px 14px no-repeat;
}

.audio-deck-dark .jp-playlist li.jp-playlist-current div::after {
	content: 'Paused';
	flex-shrink: 0;
	margin-left: auto;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #cf7a33;
}

.audio-deck-dark .jp-audio.jp-state-playing .jp-playlist li.jp-playlist-current div::after {
	content: 'Playing';
}

.audio-deck-dark .jp-type-playlist .jp-playlist a {
	flex: 1;
	min-width: 0;
	color: #d0cfcd;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.audio-deck-dark .jp-type-playlist .jp-playlist a:hover {
	color: #fff;
}

.audio-deck-dark .jp-type-playlist .jp-playlist a.jp-playlist-current,
.audio-deck-dark .jp-type-playlist .jp-playlist a.jp-playlist-current:hover {
	color: #cf7a33;
	font-weight: 700;
}

/* the old "now playing" speaker glyph the playlist JS toggles - the EQ
   icon + status text replace it */
.audio-deck-dark .jp-playlist .glyphicon-volume-up {
	display: none !important;
}

/* ---- editable playlist chrome (myaccount edit-listing Media tab) ----
   markup order per row: [remove] [sort] [title] [size] [rename]; the
   remove control moves to the far right (order beats the ::after status) */
.audio-deck-dark .jp-type-playlist .jp-playlist a.jp-playlist-item-remove {
	flex: none;
	float: none;
	order: 7;
	padding: 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.45);
}

.audio-deck-dark .jp-type-playlist .jp-playlist a.jp-playlist-item-remove:hover {
	color: #fff;
}

.audio-deck-dark .jp-playlist li .glyphicon-sort {
	margin: 0;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.35);
}

.audio-deck-dark .jp-playlist li .darker-grey {
	color: rgba(255, 255, 255, 0.4) !important;
	font-size: 12.5px;
}

.audio-deck-dark .jp-playlist li .edit-item-title {
	padding: 0;
	color: rgba(255, 255, 255, 0.5);
}

.audio-deck-dark .jp-playlist li .edit-item-title:hover {
	color: #fff;
}

@media (max-width: 767px) {
	.audio-deck-dark {
		padding: 18px 16px;
	}

	.audio-deck-dark .jp-head-row {
		gap: 14px;
	}

	.audio-deck-dark .jp-interface ul.jp-controls {
		gap: 8px;
	}

	.audio-deck-dark .jp-interface ul.jp-controls a.jp-play,
	.audio-deck-dark .jp-interface ul.jp-controls a.jp-pause {
		width: 46px;
		height: 46px;
		background-size: 20px 20px;
	}

	.audio-deck-dark .jp-interface ul.jp-controls a.jp-previous,
	.audio-deck-dark .jp-interface ul.jp-controls a.jp-next {
		width: 34px;
		height: 34px;
		background-size: 14px 14px;
	}

	.audio-deck-dark .jp-now-title {
		font-size: 17px;
	}

	.audio-deck-dark .jp-progress-row {
		margin-top: 14px;
	}
}