/**
 * Floating WhatsApp Button — Almutaheda Pack
 *
 * Fixed bottom-inline-end, 44px minimum touch target.
 * Safe-area aware. Hidden on print.
 */

.alm-floating-wa {
	position: fixed;
	inset-block-end: calc(1.5rem + env(safe-area-inset-bottom, 0px));
	inset-inline-end: 1.25rem;
	z-index: var(--alm-z-sticky);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity var(--alm-motion-base, 280ms) var(--alm-ease-emphasized, cubic-bezier(0.2, 0, 0, 1)),
		transform var(--alm-motion-base, 280ms) var(--alm-ease-emphasized, cubic-bezier(0.2, 0, 0, 1));
	pointer-events: none;
}

.alm-floating-wa--visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* Checkout offset — move above the submit bar */
.alm-floating-wa--checkout-offset {
	inset-block-end: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}

/* Button */
.alm-floating-wa__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 52px;
	min-height: 52px;
	background: var(--alm-color-whatsapp, #168B5B);
	color: #fff;
	border-radius: var(--alm-radius-full);
	padding: 0.75rem;
	text-decoration: none;
	box-shadow: 0 4px 20px rgba(22, 139, 91, 0.40), 0 1px 6px rgba(0,0,0,0.15);
	transition:
		background-color var(--alm-motion-fast, 160ms) var(--alm-ease-standard),
		box-shadow var(--alm-motion-fast, 160ms) var(--alm-ease-standard),
		border-radius var(--alm-motion-base, 280ms) var(--alm-ease-emphasized),
		padding var(--alm-motion-base, 280ms) var(--alm-ease-emphasized);
	white-space: nowrap;
	overflow: hidden;
}

.alm-floating-wa__btn:hover,
.alm-floating-wa__btn:focus-visible {
	background: var(--alm-color-whatsapp-hover, #0F7048);
	box-shadow: 0 6px 28px rgba(22, 139, 91, 0.50), 0 2px 8px rgba(0,0,0,0.18);
	outline: none;
}

.alm-floating-wa__btn:focus-visible {
	outline: var(--alm-focus-ring-width, 3px) solid var(--alm-focus-ring-color, #C79A56);
	outline-offset: var(--alm-focus-ring-offset, 2px);
}

/* Icon */
.alm-floating-wa__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
}

/* Label — hidden by default, revealed on expand */
.alm-floating-wa__label {
	font-size: var(--alm-text-sm);
	font-weight: var(--alm-weight-semibold);
	color: #fff;
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	transition:
		max-width var(--alm-motion-base, 280ms) var(--alm-ease-emphasized),
		opacity var(--alm-motion-fast, 160ms) var(--alm-ease-standard);
}

.alm-floating-wa--expanded .alm-floating-wa__label {
	max-width: 12rem;
	opacity: 1;
}

.alm-floating-wa--expanded .alm-floating-wa__btn {
	padding-inline-end: 1.25rem;
	border-radius: var(--alm-radius-full);
}

/* One-time subtle entrance pulse */
@keyframes alm-wa-pulse {
	0%   { box-shadow: 0 4px 20px rgba(22,139,91,0.40), 0 0 0 0 rgba(22,139,91,0.4); }
	50%  { box-shadow: 0 4px 20px rgba(22,139,91,0.40), 0 0 0 12px rgba(22,139,91,0); }
	100% { box-shadow: 0 4px 20px rgba(22,139,91,0.40), 0 0 0 0 rgba(22,139,91,0); }
}

.alm-floating-wa--pulse .alm-floating-wa__btn {
	animation: alm-wa-pulse 600ms ease-out 1;
}

/* Print */
@media print {
	.alm-floating-wa {
		display: none !important;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.alm-floating-wa,
	.alm-floating-wa__btn,
	.alm-floating-wa__label {
		transition: none;
		animation: none;
	}

	.alm-floating-wa {
		opacity: 1;
		transform: none;
	}
}