/* ---------------------------------------------------------------------
 * PMBO - Floating WhatsApp button (platform main site only)
 *
 * - Fixed bottom-right pill that morphs into a tap-target on mobile.
 * - Click reveals a tiny "presets" panel (mimics WhatsApp Business reply).
 * - Honours prefers-reduced-motion + high-contrast.
 * --------------------------------------------------------------------- */

.pmbo-wa {
	position: fixed;
	right: clamp(14px, 2vw, 24px);
	bottom: clamp(14px, 2vw, 24px);
	z-index: 99980; /* below super-modal layers, above storefront content */
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: #0f172a;
	-webkit-font-smoothing: antialiased;
}

/* ============== TOGGLE BUTTON ============== */
.pmbo-wa-toggle {
	all: unset;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .7rem 1.1rem .7rem .75rem;
	background: #25D366;
	color: #fff;
	border-radius: 999px;
	font-weight: 700;
	font-size: .95rem;
	letter-spacing: .01em;
	box-shadow:
		0 18px 40px -12px rgba(37, 211, 102, .55),
		0 6px 12px -6px rgba(15, 23, 42, .25);
	position: relative;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.pmbo-wa-toggle:hover {
	transform: translateY(-2px);
	background: #1ebe59;
	box-shadow:
		0 22px 50px -12px rgba(37, 211, 102, .6),
		0 8px 16px -6px rgba(15, 23, 42, .25);
}

.pmbo-wa-toggle:focus-visible {
	outline: 3px solid #4f46e5;
	outline-offset: 3px;
}

.pmbo-wa-toggle:active { transform: translateY(0); }

.pmbo-wa-icon {
	width: 26px;
	height: 26px;
	background: #fff;
	color: #25D366;
	border-radius: 50%;
	padding: 3px;
	display: inline-flex;
	flex-shrink: 0;
}

.pmbo-wa-text {
	white-space: nowrap;
	font-size: .92rem;
}

/* Pulsing ring */
.pmbo-wa-toggle-ring {
	position: absolute;
	inset: -4px;
	border-radius: 999px;
	border: 2px solid #25D366;
	opacity: .5;
	animation: pmboWaRing 2.4s ease-out infinite;
	pointer-events: none;
}
@keyframes pmboWaRing {
	0%   { transform: scale(.95); opacity: .55; }
	75%  { transform: scale(1.18); opacity: 0; }
	100% { transform: scale(1.18); opacity: 0; }
}

/* Tiny pulse dot */
.pmbo-wa-pulse {
	position: absolute;
	top: -2px;
	right: -2px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #ef4444;
	border: 2px solid #fff;
	animation: pmboWaDot 1.8s ease-in-out infinite;
}
@keyframes pmboWaDot {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.18); }
}

/* On a small screen we hide the text label after first interaction so the
   button sits as a clean circle.*/
@media (max-width: 480px) {
	.pmbo-wa--open .pmbo-wa-text,
	.pmbo-wa-toggle:focus-visible .pmbo-wa-text { display: inline-flex; }
	.pmbo-wa-toggle { padding: .6rem .9rem .6rem .65rem; }
}

/* ============== POPUP CARD ============== */
.pmbo-wa-pop {
	position: absolute;
	right: 0;
	bottom: calc(100% + 12px);
	width: min(320px, calc(100vw - 32px));
	background: #fff;
	border-radius: 16px;
	box-shadow:
		0 30px 60px -20px rgba(15, 23, 42, .35),
		0 10px 30px -10px rgba(15, 23, 42, .15);
	overflow: hidden;
	transform-origin: bottom right;
	animation: pmboWaIn .22s cubic-bezier(.2, .9, .3, 1.2);
	border: 1px solid rgba(15, 23, 42, .08);
}
@keyframes pmboWaIn {
	from { opacity: 0; transform: scale(.94) translateY(6px); }
	to   { opacity: 1; transform: scale(1)   translateY(0);   }
}

.pmbo-wa-pop-head {
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: .85rem .85rem .85rem 1rem;
	background:
		linear-gradient(135deg, #128c7e 0%, #25d366 100%);
	color: #fff;
	position: relative;
}
.pmbo-wa-pop-head strong { display: block; font-size: .92rem; font-weight: 700; }
.pmbo-wa-pop-head small {
	font-size: .72rem;
	opacity: .9;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}
.pmbo-wa-dot {
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: #34d399;
	box-shadow: 0 0 0 0 rgba(16, 185, 129, .6);
	animation: pmboWaPulse 1.6s ease-out infinite;
}
@keyframes pmboWaPulse {
	0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); }
	70%  { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);  }
	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);   }
}
.pmbo-wa-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
	overflow: hidden;
}
.pmbo-wa-avatar svg { width: 26px; height: 26px; }

.pmbo-wa-close {
	margin-left: auto;
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	padding: .15rem .35rem;
	cursor: pointer;
	border-radius: 6px;
	transition: background .15s;
}
.pmbo-wa-close:hover { background: rgba(255, 255, 255, .15); }

.pmbo-wa-pop-body {
	padding: 1rem;
	background:
		repeating-linear-gradient(45deg, transparent 0 6px, rgba(99, 102, 241, .03) 6px 7px),
		#f5f3ee;
}

.pmbo-wa-bubble {
	background: #fff;
	border-radius: 12px;
	padding: .75rem .9rem;
	font-size: .92rem;
	color: #0f172a;
	line-height: 1.5;
	box-shadow: 0 1px 0 rgba(15, 23, 42, .04);
	position: relative;
	margin-bottom: .8rem;
}
.pmbo-wa-bubble::after {
	content: "";
	position: absolute;
	left: -6px;
	bottom: 8px;
	width: 12px;
	height: 12px;
	background: #fff;
	transform: rotate(45deg);
	border-radius: 2px;
}

.pmbo-wa-presets {
	display: flex;
	flex-direction: column;
	gap: .4rem;
}
.pmbo-wa-preset {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 999px;
	padding: .5rem .9rem;
	color: #0f172a;
	font-size: .85rem;
	text-decoration: none;
	transition: border-color .15s, transform .12s, box-shadow .15s;
}
.pmbo-wa-preset:hover {
	border-color: #25D366;
	color: #128c7e;
	transform: translateY(-1px);
	box-shadow: 0 6px 14px -8px rgba(15, 23, 42, .15);
}

.pmbo-wa-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .9rem 1rem;
	background: #25D366;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	font-size: .95rem;
	transition: background .15s;
}
.pmbo-wa-cta:hover { background: #1ebe59; color: #fff; }
.pmbo-wa-cta svg { width: 18px; height: 18px; }

@media (max-width: 480px) {
	.pmbo-wa-pop { width: calc(100vw - 28px); right: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.pmbo-wa-toggle-ring,
	.pmbo-wa-pulse,
	.pmbo-wa-dot { animation: none; }
	.pmbo-wa-pop { animation: none; }
}