/**
 * Mayimex WhatsApp Quote Button
 * Floating action button, pinned bottom-right, expands to a label on hover/focus.
 */

.mmx-wa {
	position: fixed;
	right: var(--mmx-wa-right, 20px);
	bottom: var(--mmx-wa-bottom, 90px);
	z-index: 9998; /* Above page content, deliberately below reCAPTCHA's badge and modals. */
	margin: 0;
	padding: 0;
	line-height: 0;
}

.mmx-wa__btn {
	display: inline-flex;
	align-items: center;
	background-color: #25d366;
	color: #ffffff;
	border-radius: 999px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
	text-decoration: none;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
	animation: mmx-wa-in 0.35s ease both;
}

.mmx-wa__btn:hover,
.mmx-wa__btn:focus-visible {
	background-color: #1fb457;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34);
	transform: translateY(-1px);
	color: #ffffff;
}

.mmx-wa__btn:focus-visible {
	outline: 3px solid rgba(37, 211, 102, 0.45);
	outline-offset: 3px;
}

/* Icon: fixed circle, always visible, pinned to the right (screen edge). */
.mmx-wa__icon {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mmx-wa__icon svg {
	width: 30px;
	height: 30px;
	display: block;
}

/* Label: collapsed by default, expands to the left on hover/focus. */
.mmx-wa__label {
	display: inline-block;
	max-width: 0;
	padding-left: 0;
	padding-right: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.25s ease 0.05s,
		padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.mmx-wa__btn:hover .mmx-wa__label,
.mmx-wa__btn:focus-visible .mmx-wa__label {
	max-width: 340px;
	padding-left: 20px;
	padding-right: 6px;
	opacity: 1;
}

@keyframes mmx-wa-in {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.9);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Touch / small screens: icon only, no hover expansion. */
@media (max-width: 600px) {
	.mmx-wa__label {
		display: none;
	}

	.mmx-wa__icon {
		width: 52px;
		height: 52px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mmx-wa__btn,
	.mmx-wa__label {
		animation: none;
		transition: none;
	}
}