/**
 * WhatsApp Button Frontend Styles
 *
 * inset-inline-end keeps the button bottom-right on LTR pages and
 * bottom-left on RTL (Arabic) pages automatically.
 *
 * @package MioAnimale\Features\WhatsappButton
 */

.mio-animale-whatsapp-button {
	position: fixed;
	inset-inline-end: 20px;
	bottom: 20px;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: #25d366;
	color: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mio-animale-whatsapp-button:hover,
.mio-animale-whatsapp-button:focus {
	color: #fff;
	transform: scale(1.08);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.mio-animale-whatsapp-button svg {
	width: 30px;
	height: 30px;
	fill: currentColor;
}

/* Keep clear of Woodmart's mobile sticky toolbar when it is enabled. */
@media (max-width: 1024px) {
	body:has(.wd-toolbar) .mio-animale-whatsapp-button {
		bottom: 74px;
	}
}