/*
	Floating "Order on WhatsApp" button.
	Fixed to the bottom-right of every page. Exact-match source: Footer.dc.html
	(the fixed <a> at the end). The colour is the shop owner's, passed in as the
	--hc-wa-float-color custom property on the element; everything else — size,
	position, radius, shadow, hover — is the design's and lives here.
*/

.hc-wa-float {
	position: fixed;
	bottom: 26px;
	right: 26px;
	z-index: 900;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hc-wa-float-color, #00f0ff);
	/* The shadow tints itself with the button colour so a custom colour still
	   glows the same way the design's cyan does. */
	box-shadow: 0 12px 32px color-mix(in srgb, var(--hc-wa-float-color, #00f0ff) 45%, transparent);
	transition: transform 0.2s ease;
}

/*
	The chat-bubble icon reads navy against the coloured button, matching the
	design (navy bubble, dots the button's own colour). The dots pick up
	--hc-wa-float-color inline in the SVG, so they always sit back into the
	button. currentColor drives the bubble body.
*/
.hc-wa-float__icon {
	color: var(--hc-navy, #1b2353);
	display: block;
}

.hc-wa-float:hover,
.hc-wa-float:focus-visible {
	transform: scale(1.08);
}

/*
	Older browsers without color-mix() still get a fixed cyan-tinted shadow
	rather than none, so the button never looks flat there.
*/
@supports not (background: color-mix(in srgb, red, blue)) {
	.hc-wa-float {
		box-shadow: 0 12px 32px rgba(0, 240, 255, 0.45);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hc-wa-float {
		transition: none;
	}
}

/* Clear of the product page's sticky add-to-cart bar on mobile. */
@media (max-width: 600px) {
	.single-product .hc-wa-float {
		bottom: 84px;
	}
}