/* =====================================================================
   Audio Mastery — Base Player CSS
   All theming is done through CSS custom properties (set inline by PHP),
   so themes only override variables + structural helpers. Mobile-first.
   ===================================================================== */

[hidden] {
	display: none !important;
}

.am-player,
.am-player *,
.am-player *::before,
.am-player *::after {
	box-sizing: border-box;
}

.am-player {
	--am-bg: #121417;
	--am-bg2: #1b1f24;
	--am-accent: #ff4d4d;
	--am-accent-contrast: #ffffff;
	--am-text: #f2f4f7;
	--am-muted: #9aa3af;
	--am-progress: rgba(255, 255, 255, 0.16);
	--am-progress-active: var(--am-accent);
	--am-button: rgba(255, 255, 255, 0.10);
	--am-button-hover: rgba(255, 255, 255, 0.18);
	--am-button-contrast: var(--am-text);
	--am-icon: var(--am-text);
	--am-icon-hover: #ffffff;
	--am-border: rgba(255, 255, 255, 0.10);
	--am-glow: none;
	--am-font: inherit;
	--am-anim: 0.35s;
	--am-icon-size: 20px;
	--am-radius: 16px;
	--am-radius-btn: 999px;
	--am-spacing: 20px;
	--am-width: 640px;
	--am-font-size: 14px;
	--am-btn: 44px;
	--am-artwork: 92px;
	--am-artwork-ratio: 1 / 1;
	--am-artbtn: 48px;
	--am-shadow: none;
	--am-margin-y: 26px;

	position: relative;
	width: 100%;
	max-width: var(--am-width);
	margin: var(--am-margin-y) auto;
	background: var(--am-bg);
	background-size: cover;
	background-position: center;
	border-radius: var(--am-radius);
	box-shadow: var(--am-shadow);
	color: var(--am-text);
	font-family: var(--am-font);
	font-size: var(--am-font-size);
	font-weight: var(--am-font-weight, 400);
	line-height: 1.45;
	overflow: visible;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	isolation: isolate;
	transition: box-shadow var(--am-anim) ease;
}

.am-player a,
.am-player button {
	touch-action: manipulation;
}

.am-player button {
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
}

/* ------------------------------------------------------------------- */
/* Inner layout                                                          */
.am-player__inner {
	display: flex;
	align-items: center;
	gap: var(--am-spacing);
	padding: var(--am-spacing);
	position: relative;
	z-index: 1;
}

/* Artwork */
.am-player__artwork {
	position: relative;
	flex: 0 0 auto;
	width: var(--am-artwork);
	height: var(--am-artwork);
	border-radius: calc(var(--am-radius) - 4px);
	overflow: hidden;
	background: var(--am-bg2);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.am-player__artwork--ratio {
	width: auto;
	aspect-ratio: var(--am-artwork-ratio);
	max-width: var(--am-artwork);
	max-height: var(--am-artwork);
	align-self: center;
}

.am-player__cover {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.am-player__cover--fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--am-muted);
}

.am-player__cover--fallback svg {
	width: 34%;
	height: 34%;
}

.am-artbtn {
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	width: var(--am-artbtn);
	height: var(--am-artbtn);
	min-width: 40px;
	min-height: 40px;
	border: 0;
	border-radius: 50%;
	background: var(--am-accent);
	color: var(--am-accent-contrast);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--am-anim) ease, transform var(--am-anim) ease;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.am-player:hover .am-artbtn,
.am-artbtn:focus-visible,
.am-player.has-artbtn-visible .am-artbtn {
	opacity: 1;
}

.am-artbtn svg {
	display: block;
	margin: auto;
	width: 58%;
	height: 58%;
}

.am-player.is-playing .am-artbtn {
	opacity: 1;
}

.am-player:not(.is-playing) .am-artbtn__pause,
.am-player.is-playing .am-artbtn__play,
.am-player:not(.is-playing) .am-play__icon--pause,
.am-player.is-playing .am-play__icon--play {
	display: none;
}

/* Main column */
.am-player__main {
	flex: 1 1 auto;
	min-width: 0;
}

/* Eyebrow */
.am-player__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}

.am-player__category {
	color: var(--am-accent);
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.am-player__episode-badge {
	background: var(--am-button);
	color: var(--am-muted);
	border-radius: 999px;
	padding: 1px 8px;
	font-size: 0.72em;
	font-weight: 600;
}

/* Title / subtitle */
.am-player__title {
	margin: 0;
	padding: 0;
	font-size: 1.15em;
	font-weight: 700;
	line-height: 1.3;
	color: var(--am-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}

.am-player__subtitle {
	margin-top: 2px;
	color: var(--am-muted);
	font-size: 0.85em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Captions (synchronized subtitles) */
.am-captions {
	min-height: 1.4em;
	margin-top: 8px;
	display: none;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: var(--am-caption-size, 0.95em);
	line-height: 1.5;
	background: var(--am-caption-bg, rgba(0, 0, 0, 0.55));
	color: var(--am-caption-text, #fff);
	border-radius: calc(var(--am-radius) * 0.5);
	padding: 6px 12px;
	box-sizing: border-box;
	word-break: break-word;
}

.am-captions.is-visible {
	display: flex;
}

/* Progress */
.am-progress {
	padding: 8px 0 2px;
	cursor: pointer;
	touch-action: none;
}

.am-progress__track {
	position: relative;
	height: 6px;
	border-radius: 999px;
	background: var(--am-progress);
	overflow: visible;
}

.am-progress__fill {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 0;
	border-radius: 999px;
	background: var(--am-progress-active);
}

.am-progress__thumb {
	position: absolute;
	top: 50%;
	left: 0;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--am-progress-active);
	border: 2px solid var(--am-bg2);
	transform: translate(-50%, -50%) scale(0);
	transition: transform var(--am-anim) ease;
}

.am-progress:hover .am-progress__thumb,
.am-progress:focus-visible .am-progress__thumb {
	transform: translate(-50%, -50%) scale(1);
}

/* Time */
.am-time {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--am-muted);
	font-size: 0.78em;
	font-variant-numeric: tabular-nums;
	margin-top: 2px;
}

/* Controls — play button leads the row (first on the right in RTL, next to
   قبلی), every other button centered on the same line. When space runs short,
   buttons shrink first, then wrap. */
.am-controls {
	margin-top: 10px;
}

.am-controls__row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}

.am-controls__group {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.am-controls__group--left,
.am-controls__group--right {
	margin: 0;
}

.am-player .am-btn-wrap--play {
	margin-inline-end: 4px;
}

.am-player .am-btn-wrap {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.am-player .am-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: var(--am-btn);
	height: var(--am-btn);
	border: 0;
	border-radius: var(--am-radius-btn);
	background: var(--am-button);
	color: var(--am-icon);
	cursor: pointer;
	padding: 0;
	text-decoration: none;
	transition: background var(--am-anim) ease, color var(--am-anim) ease, transform var(--am-anim) ease, box-shadow var(--am-anim) ease;
}

.am-player .am-btn svg {
	display: block;
	width: var(--am-icon-size);
	height: var(--am-icon-size);
	flex: 0 0 auto;
	margin: auto;
}

.am-player .am-btn:hover,
.am-player .am-btn:focus-visible {
	background: var(--am-button-hover);
	color: var(--am-icon-hover);
}

.am-player .am-btn__label {
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto;
	min-height: calc(var(--am-label-size, 10px) * 1.3);
	font-size: var(--am-label-size, 10px);
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	opacity: 0.78;
	letter-spacing: 0.01em;
}

.am-player .am-btn__label--accent {
	color: var(--am-accent);
	opacity: 1;
	font-weight: 800;
}

.am-player .am-btn.is-active {
	color: var(--am-accent);
}

.am-player .am-btn.am-download--locked {
	color: var(--am-icon);
}

.am-player .am-btn.am-btn--disabled,
.am-player .am-btn[disabled],
.am-player .am-btn[aria-disabled="true"] {
	opacity: 0.3;
	pointer-events: none;
	cursor: not-allowed;
}

/* Play button — leads the controls row, same size as the secondary buttons */
.am-player .am-play {
	width: var(--am-btn);
	height: var(--am-btn);
	flex: 0 0 auto;
	border: 0;
	border-radius: 50%;
	background: var(--am-accent);
	color: var(--am-accent-contrast);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: transform var(--am-anim) ease, box-shadow var(--am-anim) ease, background var(--am-anim) ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
}

.am-player .am-play svg,
.am-player .am-play__icon svg {
	display: block;
	margin: auto;
}

.am-player .am-play svg {
	width: var(--am-icon-size);
	height: var(--am-icon-size);
}

.am-player .am-play:hover,
.am-player .am-play:focus-visible {
	transform: scale(var(--am-hover, 1.05));
	background: var(--am-button-hover);
	color: var(--am-accent-contrast);
}

/* Volume mute state */
.am-volume-btn .is-off {
	display: none;
}

.am-volume-btn.is-muted .is-on {
	display: none;
}

.am-volume-btn.is-muted .is-off {
	display: inline-block;
}

/* Fullscreen icon state */
.am-player:not(:fullscreen) .am-fs__exit {
	display: none;
}

.am-player:fullscreen .am-fs__enter {
	display: none;
}

.am-player:fullscreen {
	max-width: none;
	width: 100vw !important;
	height: 100vh;
	margin: 0;
	border-radius: 0;
	overflow: auto;
}

/* Popovers */
.am-pop {
	position: absolute;
	z-index: 40;
	background: var(--am-bg2);
	border: 1px solid var(--am-border);
	border-radius: calc(var(--am-radius) - 4px);
	box-shadow: var(--am-shadow);
	padding: 14px;
	min-width: 170px;
	max-height: 62vh;
	overflow-y: auto;
}

.am-pop.is-below {
	bottom: auto;
	top: calc(var(--am-spacing) + 6px);
}

.am-pop--volume {
	right: 12px;
	bottom: 70px;
}

.am-pop--speed {
	right: 12px;
	bottom: 70px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px;
}

.am-pop--sleep {
	right: 12px;
	bottom: 70px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	padding: 12px;
	min-width: 250px;
}

.am-sleep-opt {
	display: block;
	width: 100%;
	text-align: center;
	border: 0;
	background: var(--am-button);
	color: var(--am-text);
	padding: 9px 8px;
	border-radius: 8px;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.95em;
	transition: background var(--am-anim) ease, color var(--am-anim) ease;
}

.am-sleep-opt:hover {
	background: var(--am-button-hover);
}

.am-sleep-opt.is-active {
	background: var(--am-accent);
	color: var(--am-accent-contrast);
}

.am-volume {
	width: 170px;
	height: 22px;
	accent-color: var(--am-accent);
	cursor: pointer;
}

.am-speed-opt {
	display: block;
	width: 100%;
	text-align: left;
	border: 0;
	background: transparent;
	color: var(--am-text);
	padding: 6px 10px;
	border-radius: 6px;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.95em;
	transition: background var(--am-anim) ease, color var(--am-anim) ease;
}

.am-speed-opt:hover {
	background: var(--am-button);
}

.am-speed-opt.is-active {
	background: var(--am-accent);
	color: var(--am-accent-contrast);
}

/* Drawer (playlist) */
.am-drawer {
	border-top: 1px solid var(--am-border);
	background: var(--am-bg2);
	max-height: 320px;
	overflow-y: auto;
	transition: opacity var(--am-anim) ease;
	border-radius: 0 0 var(--am-radius) var(--am-radius);
}

.am-drawer__head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px var(--am-spacing);
	position: sticky;
	top: 0;
	background: var(--am-bg2);
	z-index: 2;
	border-bottom: 1px solid var(--am-border);
}

.am-drawer__title {
	font-weight: 700;
	font-size: 0.9em;
}

.am-drawer__count {
	background: var(--am-button);
	color: var(--am-muted);
	border-radius: 999px;
	padding: 0 8px;
	font-size: 0.75em;
}

.am-drawer__close {
	margin-left: auto;
	border: 0;
	background: transparent;
	color: var(--am-muted);
	cursor: pointer;
	display: inline-flex;
	padding: 4px;
	border-radius: 50%;
	transition: color var(--am-anim) ease, background var(--am-anim) ease;
}

.am-drawer__close:hover {
	color: var(--am-icon-hover);
	background: var(--am-button);
}

.am-drawer__close svg {
	width: 18px;
	height: 18px;
}

.am-drawer__list {
	list-style: none;
	margin: 0;
	padding: 6px var(--am-spacing) var(--am-spacing);
	display: flex;
	flex-direction: column;
	gap: var(--am-playlist-gap, 0);
}

.am-drawer__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 6px;
	border-radius: 10px;
	transition: background var(--am-anim) ease;
}

.am-drawer__item:hover,
.am-drawer__item.is-active {
	background: var(--am-button);
}

.am-drawer__play {
	position: relative;
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	border: 0;
	border-radius: 50%;
	background: var(--am-button);
	color: var(--am-icon);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background var(--am-anim) ease, color var(--am-anim) ease;
}

.am-drawer__play:hover {
	background: var(--am-accent);
	color: var(--am-accent-contrast);
}

.am-drawer__item.is-active .am-drawer__play {
	background: var(--am-accent);
	color: var(--am-accent-contrast);
}

.am-drawer__play svg {
	width: 60%;
	height: 60%;
}

.am-drawer__item:not(.is-active) .is-pause {
	display: none;
}

.am-drawer__item.is-active .is-play {
	display: none;
}

.am-drawer__art {
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: 6px;
	overflow: hidden;
	background: var(--am-bg);
}

.am-drawer__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.am-drawer__text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.am-drawer__name {
	font-weight: 600;
	font-size: 0.88em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.am-drawer__meta {
	color: var(--am-muted);
	font-size: 0.75em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	gap: 4px;
}

.am-drawer__dot {
	opacity: 0.5;
}

.am-drawer__num {
	color: var(--am-muted);
	font-size: 0.85em;
	opacity: 0.6;
	font-variant-numeric: tabular-nums;
}

/* Resume chip */
.am-resume {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 35;
}

.am-resume__btn {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 0;
	background: var(--am-accent);
	color: var(--am-accent-contrast);
	border-radius: 999px;
	padding: 7px 12px;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.78em;
	font-weight: 600;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
	transition: transform var(--am-anim) ease;
}

.am-resume__btn:hover {
	transform: translateY(-1px);
}

.am-resume__restart {
	opacity: 0.72;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Toast */
.am-toast {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	background: var(--am-accent);
	color: var(--am-accent-contrast);
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 0.78em;
	font-weight: 600;
	z-index: 45;
	white-space: nowrap;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
	animation: am-toast-in var(--am-anim) ease;
}

@keyframes am-toast-in {
	from { opacity: 0; transform: translateX(-50%) translateY(6px); }
	to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ------------------------------------------------------------------- */
/* Layouts                                                               */
.am-player--layout-compact .am-player__inner {
	gap: 14px;
}

.am-player--layout-compact .am-player__artwork {
	width: 64px;
	height: 64px;
}

.am-player--layout-compact .am-player__title {
	font-size: 1em;
	-webkit-line-clamp: 1;
}

.am-player--layout-compact .am-time,
.am-player--layout-compact .am-player__eyebrow {
	display: none;
}

.am-player--layout-minimal .am-player__artwork {
	display: none;
}

.am-player--layout-minimal .am-player__inner {
	flex-direction: column;
	text-align: center;
}

.am-player--layout-minimal .am-time .am-time__sep {
	display: none;
}

.am-player--layout-hero .am-player__inner {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
}

.am-player--layout-hero .am-player__artwork {
	display: none;
}

/* ------------------------------------------------------------------- */
/* Focus / a11y                                                          */
.am-player button:focus-visible,
.am-player a:focus-visible,
.am-player .am-progress:focus-visible {
	outline: 3px solid var(--am-accent);
	outline-offset: 2px;
	border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
	.am-player,
	.am-player *,
	.am-player *::before,
	.am-player *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* ------------------------------------------------------------------- */
/* Responsive                                                            */
@media (max-width: 767px) {
	.am-player__inner {
		flex-wrap: nowrap;
	}
	.am-artbtn {
		opacity: 1;
		width: var(--am-artbtn);
		height: var(--am-artbtn);
		min-width: 34px;
		min-height: 34px;
	}
	.am-controls {
		gap: 6px;
	}
	.am-controls__group {
		gap: 4px;
	}
	.am-resume__restart {
		display: none;
	}
	.am-btn__label {
		font-size: calc(var(--am-label-size, 10px) * 0.85);
	}
}

/* Touch devices: keep the cover play button always visible */
@media (hover: none) {
	.am-artbtn {
		opacity: 1;
	}
}

/* Phones: stack cover over content, bigger clean artwork, centered */
@media (max-width: 480px) {
	.am-player__inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.am-player__artwork {
		width: clamp(var(--am-artwork), 46vw, 190px);
		height: clamp(var(--am-artwork), 46vw, 190px);
	}
	.am-player__artwork--ratio {
		width: auto;
		height: auto;
		max-width: clamp(var(--am-artwork), 46vw, 190px);
		max-height: clamp(var(--am-artwork), 46vw, 190px);
	}
	.am-player__cover--fallback svg {
		width: 26%;
		height: 26%;
	}
	.am-time {
		justify-content: center;
	}
	.am-controls {
		gap: 8px;
	}
	.am-player__title {
		-webkit-line-clamp: 3;
	}
	.am-drawer__num {
		display: none;
	}
}

/* Shrink buttons when space is tight — labels stay, wrap only as last resort */
@media (max-width: 600px) {
	.am-player {
		--am-btn: 38px;
	}
}

@media (max-width: 420px) {
	.am-player {
		--am-btn: 34px;
	}
}

/* Sticky / global player — a compact mini-bar while floating */
.am-player.is-sticky {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: 12px;
	width: auto;
	max-width: 400px;
	margin: 0 auto;
	z-index: 99990;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.38);
	animation: am-sticky-in 0.42s cubic-bezier(0.2, 0.8, 0.25, 1) both;
	will-change: transform, opacity;
	--am-spacing: 12px;
	--am-btn: 36px;
}

.am-player.is-sticky .am-player__inner {
	align-items: center;
	gap: 10px;
}

.am-player.is-sticky .am-player__artwork {
	width: var(--am-sticky-art);
	height: var(--am-sticky-art);
	min-width: var(--am-sticky-art);
}

.am-player.is-sticky .am-player__artwork--ratio {
	width: auto;
	height: auto;
	max-width: var(--am-sticky-art);
	max-height: var(--am-sticky-art);
}

.am-player.is-sticky .am-artbtn {
	display: none;
}

.am-player.is-sticky .am-player__title {
	-webkit-line-clamp: 1;
	line-clamp: 1;
}

.am-player.is-sticky .am-player__subtitle,
.am-player.is-sticky .am-player__eyebrow {
	display: none;
}

.am-player.is-sticky .am-btn__label {
	display: none;
}

.am-player.is-sticky .am-progress {
	padding: 4px 0 0;
}

.am-player.is-sticky .am-progress__thumb {
	width: 12px;
	height: 12px;
}

/* Sticky bar: hide all control buttons by default, show only selected ones */
.am-player.is-sticky .am-controls__row {
	flex-wrap: nowrap;
}

.am-player.is-sticky .am-btn-wrap--play .am-play {
	width: var(--am-btn);
	height: var(--am-btn);
}

/* Hide every button wrap in sticky mode by default */
.am-player.is-sticky .am-controls__group .am-btn-wrap {
	display: none;
}

/* Always show play + sticky (dismiss) in sticky mode */
.am-player.is-sticky .am-btn-wrap[data-am-btn="play"],
.am-player.is-sticky .am-btn-wrap[data-am-btn="sticky"] {
	display: inline-flex;
}

/* prev/next: only if stickyButtons.prev_next enabled (JS adds am-sticky-show-pn) */
.am-player.is-sticky.am-sticky-show-pn .am-btn-wrap[data-am-btn="prev"],
.am-player.is-sticky.am-sticky-show-pn .am-btn-wrap[data-am-btn="next"] {
	display: inline-flex;
}

/* volume: only if stickyButtons.volume enabled */
.am-player.is-sticky.am-sticky-show-vol .am-btn-wrap[data-am-btn="volume"] {
	display: inline-flex;
}

/* speed: only if stickyButtons.speed enabled */
.am-player.is-sticky.am-sticky-show-spd .am-btn-wrap[data-am-btn="speed"] {
	display: inline-flex;
}

/* captions: only if stickyButtons.captions enabled */
.am-player.is-sticky.am-sticky-show-cap .am-btn-wrap[data-am-btn="captions"] {
	display: inline-flex;
}

/* download: only if stickyButtons.download enabled */
.am-player.is-sticky.am-sticky-show-dl .am-btn-wrap[data-am-btn="download"] {
	display: inline-flex;
}

.am-player.is-sticky .am-drawer {
	display: none;
}

.am-player.is-sticky-out {
	animation: am-sticky-out 0.3s ease both;
	will-change: transform, opacity;
}

@keyframes am-sticky-in {
	from {
		transform: translateY(120%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes am-sticky-out {
	from {
		transform: translateY(0);
		opacity: 1;
	}
	to {
		transform: translateY(120%);
		opacity: 0;
	}
}

@media (min-width: 768px) {
	.am-player.is-sticky .am-player__artwork {
		align-self: center;
	}
}

@media (max-width: 600px) {
	.am-player.is-sticky {
		left: 8px;
		right: 8px;
		bottom: 8px;
	}
	.am-player.is-sticky .am-player__artwork {
		width: var(--am-sticky-art);
		height: var(--am-sticky-art);
		min-width: var(--am-sticky-art);
	}
	.am-player.is-sticky .am-player__artwork--ratio {
		max-width: var(--am-sticky-art);
		max-height: var(--am-sticky-art);
	}
}