/**
 * Sticky offer bar (design .sk-revcta): one fixed row above the viewport
 * bottom. Desktop: identity flexes, coupon shrink-wraps. Narrow: wraps to
 * identity / price / full-width CTA. The spacer keeps the bar from covering
 * the page's final content.
 */

.pfg-rv-ctabar-spacer {
	display: block;
	height: 96px;
}

.pfg-rv-ctabar {
	position: fixed;
	/* Without this the horizontal padding is ADDED to the declared width and
	   the bar sits wider than the page container it is meant to line up with. */
	box-sizing: border-box;
	left: 50%;
	transform: translateX(-50%);
	/* --pfg-furniture = how much fixed furniture (cookie notice, mobile tab
	   bar) owns the bottom edge. The values below are conservative no-JS
	   estimates; view.js replaces them with a measured value inline. */
	--pfg-furniture: 0px;
	bottom: calc(var(--pfg-furniture) + 10px + env(safe-area-inset-bottom, 0px));
	z-index: 40;
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.4vw, 22px);
	/* Tracks the review template's container (theme wideSize) so the bar lines
	   up with the page content instead of floating narrower than it. */
	width: min(1760px, calc(100% - 24px));
	padding: 10px clamp(12px, 1.4vw, 18px);
	border-radius: 16px;
	/* OPAQUE, not a tint over a blur. The bar floats over page content (the
	   footer, the last section) and a translucent surface let that text read
	   straight through it — the blur is a nicety that cannot be relied on, so
	   the surface itself has to carry the contrast. */
	background: var(--surface-2, #161A25);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--wp--preset--color--grid-line, #2A3040);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/*
 * REVEAL AFTER THE HERO OFFER (mobile audit, 2026-09-17).
 *
 * view.js sets data-pfg-reveal="hidden" while the review's own offer is still
 * on or below the screen, and "shown" once it has scrolled up past the sticky
 * header. With no JS the attribute never appears and nothing below applies, so
 * the bar is visible exactly as it was.
 *
 * Hidden is visibility:hidden, not just opacity:0: the links leave the tab
 * order and the accessibility tree (view.js adds `inert` as well). Visibility
 * waits for the slide-out to finish on the way out and flips first on the way
 * in, so the bar never animates while invisible or vanishes mid-slide.
 *
 * Transitions are enabled only once data-pfg-reveal-ready is set, a frame after
 * the first state is applied, so a bar that starts hidden does not slide away
 * in front of the reader on load. Only transform and opacity animate.
 */
.pfg-rv-ctabar[data-pfg-reveal="hidden"] {
	transform: translate(-50%, 16px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.pfg-rv-ctabar[data-pfg-reveal-ready] {
	transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), opacity 180ms ease, visibility 0s linear 0s;
}

.pfg-rv-ctabar[data-pfg-reveal-ready][data-pfg-reveal="hidden"] {
	transition: transform 180ms ease, opacity 160ms ease, visibility 0s linear 180ms;
}

@media (prefers-reduced-motion: reduce) {
	.pfg-rv-ctabar[data-pfg-reveal-ready],
	.pfg-rv-ctabar[data-pfg-reveal-ready][data-pfg-reveal="hidden"] {
		transition: none;
	}

	.pfg-rv-ctabar[data-pfg-reveal="hidden"] {
		transform: translateX(-50%);
	}
}

/*
 * The close button sits on the bar's top-right corner, half outside it, so it
 * takes no space from the row at 320px. Hairline ring, no accent: closing is
 * not the action the bar is for. 28px, above the 24px target minimum.
 */
.pfg-rv-ctabar__close {
	position: absolute;
	top: -12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--grid-line, #2A3040);
	background: var(--surface-2, #161A25);
	color: var(--text-2, #B8BDCB);
	cursor: pointer;
}

.pfg-rv-ctabar__close[hidden] {
	display: none;
}

.pfg-rv-ctabar__close:hover {
	border-color: var(--border-strong, rgba(255, 255, 255, 0.18));
	color: var(--text-1, #F2F4F8);
}

.pfg-rv-ctabar__close:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring, 0 0 0 2px #E6FF00);
}

.pfg-rv-ctabar__id {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex: 1 1 auto;
}

.pfg-rv-ctabar__name {
	font-family: var(--wp--preset--font-family--display, "Outfit", sans-serif);
	font-size: clamp(15px, 0.95vw, 18px);
	color: var(--text-1, #F2F3F8);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pfg-rv-ctabar__gr { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; }

/* The ratified grade-status word beside the seal — muted UI text. */
.pfg-rv-ctabar__gstatus {
	font-style: normal;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	color: var(--rv-text-3, #979CAD);
	white-space: nowrap;
}

/*
 * THE SEAL ON A PHONE (mobile follow-up, 2026-09-17). The owner reported the
 * Topstep seal here as looking broken. Nothing was clipped: R-A draws a C as
 * half a lap, and at 30px, with the status word hidden below 600px, that half
 * lap sat beside the firm name alone and read as a damaged ring. The toplist
 * draws the same C+ at 34px with "Preliminary" beside it and reads as a grade.
 *
 * So the bar does what the toplist does: the ring at the 34px design size
 * (through --pfg-gring, the hook GradeMark leaves for exactly this, so the
 * geometry R-A fixes is untouched) and the status word kept, at the 12px floor
 * for a label. The identity row has room for it: the price already wraps to its
 * own row below 1080px when the row is full, and the name ellipsises first.
 * Above 760px nothing changes.
 */
@media (max-width: 760px) {
	.pfg-rv-ctabar__gr { --pfg-gring: 34px; }

	.pfg-rv-ctabar__gstatus { font-size: 12px; }
}

.pfg-rv-ctabar__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex: 0 0 auto;
	white-space: nowrap;
}

.pfg-rv-ctabar__pricelabel {
	font-size: 11.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-4, #838A9D);
}

.pfg-rv-ctabar__pay {
	font-family: var(--wp--preset--font-family--display, "Outfit", sans-serif);
	font-size: clamp(17px, 1.2vw, 22px);
	font-weight: 600;
	color: var(--text-1, #F2F3F8);
}

.pfg-rv-ctabar__was {
	font-size: 13px;
	color: var(--text-4, #838A9D);
}

.pfg-rv-ctabar .pfg-coupon {
	flex: 0 1 340px;
	min-width: 220px;
	width: auto;
}

/* Below 1080px the theme's fixed .pfg-tabbar owns the bottom edge, so the bar
   must sit ABOVE it (design: bottom = nav height + safe area) — otherwise it
   covers the primary navigation. Same breakpoint the hero grid uses. */
@media (max-width: 1079px) {
	.pfg-rv-ctabar {
		flex-wrap: wrap;
		row-gap: 8px;
		--pfg-furniture: var(--pfg-tabbar-h, 71px);
	}

	.pfg-rv-ctabar__id { flex: 1 1 60%; }

	/* The wrapped row's third line is the CTA, whichever state it is in. Named
	   separately because the no-code CTA is no longer a .pfg-coupon, and
	   without this it would shrink-wrap on its own line. */
	.pfg-rv-ctabar .pfg-coupon,
	.pfg-rv-ctabar .pfg-coupon__cta--solo {
		flex: 1 1 100%;
		min-width: 0;
	}

	.pfg-rv-ctabar-spacer { height: 230px; }
}

/* With the status word back on a phone, the identity row takes its content
   width, so the price moves to its own row when the two do not fit instead of
   cutting the firm's name to "Topst...". Placed after the 1079px block, whose
   `flex: 1 1 60%` it overrides. */
@media (max-width: 760px) {
	.pfg-rv-ctabar__id { flex: 1 1 auto; }
}

@media print {
	.pfg-rv-ctabar-wrap { display: none; }
}

/* While the cookie notice is up (no data-pfg-cookie-ok on <html>), it owns the
   bottom edge and the offer bar must sit above it — including with JS off,
   which is exactly when the notice is guaranteed to be showing. The notice
   wraps as it narrows, hence the per-breakpoint estimates. */
html:not([data-pfg-cookie-ok]) .pfg-rv-ctabar {
	--pfg-furniture: 60px;
}

@media (max-width: 1079px) {
	html:not([data-pfg-cookie-ok]) .pfg-rv-ctabar {
		--pfg-furniture: calc(var(--pfg-tabbar-h, 71px) + 30px);
	}
}

@media (max-width: 600px) {
	html:not([data-pfg-cookie-ok]) .pfg-rv-ctabar {
		--pfg-furniture: calc(var(--pfg-tabbar-h, 71px) + 60px);
	}
}

/* A firm that has stopped trading, in the slot where the buy action was.

   FLAT PANEL, HAIRLINE, NO COLOURED EDGE. `design.md` forbids a coloured
   border, an accent edge or a coloured left bar on a card, and that applies to
   a warning as much as to anything else — the sentence carries the weight, not
   a red rule. Tokens are the review panels' own (`--rv-surface-3`, `--rv-b1`,
   radius 20px), so it reads as part of the page rather than as an alert bolted
   onto it.

   It occupies the offer bar's place deliberately: a reader who arrived asking
   whether the firm still pays should meet the answer where the CTA would have
   been. See platform#174. */
.pfg-rv-ceased {
	box-sizing: border-box;
	background: var(--rv-surface-3, #171B26);
	border: 1px solid var(--rv-b1, rgba(255, 255, 255, 0.06));
	border-radius: 20px;
	padding: 18px 22px;
	margin: 0 0 20px;
}

.pfg-rv-ceased__msg {
	margin: 0;
	/* Was #C8CEDB behind an unresolvable `--text-2`; the palette says #C6CBDD. */
	color: var(--wp--preset--color--text-2, #C6CBDD);
	font-size: clamp(14px, 0.9vw, 16px);
	line-height: 1.5;
	text-wrap: pretty;
}