/**
 * Floating WhatsApp button.
 *
 * Mirrors the theme's scroll-to-top control, which is pinned with
 * `inset-inline-end` and sized by --st-offset / --st-size (main.css).
 * Reusing those two variables keeps both buttons on the same baseline, and
 * pinning to `inset-inline-start` puts this one on the opposite side in
 * English AND Arabic without a single direction override.
 */

.mueen-wa {
	--wa-size: var(--st-size, 50px);
	--wa-brand: #25d366;

	align-items: center;
	background-color: var(--wa-brand);
	block-size: var(--wa-size);
	border-radius: 999px;
	bottom: var(--st-offset, 20px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .28), 0 2px 4px rgba(0, 0, 0, .16);
	color: #fff;
	display: inline-flex;
	inline-size: var(--wa-size);
	inset-inline-start: var(--st-offset, 20px);
	justify-content: center;
	padding: 0;
	position: fixed;
	text-decoration: none;
	transition: inline-size .32s cubic-bezier(.4, 0, .2, 1),
	            background-color .25s ease,
	            box-shadow .25s ease,
	            transform .25s ease;
	white-space: nowrap;
	z-index: 99;
}

.mueen-wa:hover,
.mueen-wa:focus-visible {
	background-color: #1ebe5b;
	box-shadow: 0 10px 26px rgba(0, 0, 0, .34), 0 3px 6px rgba(0, 0, 0, .18);
	color: #fff;
}

.mueen-wa:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.mueen-wa:active {
	transform: scale(.95);
}

/* ── Icon ────────────────────────────────────────────────── */

.mueen-wa__icon {
	align-items: center;
	block-size: var(--wa-size);
	display: inline-flex;
	flex: 0 0 auto;
	inline-size: var(--wa-size);
	justify-content: center;
	position: relative;
	z-index: 1;
}

.mueen-wa__icon svg {
	block-size: 24px;
	/* The theme force-fills every SVG except .custom-svg; the brand mark is a
	   solid glyph, so filling with currentColor is exactly what we want. */
	fill: currentColor;
	inline-size: 24px;
}

/* ── Expanding label ─────────────────────────────────────────
   max-inline-size animates without needing to know the text width, which
   matters here because the label is translated. */

.mueen-wa__label {
	display: inline-flex;
	font-size: var(--jkd-font-xs-size, 14px);
	font-weight: 500;
	/* 1 clips Arabic — its ascenders, diacritics and descenders need more room
	   than the em box, and the label has overflow: hidden. */
	line-height: 1.4;
	max-inline-size: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-inline-size .32s cubic-bezier(.4, 0, .2, 1),
	            opacity .2s ease,
	            padding-inline-end .32s cubic-bezier(.4, 0, .2, 1);
	padding-inline-end: 0;
	position: relative;
	z-index: 1;
}

.mueen-wa:hover .mueen-wa__label,
.mueen-wa:focus-visible .mueen-wa__label {
	max-inline-size: 240px;
	opacity: 1;
	padding-inline-end: 22px;
}

.mueen-wa:hover,
.mueen-wa:focus-visible {
	inline-size: auto;
}

/* ── Attention pulse ─────────────────────────────────────────
   One slow ring. Deliberately restrained — a fast or heavy pulse reads as an
   ad rather than a support channel. */

.mueen-wa__pulse {
	animation: mueen-wa-pulse 2.8s cubic-bezier(.4, 0, .2, 1) infinite;
	background-color: var(--wa-brand);
	border-radius: 999px;
	inset: 0;
	opacity: .55;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

@keyframes mueen-wa-pulse {
	0%   { opacity: .5;  transform: scale(1); }
	70%  { opacity: 0;   transform: scale(1.6); }
	100% { opacity: 0;   transform: scale(1.6); }
}

/* Pulsing an expanded pill looks broken — stop it while the label is out. */
.mueen-wa:hover .mueen-wa__pulse,
.mueen-wa:focus-visible .mueen-wa__pulse {
	animation: none;
	opacity: 0;
}

/* ── Collision: cookie-law-info "revisit consent" widget ─────
   That control is fixed at bottom-left (45px, bottom 15px / left 15px), which
   is exactly where this button lands in the English build. Lift ours above it
   only while the widget is actually on screen. */

body:has(.cky-btn-revisit-wrapper:not(.cky-revisit-hide)) .mueen-wa {
	bottom: calc(var(--st-offset, 20px) + 58px);
}

/* ── Mobile ──────────────────────────────────────────────────
   The theme hides scroll-to-top under 576px, but WhatsApp is most useful on a
   phone, so this one stays. Slightly smaller and no hover-expand (there is no
   hover on touch — the label would never show and the pill would jitter). */

@media (max-width: 576px) {
	.mueen-wa {
		--wa-size: 48px;
	}

	.mueen-wa:hover,
	.mueen-wa:focus-visible {
		inline-size: var(--wa-size);
	}

	.mueen-wa:hover .mueen-wa__label,
	.mueen-wa:focus-visible .mueen-wa__label {
		max-inline-size: 0;
		opacity: 0;
		padding-inline-end: 0;
	}
}

/* ── Reduced motion ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.mueen-wa,
	.mueen-wa__label {
		transition: none;
	}

	.mueen-wa__pulse {
		animation: none;
		opacity: 0;
	}
}

/* Entrance: hidden until the script reveals it, so it never pops in
   half-styled. If JS never runs, the fallback below shows it anyway. */
.mueen-wa {
	opacity: 1;
}

.mueen-wa[data-wa-enter="pending"] {
	opacity: 0;
}