/* Hextra WhatsApp Button — frontend
   Prefisso .hxwa per non entrare in conflitto con UIkit/YOOtheme. */

.hxwa {
	--hxwa-bg: #25D366;
	--hxwa-fg: #FFFFFF;
	--hxwa-size: 60px;
	--hxwa-x: 20px;
	--hxwa-y: 20px;
	--hxwa-z: 990;

	position: fixed;
	bottom: calc(var(--hxwa-y) + env(safe-area-inset-bottom, 0px));
	z-index: var(--hxwa-z);
	margin: 0;
	padding: 0;
	line-height: 1;
	font-family: inherit;
	-webkit-tap-highlight-color: transparent;
}

.hxwa--right { right: var(--hxwa-x); left: auto; }
.hxwa--left  { left: var(--hxwa-x);  right: auto; }

.hxwa *,
.hxwa *::before,
.hxwa *::after { box-sizing: border-box; }

.hxwa__btn {
	display: flex;
	align-items: center;
	gap: 12px;
	color: inherit;
	text-decoration: none !important;
	outline: none;
	cursor: pointer;
}

.hxwa--right .hxwa__btn { flex-direction: row-reverse; }

.hxwa__icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--hxwa-size);
	height: var(--hxwa-size);
	border-radius: 50%;
	background: var(--hxwa-bg);
	color: var(--hxwa-fg);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
	transition: transform .2s ease, box-shadow .2s ease;
}

.hxwa__icon svg,
.hxwa__icon img {
	display: block;
	width: 56%;
	height: 56%;
	max-width: none;
	margin: 0;
	border: 0;
}

.hxwa__icon img { object-fit: contain; }

.hxwa__dot { fill: var(--hxwa-bg); }

.hxwa__btn:hover .hxwa__icon,
.hxwa__btn:focus-visible .hxwa__icon {
	transform: scale(1.07);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}

.hxwa__btn:focus-visible .hxwa__icon {
	outline: 3px solid var(--hxwa-bg);
	outline-offset: 3px;
}

/* Etichetta */
.hxwa__label {
	display: block;
	max-width: calc(100vw - var(--hxwa-size) - (var(--hxwa-x) * 2) - 24px);
	overflow: hidden;
	padding: 10px 15px;
	border-radius: 999px;
	background: #FFFFFF;
	color: #1F2933;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	text-overflow: ellipsis;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.hxwa--label-none .hxwa__label { display: none; }

.hxwa--label-hover .hxwa__label {
	opacity: 0;
	visibility: hidden;
	transform: translateX(8px);
	pointer-events: none;
}

.hxwa--left.hxwa--label-hover .hxwa__label { transform: translateX(-8px); }

.hxwa--label-hover .hxwa__btn:hover .hxwa__label,
.hxwa--label-hover .hxwa__btn:focus-visible .hxwa__label {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Su touch non esiste l'hover: l'etichetta "al passaggio" resta nascosta */
@media (hover: none) {
	.hxwa--label-hover .hxwa__label { display: none; }
}

/* Pulsazione */
.hxwa--pulse .hxwa__icon::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 50%;
	background: var(--hxwa-bg);
	animation: hxwa-pulse 2.4s ease-out infinite;
}

@keyframes hxwa-pulse {
	0%   { transform: scale(1);   opacity: .55; }
	70%  { transform: scale(1.6); opacity: 0; }
	100% { transform: scale(1.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.hxwa--pulse .hxwa__icon::before { animation: none; display: none; }
	.hxwa__icon,
	.hxwa__label { transition: none; }
}

/* Dispositivi — 960px = breakpoint @m di UIkit/YOOtheme */
@media (max-width: 959.98px) {
	.hxwa--only-desktop { display: none !important; }
}
@media (min-width: 960px) {
	.hxwa--only-mobile { display: none !important; }
}

@media print {
	.hxwa { display: none !important; }
}