/*
 * Floating WhatsApp button.
 *
 * Ported from the inline <style> block in hub-child/qlwapp-x10/box.php.
 * Configurable values arrive as custom properties from wp_add_inline_style();
 * the fallbacks reproduce the original x10 design if they are ever missing.
 */

#tsl-wa-button {
	width: var(--tslwa-width, 108px);
	padding: 0 20px 20px 0;
	position: fixed;
	bottom: var(--tslwa-bottom, 80px);
	right: 0;
	z-index: 2;
}

#tsl-wa-button .tsl-wa-button-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#tsl-wa-button .tsl-wa-button-link {
	background: linear-gradient(
		90deg,
		var(--tslwa-from, #a02ddf) 0%,
		var(--tslwa-to, #1867d3) 100%
	);
	width: 100%;
	height: auto;
	margin: 0;
	padding: 10px 4px;
	border-radius: var(--tslwa-radius, 10px);
	display: flex;
	gap: 5px;
	color: var(--tslwa-text, #ffffff);
	font-weight: bold;
	align-items: center;
	justify-content: center;
}

/*
 * Hover / keyboard focus.
 *
 * The gradient uses Elementor's global colour variables so the button tracks
 * the site palette. They resolve on the front end only, so each falls back to
 * the configured gradient reversed — an undefined var would otherwise make the
 * whole background-image declaration invalid and drop the hover entirely.
 */
#tsl-wa-button .tsl-wa-button-link {
	transition:
		background-image 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

#tsl-wa-button .tsl-wa-button-link:hover,
#tsl-wa-button .tsl-wa-button-link:focus-visible {
	background-image: linear-gradient(
		90deg,
		var(--e-global-color-a3f3bc1, var(--tslwa-to, #1867d3)) 0%,
		var(--e-global-color-e8255b6, var(--tslwa-from, #a02ddf)) 100%
	);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
	transform: translate3d(0, -2px, 0);
}

@media (prefers-reduced-motion: reduce) {
	#tsl-wa-button .tsl-wa-button-link {
		transition: none;
	}

	#tsl-wa-button .tsl-wa-button-link:hover,
	#tsl-wa-button .tsl-wa-button-link:focus-visible {
		transform: none;
	}
}

#tsl-wa-button .tsl-wa-button-link svg {
	width: 1.5em;
	height: 1.5em;
	vertical-align: middle;
	fill: currentColor;
}

#tsl-wa-button .tsl-wa-button-label {
	display: block;
	font-size: 1rem;
	margin-left: 0.3em;
}