/**
 * EMU Hardware Interface — three-popup sales lift styles
 * Spec: docs/superpowers/specs/2026-05-21-emu-hardware-popups-design.md
 *
 * Visual language mirrors the region-redirect popup in
 * templates/footer-redirect-message.php (main-style.scss line 5529+).
 * Same palette, same shadow stack, same CTA hierarchy — so the EMU
 * popups feel like a sibling of an existing pattern, not a new system.
 */

:root {
	/* Brand */
	--emu-popup-primary:       #0EA5DE;  /* matches .single_add_to_cart_button bg */
	--emu-popup-primary-hover: #0892C4;  /* matches the redirect popup's hover */
	--emu-popup-primary-deep:  #075F80;  /* badge text + accents */
	--emu-popup-badge-bg:      #E7F6FC;  /* pill-badge tint */
	--emu-popup-green:         #1A8A4F;  /* tick colour (matches redirect popup) */

	/* Navy palette — borrowed verbatim from .rm-* */
	--emu-popup-text:          #0E2238;
	--emu-popup-muted:         #4A5A6E;
	--emu-popup-muted-soft:    #8A95A3;
	--emu-popup-bg:            #ffffff;
	--emu-popup-surface:       #F0F3F6;
	--emu-popup-border:        rgba(14, 34, 56, 0.08);

	/* Soft layered shadow — 6 stops, same as .rm-card */
	--emu-popup-shadow:
		0 2.8px 2.2px rgba(0, 0, 0, 0.034),
		0 6.7px 5.3px rgba(0, 0, 0, 0.048),
		0 12.5px 10px rgba(0, 0, 0, 0.06),
		0 22.3px 17.9px rgba(0, 0, 0, 0.072),
		0 41.8px 33.4px rgba(0, 0, 0, 0.086),
		0 100px 80px rgba(0, 0, 0, 0.12);

	--emu-popup-radius: 14px;
	/* Must sit above #navbar (z-index: 111111). Same tier as the redirect popup
	   (z-index: 500000) so the two are in the same modal stack. */
	--emu-popup-z: 500000;
}

/* Lock background scroll while any EMU popup is open — mirrors the
   .redirect-popup-open rule (main-style.scss line 5525). Necessary on top of
   the JS wheel/touchmove blocker because some browsers honour overflow:hidden
   alone, and we want both layers for resilience. */
body.emu-popup-open { overflow: hidden; }

/* ─── Backdrop (Popup 1 + 3) ─────────────────────────────────────── */
.emu-popup-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(8, 22, 38, 0.55);   /* navy backdrop — matches #redirect-message */
	z-index: var(--emu-popup-z);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	overflow-y: auto;
	opacity: 0;
	transition: opacity .22s ease;
}
.emu-popup-backdrop[data-visible] { opacity: 1; }
.emu-popup-backdrop[hidden] { display: none !important; }

/* ─── Modal frame ────────────────────────────────────────────────── */
.emu-popup {
	background: var(--emu-popup-bg);
	color: var(--emu-popup-text);
	border-radius: var(--emu-popup-radius);
	box-shadow: var(--emu-popup-shadow);
	position: relative;
	font-family: 'Source Sans 3', 'Fira Sans', sans-serif, Helvetica, Arial;
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
	transform: translateY(8px);
	opacity: 0;
	transition: opacity .22s ease, transform .28s cubic-bezier(.16,1,.3,1);
}
.emu-popup--centered {
	width: 100%;
	max-width: 460px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	padding: 32px 28px 24px;
}
.emu-popup-backdrop[data-visible] .emu-popup {
	transform: translateY(0);
	opacity: 1;
}

/* ─── Close button (matches .rm-close) ───────────────────────────── */
.emu-popup-close {
	position: absolute;
	top: 10px; right: 10px;
	width: 32px; height: 32px;
	border: 0;
	background: transparent;
	color: var(--emu-popup-muted-soft);
	border-radius: 8px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	line-height: 1;
	transition: background-color .12s ease, color .12s ease;
}
.emu-popup-close:hover { background: var(--emu-popup-surface); color: var(--emu-popup-text); }
.emu-popup-close:focus-visible { outline: 2px solid var(--emu-popup-primary); outline-offset: 2px; }
.emu-popup-close svg { display: block; }

/* ─── Pill badge (was "eyebrow") — matches .rm-badge ─────────────── */
.emu-popup-eyebrow {
	display: inline-block;
	background: var(--emu-popup-badge-bg);
	color: var(--emu-popup-primary-deep);
	border-radius: 999px;
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin-bottom: 14px;
	text-transform: none; /* the redirect popup is mixed-case; reads softer */
}

/* ─── Typography (matches .rm-headline / .rm-sub) ────────────────── */
.emu-popup-headline {
	font-family: 'Montserrat', 'Source Sans 3', sans-serif, Helvetica, Arial;
	font-size: 22px;
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--emu-popup-text);
	margin: 0 0 6px;
	/* Prevents orphan single words on the last line. Browsers without support
	   (older Safari) fall back to natural wrapping — purely a polish enhancement. */
	text-wrap: balance;
}
.emu-popup-headline--small {
	font-size: 16px;
	line-height: 1.3;
	margin: 4px 0 4px;
}

.emu-popup-subhead {
	margin: 0 0 20px;
	color: var(--emu-popup-muted);
	font-size: 15px;
	line-height: 1.5;
	/* "pretty" specifically rebalances the last few lines to avoid orphans —
	   ideal for body copy. "balance" would over-balance the whole paragraph. */
	text-wrap: pretty;
}
.emu-popup-subhead--small {
	font-size: 13px;
	margin: 0 0 12px;
}

/* ─── Badges (Popup 1 — 3-icon "value" row) ──────────────────────── */
.emu-popup-badges {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 0 0 22px;
}
.emu-popup-badge {
	background: var(--emu-popup-surface);
	border-radius: 10px;
	padding: 16px 8px 12px;
	text-align: center;
	border: 1px solid transparent;
	transition:
		border-color .22s ease,
		transform .22s cubic-bezier(.16,1,.3,1),
		background-color .22s ease;
}
.emu-popup-badge:hover {
	border-color: var(--emu-popup-primary);
	background: #fff;
	transform: translateY(-2px);
}
.emu-popup-badge:hover .emu-popup-badge-icon {
	transform: scale(1.06);
}
.emu-popup-badge-icon {
	font-family: 'Montserrat', 'Source Sans 3', sans-serif;
	font-size: 28px;
	font-weight: 600;
	line-height: 1;
	color: var(--emu-popup-primary-deep);
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 1px;
	margin-bottom: 6px;
	transition: transform .25s cubic-bezier(.16,1,.3,1);
	transform-origin: center;
}
.emu-popup-badge-icon--infinity {
	font-size: 38px;
	line-height: .85;
}
.emu-popup-badge-unit {
	font-size: 13px;
	font-weight: 600;
	color: var(--emu-popup-primary-deep);
}
.emu-popup-badge-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--emu-popup-muted);
	letter-spacing: 0.02em;
	line-height: 1.3;
}

/* ─── Bullets (Popup 3) — matches .rm-benefits ───────────────────── */
.emu-popup-bullets {
	list-style: none;
	margin: 18px 0 22px;
	padding: 0;
	display: grid;
	gap: 10px;
}
.emu-popup-bullets li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	color: var(--emu-popup-text);
	padding: 0;
	border: 0;
	position: static;
}
.emu-popup-bullets li::before, .emu-popup-bullets li::after { content: none; } /* clear v1 pseudo-tick */
.emu-popup-bullets li {
	position: relative;
	padding-left: 28px;
}
.emu-popup-bullets li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 18px; height: 18px;
	color: var(--emu-popup-green);
	background:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M4 10.5 L7.5 14 L16 6' stroke='%231A8A4F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") no-repeat center / 18px 18px;
}
.emu-popup-bullets b { font-weight: 600; }

/* ─── Actions row (matches .rm-actions — STACKED) ────────────────── */
.emu-popup-actions {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 15px;
	margin-top: 4px;
}
.emu-popup-cta {
	display: inline-block;
	width: 100%;
	text-align: center;
	cursor: pointer;
	font-family: inherit;
	line-height: 1.2;
	transition: background-color 120ms ease, color 120ms ease;
	border: 0;
	border-radius: 8px;
	text-decoration: none;
}

/* PRIMARY — flat solid blue. Hover = darker tint only. NO shadow lift. */
.emu-popup-cta--primary {
	background: var(--emu-popup-primary);
	color: #fff;
	padding: 14px 18px;
	font-weight: 600;
	font-size: 15px;
}
.emu-popup-cta--primary:hover { background: var(--emu-popup-primary-hover); color: #fff; }
.emu-popup-cta--primary:visited { color: #fff; }
.emu-popup-cta--primary:focus-visible { outline: 2px solid var(--emu-popup-text); outline-offset: 2px; }

/* SECONDARY — text-link feel. Transparent. Quiet. */
.emu-popup-cta--ghost {
	background: transparent;
	color: var(--emu-popup-muted);
	padding: 10px;
	font-weight: 500;
	font-size: 14px;
}
.emu-popup-cta--ghost:hover { background: var(--emu-popup-surface); color: var(--emu-popup-text); }
.emu-popup-cta--ghost:focus-visible { outline: 2px solid var(--emu-popup-primary); outline-offset: 2px; }

/* Price label inside primary CTA */
.emu-popup-cta-price {
	opacity: 0.95;
	font-weight: 500;
	font-size: 14px;
	margin-left: 6px;
}
.emu-popup-cta-price .amount { color: inherit; }
.emu-popup-cta-price del { display: none; }

/* ─── Mobile — bottom sheet (matches redirect popup) ─────────────── */
@media (max-width: 600px) {
	.emu-popup-backdrop {
		align-items: flex-end;
		padding: 0;
	}
	.emu-popup--centered {
		max-width: none;
		width: 100%;
		border-radius: 16px 16px 0 0;
		padding: 24px 20px 20px;
		max-height: calc(100vh - 16px);
	}
	.emu-popup-headline { font-size: 20px; }
}

/* ─── RTL ────────────────────────────────────────────────────────── */
html[dir="rtl"] .emu-popup { text-align: right; }
html[dir="rtl"] .emu-popup-close { right: auto; left: 10px; }
html[dir="rtl"] .emu-popup-bullets li { padding-left: 0; padding-right: 28px; }
html[dir="rtl"] .emu-popup-bullets li::before { left: auto; right: 0; }
/* ─── Micro-animations ───────────────────────────────────────────── */
@keyframes emu-popup-fade-up {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes emu-popup-pulse-once {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.05); }
	100% { transform: scale(1); }
}

/* Stagger the 3 badges in after the modal lands. */
.emu-popup-backdrop[data-visible] .emu-popup-badge {
	animation: emu-popup-fade-up .38s cubic-bezier(.16,1,.3,1) both;
}
.emu-popup-backdrop[data-visible] .emu-popup-badge:nth-child(1) { animation-delay: .10s; }
.emu-popup-backdrop[data-visible] .emu-popup-badge:nth-child(2) { animation-delay: .16s; }
.emu-popup-backdrop[data-visible] .emu-popup-badge:nth-child(3) { animation-delay: .22s; }

/* Bullets in the exit-intent popup — snappier stagger (urgency feel). */
.emu-popup-backdrop[data-visible] .emu-popup-bullets li {
	animation: emu-popup-fade-up .28s cubic-bezier(.16,1,.3,1) both;
}
.emu-popup-backdrop[data-visible] .emu-popup-bullets li:nth-child(1) { animation-delay: .06s; }
.emu-popup-backdrop[data-visible] .emu-popup-bullets li:nth-child(2) { animation-delay: .10s; }
.emu-popup-backdrop[data-visible] .emu-popup-bullets li:nth-child(3) { animation-delay: .14s; }

/* Eyebrow pill — one gentle pulse on entry to draw the eye. */
.emu-popup-backdrop[data-visible] .emu-popup-eyebrow {
	animation: emu-popup-pulse-once .9s ease-out .3s 1 both;
	transform-origin: left center;
}

/* ─── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.emu-popup, .emu-popup-backdrop { transition: opacity .15s ease; transform: none; }
	.emu-popup-backdrop[data-visible] .emu-popup-badge,
	.emu-popup-backdrop[data-visible] .emu-popup-bullets li,
	.emu-popup-backdrop[data-visible] .emu-popup-eyebrow { animation: none; }
	.emu-popup-badge:hover { transform: none; }
	.emu-popup-badge:hover .emu-popup-badge-icon { transform: none; }
}