/* =============================================================================
 * Ambient sound toggle — sits inside the editorial header next to "Réserver".
 * Off state: outline icon with X. On state: solid icon with pulsing waves.
 * ========================================================================== */

.exspa-sound-toggle {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 1px solid currentColor;
	color: var(--exspa-cream, #EFE8DA);
	width: 38px;
	height: 38px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	margin-left: 14px;
	opacity: 0.72;
	transition: opacity 250ms ease, transform 250ms ease, border-color 250ms ease, background 250ms ease;
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
}
.exspa-sound-toggle:hover {
	opacity: 1;
	transform: scale(1.06);
	border-color: var(--exspa-gold, #8B6F3D);
	color: var(--exspa-gold, #8B6F3D);
}
.exspa-sound-toggle:focus-visible {
	outline: 2px solid var(--exspa-gold, #8B6F3D);
	outline-offset: 3px;
}

/* Icon swap — off shows the X-mark; on shows the speaker + animated waves */
.exspa-sound-toggle__icon {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	transition: opacity 250ms ease;
}
.exspa-sound-toggle[data-state="off"] .exspa-sound-toggle__icon--on  { opacity: 0; }
.exspa-sound-toggle[data-state="off"] .exspa-sound-toggle__icon--off { opacity: 1; }
.exspa-sound-toggle[data-state="on"]  .exspa-sound-toggle__icon--on  { opacity: 1; }
.exspa-sound-toggle[data-state="on"]  .exspa-sound-toggle__icon--off { opacity: 0; }

/* When playing, the toggle gets a subtle gold tint + the waves pulse */
.exspa-sound-toggle[data-state="on"] {
	border-color: var(--exspa-gold, #8B6F3D);
	color: var(--exspa-gold, #8B6F3D);
	opacity: 1;
}
.exspa-sound-toggle[data-state="on"] .exspa-sound-toggle__wave--1 {
	transform-origin: 12px 12px;
	animation: exspa-sound-pulse 1.8s ease-in-out infinite;
}
.exspa-sound-toggle[data-state="on"] .exspa-sound-toggle__wave--2 {
	transform-origin: 12px 12px;
	animation: exspa-sound-pulse 1.8s ease-in-out 0.3s infinite;
}
@keyframes exspa-sound-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.5; transform: scale(0.92); }
}

/* Floating fallback (no header found) — bottom-right with safe-area padding */
.exspa-sound-toggle--floating {
	position: fixed;
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	right: 24px;
	z-index: 200;
	background: rgba(43, 37, 34, 0.85);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--exspa-cream, #EFE8DA);
	border-color: rgba(239, 232, 218, 0.45);
	margin-left: 0;
}

@media (max-width: 540px) {
	.exspa-sound-toggle {
		width: 34px;
		height: 34px;
		margin-left: 10px;
	}
}