/**
 * Affiliate Pro — front-end styles
 *
 * Everything a site owner might want to re-skin lives in the single :root block
 * below. Every color, font, radius and timing below is read through var(), so
 * overriding that one block (in the theme, the Customizer, or a child theme) is
 * enough to re-brand the whole plugin without touching this file.
 *
 * No @font-face and no web-font @import on purpose: if the theme already loads
 * Fredoka / Nunito Sans we inherit them, and if it doesn't we fall back to the
 * system stack rather than shipping a render-blocking font request.
 *
 * Contents
 *   1.  Design tokens
 *   2.  Scoped resets
 *   3.  Buttons
 *   4.  Notices
 *   5.  Account tab — banner, welcome, stats
 *   6.  Account tab — sections, invite, link, share
 *   7.  Tables, status pills, ledger, pager, empty states
 *   8.  Credits panel (cart + checkout)
 *   9.  Share & earn (inline, low-key)
 *   10. Narrow screens (down to 375px)
 *   11. Reduced motion
 */

/* ------------------------------------------------------------------------- *
 * 1. Design tokens
 * ------------------------------------------------------------------------- */

:root {
	/* Brand */
	--afp-cta: #D6337B;
	--afp-cta-hover: #B62A67;
	--afp-navy: #1B437D;
	--afp-navy-deep: #12305A;

	/* Neutrals */
	--afp-ink: #231F20;
	--afp-muted: #5A6B7D;
	--afp-line: #E9E0D4;
	--afp-cream: #FBF5EC;
	--afp-surface: #FFFCF6;

	/* Status */
	--afp-success: #1F8551;
	--afp-warning: #D2470B;
	--afp-error: #C9584E;

	/* Type */
	--afp-font-display: 'Fredoka', ui-rounded, system-ui, sans-serif;
	--afp-font-body: 'Nunito Sans', system-ui, sans-serif;

	/* Shape */
	--afp-radius: 16px;
	--afp-radius-pill: 30px;
	--afp-radius-sm: 10px;

	/* Derived: spacing, shadow and timing. Also overridable. */
	--afp-gap: 16px;
	--afp-gap-sm: 8px;
	--afp-gap-lg: 24px;
	--afp-pad: 20px;
	--afp-shadow: 0 2px 0 rgba(35, 31, 32, .06), 0 6px 18px rgba(35, 31, 32, .06);
	--afp-shadow-btn: 0 3px 0 rgba(35, 31, 32, .14);
	--afp-shadow-btn-hover: 0 4px 14px rgba(35, 31, 32, .22);
	--afp-shadow-btn-active: 0 0 0 rgba(35, 31, 32, 0);
	--afp-focus-ring: 0 0 0 3px #fff, 0 0 0 6px var(--afp-navy);
	--afp-press-in: 90ms;   /* :active — going down */
	--afp-press-out: 140ms; /* releasing — coming back */
	--afp-min-tap: 44px;
}

/* ------------------------------------------------------------------------- *
 * 2. Scoped resets
 *    Deliberately narrow: we only normalize inside our own containers so the
 *    plugin never fights the host theme elsewhere on the page.
 * ------------------------------------------------------------------------- */

.afp-tab,
.afp-credits,
.afp-share-earn {
	font-family: var(--afp-font-body);
	color: var(--afp-ink);
	line-height: 1.5;
	box-sizing: border-box;
}

.afp-tab *,
.afp-tab *::before,
.afp-tab *::after,
.afp-credits *,
.afp-credits *::before,
.afp-credits *::after,
.afp-share-earn *,
.afp-share-earn *::before,
.afp-share-earn *::after {
	box-sizing: inherit;
}

.afp-tab img {
	max-width: 100%;
	height: auto;
}

/* ------------------------------------------------------------------------- *
 * 3. Buttons
 *    Pills, 44px minimum tap target, weight 800.
 *    Hover only ever changes background / box-shadow / color — never motion.
 *    The press is the only movement, and it is reversed under reduced motion.
 * ------------------------------------------------------------------------- */

.afp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--afp-gap-sm);
	min-height: var(--afp-min-tap);
	padding: 10px 26px;
	border: 2px solid transparent;
	border-radius: var(--afp-radius-pill);
	font-family: var(--afp-font-display);
	font-size: 16px;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	position: relative;
	-webkit-appearance: none;
	appearance: none;
	background: var(--afp-navy);
	color: #fff;
	box-shadow: var(--afp-shadow-btn);
	/* Release is the slower half of the press. */
	transition:
		background-color 140ms ease,
		color 140ms ease,
		border-color 140ms ease,
		box-shadow 140ms ease,
		transform var(--afp-press-out) ease-out,
		filter var(--afp-press-out) ease-out;
}

.afp-btn:hover,
.afp-btn:focus {
	text-decoration: none;
}

/* Press: fast down, slow back. No layout shift, shadow collapses. */
.afp-btn:not([disabled]):not(.is-busy):active {
	transform: scale(.97);
	box-shadow: var(--afp-shadow-btn-active);
	transition:
		transform var(--afp-press-in) ease-in,
		box-shadow var(--afp-press-in) ease-in,
		filter var(--afp-press-in) ease-in;
}

.afp-btn:focus-visible {
	outline: none;
	box-shadow: var(--afp-focus-ring);
}

/* Primary — the one pink button on the screen. */
.afp-btn--primary {
	background: var(--afp-cta);
	color: #fff;
}

.afp-btn--primary:hover {
	background: var(--afp-cta-hover);
	color: #fff;
	box-shadow: var(--afp-shadow-btn-hover);
}

/* Secondary — navy fill. */
.afp-btn--navy {
	background: var(--afp-navy);
	color: #fff;
}

.afp-btn--navy:hover {
	background: var(--afp-navy-deep);
	color: #fff;
	box-shadow: var(--afp-shadow-btn-hover);
}

/* Ghost — white, 2px navy border, navy text. */
.afp-btn--ghost {
	background: #fff;
	border-color: var(--afp-navy);
	color: var(--afp-navy);
	box-shadow: none;
}

.afp-btn--ghost:hover {
	background: var(--afp-cream);
	border-color: var(--afp-navy-deep);
	color: var(--afp-navy-deep);
	box-shadow: var(--afp-shadow-btn-hover);
}

/* Link-style button — for "undo" and other quiet, reversible actions. */
.afp-btn--link {
	background: none;
	border-color: transparent;
	box-shadow: none;
	padding: 6px 4px;
	min-height: 0;
	font-family: var(--afp-font-body);
	font-size: 15px;
	font-weight: 700;
	color: var(--afp-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.afp-btn--link:hover {
	background: none;
	color: var(--afp-cta-hover);
	box-shadow: none;
}

.afp-btn[disabled],
.afp-btn[aria-disabled="true"] {
	opacity: .55;
	cursor: not-allowed;
	box-shadow: none;
}

/* Busy: swap the label for a spinner but keep the button exactly as wide as it
   was, so nothing on the page reflows mid-request. */
.afp-btn.is-busy {
	color: transparent !important;
	cursor: progress;
	pointer-events: none;
}

.afp-btn.is-busy::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border: 2px solid rgba(255, 255, 255, .45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: afp-spin 700ms linear infinite;
}

/* Ghost / link buttons spin in navy — white would be invisible on white. */
.afp-btn--ghost.is-busy::after,
.afp-btn--link.is-busy::after {
	border-color: rgba(27, 67, 125, .3);
	border-top-color: var(--afp-navy);
}

@keyframes afp-spin {
	to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------------- *
 * 4. Notices — role="status", so they are announced, never color-only.
 * ------------------------------------------------------------------------- */

.afp-notice {
	display: block;
	margin: var(--afp-gap) 0 0;
	padding: 12px 16px;
	border: 1px solid var(--afp-line);
	border-left-width: 5px;
	border-radius: var(--afp-radius-sm);
	background: var(--afp-surface);
	font-size: 15px;
	font-weight: 600;
	color: var(--afp-ink);
}

.afp-notice:empty {
	display: none;
}

.afp-notice--success {
	border-color: rgba(31, 133, 81, .35);
	border-left-color: var(--afp-success);
	background: rgba(31, 133, 81, .07);
	color: #14603a;
}

.afp-notice--error {
	border-color: rgba(201, 88, 78, .35);
	border-left-color: var(--afp-error);
	background: rgba(201, 88, 78, .07);
	color: #8d3c35;
}

/* ------------------------------------------------------------------------- *
 * 5. Account tab — banner, welcome, stats
 * ------------------------------------------------------------------------- */

.afp-tab {
	max-width: 900px;
}

/*
 * The page heading.
 *
 * Sits outside .afp-tab — it is printed before the tab's template, so that the
 * terms screen gets one too — and therefore repeats the same max-width rather
 * than inheriting it. Change one, change both.
 *
 * Sized with clamp() instead of a fixed px value because this lands in whatever
 * theme the plugin is installed into, above that theme's own content, and a
 * 40px heading that looks right on one site is a shout on another. The lower
 * bound is the floor on a phone, the upper bound stops it out-shouting the
 * banner underneath it.
 */
.afp-head {
	max-width: 900px;
	margin: 0 0 var(--afp-gap-lg);
}

.afp-head__h {
	margin: 0;
	font-family: var(--afp-font-display);
	font-size: clamp(26px, 4vw, 34px);
	line-height: 1.2;
	color: var(--afp-navy-deep);
}

.afp-head__sub {
	margin: 8px 0 0;
	font-size: 17px;
	line-height: 1.5;
	color: var(--afp-muted);
}

.afp-banner {
	margin: 0 0 var(--afp-gap-lg);
	border-radius: var(--afp-radius);
	overflow: hidden;
	background: var(--afp-cream);
	line-height: 0; /* kill the descender gap under the image */
}

.afp-banner__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--afp-radius);
}

.afp-welcome {
	margin: 0 0 var(--afp-gap-lg);
	padding: var(--afp-pad);
	border: 1px solid var(--afp-line);
	border-radius: var(--afp-radius);
	background: var(--afp-surface);
	font-size: 17px;
	color: var(--afp-ink);
}

.afp-welcome > :first-child { margin-top: 0; }
.afp-welcome > :last-child { margin-bottom: 0; }

.afp-welcome strong,
.afp-welcome b {
	color: var(--afp-navy-deep);
}

/* Stats row — auto-fits from 3-up down to 1-up without a media query. */
.afp-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--afp-gap);
	margin: 0 0 var(--afp-gap-lg);
	padding: 0;
	list-style: none;
}

.afp-stat {
	padding: var(--afp-pad);
	border: 1px solid var(--afp-line);
	border-radius: var(--afp-radius);
	background: var(--afp-cream);
	text-align: center;
}

.afp-stat__n {
	display: block;
	font-family: var(--afp-font-display);
	font-size: 34px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--afp-navy);
	/* Numbers line up column-to-column as values change. */
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.afp-stat__l {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--afp-muted);
}

/* ------------------------------------------------------------------------- *
 * 6. Sections, invite, link, share
 * ------------------------------------------------------------------------- */

.afp-section {
	margin: 0 0 var(--afp-gap-lg);
	padding: var(--afp-pad);
	border: 1px solid var(--afp-line);
	border-radius: var(--afp-radius);
	background: #fff;
	box-shadow: var(--afp-shadow);
}

.afp-section__h {
	margin: 0 0 var(--afp-gap);
	font-family: var(--afp-font-display);
	font-size: 20px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--afp-navy-deep);
}

/* --- Invite by email ----------------------------------------------------- */

.afp-invite__form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--afp-gap-sm);
	align-items: stretch;
	margin: 0;
}

/*
 * Themes routinely cap the width of a bare <form> — this one at 720px, from a
 * stylesheet the browser will not let script read — which left the invite row
 * visibly narrower than the link row directly beneath it. The tag is in the
 * selector purely to outrank that rule without resorting to !important.
 */
.afp-section form.afp-invite__form {
	max-width: none;
}

/*
 * Same width as .afp-link__copy in the card below, so the two rows line up as
 * a pair: field on the left growing to fill, fixed-width pill on the right.
 * The row also stretches every item to the tallest one, so if a site turns
 * the invite captcha back on this keeps the button in proportion with it.
 */
.afp-invite__form .afp-btn--primary {
	flex: 0 0 auto;
	min-width: 150px;
}

.afp-invite__email {
	flex: 1 1 240px;
	min-width: 0;
	min-height: var(--afp-min-tap);
	padding: 10px 16px;
	border: 2px solid var(--afp-line);
	border-radius: var(--afp-radius-pill);
	background: #fff;
	font-family: var(--afp-font-body);
	font-size: 16px; /* 16px keeps iOS from zooming on focus */
	color: var(--afp-ink);
	transition: border-color 140ms ease, box-shadow 140ms ease;
}

.afp-invite__email::placeholder {
	color: var(--afp-muted);
	opacity: 1;
}

.afp-invite__email:hover {
	border-color: var(--afp-muted);
}

.afp-invite__email:focus {
	outline: none;
	border-color: var(--afp-navy);
}

.afp-invite__email:focus-visible {
	box-shadow: var(--afp-focus-ring);
}

.afp-invite__note {
	flex: 1 0 100%;
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--afp-muted);
}

/* --- Personal link + copy ------------------------------------------------ */

/*
 * The flex lives on the row, not the section. It used to sit on .afp-link,
 * which made the heading a flex sibling of the row — so the heading sat
 * beside the field and the copy button, having no flex context of its own,
 * dropped underneath it. Putting it here matches the invite card above:
 * heading on its own line, field and button side by side.
 */
.afp-link__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--afp-gap-sm);
	align-items: stretch;
	margin-top: var(--afp-gap-sm);
}

.afp-link__url {
	flex: 1 1 260px;
	min-width: 0;
	min-height: var(--afp-min-tap);
	padding: 10px 16px;
	border: 2px solid var(--afp-line);
	border-radius: var(--afp-radius-pill);
	background: var(--afp-cream);
	font-family: var(--afp-font-body);
	font-size: 15px;
	font-weight: 700;
	color: var(--afp-navy-deep);
	text-overflow: ellipsis;
	cursor: text;
}

.afp-link__url:focus {
	outline: none;
	border-color: var(--afp-navy);
}

.afp-link__url:focus-visible {
	box-shadow: var(--afp-focus-ring);
}

.afp-link__copy {
	flex: 0 0 auto;
	/*
	 * Stops the pill resizing when the label swaps to "Copied!", and matches
	 * the Send button above it so the two rows read as a pair.
	 */
	min-width: 150px;
}

/* --- Social share buttons ------------------------------------------------ */

.afp-share {
	display: flex;
	flex-wrap: wrap;
	gap: var(--afp-gap-sm);
	margin-top: var(--afp-gap);
}

.afp-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: var(--afp-min-tap);
	padding: 10px 20px;
	border: 2px solid var(--afp-navy);
	border-radius: var(--afp-radius-pill);
	background: #fff;
	font-family: var(--afp-font-display);
	font-size: 15px;
	font-weight: 800;
	color: var(--afp-navy);
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 140ms ease,
		color 140ms ease,
		border-color 140ms ease,
		box-shadow 140ms ease,
		transform var(--afp-press-out) ease-out,
		filter var(--afp-press-out) ease-out;
}

.afp-share__btn:hover {
	background: var(--afp-navy);
	color: #fff;
	border-color: var(--afp-navy);
	box-shadow: var(--afp-shadow-btn-hover);
	text-decoration: none;
}

.afp-share__btn:active {
	transform: scale(.97);
	box-shadow: var(--afp-shadow-btn-active);
	transition:
		transform var(--afp-press-in) ease-in,
		box-shadow var(--afp-press-in) ease-in,
		filter var(--afp-press-in) ease-in;
}

.afp-share__btn:focus-visible {
	outline: none;
	box-shadow: var(--afp-focus-ring);
}

.afp-share__btn svg,
.afp-share__btn img {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

/* Each network keeps its own hover color so the row is scannable. */
.afp-share__btn[data-net="facebook"]:hover { background: #1877F2; border-color: #1877F2; }
.afp-share__btn[data-net="pinterest"]:hover { background: #BD081C; border-color: #BD081C; }
.afp-share__btn[data-net="x"]:hover { background: #000; border-color: #000; }
.afp-share__btn[data-net="email"]:hover { background: var(--afp-navy-deep); border-color: var(--afp-navy-deep); }

/* ------------------------------------------------------------------------- *
 * 7. Tables, status pills, ledger, pager, empty states
 * ------------------------------------------------------------------------- */

/* Any table lives inside its own horizontal scroller so a wide referral table
   never widens the page on a phone. PHP wraps tables in .afp-table-wrap. */
.afp-table-wrap,
.afp-ledger {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--afp-line);
	border-radius: var(--afp-radius);
	background: #fff;
}

.afp-table {
	width: 100%;
	min-width: 480px; /* below this the columns collide; the wrapper scrolls */
	border-collapse: collapse;
	font-size: 15px;
}

.afp-table th,
.afp-table td {
	padding: 12px 16px;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--afp-line);
}

.afp-table thead th {
	position: sticky;
	top: 0;
	background: var(--afp-cream);
	font-family: var(--afp-font-display);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--afp-navy-deep);
	white-space: nowrap;
}

.afp-table tbody tr:last-child td {
	border-bottom: 0;
}

.afp-table tbody tr:nth-child(even) {
	background: var(--afp-surface);
}

/* Money and date columns read better right-aligned and tabular. */
.afp-table td.afp-table__amount,
.afp-table th.afp-table__amount {
	text-align: right;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	font-weight: 700;
	white-space: nowrap;
}

.afp-table td.afp-table__date,
.afp-table th.afp-table__date {
	white-space: nowrap;
	color: var(--afp-muted);
	font-variant-numeric: tabular-nums;
}

/* --- Status pills --------------------------------------------------------
   Status is never communicated by color alone: the pill always carries its
   own text label from PHP, and each state also gets a distinct dot glyph. */

.afp-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border: 1px solid var(--afp-line);
	border-radius: var(--afp-radius-pill);
	background: var(--afp-cream);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.6;
	white-space: nowrap;
	color: var(--afp-muted);
}

.afp-status::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}

.afp-status--pending {
	background: rgba(210, 71, 11, .08);
	border-color: rgba(210, 71, 11, .3);
	color: var(--afp-warning);
}

.afp-status--available {
	background: rgba(31, 133, 81, .08);
	border-color: rgba(31, 133, 81, .3);
	color: var(--afp-success);
}

.afp-status--credited {
	background: rgba(27, 67, 125, .08);
	border-color: rgba(27, 67, 125, .3);
	color: var(--afp-navy);
}

.afp-status--reversed {
	background: rgba(201, 88, 78, .08);
	border-color: rgba(201, 88, 78, .3);
	color: var(--afp-error);
}

.afp-status--invited {
	background: var(--afp-cream);
	border-color: var(--afp-line);
	color: var(--afp-muted);
}

.afp-status--signed-up {
	background: rgba(214, 51, 123, .08);
	border-color: rgba(214, 51, 123, .3);
	color: var(--afp-cta);
}

/* --- Ledger -------------------------------------------------------------- */

.afp-ledger .afp-table {
	min-width: 420px;
}

.afp-ledger .afp-table td.afp-table__amount {
	color: var(--afp-navy-deep);
}

/* Negative ledger movements (reversals, spend) read as debits. */
.afp-ledger .afp-table td.is-debit {
	color: var(--afp-error);
}

/* --- Pager --------------------------------------------------------------- */

.afp-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--afp-gap-sm);
	margin-top: var(--afp-gap);
}

.afp-pager__btn {
	min-width: 44px;
	min-height: var(--afp-min-tap);
	padding: 8px 18px;
	border: 2px solid var(--afp-navy);
	border-radius: var(--afp-radius-pill);
	background: #fff;
	font-family: var(--afp-font-display);
	font-size: 15px;
	font-weight: 800;
	color: var(--afp-navy);
	cursor: pointer;
	transition:
		background-color 140ms ease,
		color 140ms ease,
		border-color 140ms ease,
		box-shadow 140ms ease,
		transform var(--afp-press-out) ease-out,
		filter var(--afp-press-out) ease-out;
}

.afp-pager__btn:hover:not([disabled]) {
	background: var(--afp-navy);
	color: #fff;
	box-shadow: var(--afp-shadow-btn-hover);
}

.afp-pager__btn:not([disabled]):active {
	transform: scale(.97);
	box-shadow: var(--afp-shadow-btn-active);
	transition:
		transform var(--afp-press-in) ease-in,
		box-shadow var(--afp-press-in) ease-in,
		filter var(--afp-press-in) ease-in;
}

.afp-pager__btn:focus-visible {
	outline: none;
	box-shadow: var(--afp-focus-ring);
}

.afp-pager__btn[disabled],
.afp-pager__btn[aria-current="page"] {
	cursor: default;
}

.afp-pager__btn[disabled] {
	opacity: .45;
}

.afp-pager__btn[aria-current="page"] {
	background: var(--afp-navy);
	color: #fff;
}

.afp-pager__btn.is-busy {
	color: transparent;
	position: relative;
	pointer-events: none;
}

.afp-pager__btn.is-busy::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid rgba(27, 67, 125, .3);
	border-top-color: var(--afp-navy);
	border-radius: 50%;
	animation: afp-spin 700ms linear infinite;
}

/* --- Empty state + fine print -------------------------------------------- */

.afp-empty {
	padding: 32px var(--afp-pad);
	border: 1px dashed var(--afp-line);
	border-radius: var(--afp-radius);
	background: var(--afp-surface);
	text-align: center;
	font-size: 16px;
	color: var(--afp-muted);
}

/*
 * The expiry line, under the balance. Deliberately quieter than a notice —
 * it is a standing fact about how credit works, not something that has just
 * happened and needs acting on.
 */
.afp-expiry {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--afp-muted);
}

.afp-fineprint {
	margin: var(--afp-gap) 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--afp-muted);
}

.afp-fineprint a {
	color: var(--afp-navy);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.afp-fineprint a:hover {
	color: var(--afp-cta-hover);
}

/* ------------------------------------------------------------------------- *
 * 8. Credits panel — cart and checkout
 *    Sized to sit inside a checkout aside without overflowing it: it fills
 *    whatever column it is dropped into, exactly like the aside's own pills.
 * ------------------------------------------------------------------------- */

.afp-credits {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: var(--afp-gap) 0;
	padding: 16px 18px;
	border: 1px solid var(--afp-line);
	border-radius: var(--afp-radius);
	background: var(--afp-cream);
	font-family: var(--afp-font-body);
	font-size: 15px;
	color: var(--afp-ink);
}

.afp-credits__msg {
	margin: 0 0 12px;
	font-weight: 700;
	line-height: 1.45;
}

.afp-credits__amount {
	font-family: var(--afp-font-display);
	font-weight: 800;
	color: var(--afp-cta);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	white-space: nowrap;
}

.afp-credits__apply {
	width: 100%;
}

.afp-credits__undo {
	margin-left: auto;
}

/* Applied state: the panel turns green and carries a text label, never a bare
   color change. PHP prints the wording inside .afp-credits__applied. */
.afp-credits__applied {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--afp-gap-sm);
	margin: 0;
	padding: 10px 12px;
	border: 1px solid rgba(31, 133, 81, .35);
	border-radius: var(--afp-radius-sm);
	background: rgba(31, 133, 81, .08);
	font-weight: 800;
	color: #14603a;
}

.afp-credits__applied::before {
	content: "✓";
	font-weight: 800;
	line-height: 1;
}

.afp-credits__cap {
	display: block;
	margin-top: 10px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--afp-muted);
}

/* ------------------------------------------------------------------------- *
 * 9. Share & earn — a button, secondary to the store's own call to action.
 *    This was a plain text link until 1.0.6. It was quiet enough that members
 *    did not notice it, which is a worse failure than being slightly loud: a
 *    referral scheme nobody sees earns nobody anything. It is a button now,
 *    but deliberately in the secondary color, so it reads as the second most
 *    important thing on the row rather than the first.
 * ------------------------------------------------------------------------- */

.afp-share-earn {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
	vertical-align: middle;
	line-height: 1.4;
}

/*
 * A real button, in navy rather than the pink call-to-action color.
 *
 * Navy on white measures 9.79:1, comfortably past WCAG AAA, where the pink
 * manages 4.55:1 — it only just clears AA and would be the weakest text on the
 * page. Navy also stays out of the way of the store's primary action: the
 * download button on these pages is yellow with navy text, and a second pink
 * pill beside it would compete with the thing the visitor actually came for.
 * It is the same navy as "Copy my link" on the Referrals tab, so the two
 * copy-the-link actions look like the same action in two places.
 */
.afp-share-earn__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--afp-min-tap);
	padding: 10px 20px;
	border: 2px solid transparent;
	border-radius: var(--afp-radius-pill);
	background: var(--afp-navy);
	box-shadow: var(--afp-shadow-btn);
	font-family: var(--afp-font-display);
	font-size: 15px;
	font-weight: 800;
	line-height: 1.2;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 140ms ease, box-shadow 140ms ease;
}

.afp-share-earn__btn:hover {
	background: var(--afp-navy-deep);
	color: #fff;
	text-decoration: none;
	box-shadow: var(--afp-shadow-btn-hover);
}

.afp-share-earn__btn:active {
	box-shadow: var(--afp-shadow-btn-active);
}

.afp-share-earn__btn:focus-visible {
	outline: none;
	box-shadow: var(--afp-focus-ring);
}

.afp-share-earn__btn svg,
.afp-share-earn__btn img {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

.afp-share-earn__label {
	display: inline;
}

/*
 * Copied confirmation: the label text changes to "Link Copied" (JS swaps it)
 * and the fill goes green. Both, not just one — color alone is not a message
 * to anyone who cannot distinguish it, and the label alone is easy to miss on
 * a button somebody has just clicked and looked away from.
 */
.afp-share-earn.is-copied .afp-share-earn__btn {
	background: var(--afp-success);
	color: #fff;
}

.afp-share-earn.is-copied .afp-share-earn__btn:hover {
	background: var(--afp-success);
}

/* ------------------------------------------------------------------------- *
 * 10. Narrow screens — must hold together at 375px
 * ------------------------------------------------------------------------- */

@media (max-width: 600px) {
	.afp-section,
	.afp-welcome,
	.afp-stat {
		padding: 16px;
	}

	.afp-stat__n {
		font-size: 28px;
	}

	.afp-section__h {
		font-size: 18px;
	}

	/* Stack the invite and link rows: full-width field, full-width button. */
	.afp-invite__form,
	.afp-link__row {
		flex-direction: column;
	}

	.afp-invite__form .afp-btn,
	.afp-link__copy {
		width: 100%;
		min-width: 0;
	}

	/*
	 * Once the row turns into a column, flex-basis stops describing width and
	 * starts describing HEIGHT — so `flex: 1 1 240px` on the email field made
	 * it 240px tall, and the link field 260px. Both fields have to give up
	 * their basis here and take their height from their own content.
	 */
	.afp-invite__email,
	.afp-link__url {
		flex: 0 0 auto;
		width: 100%;
	}

	/* Share buttons go 2-up rather than shrinking below the tap target. */
	.afp-share__btn {
		flex: 1 1 calc(50% - var(--afp-gap-sm));
		padding: 10px 12px;
	}

	.afp-table th,
	.afp-table td {
		padding: 10px 12px;
	}
}

@media (max-width: 400px) {
	.afp-stats {
		grid-template-columns: 1fr;
	}

	.afp-share__btn {
		flex: 1 1 100%;
	}
}

/* ------------------------------------------------------------------------- *
 * 11. Reduced motion
 *     The press stays legible without any movement: brightness instead of
 *     scale, and the spinner pulses rather than rotating.
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.afp-btn:not([disabled]):not(.is-busy):active,
	.afp-share__btn:active,
	.afp-pager__btn:not([disabled]):active {
		transform: none;
		filter: brightness(.92);
	}

	.afp-btn.is-busy::after,
	.afp-pager__btn.is-busy::after {
		animation: afp-pulse 1.2s ease-in-out infinite;
	}

	@keyframes afp-pulse {
		0%, 100% { opacity: .35; }
		50% { opacity: 1; }
	}
}

/* ---------------------------------------------------------------------------
   Honeypot — visually gone, still reachable to a bot parsing the HTML.
   Not display:none, because some bots skip those fields deliberately.
   --------------------------------------------------------------------------- */
.afp-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}


/* ---------------------------------------------------------------------------
   The one-time terms screen. Deliberately plain: one card, three facts, one
   tick box and one button — nothing to explore until they have agreed.
   --------------------------------------------------------------------------- */

.afp-gate__card {
	max-width: 560px;
	padding: 28px;
	background: var(--afp-surface);
	border: 1px solid var(--afp-line);
	border-radius: var(--afp-radius);
}

.afp-gate__h {
	margin: 0 0 10px;
	font-family: var(--afp-font-display);
	font-size: 22px;
	color: var(--afp-navy);
}

.afp-gate__intro { margin: 0 0 16px; color: var(--afp-ink); }

.afp-gate__points {
	margin: 0 0 22px;
	padding: 0 0 0 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.afp-gate__points li { color: var(--afp-ink); }
.afp-gate__points li::marker { color: var(--afp-cta); }

.afp-gate__check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 18px;
	cursor: pointer;
	line-height: 1.5;
}

.afp-gate__check input {
	margin: 3px 0 0;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	accent-color: var(--afp-cta);
}

.afp-gate__check a { color: var(--afp-cta); text-underline-offset: 2px; }
.afp-gate__btn { min-width: 180px; }

/*
 * The steps, the figures and the fine print (1.0.26).
 *
 * Three shapes instead of seven bullets. Everything is drawn from the same
 * tokens as the rest of the plugin, so a theme that overrides the :root block
 * re-skins this screen with it and nothing here needs to know the brand.
 */
.afp-gate__card { max-width: 620px; }

.afp-gate__steps {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.afp-gate__step {
	display: flex;
	align-items: flex-start;
	gap: 13px;
}

.afp-gate__num {
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--afp-cta);
	color: #fff;
	font-family: var(--afp-font-display);
	font-weight: 700;
	font-size: 15px;
	line-height: 30px;
	text-align: center;
}

.afp-gate__step-text { color: var(--afp-ink); line-height: 1.5; }
.afp-gate__step-text strong { display: block; color: var(--afp-navy); }

.afp-gate__facts {
	list-style: none;
	margin: 0 0 16px;
	padding: 16px 6px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	background: var(--afp-cream);
	border: 1px solid var(--afp-line);
	border-radius: var(--afp-radius-sm);
	text-align: center;
}

.afp-gate__facts li { display: flex; flex-direction: column; gap: 3px; }

.afp-gate__fig {
	font-family: var(--afp-font-display);
	font-weight: 700;
	font-size: 19px;
	color: var(--afp-navy);
	line-height: 1.2;
}

.afp-gate__cap { font-size: 12.5px; line-height: 1.3; color: var(--afp-muted); }

.afp-gate__small {
	margin: 0 0 20px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--afp-muted);
}

@media (max-width: 600px) {
	.afp-gate__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
}

/* --- My Account menu icon ------------------------------------------------ */
/*
 * Themes that give each account tab an icon key it off the endpoint name, and
 * fall back to a generic placeholder — usually an empty circle — for an
 * endpoint they have never heard of. This draws a dollar sign in its place.
 *
 * WooCommerce names the list item after the endpoint itself, so the selector
 * needs no knowledge of any particular theme. The theme's own icon is hidden
 * rather than removed, which keeps whatever width and alignment the theme
 * reserved for it, and the glyph is painted into that same box. `currentColor`
 * means it inherits the menu's color, including whatever the theme does to
 * the active item — so it matches its neighbours without naming a single
 * color here.
 */
.woocommerce-MyAccount-navigation-link--referrals a > *:has(> svg),
.woocommerce-MyAccount-navigation-link--referrals a > *:has(> img) {
	position: relative;
}

.woocommerce-MyAccount-navigation-link--referrals a svg,
.woocommerce-MyAccount-navigation-link--referrals a img {
	visibility: hidden;
}

.woocommerce-MyAccount-navigation-link--referrals a > *:has(> svg)::after,
.woocommerce-MyAccount-navigation-link--referrals a > *:has(> img)::after {
	content: "$";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	font-size: 18px;
	font-weight: 800;
	line-height: 1;
	color: currentColor;
	visibility: visible;
}