/**
 * 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;
	flex-direction: column;
	align-items: 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;
}

/* ── Call button ──────────────────────────────────────────────────────────── */

.alm-floating-call__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	margin-block-start: 0.5rem;
	padding: 0.5rem 1rem 0.5rem 0.75rem;
	background: var(--alm-color-navy, #102A43);
	color: #fff;
	border-radius: var(--alm-radius-full);
	text-decoration: none;
	white-space: nowrap;
	filter: drop-shadow(0 4px 8px rgba(16, 42, 67, 0.35));
	transition:
		background-color var(--alm-motion-fast, 160ms) var(--alm-ease-standard),
		filter var(--alm-motion-fast, 160ms) var(--alm-ease-standard),
		transform var(--alm-motion-fast, 160ms) var(--alm-ease-standard);
	will-change: filter;

	/* Hidden until the WA button becomes visible */
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
}

.alm-floating-wa--visible .alm-floating-call__btn {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
	transition-delay: 120ms;
	animation: alm-call-glow 2.4s ease-in-out 2.6s 3;
}

.alm-floating-call__btn:hover,
.alm-floating-call__btn:focus-visible {
	background: #1a3f5e;
	filter: drop-shadow(0 6px 14px rgba(16, 42, 67, 0.45));
	transform: translateY(-1px);
	outline: none;
}

.alm-floating-call__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);
}

.alm-floating-call__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	will-change: transform;
	animation: alm-call-ring 2.4s ease-in-out 2.6s 3;
}

.alm-floating-call__number {
	font-size: var(--alm-text-sm, 0.875rem);
	font-weight: var(--alm-weight-semibold, 600);
	font-family: var(--alm-font-ui, 'Inter', sans-serif);
	letter-spacing: 0.02em;
	color: #fff;
}

/*
 * Ring animation — rotate only (no scale).
 * Pure rotation is compositor-only and does not trigger paint.
 */
@keyframes alm-call-ring {
	0%   { transform: rotate(0deg);   }
	8%   { transform: rotate(-18deg); }
	16%  { transform: rotate(18deg);  }
	24%  { transform: rotate(-14deg); }
	32%  { transform: rotate(14deg);  }
	40%  { transform: rotate(-8deg);  }
	48%  { transform: rotate(8deg);   }
	56%  { transform: rotate(0deg);   }
	100% { transform: rotate(0deg);   }
}

/*
 * Glow pulse on the button — uses filter: drop-shadow instead of box-shadow.
 * filter runs on the compositor and avoids paint invalidation.
 */
@keyframes alm-call-glow {
	0%, 56%, 100% { filter: drop-shadow(0 4px 8px rgba(16, 42, 67, 0.35)); }
	28%            { filter: drop-shadow(0 4px 14px rgba(205, 170, 125, 0.55)); }
}

/* ── Mobile full-width phone bar ─────────────────────────────────────────── */

@media (max-width: 767px) {
	/*
	 * Container: full-width column, flush to page bottom.
	 * HTML order: WA btn first → call bar second → call bar ends at bottom edge.
	 */
	.alm-floating-wa {
		inset-inline-end: 0;
		inset-block-end: 0;
		width: 100%;
		flex-direction: column;
		align-items: flex-end;
		padding-inline-end: 1.25rem;
		padding-block-end: 0;
	}

	/* WA FAB gap above the call bar */
	.alm-floating-wa__btn {
		margin-block-end: 0.75rem;
	}

	/* Full-width call bar — flush to bottom, green gradient */
	.alm-floating-call__btn {
		position: relative;
		overflow: hidden;
		width: 100%;
		min-height: 52px;
		margin-block-start: 0;
		padding: 0.875rem 1.5rem calc(0.875rem + env(safe-area-inset-bottom, 0px));
		border-radius: 0;
		justify-content: center;
		gap: 0.75rem;
		filter: none;
		background: linear-gradient(90deg, #0e7040 0%, #25a244 50%, #0e7040 100%);
		box-shadow: 0 -2px 12px rgba(14, 112, 64, 0.35);

		/* Reactive entrance: slide up from below */
		transform: translateY(100%);
		opacity: 0;
	}

	/* Shimmer overlay — compositor-only translateX, no paint */
	.alm-floating-call__btn::before {
		content: '';
		position: absolute;
		inset-block: 0;
		inset-inline-start: -60%;
		width: 40%;
		background: linear-gradient(
			90deg,
			transparent 0%,
			rgba(255, 255, 255, 0.18) 50%,
			transparent 100%
		);
		transform: translateX(-100%);
		will-change: transform;
		pointer-events: none;
	}

	.alm-floating-wa--visible .alm-floating-call__btn {
		animation:
			alm-call-bar-enter 400ms cubic-bezier(0.2, 0, 0, 1) 2s forwards,
			alm-call-ring 2.4s ease-in-out 2.8s 3;
		pointer-events: auto;
		transition-delay: 0ms;
		filter: none;
	}

	.alm-floating-wa--visible .alm-floating-call__btn::before {
		animation: alm-call-bar-shimmer 2.8s ease-in-out 2.6s 3;
	}

	.alm-floating-call__btn:hover,
	.alm-floating-call__btn:focus-visible {
		background: linear-gradient(90deg, #0a5c33 0%, #1d8c38 50%, #0a5c33 100%);
		filter: none;
		transform: translateY(0);
	}

	.alm-floating-call__label {
		font-size: 1.2rem;
		font-weight: var(--alm-weight-bold, 700);
		font-family: var(--alm-font-arabic, 'Alexandria', sans-serif);
		color: #fff;
	}

	.alm-floating-call__number {
		font-size: 1.2rem;
		letter-spacing: 0.06em;
	}

	.alm-floating-call__icon {
		width: 30px;
		height: 30px;
	}
}

@keyframes alm-call-bar-enter {
	from {
		transform: translateY(100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes alm-call-bar-shimmer {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(400%); }
}

/* Hide when filter drawer is open — avoids covering drawer CTA on mobile */
body.alm-drawer-open .alm-floating-wa {
	opacity: 0;
	pointer-events: none;
	transition: opacity 150ms ease;
}

/* 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,
	.alm-floating-call__btn,
	.alm-floating-call__icon {
		transition: none;
		animation: none;
		will-change: auto;
	}

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

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