/**
 * The coupon / affiliate CTA: dashed accent pill, code on the left, solid accent
 * button on the right, plus the "Copied. Redirecting in 1 sec…" success state
 * stacked in the same grid cell so swapping states costs no layout.
 *
 * The element is an <a>, not a <button>, so the pill is a working outbound link
 * before any script runs.
 */

.pfg-coupon {
	position: relative;
	display: grid;
	box-sizing: border-box;
	width: min(380px, 100%);
	max-width: 460px;
	height: var(--pfg-coupon-h, 46px);
	padding: 3px;
	border-radius: 9999px;
	border: 1px dashed var(--acc, #A79FFF);
	background: transparent;
	cursor: pointer;
	overflow: hidden;
	text-align: left;
	text-decoration: none;
	transition: border-color 240ms ease;
}

.pfg-coupon:hover {
	border-color: var(--acc-bright, #C1BDFF);
}

/* The wash that sweeps in behind the code on copy. transform only, so it stays
   on the compositor. */
.pfg-coupon__sweep {
	position: absolute;
	inset: 0;
	background: rgba(var(--acc-rgb, 167, 159, 255), 0.12);
	transform-origin: left center;
	transform: scaleX(0);
	pointer-events: none;
	transition: transform 240ms ease-out;
}

.pfg-coupon__face {
	grid-area: 1 / 1;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-width: 0;
	height: 100%;
	opacity: 1;
	transform: scale(1);
	transition: opacity 180ms ease, transform 180ms ease;
}

/* THE NO-CODE STATE: the button, and only the button.
 *
 * It used to render as `.pfg-coupon.pfg-coupon--bare` — the whole dashed pill,
 * 380px of it, with the solid button centred inside and ~100px of empty space
 * either side. `--bare` did the centring and nothing else; no sheet ever
 * removed the pill, so the dashed border (the "copy this code" affordance) sat
 * around nothing.
 *
 * Now that a firm can have a paid link without a discount code, this is the
 * common state. It is the SAME solid treatment as .pfg-coupon__btn above,
 * standing on its own, so the two states are one family: the button does not
 * change when a code appears beside it, the pill grows around it.
 *
 * The class is doubled on purpose. The theme also defines .pfg-coupon__cta
 * (featured-deal's CTA shares it), and at equal specificity the winner is
 * whichever sheet loaded last — which is not a thing this component should
 * depend on. Everything the button needs is declared here, so it renders
 * correctly with the theme, without it, and in either order. */
.pfg-coupon__cta.pfg-coupon__cta--solo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	gap: 8px;
	max-width: 100%;
	height: var(--pfg-coupon-h, 46px);
	padding: 0 clamp(13px, 1.2vw, 20px);
	border: 0;
	border-radius: 9999px;
	background: var(--acc-fill, var(--acc, #A79FFF));
	color: var(--on-acc, #14161F);
	font-size: clamp(13px, 0.75vw, 15.5px);
	font-weight: 800;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: transform 150ms ease-out, filter 150ms ease-out;
}

/* Hover and press are the pill's, not the theme's background swap: the same
   button must not react two different ways depending on whether a code is
   sitting next to it. */
.pfg-coupon__cta.pfg-coupon__cta--solo:hover {
	filter: brightness(1.06);
}

.pfg-coupon__cta.pfg-coupon__cta--solo:active {
	transform: scale(var(--wp--custom--motion--press-scale, 0.98));
}

/* Squeeze order: the BUTTON label is fixed copy and must never clip, so the
   button never shrinks; the CODE is the part that stays recognizable when
   truncated, so it gives way with an ellipsis when the pill runs out of room. */
.pfg-coupon__code {
	padding-left: clamp(13px, 1.1vw, 18px);
	font-size: clamp(13px, 0.75vw, 15.5px);
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--text-1, #F2F3F8);
	white-space: nowrap;
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pfg-coupon__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 100%;
	padding: 0 clamp(13px, 1.2vw, 20px);
	border-radius: 9999px;
	background: var(--acc-fill, var(--acc, #A79FFF));
	color: var(--on-acc, #14161F);
	font-size: clamp(13px, 0.75vw, 15.5px);
	font-weight: 800;
	white-space: nowrap;
	flex: 0 0 auto;
	transition: transform 150ms ease-out, filter 150ms ease-out;
}

.pfg-coupon:hover .pfg-coupon__btn {
	filter: brightness(1.06);
}

.pfg-coupon:active .pfg-coupon__btn {
	transform: scale(var(--wp--custom--motion--press-scale, 0.98));
}

.pfg-coupon__done {
	grid-area: 1 / 1;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	font-size: clamp(13px, 0.75vw, 15.5px);
	font-weight: 700;
	color: var(--acc, #A79FFF);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;
	transition: opacity 180ms ease, transform 180ms ease;
}

/* THE REVIEW PILLS WRAP RATHER THAN LOSE THE CODE, AND THE WRAP IS A LAYOUT.
 *
 * The squeeze order above assumes a short button label. On a phone the review
 * hero's button took the whole pill: the code rendered 13px wide, an ellipsis
 * and nothing else, on 7 of 14 reviews at 320-360px (mobile audit, #320). So
 * these two wrappers let the pill wrap, and the code keeps its full width.
 *
 * THE FIRST WRAP LEFT AN ORPHAN (owner, 2026-09-17). The button dropped under
 * the code at its own width and was pushed to the right edge, so a two-row pill
 * read as a code alone top-left, a gap, and a right-floated button: 28 of the
 * 42 hero pills from 360 to 768px, and RETURNSDAY on Ment's bottom line at 320.
 * Two things fix it together. The hero label no longer names the firm ("Copy &
 * visit"; the accessible name still does), so the pill is one row wherever it
 * fits. And when it still does not fit, the stacked state is designed:
 *
 *   - The button grows to the full width of its own row. Both items may grow,
 *     but the code's grow factor is 1000 to the button's 1, so while they share
 *     a row the code takes the free space (the button gains under 1px and
 *     stays at the right edge, as before); alone on the second row, the button
 *     is the only item there and fills it.
 *   - The code's line box is the button's height, so on two rows the code row
 *     and the button row are the same height and the code sits centred in its
 *     row, not pressed to the top border. On one row nothing moves: the face
 *     was already that tall.
 *   - The radius stays half the one-line height: the same capsule on one row, a
 *     rounded rectangle on two whose corners are concentric with the button's
 *     (23px outer = 19px button + 3px padding + 1px border at the 46px pill).
 *
 * The button may still wrap its own label, for an editor-typed label longer
 * than the pill; border-box keeps its padding out of the one-row height.
 *
 * THE OFFERS PILL JOINED THIS LIST ON 2026-09-19, and it is the reason the list
 * is worth having rather than a second implementation. The offers block became
 * a stack of cards with a 288px code column, and the squeeze order above did
 * exactly what it was written to do: TRADINGVIEW rendered "TRADINGVIE…" and
 * RETURNSDAY "RETURNSDA…" at 1440, with 172px of unused card beside them. On
 * that page the code is the single thing the reader came for and has to type,
 * so it is the one string that must never be abbreviated. Sharing this
 * treatment gives it `flex: 1000 0 auto` — shrink factor ZERO, so the ellipsis
 * can never fire — and drops the button onto its own full-width row when the
 * two genuinely do not fit. The toplist and offer-bar pills keep the ellipsis:
 * their rows carry the firm's name and a link to the review, so a clipped code
 * there is recoverable one click away. */
.pfg-affiliate-cta .pfg-coupon,
.pfg-rv-bottom .pfg-coupon,
.pfg-offers__code .pfg-coupon {
	height: auto;
	min-height: var(--pfg-coupon-h, 46px);
	border-radius: calc(var(--pfg-coupon-h, 46px) / 2);
}

.pfg-affiliate-cta .pfg-coupon__face,
.pfg-rv-bottom .pfg-coupon__face,
.pfg-offers__code .pfg-coupon__face {
	flex-wrap: wrap;
	gap: 4px 6px;
}

.pfg-affiliate-cta .pfg-coupon__code,
.pfg-rv-bottom .pfg-coupon__code,
.pfg-offers__code .pfg-coupon__code {
	flex: 1000 0 auto;
	max-width: 100%;
	line-height: calc(var(--pfg-coupon-h, 46px) - 8px);
}

.pfg-affiliate-cta .pfg-coupon__btn,
.pfg-rv-bottom .pfg-coupon__btn,
.pfg-offers__code .pfg-coupon__btn {
	flex: 1 1 auto;
	box-sizing: border-box;
	max-width: 100%;
	height: auto;
	min-height: calc(var(--pfg-coupon-h, 46px) - 8px);
	padding-block: 4px;
	white-space: normal;
	text-align: center;
	line-height: 1.2;
}

/* At 320px the toplist and offers pills were 2-7px short: RETURNSDAY, CHART30
 * and TRADINGVIEW each lost their last letter to the ellipsis. 4px less gap and
 * 3px less code inset return them; 360px and up keep the original spacing. */
@media (max-width: 359px) {
	.pfg-coupon__face {
		gap: 6px;
	}

	.pfg-coupon__code {
		padding-left: 10px;
	}

	/* "Copy & visit" is 30px wider than "Copy code" (2026-09-17: a coded pill
	 * with no paid link now leaves for the firm's own site), so in a toplist
	 * row below 360px RETURNSDAY lost 25px and SAVENOW 2px of their codes.
	 * The glyph and its gap give 22px and 2px less padding the rest. The label
	 * still names the departure; 360px and up keep the glyph. */
	.pfg-row .pfg-coupon__btn {
		gap: 0;
		padding: 0 11px;
	}

	.pfg-row .pfg-coupon__btn > svg {
		display: none;
	}
}

/* Copied state, driven by the view script. */
.pfg-coupon.is-copied .pfg-coupon__sweep { transform: scaleX(1); }
.pfg-coupon.is-copied .pfg-coupon__face  { opacity: 0; transform: scale(0.96); }
.pfg-coupon.is-copied .pfg-coupon__done  { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
	.pfg-coupon,
	.pfg-coupon__sweep,
	.pfg-coupon__face,
	.pfg-coupon__btn,
	.pfg-coupon__cta--solo,
	.pfg-coupon__done {
		transition: none !important;
	}
}