/* Frontend styles for Spacenerd Audio Player */
.sn-audio-player {
	--sn-btn-size: 48px;
	--sn-btn-color: #111111;
	--sn-scroll-color: #e11d48;
	display: block;
	max-width: 100%;
}

/* Card container */
.sn-audio-player .sn-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 10px 16px;
	border: 1px solid rgba(0,0,0,0.12);
	border-radius: 9999px;
	background: #f6f9f9;
	box-shadow: 0 2px 12px rgba(0,0,0,0.08);
	overflow: hidden;
}

/* Scroll bar */
.sn-audio-player .sn-scroll-bar {
	position: absolute;
	top: 0;
	left: 0;
	height: 4px;
	width: 0;
	background: var(--sn-scroll-color);
	transition: width 0.1s linear;
}

/* Play button */
.sn-audio-player .sn-play {
	flex-shrink: 0;
	width: var(--sn-btn-size);
	height: var(--sn-btn-size);
	border-radius: 9999px;
	border: none;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.sn-audio-player .sn-play-icon {
	position: relative;
	width: calc(var(--sn-btn-size) * .42);
	height: calc(var(--sn-btn-size) * .42);
}

.sn-audio-player .sn-play-icon::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--sn-btn-color);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.sn-audio-player.is-playing .sn-play-icon::before {
	clip-path: inset(0 66% 0 0);
}

.sn-audio-player.is-playing .sn-play-icon::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--sn-btn-color);
	clip-path: inset(0 0 0 66%);
}

/* Time */
.sn-audio-player .sn-time {
	font-size: 14px;
	font-weight: bold;
}

.sn-audio-player .sn-spacer {
	flex: 1 1 auto;
}

/* Artwork */
.sn-audio-player .sn-artwork {
	width: 54px;
	height: 54px;
	border-radius: 12px;
	background: #e9ecef;
	display: grid;
	place-items: center;
	background-size: cover;
	background-position: center;
}

.sn-waveform {
	display: inline-flex;
	gap: 3px;
	height: 60%;
}

.sn-waveform span {
	width: 3px;
	height: 40%;
	background: #b0b7be;
}

.sn-audio {
	display: none;
}

/* Layout */
.sn-audio-player.is-static { max-width: 350px; }
.sn-audio-player.is-static.align-left   { margin-right: auto; margin-left: 0; }
.sn-audio-player.is-static.align-center { margin-left: auto; margin-right: auto; }
.sn-audio-player.is-static.align-right  { margin-left: auto; margin-right: 0; }

.sn-audio-player.is-fixed {
	position: fixed;
	z-index: 999;
	width: 350px;
}

/* Scroll appearance */
.sn-audio-player.show-on-scroll {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.sn-audio-player.show-on-scroll.is-visible {
	opacity: 1;
	transform: translateY(0);
}