/** Firm review — offer card with the no-JavaScript account-size selector. */

/* While the router swaps in the newly selected size, the outgoing card dims
   and stops taking clicks. Never appears with scripting off. */
.pfg-rv-offer.is-loading {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 150ms ease;
}

.pfg-rv-offer {
	display: flex;
	flex-direction: column;
	gap: 13px;
	padding: 18px;
	border-radius: 18px;
	background: rgba(13, 15, 22, 0.55);
	border: 1px solid var(--rv-b2, rgba(255, 255, 255, 0.08));
	min-width: 0;
}

@media (max-width: 760px) {
	.pfg-rv-offer {
		padding: 15px;
	}
}

.pfg-rv-offer__price {
	display: flex;
	align-items: baseline;
	gap: 9px;
	flex-wrap: wrap;
	margin: 0;
}

.pfg-rv-offer__now {
	font-family: var(--wp--preset--font-family--display, "Outfit", sans-serif);
	font-weight: 500;
	font-size: clamp(26px, 1.55vw, 32px);
	line-height: 1;
	color: var(--acc, var(--wp--preset--color--accent, #A79FFF));
	font-variant-numeric: tabular-nums;
}

.pfg-rv-offer__was {
	font-size: clamp(14px, 0.81vw, 17px);
	color: var(--rv-text-label, #9AA1B5);
	font-variant-numeric: tabular-nums;
}

.pfg-rv-offer__off {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 9px;
	border-radius: 8px;
	background: rgba(var(--acc-rgb, 167, 159, 255), 0.14);
	color: var(--acc, #A79FFF);
	font-size: clamp(13px, 0.75vw, 15.5px);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.pfg-rv-offer__per {
	font-size: clamp(11.5px, 0.66vw, 13.5px);
	color: var(--rv-text-3, #979CAD);
}

/* ---------------------------------------------------- offering selector */

/* One pill per priced offering (propfirmgrade-data#545). Hairline pills in
   the house idiom (the apply button below, the filter bar's option chips);
   the applied one is filled with the active accent, which follows the
   vertical through [data-world], and it also carries aria-current so the
   fill is never the only thing saying which one is on. Wraps at any width:
   a firm selling eight products at 375px gets three rows, never a scroll. */
.pfg-rv-offer__offerings {
	min-width: 0;
}

.pfg-rv-offer__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pfg-rv-offer__pill {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	padding: 0 11px;
	border-radius: 999px;
	border: 1px solid var(--rv-b3, rgba(255, 255, 255, 0.10));
	background: transparent;
	color: var(--rv-text-2, #C6CBDD);
	font-family: var(--wp--preset--font-family--body, "Manrope", sans-serif);
	font-size: clamp(11.5px, 0.66vw, 13px);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color 150ms ease, color 150ms ease;
}

.pfg-rv-offer__pill:hover {
	border-color: var(--acc-border, rgba(167, 159, 255, 0.4));
	color: var(--rv-text-1, #F2F3F8);
}

.pfg-rv-offer__pill:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring, 0 0 0 1px var(--acc, #A79FFF), 0 0 0 4px rgba(var(--acc-rgb, 167, 159, 255), 0.18));
}

.pfg-rv-offer__pill.is-on {
	border-color: var(--acc, #A79FFF);
	background: var(--acc, #A79FFF);
	color: var(--rv-on-acc, #14161F);
}

@media (prefers-reduced-motion: reduce) {
	.pfg-rv-offer__pill {
		transition: none;
	}
}

/* ------------------------------------------------- account size selector */

.pfg-rv-offer__form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pfg-rv-offer__sizes {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.pfg-rv-offer__sizes legend {
	padding: 0;
	margin-bottom: 8px;
	font-size: clamp(11px, 0.63vw, 12.5px);
	font-weight: 700;
	color: var(--rv-text-3, #979CAD);
}

/* The ladder: rows, not chips. Size · price · per 1K · tag, on a hairline
   grid. Three anchor rows are always visible (cheapest, best value, largest);
   the rest fold under a native <details>. Each row is a radio's label. */
.pfg-rv-offer__ladder {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--rv-b1, rgba(255, 255, 255, 0.06));
}

.pfg-rv-offer__head,
.pfg-rv-offer__size {
	display: grid;
	grid-template-columns: minmax(64px, 1fr) minmax(72px, 1fr) minmax(72px, 1fr) minmax(0, 1.2fr);
	align-items: center;
	column-gap: 12px;
}

.pfg-rv-offer__head {
	padding: 8px 10px 6px;
	font-size: clamp(10.5px, 0.6vw, 12px);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--rv-text-4, #838A9D);
}

.pfg-rv-offer__head > span:nth-child(2),
.pfg-rv-offer__head > span:nth-child(3) {
	text-align: right;
}

.pfg-rv-offer__sizelist {
	display: flex;
	flex-direction: column;
}

/*
 * The radio itself is the accessible control and stays in the tab order and in
 * the accessibility tree; only its default paint is removed.
 */
.pfg-rv-offer__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.pfg-rv-offer__size {
	min-height: 40px;
	padding: 6px 10px;
	border-top: 1px solid var(--rv-b1, rgba(255, 255, 255, 0.06));
	border-left: 2px solid transparent;
	cursor: pointer;
	box-sizing: border-box;
	transition: background 160ms ease, border-color 160ms ease;
}

.pfg-rv-offer__size:hover {
	background: var(--rv-hover-wash, rgba(255, 255, 255, 0.04));
}

.pfg-rv-offer__radio:checked + .pfg-rv-offer__size {
	background: rgba(var(--acc-rgb, 167, 159, 255), 0.10);
	border-left-color: var(--acc, #A79FFF);
}

.pfg-rv-offer__radio:focus-visible + .pfg-rv-offer__size {
	box-shadow: var(--focus-ring, 0 0 0 1px var(--acc, #A79FFF), 0 0 0 4px rgba(var(--acc-rgb, 167, 159, 255), 0.18));
	border-radius: 6px;
}

.pfg-rv-offer__sizename {
	font-size: clamp(12.5px, 0.72vw, 14px);
	font-weight: 800;
	line-height: 1.2;
	color: var(--rv-text-2, #C6CBDD);
}

.pfg-rv-offer__radio:checked + .pfg-rv-offer__size .pfg-rv-offer__sizename {
	color: var(--rv-text-1, #F2F3F8);
}

.pfg-rv-offer__sizeprice,
.pfg-rv-offer__perk {
	text-align: right;
	font-size: clamp(12px, 0.69vw, 13.5px);
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.pfg-rv-offer__sizeprice {
	color: var(--rv-text-1, #F2F3F8);
}

.pfg-rv-offer__radio:checked + .pfg-rv-offer__size .pfg-rv-offer__sizeprice {
	color: var(--acc, #A79FFF);
}

.pfg-rv-offer__perk {
	color: var(--rv-text-3, #979CAD);
}

/* text-3, not text-4: on the SELECTED size row the accent-tinted fill took
   text-4 to 4.37:1 at 10px, under AA. text-3 measures 5.51:1 there and
   6.93:1 on an unselected row. */
.pfg-rv-offer__tag {
	justify-self: end;
	white-space: nowrap;
	font-size: clamp(10px, 0.58vw, 11.5px);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--rv-text-3, #979CAD);
}

.pfg-rv-offer__tag:empty {
	display: none;
}

/* The fold. The summary reads as a row of the same table, not a button. */
.pfg-rv-offer__more {
	border-top: 1px solid var(--rv-b1, rgba(255, 255, 255, 0.06));
}

.pfg-rv-offer__moresum {
	list-style: none;
	padding: 9px 10px;
	font-size: clamp(12px, 0.69vw, 13.5px);
	font-weight: 700;
	color: var(--rv-text-3, #979CAD);
	cursor: pointer;
}

.pfg-rv-offer__moresum::-webkit-details-marker {
	display: none;
}

.pfg-rv-offer__moresum::before {
	content: "+";
	display: inline-block;
	width: 14px;
	color: var(--acc, #A79FFF);
}

.pfg-rv-offer__more[open] > .pfg-rv-offer__moresum::before {
	content: "\2212";
}

.pfg-rv-offer__moresum:hover {
	color: var(--rv-text-1, #F2F3F8);
}

.pfg-rv-offer__moresum:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring, 0 0 0 1px var(--acc, #A79FFF), 0 0 0 4px rgba(var(--acc-rgb, 167, 159, 255), 0.18));
	border-radius: 6px;
}

@media (max-width: 760px) {
	.pfg-rv-offer__head,
	.pfg-rv-offer__size {
		grid-template-columns: minmax(56px, 1fr) minmax(64px, 1fr) minmax(64px, 1fr) auto;
		column-gap: 8px;
	}
}

/* THE TAG MOVES UNDER THE SIZE WHEN ITS COLUMN IS GONE.

   Both templates above give the first three tracks fixed minimums (184px at
   phone widths, 208px above) and leave the tag whatever is left. In a narrow
   ladder that is 0-29px for a 47-61px "cheapest" / "best value" / "largest",
   and the tag, being nowrap and right-aligned, was painted over the per-$1K
   figure: 32-40px of overlap on every review, every tagged row, at 320px
   (ladder 218px), 360px (258px) and 768px (295px, the hero's offer column).

   Measured on the ladder itself, not the viewport, because 768px is a wide
   screen with a narrow column. Two thresholds because the two templates run
   out at different widths: the phone template still fits its tag at 288px
   (390px screen), the wide one does not at 295px. Above them nothing changes. */
.pfg-rv-offer__ladder {
	container-type: inline-size;
}

@container (max-width: 279px) {
	.pfg-rv-offer__head,
	.pfg-rv-offer__size {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
		row-gap: 2px;
	}

	.pfg-rv-offer__head > span:empty {
		display: none;
	}

	.pfg-rv-offer__tag {
		grid-column: 1;
		grid-row: 2;
		justify-self: start;
	}
}

@media (min-width: 761px) {
	@container (max-width: 320px) {
		.pfg-rv-offer__head,
		.pfg-rv-offer__size {
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
			row-gap: 2px;
		}

		.pfg-rv-offer__head > span:empty {
			display: none;
		}

		.pfg-rv-offer__tag {
			grid-column: 1;
			grid-row: 2;
			justify-self: start;
		}
	}
}

/* THE NO-SCRIPT SUBMIT, AND ONLY THAT.

   The radios carry `data-wp-on--change`, so once assets/js/list-nav.js is
   running a selection applies on selection and this button has nothing left to
   do — pressing it re-submitted the size already showing and routed to the URL
   already in the address bar. A reload with no visible change.

   `.pfg-has-list-nav` is set by that module at import time, so the button
   disappears only when the code that replaces it is actually running. A failed
   bundle leaves it visible and working, which `<noscript>` would not: that
   hides on "scripting enabled", not on "the enhancement arrived". */
.pfg-has-list-nav .pfg-rv-offer__apply {
	display: none;
}

.pfg-rv-offer__apply {
	align-self: flex-start;
	min-height: 36px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid var(--rv-b3, rgba(255, 255, 255, 0.10));
	background: transparent;
	color: var(--rv-text-2, #C6CBDD);
	font-family: var(--wp--preset--font-family--body, "Manrope", sans-serif);
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
}

.pfg-rv-offer__apply:hover {
	border-color: var(--acc-border, rgba(167, 159, 255, 0.4));
	color: var(--rv-text-1, #F2F3F8);
}

/* ------------------------------------------------------------- footnotes */

.pfg-rv-offer__codenote {
	margin: 0;
	font-size: clamp(11.5px, 0.66vw, 13.5px);
	color: var(--rv-text-3, #979CAD);
}

.pfg-rv-offer__foot {
	margin: 0;
	font-size: clamp(11px, 0.63vw, 13px);
	line-height: 1.5;
	color: var(--rv-text-4, #838A9D);
	text-align: center;
}

/* The shared CTA sits flush inside the card. */
.pfg-rv-offer .pfg-affiliate-cta {
	margin: 0;
}