:root {
	--ultramettal-whatsapp: #25d366;
	--ultramettal-whatsapp-dark: #16b957;
	--ultramettal-whatsapp-ink: #062f1a;
	--ultramettal-brand-yellow: #ffcc00;
}

.ultramettal-whatsapp-cta {
	width: 100%;
	max-width: 680px;
	margin-top: 34px;
}

.ultramettal-whatsapp-cta__button {
	position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
	width: 100%;
	min-height: 96px;
	padding: 18px 22px;
	overflow: hidden;
	color: var(--ultramettal-whatsapp-ink) !important;
	text-decoration: none !important;
	background:
		radial-gradient(circle at 92% 12%, rgb(255 255 255 / 28%), transparent 34%),
		linear-gradient(135deg, #39df79 0%, var(--ultramettal-whatsapp) 56%, var(--ultramettal-whatsapp-dark) 100%);
	border: 1px solid rgb(255 255 255 / 30%);
	border-radius: 16px;
	box-shadow: 0 18px 38px rgb(5 87 43 / 28%);
	transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.ultramettal-whatsapp-cta__button::after {
	position: absolute;
	inset: 0;
	pointer-events: none;
	content: "";
	background: linear-gradient(110deg, transparent 20%, rgb(255 255 255 / 20%) 45%, transparent 66%);
	transform: translateX(-115%);
	transition: transform 520ms ease;
}

.ultramettal-whatsapp-cta__button:hover {
	color: var(--ultramettal-whatsapp-ink) !important;
	box-shadow: 0 22px 46px rgb(5 87 43 / 36%);
	transform: translateY(-2px);
	filter: saturate(1.04);
}

.ultramettal-whatsapp-cta__button:hover::after {
	transform: translateX(115%);
}

.ultramettal-whatsapp-cta__button:focus-visible,
.ultramettal-whatsapp-float:focus-visible {
	outline: 3px solid var(--ultramettal-brand-yellow);
	outline-offset: 4px;
}

.ultramettal-whatsapp-cta__icon {
	position: relative;
	z-index: 1;
	display: grid;
	flex: 0 0 58px;
	width: 58px;
	height: 58px;
	color: #fff;
	background: rgb(4 74 35 / 24%);
	border: 1px solid rgb(255 255 255 / 34%);
	border-radius: 50%;
	place-items: center;
}

.ultramettal-whatsapp-cta__icon svg {
	width: 31px;
	height: 31px;
}

.ultramettal-whatsapp-cta__copy {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	text-align: left;
}

.ultramettal-whatsapp-cta__copy strong {
	font-size: clamp(18px, 2vw, 22px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.ultramettal-whatsapp-cta__copy span {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
	opacity: 0.78;
}

.ultramettal-whatsapp-cta__arrow {
	position: relative;
	z-index: 1;
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	transition: transform 180ms ease;
}

.ultramettal-whatsapp-cta__button:hover .ultramettal-whatsapp-cta__arrow {
	transform: translateX(4px);
}

.ultramettal-whatsapp-float {
	position: fixed;
	right: max(22px, env(safe-area-inset-right));
	bottom: max(22px, env(safe-area-inset-bottom));
	z-index: 99999;
	display: grid;
	width: 62px;
	height: 62px;
	color: #fff !important;
	text-decoration: none !important;
	background: linear-gradient(145deg, #33dc73, #16b957);
	border: 2px solid rgb(255 255 255 / 82%);
	border-radius: 50%;
	box-shadow: 0 12px 30px rgb(0 0 0 / 34%), 0 0 0 0 rgb(37 211 102 / 42%);
	place-items: center;
	transition: transform 180ms ease, box-shadow 180ms ease;
	animation: ultramettal-whatsapp-pulse 3.2s ease-out infinite;
}

.ultramettal-whatsapp-float:hover {
	color: #fff !important;
	box-shadow: 0 16px 36px rgb(0 0 0 / 40%), 0 0 0 8px rgb(37 211 102 / 14%);
	transform: translateY(-3px) scale(1.035);
}

.ultramettal-whatsapp-float__icon {
	width: 31px;
	height: 31px;
}

.ultramettal-whatsapp-float__tooltip {
	position: absolute;
	top: 50%;
	right: calc(100% + 13px);
	width: max-content;
	max-width: 190px;
	padding: 8px 11px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	pointer-events: none;
	visibility: hidden;
	background: #111;
	border: 1px solid rgb(255 255 255 / 12%);
	border-radius: 7px;
	box-shadow: 0 8px 20px rgb(0 0 0 / 25%);
	opacity: 0;
	transform: translate(6px, -50%);
	transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.ultramettal-whatsapp-float:hover .ultramettal-whatsapp-float__tooltip,
.ultramettal-whatsapp-float:focus-visible .ultramettal-whatsapp-float__tooltip {
	visibility: visible;
	opacity: 1;
	transform: translate(0, -50%);
}

/* Keep Tekone's back-to-top control visible above the WhatsApp shortcut. */
body #scrollUp {
	right: 28px;
	bottom: 98px;
}

@keyframes ultramettal-whatsapp-pulse {
	0%, 70%, 100% {
		box-shadow: 0 12px 30px rgb(0 0 0 / 34%), 0 0 0 0 rgb(37 211 102 / 36%);
	}

	82% {
		box-shadow: 0 12px 30px rgb(0 0 0 / 34%), 0 0 0 13px rgb(37 211 102 / 0%);
	}
}

@media (max-width: 767px) {
	.ultramettal-whatsapp-cta {
		margin-top: 26px;
	}

	.ultramettal-whatsapp-cta__button {
		gap: 14px;
		min-height: 88px;
		padding: 16px;
		border-radius: 14px;
	}

	.ultramettal-whatsapp-cta__icon {
		flex-basis: 50px;
		width: 50px;
		height: 50px;
	}

	.ultramettal-whatsapp-cta__icon svg {
		width: 27px;
		height: 27px;
	}

	.ultramettal-whatsapp-cta__copy span {
		font-size: 12.5px;
	}

	.ultramettal-whatsapp-cta__arrow {
		flex-basis: 23px;
		width: 23px;
		height: 23px;
	}

	.ultramettal-whatsapp-float {
		right: max(16px, env(safe-area-inset-right));
		bottom: max(16px, env(safe-area-inset-bottom));
		width: 56px;
		height: 56px;
	}

	.ultramettal-whatsapp-float__icon {
		width: 28px;
		height: 28px;
	}

	.ultramettal-whatsapp-float__tooltip {
		display: none;
	}

	body #scrollUp {
		right: 18px;
		bottom: 82px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ultramettal-whatsapp-cta__button,
	.ultramettal-whatsapp-cta__button::after,
	.ultramettal-whatsapp-cta__arrow,
	.ultramettal-whatsapp-float,
	.ultramettal-whatsapp-float__tooltip {
		animation: none;
		transition: none;
	}
}