/**
 * Affiliate panel. Colours come from the theme's palette presets so the panel
 * follows any future theme.json change rather than pinning its own hex values.
 */

.nofx-aff {
	--nofx-aff-paper: var(--wp--preset--color--paper, #05070a);
	--nofx-aff-surface: var(--wp--preset--color--surface, #0e1217);
	--nofx-aff-line: var(--wp--preset--color--line, rgba(255, 255, 255, 0.1));
	--nofx-aff-ink: var(--wp--preset--color--ink, #eaecef);
	--nofx-aff-muted: var(--wp--preset--color--muted, #848e9c);
	--nofx-aff-accent: var(--wp--preset--color--commerce-blue, #14d9b6);
	--nofx-aff-success: var(--wp--preset--color--success-green, #0ecb81);
	--nofx-aff-danger: var(--wp--preset--color--danger, #f6465d);
	/* Channel triples, so alpha tints follow a palette change instead of
	   pinning their own copy of the brand colour. */
	--nofx-aff-accent-rgb: var(--wp--custom--accent-rgb, 20, 217, 182);
	--nofx-aff-danger-rgb: var(--wp--custom--danger-rgb, 246, 70, 93);
	/* "Pending" is neither good nor bad news and the theme palette has no
	   amber, so this is the one colour the panel defines for itself. */
	--nofx-aff-hold: #f6ad55;
	--nofx-aff-radius: var(--wp--custom--radius--card, 16px);
	--nofx-aff-radius-control: var(--wp--custom--radius--control, 10px);

	color: var(--nofx-aff-ink);
	margin-inline: auto;
	max-width: 46rem;
}

/* The theme does not set a global border-box, and every control here is sized
   at 100% of its card — without this they overflow by their own padding. */
.nofx-aff,
.nofx-aff *,
.nofx-aff *::before,
.nofx-aff *::after {
	box-sizing: border-box;
}

.nofx-aff h2 {
	font-family: var(--wp--preset--font-family--figtree, inherit);
	font-size: 1.25rem;
	margin-block: 0 0.75rem;
}

.nofx-aff h3 {
	font-size: 1rem;
	margin-block: 1.75rem 0.75rem;
}

.nofx-aff__section {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 40%),
		var(--nofx-aff-surface);
	border: 1px solid var(--nofx-aff-line);
	border-radius: var(--nofx-aff-radius);
	margin-block-end: 1.25rem;
	padding: 1.5rem;
}

/* Sign-in, signup, and the standalone notices are single-purpose screens; they
   read better narrow than at the dashboard's full width. */
.nofx-aff__section--narrow {
	margin-inline: auto;
	max-width: 26rem;
}

.nofx-aff__lede,
.nofx-aff__muted {
	color: var(--nofx-aff-muted);
	font-size: 0.875rem;
}

.nofx-aff__muted code {
	color: var(--nofx-aff-ink);
}

.nofx-aff__section > p:last-child {
	margin-block-end: 0;
}

/* Earnings hero -------------------------------------------------------- */

.nofx-aff__hero {
	background: linear-gradient(180deg, rgba(var(--nofx-aff-accent-rgb), 0.09), transparent 55%),
		var(--nofx-aff-surface);
	border: 1px solid rgba(var(--nofx-aff-accent-rgb), 0.4);
	border-radius: var(--nofx-aff-radius);
	box-shadow: var(--wp--custom--shadow--glow, 0 0 40px rgba(var(--nofx-aff-accent-rgb), 0.15));
	margin-block-end: 1.25rem;
	padding: 1.75rem 1.5rem;
}

.nofx-aff__hero-label {
	color: var(--nofx-aff-muted);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	margin: 0;
	text-transform: uppercase;
}

.nofx-aff__hero-amount {
	font-family: var(--wp--preset--font-family--dm-mono, monospace);
	font-size: clamp(2rem, 1.4rem + 3vw, 3rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0.35rem 0 1rem;
}

.nofx-aff__meter {
	background: var(--nofx-aff-paper);
	border-radius: 999px;
	height: 6px;
	overflow: hidden;
}

.nofx-aff__meter span {
	background: var(--nofx-aff-accent);
	border-radius: inherit;
	box-shadow: 0 0 12px rgba(var(--nofx-aff-accent-rgb), 0.5);
	display: block;
	height: 100%;
}

.nofx-aff__hero-caption {
	color: var(--nofx-aff-muted);
	font-size: 0.8125rem;
	margin: 0.75rem 0 0;
}

.nofx-aff__hero-split {
	border-block-start: 1px solid var(--nofx-aff-line);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2.5rem;
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 1.25rem 0 0;
}

/* Direct child only: wc_price() nests its own spans inside the amount, and a
   loose descendant selector would stack the currency symbol above the digits. */
.nofx-aff__hero-split > li > span {
	color: var(--nofx-aff-muted);
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.nofx-aff__hero-split strong {
	display: block;
	font-family: var(--wp--preset--font-family--dm-mono, monospace);
	font-size: 1.0625rem;
	margin-block-start: 0.25rem;
	white-space: nowrap;
}

/* Referral link -------------------------------------------------------- */

.nofx-aff__link {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.nofx-aff__link input {
	flex: 1 1 16rem;
	font-family: var(--wp--preset--font-family--dm-mono, monospace);
	font-size: 0.875rem;
	min-width: 0;
}

.nofx-aff__share {
	margin-block: 0.75rem;
}

.nofx-aff__share-link {
	border: 1px solid var(--nofx-aff-line);
	border-radius: 999px;
	color: var(--nofx-aff-ink);
	display: inline-block;
	font-size: 0.8125rem;
	padding: 0.4rem 0.9rem;
	text-decoration: none;
}

.nofx-aff__share-link:hover {
	border-color: var(--nofx-aff-accent);
	color: var(--nofx-aff-accent);
}

/* Stats ---------------------------------------------------------------- */

.nofx-aff__stats {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.nofx-aff__stats li {
	background: rgba(255, 255, 255, 0.03);
	border-radius: var(--nofx-aff-radius-control);
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.85rem 1rem;
}

.nofx-aff__stats > li > span {
	color: var(--nofx-aff-muted);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.nofx-aff__stats strong {
	font-family: var(--wp--preset--font-family--dm-mono, monospace);
	font-size: 1.125rem;
}

/* Tables --------------------------------------------------------------- */

/* Wide tables scroll inside their own box so the page never scrolls sideways. */
.nofx-aff__scroll {
	overflow-x: auto;
}

.nofx-aff__table {
	border-collapse: collapse;
	width: 100%;
}

.nofx-aff__table th,
.nofx-aff__table td {
	border-block-end: 1px solid var(--nofx-aff-line);
	padding: 0.7rem 0.75rem;
	text-align: start;
	white-space: nowrap;
}

.nofx-aff__table th {
	color: var(--nofx-aff-muted);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.nofx-aff__table tbody tr:last-child td {
	border-block-end: 0;
}

.nofx-aff__table tbody tr:hover td {
	background: rgba(255, 255, 255, 0.02);
}

.nofx-aff__amount {
	font-family: var(--wp--preset--font-family--dm-mono, monospace);
}

/* Struck through on the date and amount only: text-decoration propagates into
   descendants and cannot be undone, so it must not reach the status pill. */
.nofx-aff__row--rejected td {
	color: var(--nofx-aff-muted);
}

.nofx-aff__row--rejected td:not(:last-child) {
	text-decoration: line-through;
}

.nofx-aff__pill {
	border-radius: 999px;
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 0.2rem 0.6rem;
}

.nofx-aff__pill--pending {
	background: rgba(246, 173, 85, 0.12);
	color: var(--nofx-aff-hold);
}

.nofx-aff__pill--available {
	background: rgba(var(--nofx-aff-accent-rgb), 0.12);
	color: var(--nofx-aff-accent);
}

.nofx-aff__pill--paid {
	background: rgba(255, 255, 255, 0.06);
	color: var(--nofx-aff-muted);
}

.nofx-aff__pill--rejected {
	background: rgba(var(--nofx-aff-danger-rgb), 0.12);
	color: var(--nofx-aff-danger);
}

/* Payout details ------------------------------------------------------- */

/* A grid rather than a flex row so the two pairs stay aligned even when a
   value is still blank. */
.nofx-aff__pairs {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	margin: 0;
}

.nofx-aff__pairs dt {
	color: var(--nofx-aff-muted);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.nofx-aff__pairs dd {
	font-family: var(--wp--preset--font-family--dm-mono, monospace);
	margin: 0.25rem 0 0;
}

/* Forms ---------------------------------------------------------------- */

.nofx-aff__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-block-end: 1rem;
}

.nofx-aff__field--check {
	flex-direction: row;
}

.nofx-aff__field label {
	color: var(--nofx-aff-muted);
	font-size: 0.8125rem;
	font-weight: 600;
}

.nofx-aff__field--check label {
	align-items: flex-start;
	color: var(--nofx-aff-ink);
	display: flex;
	font-size: 0.875rem;
	font-weight: 400;
	gap: 0.5rem;
	line-height: 1.4;
}

/* The checkbox must not grow: it is a flex child of the label, so any width
   set on it pushes the text away instead of sitting beside it. */
.nofx-aff__field--check input[type="checkbox"] {
	accent-color: var(--nofx-aff-accent);
	block-size: 1rem;
	flex: 0 0 auto;
	inline-size: 1rem;
	margin: 0;
	/* Optically aligns the box with the first line of the label text. */
	margin-block-start: 0.15rem;
}

.nofx-aff__hint {
	color: var(--nofx-aff-muted);
	font-size: 0.8125rem;
}

/* Text-like inputs only. A blanket `.nofx-aff__form input` rule would also
   catch checkboxes and stretch them to the full row width. */
.nofx-aff input[type="text"],
.nofx-aff input[type="email"],
.nofx-aff input[type="password"],
.nofx-aff .nofx-aff__form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
	background: var(--nofx-aff-paper);
	border: 1px solid var(--nofx-aff-line);
	border-radius: var(--nofx-aff-radius-control);
	color: var(--nofx-aff-ink);
	font: inherit;
	padding: 0.65rem 0.8rem;
	width: 100%;
}

.nofx-aff input:disabled {
	color: var(--nofx-aff-muted);
}

.nofx-aff input:focus-visible {
	border-color: var(--nofx-aff-accent);
	box-shadow: 0 0 0 1px var(--nofx-aff-accent);
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.nofx-aff__button {
	background: var(--nofx-aff-accent);
	border: 0;
	border-radius: var(--nofx-aff-radius-control);
	color: var(--wp--preset--color--deep, #020304);
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	padding: 0.65rem 1.1rem;
}

.nofx-aff__button:hover {
	background: var(--wp--preset--color--accent-dark, #10c7a7);
}

.nofx-aff__button--block {
	width: 100%;
}

/* Notices -------------------------------------------------------------- */

.nofx-aff__errors {
	background: rgba(var(--nofx-aff-danger-rgb), 0.08);
	border: 1px solid var(--nofx-aff-danger);
	border-radius: var(--nofx-aff-radius-control);
	margin-block-end: 1rem;
	padding: 0.75rem 1rem;
}

.nofx-aff__errors p {
	color: var(--nofx-aff-danger);
	margin: 0.25rem 0;
}

.nofx-aff__notice,
.nofx-aff__welcome {
	background: rgba(var(--nofx-aff-accent-rgb), 0.08);
	border: 1px solid var(--nofx-aff-accent);
	border-radius: var(--nofx-aff-radius-control);
	margin-block-end: 1.25rem;
	padding: 0.75rem 1rem;
}

.nofx-aff__welcome p {
	margin: 0;
}

.nofx-aff__details {
	border-block-start: 1px solid var(--nofx-aff-line);
	margin-block-start: 1.25rem;
	padding-block-start: 1rem;
}

.nofx-aff__details summary {
	color: var(--nofx-aff-accent);
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 600;
	list-style: none;
}

.nofx-aff__details summary::-webkit-details-marker {
	display: none;
}

.nofx-aff__details summary::after {
	content: " +";
	font-family: var(--wp--preset--font-family--dm-mono, monospace);
}

.nofx-aff__details[open] summary::after {
	content: " \2212";
}

.nofx-aff__details[open] summary {
	margin-block-end: 1.25rem;
}

/* The login form is core markup, so style it by its own class names. */
.nofx-aff--login .login-username,
.nofx-aff--login .login-password,
.nofx-aff--login .login-remember,
.nofx-aff--login .login-submit {
	margin-block-end: 1rem;
}

.nofx-aff--login label {
	color: var(--nofx-aff-muted);
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	margin-block-end: 0.35rem;
}

.nofx-aff--login .login-remember label {
	align-items: center;
	color: var(--nofx-aff-ink);
	display: flex;
	font-weight: 400;
	gap: 0.5rem;
	margin-block-end: 0;
}

.nofx-aff--login .login-remember input {
	accent-color: var(--nofx-aff-accent);
	margin: 0;
}

.nofx-aff--login .login-submit {
	margin-block-end: 0.5rem;
}

.nofx-aff--login .button-primary {
	background: var(--nofx-aff-accent);
	border: 0;
	border-radius: var(--nofx-aff-radius-control);
	color: var(--wp--preset--color--deep, #020304);
	cursor: pointer;
	font-weight: 600;
	padding: 0.65rem 1.1rem;
	width: 100%;
}

.nofx-aff--login .button-primary:hover {
	background: var(--wp--preset--color--accent-dark, #10c7a7);
}

/* Pagination and sign out ---------------------------------------------- */

.nofx-aff__pagination {
	align-items: center;
	display: flex;
	gap: 1rem;
	justify-content: center;
	margin-block-start: 1rem;
}

.nofx-aff__pagination span {
	color: var(--nofx-aff-muted);
	font-size: 0.875rem;
}

.nofx-aff__signout {
	font-size: 0.875rem;
	margin-block-start: 2rem;
	text-align: center;
}

.nofx-aff__signout a {
	color: var(--nofx-aff-muted);
}

.nofx-aff__signout a:hover {
	color: var(--nofx-aff-ink);
}