/**
 * PFG coupon ticket card — SHARED between blocks.
 *
 * Moved verbatim from blocks/featured-deal/style.css when the discount-code
 * child page (blocks/review-child) started rendering the same card for a
 * single named firm. A block stylesheet only loads where ITS block renders —
 * the "shared blocks need shared CSS" trap: extract a renderer, leave its
 * stylesheet behind, and nothing fails except the pixels. So the card's rules
 * live on the `pfg-ticket` handle (registered in src/Blocks.php) and both
 * blocks declare it in their block.json `style` arrays.
 *
 * THE DESIGN'S CARD LANGUAGE, NOTHING ELSE. A flat surface-1 panel, a white
 * hairline at 7%, the hero radius. No gradient wash, no accent edge, no
 * texture, no notches, no lift — borders over shadows, and the market colour
 * appears only where the design lets accent appear: the market label's dot,
 * the price, the grade seal and the coupon (dashed accent pill + solid CTA).
 * The first version of this variant painted a tinted wash and a hatched stub
 * per market and was reverted on sight (owner, 2026-08-20): that is exactly
 * the decoration the design forbids. The ticket is two stacked regions of one
 * box, separated by a hairline; what makes it "featured" is the size of the
 * price and that there are three of them.
 *
 * The accent resolves per ticket from data-world on the wrapper through the
 * theme's [data-accent="world"] [data-world] rules, so a futures ticket is
 * yellow on a crypto page.
 */


.pfg-ticket {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--wp--preset--color--surface-1, #13151D);
	border: 1px solid var(--border-2, rgba(255, 255, 255, 0.07));
	border-radius: var(--wp--custom--radius--hero, 22px);
	color: var(--text-2, #C6CBDD);
	transition: border-color 160ms ease;
}

.pfg-ticket:hover,
.pfg-ticket:has(:focus-visible) {
	border-color: var(--border-strong, rgba(255, 255, 255, 0.13));
}

.pfg-ticket > * {
	margin: 0;
}

/* ---- Offer: label, identity, price ---- */

.pfg-ticket__offer {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 1 1 auto;
	padding: clamp(18px, 1.6vw, 24px);
}

.pfg-ticket__market {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: var(--wp--preset--font-size--ui-xs, 12px);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-3, #979CAD);
}

/* The market's colour is a dot, as on the design's cross-vertical cards. */
.pfg-ticket__market::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--acc, #A79FFF);
	flex: 0 0 8px;
}

.pfg-ticket__id {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.pfg-ticket__name {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-family: var(--wp--preset--font-family--display, "Outfit", sans-serif);
	font-size: clamp(19px, 1.4vw, 24px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--text-1, #F2F3F8);
	/* Wraps, never truncates: at 320px "Goat Funded Trader" read "Goat
	   Funde..." on its own discount-code page (117 of 168px), and 157 of 168px
	   at 360px. The seal beside it keeps its size, so a second line costs
	   height only. */
	overflow-wrap: break-word;
}

/* The name carries the review link and stretches it over the offer region
   (not the stub, which is its own destination). */
.pfg-ticket__link {
	color: inherit;
	text-decoration: none;
}

.pfg-ticket__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.pfg-ticket__link:focus-visible {
	outline: none;
}

.pfg-ticket__offer:has(.pfg-ticket__link:focus-visible) {
	box-shadow: var(--focus-ring, 0 0 0 1px var(--acc), 0 0 0 4px rgba(var(--acc-rgb), 0.18));
	border-radius: var(--wp--custom--radius--hero, 22px) var(--wp--custom--radius--hero, 22px) 0 0;
}

.pfg-ticket__grade {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	flex: 0 0 auto;
}

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

.pfg-ticket__price {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: auto;
}

.pfg-ticket__pricelabel {
	font-size: var(--wp--preset--font-size--ui-sm, 13px);
	color: var(--text-3, #979CAD);
}

.pfg-ticket__pricerow {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}

.pfg-ticket__pay {
	font-family: var(--wp--preset--font-family--display, "Outfit", sans-serif);
	font-size: clamp(30px, 2.4vw, 40px);
	font-weight: 300;
	line-height: 1;
	color: var(--acc, #A79FFF);
}

.pfg-ticket__was {
	font-size: var(--wp--preset--font-size--ui-sm, 14px);
	color: var(--wp--preset--color--text-label, #828BA6);
}

.pfg-ticket__off {
	font-size: var(--wp--preset--font-size--ui-xs, 12px);
	font-weight: 800;
	padding: 3px 8px;
	border-radius: 7px;
	background: rgba(var(--acc-rgb, 167, 159, 255), 0.12);
	color: var(--acc, #A79FFF);
}

.pfg-ticket__pricenote {
	margin: 0;
	font-size: var(--wp--preset--font-size--ui-xs, 12.5px);
	color: var(--text-3, #979CAD);
}

/* ---- Stub: the coupon, under a hairline ---- */

.pfg-ticket__stub {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px clamp(18px, 1.6vw, 24px) clamp(16px, 1.4vw, 20px);
	border-top: 1px solid var(--border-1, rgba(255, 255, 255, 0.06));
}

.pfg-ticket__stub .pfg-coupon {
	width: 100%;
	max-width: none;
}

.pfg-ticket__stub .pfg-disclosure,
.pfg-ticket__stub > p {
	margin: 0;
	font-size: var(--wp--preset--font-size--ui-xs, 11.5px);
	color: var(--text-4, #838A9D);
}

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

/* ---- The scope line, rendered only on the single-firm card ---- */

.pfg-ticket__scope {
	margin: 0;
	font-size: var(--wp--preset--font-size--ui-xs, 12.5px);
	color: var(--text-3, #979CAD);
}