/*!
 * pf-fomo surface styles (Blueprint §9.5/§9.6, §23 CWV). RTL-first, dark-mode-aware, brand-token-driven
 * via CSS custom properties inherited from the active theme (--wp--preset--color--*). CLS-safe: fixed
 * surfaces reserve their own space and animate transform/opacity only (never layout); inline blocks
 * reserve min-height server-side. No web fonts, no blocking imports. All colours fall back to neutral
 * tokens so a theme without the presets still renders correctly.
 */

.pf-fomo-root,
.pf-fomo-bar,
.pf-fomo-float,
.pf-fomo-overlay,
.pf-fomo-block {
	--pf-fomo-accent: var( --wp--preset--color--primary, #1f6feb );
	--pf-fomo-bg: var( --wp--preset--color--base, #ffffff );
	--pf-fomo-fg: var( --wp--preset--color--contrast, #11181c );
	--pf-fomo-muted: #6b7280;
	--pf-fomo-shadow: 0 6px 24px rgba( 0, 0, 0, 0.14 );
	/* The corner radius follows the active theme's card family (pf-base: --pf-radius-lg); the literal is
	   only the fallback for a theme that defines no such token. */
	--pf-fomo-radius: var( --pf-radius-lg, 12px );
	box-sizing: border-box;
	font-family: inherit;
}

/* The floating root: a fixed, non-layout-affecting host for transient surfaces. */
.pf-fomo-root {
	position: fixed;
	inset-block-end: 0;
	inset-inline-start: 0;
	z-index: 99990;
	pointer-events: none;
}
.pf-fomo-root > * { pointer-events: auto; }

/*
 * EVERY BOTTOM-FIXED SURFACE STANDS ON TOP OF THE CONSENT BAR WHILE IT IS ON SCREEN. The platform consent
 * runtime (pf-platform-core assets/consent.js — the banner is the platform's since 2026-09-23) writes the
 * bar's measured height to the root as --pf-consent-h for exactly as long as the bar is mounted; until it
 * is answered the toast, the floating feed and the floating buttons are lifted by that much. Measured
 * before this: the toast sat entirely inside the bar at 375px and ~50px under it at >=768px, never
 * visible. With no bar the offset is 0px.
 */

/* ---------- A: social-proof toast ---------- */
.pf-fomo-toast {
	position: fixed;
	inset-block-end: calc( 18px + var( --pf-consent-h, 0px ) );
	inset-inline-start: 18px;
	max-inline-size: min( 360px, calc( 100vw - 32px ) );
	min-block-size: 64px; /* reserve space => no CLS when copy swaps */
	background: var( --pf-fomo-bg );
	color: var( --pf-fomo-fg );
	border: 1px solid rgba( 0, 0, 0, 0.08 );
	border-inline-start: 3px solid var( --pf-fomo-accent );
	border-radius: var( --pf-fomo-radius );
	box-shadow: var( --pf-fomo-shadow );
	padding: 12px 36px 12px 14px;
	opacity: 0;
	transform: translateY( 12px );
	transition: opacity 0.3s ease, transform 0.3s ease;
	z-index: 99991;
}
.pf-fomo-toast.is-in { opacity: 1; transform: translateY( 0 ); }
.pf-fomo-toast.is-out { opacity: 0; transform: translateY( 12px ); }
.pf-fomo-toast__body { font-size: 14px; line-height: 1.5; }

/* ---------- B: counter ---------- */
.pf-fomo-counter {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	min-block-size: 40px;
	color: var( --pf-fomo-fg );
}
.pf-fomo-counter__num {
	font-size: clamp( 22px, 4vw, 34px );
	font-weight: 800;
	color: var( --pf-fomo-accent );
	font-variant-numeric: tabular-nums;
}
.pf-fomo-counter__label { font-size: 14px; color: var( --pf-fomo-muted ); }

/* ---------- C: activity feed ---------- */
.pf-fomo-feed { color: var( --pf-fomo-fg ); }
.pf-fomo-feed--float {
	position: fixed;
	inset-block-end: calc( 18px + var( --pf-consent-h, 0px ) );
	inset-inline-end: 18px;
	inline-size: min( 320px, calc( 100vw - 32px ) );
	max-block-size: 50vh;
	overflow: auto;
	background: var( --pf-fomo-bg );
	border-radius: var( --pf-fomo-radius );
	box-shadow: var( --pf-fomo-shadow );
	padding: 10px 12px;
	z-index: 99991;
}
.pf-fomo-feed__list { list-style: none; margin: 0; padding: 0; }
.pf-fomo-feed__item { padding: 8px 0; border-block-end: 1px solid rgba( 0, 0, 0, 0.06 ); font-size: 13px; }
.pf-fomo-feed__item:last-child { border-block-end: 0; }
.pf-fomo-feed__item a { color: inherit; text-decoration: none; }

/* ---------- D: popup modal ---------- */
.pf-fomo-overlay {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.5 );
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99995;
	padding: 16px;
}
.pf-fomo-modal {
	position: relative;
	background: var( --pf-fomo-bg );
	color: var( --pf-fomo-fg );
	border-radius: var( --pf-fomo-radius );
	box-shadow: var( --pf-fomo-shadow );
	max-inline-size: 440px;
	inline-size: 100%;
	padding: 28px 22px 22px;
	text-align: center;
}
.pf-fomo-modal__h { margin: 0 0 8px; font-size: 20px; }
.pf-fomo-modal__b { margin: 0 0 16px; color: var( --pf-fomo-muted ); font-size: 15px; }

/* ---------- E: sticky bar ---------- */
.pf-fomo-bar {
	position: fixed;
	inset-inline: 0;
	min-block-size: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var( --pf-fomo-accent );
	color: #fff;
	padding: 10px 44px;
	font-size: 14px;
	z-index: 99992;
}
.pf-fomo-bar--top { inset-block-start: 0; }
.pf-fomo-bar--bottom { inset-block-end: 0; }
body.has-pf-fomo-bar-top { padding-block-start: 44px; } /* reserve space => no CLS */
body.has-pf-fomo-bar-bottom { padding-block-end: 44px; }
/* The bar's CTA (P10): the whole message is the link. It keeps the bar's own colour — a theme's link colour is
   usually its accent, which is this bar's background, and the words would vanish into it. */
.pf-fomo-bar__link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- F: floating widgets ---------- */
.pf-fomo-float {
	position: fixed;
	inset-block-end: calc( 18px + var( --pf-consent-h, 0px ) );
	display: flex;
	flex-direction: column;
	gap: 10px;
	z-index: 99993;
}
.pf-fomo-float--br { inset-inline-end: 18px; }
.pf-fomo-float--bl { inset-inline-start: 18px; }
.pf-fomo-fbtn {
	inline-size: 52px;
	block-size: 52px;
	border-radius: 50%;
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: var( --pf-fomo-accent );
	box-shadow: var( --pf-fomo-shadow );
	cursor: pointer;
	font-size: 12px;
	text-decoration: none;
}
.pf-fomo-fbtn--wa { background: #25d366; }
.pf-fomo-fbtn--call { background: #0a7; }

/* ---------- H: countdown ---------- */
.pf-fomo-cd { font-variant-numeric: tabular-nums; font-weight: 700; }
.pf-fomo-countdown { color: var( --pf-fomo-fg ); min-block-size: 32px; }

/* ---------- I: coupon ---------- */
.pf-fomo-coupon__result { margin-block-start: 12px; font-weight: 700; min-block-size: 20px; }

/* ---------- shared: CTA, close, disclosure ----------
   A <button> does NOT inherit font from its ancestors — the user agent's own control font wins — so
   every button here rendered in Arial on a site whose every other glyph is the theme's family
   (measured 2026-09-06 on the consent buttons and the toast's close control). `font: inherit` is
   declared FIRST in each button rule so the rule's own size still applies after it. Radii come from
   the theme's control token (pf-base: --pf-radius-md), with the old literal only as the fallback. */
.pf-fomo-cta {
	font: inherit;
	display: inline-block;
	background: var( --pf-fomo-accent );
	color: #fff;
	border: 0;
	border-radius: var( --pf-radius-md, 8px );
	padding: 10px 18px;
	font-size: 15px;
	text-decoration: none;
	cursor: pointer;
}
.pf-fomo-x {
	font: inherit;
	position: absolute;
	inset-block-start: 6px;
	inset-inline-end: 8px;
	background: transparent;
	border: 0;
	border-radius: var( --pf-radius-md, 8px );
	font-size: 20px;
	line-height: 1;
	color: var( --pf-fomo-muted );
	cursor: pointer;
}
.pf-fomo-disclosure {
	display: block;
	margin-block-start: 6px;
	font-size: 11px;
	color: var( --pf-fomo-muted );
	opacity: 0.9;
}

/* ---------- consent banner: the platform's (pf-platform-core assets/consent.css) since 2026-09-23 ---------- */

/* ---------- inline blocks (G) ---------- */
.pf-fomo-block { color: var( --pf-fomo-fg ); }
.pf-fomo-block__placeholder { min-block-size: inherit; }
.pf-fomo-trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	justify-content: center;
}
.pf-fomo-trust__badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var( --pf-fomo-muted ); }
.pf-fomo-trust__icon { inline-size: 28px; block-size: 18px; border-radius: 3px; background: rgba( 0, 0, 0, 0.08 ); display: inline-block; }

/* ---------- dark mode ---------- */
@media ( prefers-color-scheme: dark ) {
	.pf-fomo-root,
	.pf-fomo-bar,
	.pf-fomo-float,
	.pf-fomo-overlay,
	.pf-fomo-block {
		--pf-fomo-bg: var( --wp--preset--color--base, #15191e );
		--pf-fomo-fg: var( --wp--preset--color--contrast, #e6edf3 );
		--pf-fomo-muted: #9aa4b2;
		--pf-fomo-shadow: 0 6px 24px rgba( 0, 0, 0, 0.5 );
	}
	.pf-fomo-toast,
	.pf-fomo-feed--float,
	.pf-fomo-modal { border-color: rgba( 255, 255, 255, 0.1 ); }
	.pf-fomo-trust__icon { background: rgba( 255, 255, 255, 0.12 ); }
}

/* ---------- reduced motion ---------- */
@media ( prefers-reduced-motion: reduce ) {
	.pf-fomo-toast { transition: none; }
}

/* ---------- small screens ---------- */
@media ( max-width: 480px ) {
	.pf-fomo-toast,
	.pf-fomo-feed--float { inset-inline: 12px; max-inline-size: none; inline-size: auto; }
	.pf-fomo-float { inset-block-end: calc( 12px + var( --pf-consent-h, 0px ) ); }
}