/* =========================================================
   Latino Listen — Browser Text-to-Speech
   Flat, compact, square-cornered button — sized to its own
   content (never stretched full-width). Colors come from
   --wlb-button-color / --wlb-accent-color, set per-site as
   inline custom properties from Settings → Listen Button.
   The values below are only a fallback if that inline style
   is ever missing.
   ========================================================= */

:root {
	--wlb-button-color: #121212;
	--wlb-accent-color: #e52228;
}

.wlb-wrap {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	width: max-content;
	max-width: 100%;
	margin: 18px 0 22px;
}

.wlb-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: 0;
	background: var(--wlb-button-color);
	color: #ffffff;
	border: none;
	cursor: pointer;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	transition: background 0.15s ease, color 0.15s ease;
	font-family: inherit;
}

.wlb-btn:hover,
.wlb-btn:focus-visible {
	background: var(--wlb-accent-color);
	outline: none;
}

.wlb-wrap[data-state="speaking"] .wlb-btn,
.wlb-wrap[data-state="paused"] .wlb-btn {
	background: var(--wlb-accent-color);
}

.wlb-icon {
	display: none;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}
.wlb-icon svg { width: 100%; height: 100%; fill: currentColor; }

.wlb-wrap[data-state="idle"] .wlb-icon-play { display: inline-flex; }
.wlb-wrap[data-state="speaking"] .wlb-icon-wave { display: inline-flex; }
.wlb-wrap[data-state="paused"] .wlb-icon-pause { display: inline-flex; }

.wlb-label-play,
.wlb-label-playing,
.wlb-label-paused { display: none; }
.wlb-wrap[data-state="idle"] .wlb-label-play { display: inline; }
.wlb-wrap[data-state="speaking"] .wlb-label-playing { display: inline; }
.wlb-wrap[data-state="paused"] .wlb-label-paused { display: inline; }

/* animated waveform while playing — suspended automatically while hidden */
.wlb-wave-bar {
	transform-box: fill-box;
	transform-origin: center;
	animation: wlb-wave 0.9s ease-in-out infinite;
}
.wlb-wave-bar:nth-child(1) { animation-delay: 0s; }
.wlb-wave-bar:nth-child(2) { animation-delay: 0.15s; }
.wlb-wave-bar:nth-child(3) { animation-delay: 0.3s; }
@keyframes wlb-wave {
	0%, 100% { transform: scaleY(0.4); }
	50% { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
	.wlb-wave-bar { animation: none; }
}

.wlb-stop {
	display: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	border-radius: 0;
	background: var(--wlb-button-color);
	color: #ffffff;
	border: none;
	cursor: pointer;
	font-size: 13px;
	transition: background 0.15s ease, color 0.15s ease;
}
.wlb-wrap[data-state="paused"] .wlb-stop { display: inline-flex; }
.wlb-stop:hover,
.wlb-stop:focus-visible {
	background: var(--wlb-accent-color);
	outline: none;
}