/* Floating WhatsApp button — markup comes from inc/whatsapp.php. */

:root {
	--kp-wa-size: 56px;
	--kp-wa-size-mobile: 50px;
	--kp-wa-right: 20px;
	--kp-wa-bottom: 20px;
	--kp-wa-green: #25d366;
	--kp-wa-gap: 12px; /* space between it and the scroll-to-top button above */
}

.kp-whatsapp {
	position: fixed;
	right: var(--kp-wa-right);
	bottom: var(--kp-wa-bottom);
	z-index: 360; /* above Woodmart's bottom bars (340–350) */
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none !important;
	transition: bottom .4s cubic-bezier(.19, 1, .22, 1);
}

.kp-whatsapp__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: var(--kp-wa-size);
	height: var(--kp-wa-size);
	border-radius: 50%;
	background: var(--kp-wa-green);
	box-shadow: 0 6px 18px rgba(37, 211, 102, .35), 0 2px 6px rgba(0, 0, 0, .15);
	color: #fff;
	transition: transform .25s, box-shadow .25s;
}

.kp-whatsapp__icon svg {
	width: 58%;
	height: 58%;
}

/* Soft ring that pulses outward every few seconds. */
.kp-whatsapp__icon::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--kp-wa-green);
	opacity: 0;
	animation: kp-wa-pulse 4s ease-out infinite;
}

@keyframes kp-wa-pulse {
	0%       { transform: scale(1);   opacity: .6; }
	40%, 100% { transform: scale(1.5); opacity: 0; }
}

.kp-whatsapp:hover .kp-whatsapp__icon {
	transform: scale(1.07);
	box-shadow: 0 10px 24px rgba(37, 211, 102, .45), 0 3px 8px rgba(0, 0, 0, .18);
}

/* Number label slides out to the left on hover (mouse only). */
.kp-whatsapp__label {
	padding: 8px 14px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
	color: #1a1a1a;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transform: translateX(8px);
	transition: opacity .2s, transform .2s;
}

@media (hover: hover) {
	.kp-whatsapp:hover .kp-whatsapp__label,
	.kp-whatsapp:focus-visible .kp-whatsapp__label {
		opacity: 1;
		transform: none;
	}
}

@media (hover: none) {
	.kp-whatsapp__label {
		display: none;
	}
}

/* Woodmart's scroll-to-top button sits above WhatsApp instead of on top of it.
 * (body … selectors so these beat Woodmart's own rules, which load later.) */
body .scrollToTop {
	bottom: calc(var(--kp-wa-bottom) + var(--kp-wa-size) + var(--kp-wa-gap));
}

/* Product pages: both move up while the sticky "Add to cart" bar is showing. */
body:has(.wd-sticky-btn.wd-sticky-btn-shown) .kp-whatsapp {
	bottom: calc(12px + var(--wd-sticky-btn-height, 0px));
}

body .wd-sticky-btn-shown.scrollToTop {
	bottom: calc(12px + var(--wd-sticky-btn-height, 0px) + var(--kp-wa-size) + var(--kp-wa-gap));
}

/* Phones/tablets: Woodmart's bottom toolbar (55px) is at the bottom of the screen. */
@media (max-width: 1024px) {
	:root {
		--kp-wa-size: var(--kp-wa-size-mobile);
		--kp-wa-right: 14px;
	}

	.sticky-toolbar-on {
		--kp-wa-bottom: 67px;
	}

	body.sticky-toolbar-on .scrollToTop {
		bottom: calc(var(--kp-wa-bottom) + var(--kp-wa-size) + var(--kp-wa-gap));
	}
}

@media (prefers-reduced-motion: reduce) {
	.kp-whatsapp__icon::after {
		animation: none;
	}
}