.xtool-bgm-placeholder {
	padding: 16px;
	border: 1px dashed #c7c7c7;
	color: #6b6b6b;
	font-size: 13px;
	text-align: center;
}

.xtool-bgm__audio {
	display: none;
}

.xtool-bgm__toggle {
	--xbgm-size: 48px;
	--xbgm-icon-size: 18px;
	--xbgm-offset: 20px;
	--xbgm-color: #333333;
	--xbgm-ring-color: rgba(255, 255, 255, 0.5);
	--xbgm-ring-width: 1px;
	--xbgm-ring-gap: 4px;
	position: fixed;
	z-index: 9999;
	width: var(--xbgm-size);
	height: var(--xbgm-size);
	border-radius: 50%;
	border: none;
	padding: 0;
	background-color: #ffffff;
	color: var(--xbgm-color);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.xtool-bgm__toggle--shadow {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.xtool-bgm__toggle--ring::before {
	content: '';
	position: absolute;
	inset: var(--xbgm-ring-gap);
	border-radius: 50%;
	border: var(--xbgm-ring-width) solid var(--xbgm-ring-color);
	pointer-events: none;
}

.xtool-bgm__toggle--bottom-right { bottom: var(--xbgm-offset); right: var(--xbgm-offset); }
.xtool-bgm__toggle--bottom-left  { bottom: var(--xbgm-offset); left: var(--xbgm-offset); }
.xtool-bgm__toggle--top-right    { top: var(--xbgm-offset); right: var(--xbgm-offset); }
.xtool-bgm__toggle--top-left     { top: var(--xbgm-offset); left: var(--xbgm-offset); }

.xtool-bgm__icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.xtool-bgm__icon svg,
.xtool-bgm__icon i {
	width: var(--xbgm-icon-size);
	height: var(--xbgm-icon-size);
	font-size: var(--xbgm-icon-size);
}

/* Elementor's own Font Awesome SVG icons often carry a fill on each <path>
   directly (a presentation attribute set on that exact element), not
   "currentColor" — a plain "color" on an ancestor is inherited but can
   never override a value the element sets on itself, so the Icon Color
   control silently had no effect without this (same documented gotcha —
   and same fix, !important on every descendant, not just the <svg> root —
   already hit by this codebase's own Fullscreen Menu and Media Button
   widgets). A library icon-font glyph (a plain <i>) isn't affected by this
   rule at all, it was already correctly following `color` on its own. */
.xtool-bgm__icon svg,
.xtool-bgm__icon svg * {
	fill: currentColor !important;
}

.xtool-bgm.is-playing .xtool-bgm__icon--play { opacity: 1; }
.xtool-bgm.is-paused  .xtool-bgm__icon--pause { opacity: 1; }
/* Before JS ever runs (or if it fails to load), assume "about to play" so
   the button never renders with both icons invisible. */
.xtool-bgm:not(.is-playing):not(.is-paused) .xtool-bgm__icon--play { opacity: 1; }

.xtool-bgm--spin.is-playing .xtool-bgm__toggle {
	animation: xtool-bgm-spin 6s linear infinite;
}

@keyframes xtool-bgm-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* "Equalizer Bars" playing animation — 3 bars pulsing at staggered timing,
   replacing the Playing Icon entirely rather than sitting alongside it
   (matches the reference look: just bars, no separate music-note icon). */
.xtool-bgm__bars {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 2px;
	width: var(--xbgm-icon-size);
	height: var(--xbgm-icon-size);
}

.xtool-bgm__bar {
	display: block;
	width: 3px;
	background: currentColor;
	border-radius: 1px;
	transform-origin: bottom;
	transform: scaleY(0.4);
}

.xtool-bgm__bar:nth-child(1) { height: 45%; }
.xtool-bgm__bar:nth-child(2) { height: 100%; }
.xtool-bgm__bar:nth-child(3) { height: 70%; }

.xtool-bgm--bars.is-playing .xtool-bgm__bar {
	animation: xtool-bgm-bar 0.9s ease-in-out infinite;
}

.xtool-bgm--bars.is-playing .xtool-bgm__bar:nth-child(2) { animation-delay: 0.2s; }
.xtool-bgm--bars.is-playing .xtool-bgm__bar:nth-child(3) { animation-delay: 0.4s; }

@keyframes xtool-bgm-bar {
	0%, 100% { transform: scaleY(0.4); }
	50%      { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
	.xtool-bgm--spin.is-playing .xtool-bgm__toggle {
		animation: none;
	}
	.xtool-bgm--bars.is-playing .xtool-bgm__bar {
		animation: none;
		transform: scaleY(0.75);
	}
}