/* LuxOrient Growth — floating WhatsApp button.
   Dynamic values (size, colour, offsets) come from inline CSS custom properties. */

.luxg-wa {
	position: fixed;
	z-index: 99998;
	bottom: var(--luxg-wa-bottom, 24px);
	width: var(--luxg-wa-size, 60px);
	height: var(--luxg-wa-size, 60px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border-radius: 999px;
	background: var(--luxg-wa-bg, #25D366);
	color: var(--luxg-wa-fg, #ffffff);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	text-decoration: none;
	line-height: 0;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.luxg-wa:hover,
.luxg-wa:focus-visible {
	transform: scale(1.06);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
	color: var(--luxg-wa-fg, #ffffff);
}

.luxg-wa:focus-visible {
	outline: 3px solid rgba(255, 255, 255, 0.7);
	outline-offset: 2px;
}

.luxg-wa svg {
	width: 58%;
	height: 58%;
	fill: currentColor;
	display: block;
}

.luxg-wa--right {
	right: var(--luxg-wa-side, 24px);
}

.luxg-wa--left {
	left: var(--luxg-wa-side, 24px);
}

/* Labelled (pill) variant */
.luxg-wa--labeled {
	width: auto;
	height: var(--luxg-wa-size, 60px);
	padding: 0 22px 0 18px;
}

.luxg-wa--labeled svg {
	width: 26px;
	height: 26px;
}

.luxg-wa__label {
	font: 600 15px/1 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	white-space: nowrap;
}

/* Gentle entrance */
@media (prefers-reduced-motion: no-preference) {
	.luxg-wa {
		animation: luxg-wa-in 0.4s ease both;
	}
	@keyframes luxg-wa-in {
		from { opacity: 0; transform: translateY(12px) scale(0.9); }
		to   { opacity: 1; transform: none; }
	}
}

/* Device visibility (kept in CSS so it works behind a full-page cache) */
@media (max-width: 768px) {
	.luxg-wa--hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
	.luxg-wa--hide-desktop { display: none !important; }
}