/* Audio Pro widget — structural styles. Colors/typography come from the
   widget's style controls (compiled per-instance), so only layout + a few
   sane defaults live here. */

.ractro-ap {
	--ractro-ap-accent: #125966;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-family: inherit;
}

.ractro-ap-audio {
	display: none;
}

.ractro-ap-main {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #0f172a;
	border-radius: 14px;
	padding: 18px;
}

.ractro-ap-now {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
	min-width: 0;
}

.ractro-ap-art {
	width: 64px;
	height: 64px;
	border-radius: 10px;
	overflow: hidden;
	flex: 0 0 auto;
	background: rgba(255, 255, 255, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ractro-ap-art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ractro-ap-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ractro-ap-now-title {
	color: #f8fafc;
	font-weight: 600;
	font-size: 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 220px;
}

.ractro-ap-now-artist {
	color: #94a3b8;
	font-size: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 220px;
}

.ractro-ap-player {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Native progress bar — CSS-driven, no canvas/waveform library. */
.ractro-ap-progress {
	position: relative;
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	cursor: pointer;
}

.ractro-ap-progress-fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0%;
	border-radius: 999px;
	background: var(--ractro-ap-accent);
	pointer-events: none;
}

.ractro-ap-transport {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ractro-ap-time {
	color: #cbd5e1;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	flex: 0 0 auto;
}

.ractro-ap-ctrls {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0 6px;
}

.ractro-ap-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #e2e8f0;
	cursor: pointer;
	padding: 0;
	transition: background 0.15s ease, color 0.15s ease;
}

.ractro-ap-btn svg {
	stroke: currentColor;
}

.ractro-ap-btn:hover {
	background: rgba(255, 255, 255, 0.1);
}

.ractro-ap-play {
	width: 46px;
	height: 46px;
	background: var(--ractro-ap-accent);
	color: #fff;
}

.ractro-ap-play:hover {
	background: var(--ractro-ap-accent);
	filter: brightness(1.1);
}

.ractro-ap-play svg,
.ractro-ap-play path {
	fill: currentColor;
}

.ractro-ap-ic-pause[hidden],
.ractro-ap-ic-play[hidden] {
	display: none;
}

.ractro-ap-speed {
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: transparent;
	color: #cbd5e1;
	border-radius: 999px;
	font-size: 12px;
	padding: 4px 8px;
	cursor: pointer;
	flex: 0 0 auto;
}

.ractro-ap-volume {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
}

.ractro-ap-vol-range {
	width: 70px;
	accent-color: var(--ractro-ap-accent);
}

.ractro-ap-dl {
	text-decoration: none;
}

/* Playlist */
.ractro-ap-list {
	list-style: none;
	margin: 0;
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: #111827;
	border-radius: 12px;
}

.ractro-ap-item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	border: 0;
	background: transparent;
	color: #cbd5e1;
	text-align: left;
	padding: 10px 12px;
	border-radius: 9px;
	cursor: pointer;
	font: inherit;
}

.ractro-ap-item:hover,
.ractro-ap-item.is-active {
	background: rgba(99, 102, 241, 0.16);
}

.ractro-ap-item-num {
	position: relative;
	flex: 0 0 auto;
	width: 20px;
	text-align: center;
	font-size: 12px;
	color: #94a3b8;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ractro-ap-item.is-active .ractro-ap-item-num {
	color: var(--ractro-ap-accent);
}

/* Row leading element: thumbnail variant (Row Leading Element = Song Cover) */
.ractro-ap-item-thumb {
	position: relative;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ractro-ap-item-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* "Now playing" equalizer indicator — real capability, not decorative: it
   only appears on the active row while that row's track is actually
   playing (toggled via the .is-playing class on the root, set from the
   <audio> play/pause events). */
.ractro-ap-item-eq {
	display: none;
	align-items: flex-end;
	justify-content: center;
	gap: 2px;
	height: 12px;
}

.ractro-ap-item-eq i {
	display: block;
	width: 2px;
	height: 4px;
	border-radius: 1px;
	background: var(--ractro-ap-accent);
	animation: ractro-ap-eq 0.9s ease-in-out infinite;
}

.ractro-ap-item-eq i:nth-child(2) { animation-delay: 0.15s; }
.ractro-ap-item-eq i:nth-child(3) { animation-delay: 0.3s; }

@keyframes ractro-ap-eq {
	0%, 100% { height: 3px; }
	50% { height: 12px; }
}

.ractro-ap.is-playing .ractro-ap-item.is-active .ractro-ap-item-num-text {
	display: none;
}

.ractro-ap.is-playing .ractro-ap-item.is-active .ractro-ap-item-eq {
	display: flex;
}

.ractro-ap.is-playing .ractro-ap-item.is-active .ractro-ap-item-thumb .ractro-ap-item-eq {
	position: absolute;
	inset: 0;
	align-items: center;
	background: rgba(0, 0, 0, 0.4);
}

.ractro-ap-item-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 1px;
}

.ractro-ap-item-title {
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ractro-ap-item-artist {
	font-size: 11px;
	color: #94a3b8;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ractro-ap-empty {
	padding: 18px;
	border: 1px dashed #cbd5e1;
	border-radius: 10px;
	color: #94a3b8;
	font-size: 13px;
	text-align: center;
}

/* Visibility toggles (Layout tab) — the elements stay in the DOM so JS keeps
   updating their text on track-change, they're just hidden. */
.ractro-ap--no-title .ractro-ap-now-title,
.ractro-ap--no-artist .ractro-ap-now-artist {
	display: none;
}

/* Player Layout variants */
.ractro-ap--compact .ractro-ap-main {
	padding: 10px 14px;
	gap: 10px;
}

.ractro-ap--compact .ractro-ap-art {
	width: 36px;
	height: 36px;
}

.ractro-ap--compact .ractro-ap-now-title,
.ractro-ap--compact .ractro-ap-now-artist {
	max-width: 120px;
}

.ractro-ap--card .ractro-ap-main {
	flex-direction: column;
	align-items: stretch;
}

.ractro-ap--card .ractro-ap-now {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.ractro-ap--card .ractro-ap-art {
	width: 160px;
	height: 160px;
}

.ractro-ap--card .ractro-ap-now-title,
.ractro-ap--card .ractro-ap-now-artist {
	max-width: 100%;
	white-space: normal;
}

.ractro-ap--card .ractro-ap-player {
	width: 100%;
}

/* Playlist Position = Right — side-by-side with the player, list scrolls. */
.ractro-ap--right {
	--ractro-ap-list-width: 320px;
	flex-direction: row;
	align-items: flex-start;
}

.ractro-ap--right .ractro-ap-main {
	flex: 1 1 auto;
	min-width: 0;
}

.ractro-ap--right .ractro-ap-list {
	flex: 0 0 var(--ractro-ap-list-width);
	width: var(--ractro-ap-list-width);
	max-height: 420px;
	overflow-y: auto;
}

/* MOBILE band. Was a hand-picked 782px — WordPress's admin-bar width, which
   has nothing to do with this widget. "Stack on small screens" is the mobile
   band, so it follows the author's breakpoint setting like everything else.
   At default breakpoints this stacks at 767 instead of 782: 15px earlier. */
@media (max-width: 767px) {
	.ractro-ap--right {
		flex-direction: column;
	}
	.ractro-ap--right .ractro-ap-list {
		width: 100%;
		max-height: none;
	}
}

@media (max-width: 600px) {
	.ractro-ap-main {
		flex-wrap: wrap;
	}
	.ractro-ap-now-title,
	.ractro-ap-now-artist {
		max-width: 160px;
	}
}