/**
 * Nexties Affiliate :: front-end.
 *
 * Everything is scoped under .nxaff so the plugin can never leak styles into
 * a theme, and every colour comes from a custom property the settings screen
 * can repaint.
 */

.nxaff {
	--nxaff-accent: #2563eb;
	--nxaff-radius: 8px;
	--nxaff-border: #e2e8f0;
	--nxaff-muted: #64748b;
	--nxaff-bg: #ffffff;
	--nxaff-bg-soft: #f8fafc;
	--nxaff-text: inherit;
	--nxaff-on-accent: #ffffff;
	--nxaff-card: var(--nxaff-bg);
	--nxaff-card-border: var(--nxaff-border);
	--nxaff-success: #15803d;
	--nxaff-warning: #b45309;
	--nxaff-danger: #b91c1c;

	color: var(--nxaff-text);
}

.nxaff *,
.nxaff *::before,
.nxaff *::after { box-sizing: border-box; }

/* Headings -------------------------------------------------------------- */

.nxaff-heading {
	margin: 0 0 1rem;
	font-size: 1.125rem;
	line-height: 1.3;
}

.nxaff-muted { color: var(--nxaff-muted); font-size: .875rem; }
.nxaff-required { color: var(--nxaff-danger); }

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

.nxaff-notice {
	margin: 0 0 1rem;
	padding: .75rem 1rem;
	border-left: 3px solid var(--nxaff-accent);
	border-radius: var(--nxaff-radius);
	background: var(--nxaff-bg-soft);
	font-size: .9375rem;
}

.nxaff-notice--success { border-left-color: var(--nxaff-success); }
.nxaff-notice--error { border-left-color: var(--nxaff-danger); }

.nxaff-callout {
	padding: 1.25rem;
	margin-bottom: 1.5rem;
	background: var(--nxaff-bg-soft);
	border: 1px solid var(--nxaff-border);
	border-radius: var(--nxaff-radius);
}

.nxaff-callout p:last-child { margin-bottom: 0; }
.nxaff-empty { color: var(--nxaff-muted); padding: 1.5rem 0; }

/* Tabs ------------------------------------------------------------------ */

.nxaff-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--nxaff-border);
}

.nxaff-tabs__link {
	padding: .625rem 1rem;
	border-bottom: 2px solid transparent;
	color: var(--nxaff-muted);
	font-size: .9375rem;
	font-weight: 500;
	text-decoration: none;
}

.nxaff-tabs__link:hover { color: var(--nxaff-accent); }

.nxaff-tabs__link.is-active {
	border-bottom-color: var(--nxaff-accent);
	color: var(--nxaff-accent);
}

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

.nxaff-stats {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	margin-bottom: 1.5rem;
}

.nxaff-stat {
	padding: 1.25rem;
	background: var(--nxaff-bg);
	border: 1px solid var(--nxaff-border);
	border-radius: var(--nxaff-radius);
	text-align: center;
}

.nxaff-stat__value {
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
}

.nxaff-stat__label {
	display: block;
	margin-top: .375rem;
	color: var(--nxaff-muted);
	font-size: .75rem;
	letter-spacing: .04em;
	text-transform: uppercase;
}

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

.nxaff-table {
	width: 100%;
	margin-bottom: 1.5rem;
	border-collapse: collapse;
	font-size: .9375rem;
}

.nxaff-table th,
.nxaff-table td {
	padding: .75rem .5rem;
	border-bottom: 1px solid var(--nxaff-border);
	text-align: left;
	vertical-align: middle;
}

.nxaff-table th {
	color: var(--nxaff-muted);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.nxaff-truncate {
	max-width: 280px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Tables are the one thing that genuinely cannot reflow on a phone. */
@media (max-width: 600px) {
	.nxaff-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* Badges ---------------------------------------------------------------- */

.nxaff-badge {
	display: inline-block;
	padding: .125rem .5rem;
	border-radius: 999px;
	background: var(--nxaff-bg-soft);
	color: var(--nxaff-muted);
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.6;
}

.nxaff-badge--paid { background: #dcfce7; color: var(--nxaff-success); }
.nxaff-badge--unpaid { background: #fef3c7; color: var(--nxaff-warning); }
.nxaff-badge--pending { background: #e0e7ff; color: #4338ca; }
.nxaff-badge--rejected,
.nxaff-badge--failed { background: #fee2e2; color: var(--nxaff-danger); }
.nxaff-badge--tier { background: #ede9fe; color: #6d28d9; }

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

.nxaff-form { margin-bottom: 1.5rem; }
.nxaff-field { margin-bottom: 1rem; }

.nxaff-field label {
	display: block;
	margin-bottom: .375rem;
	font-size: .875rem;
	font-weight: 500;
}

.nxaff-field--check label {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	font-weight: 400;
}

.nxaff .nxaff-input {
	width: 100%;
	padding: .625rem .75rem;
	border: 1px solid var(--nxaff-border);
	border-radius: var(--nxaff-radius);
	background: var(--nxaff-bg);
	font: inherit;
	font-size: .9375rem;
	line-height: 1.4;
}

.nxaff .nxaff-input {
	color: var(--nxaff-text);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.nxaff .nxaff-input:focus {
	outline: none;
	border-color: var(--nxaff-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--nxaff-accent) 25%, transparent);
}

.nxaff .nxaff-input::placeholder { color: var(--nxaff-muted); opacity: .8; }

.nxaff .nxaff-select {
	padding-right: 2.5rem;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239aa3b2' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .875rem center;
	background-size: 1rem;
	cursor: pointer;
}

.nxaff textarea.nxaff-input { min-height: 7.5rem; resize: vertical; }

.nxaff-input--code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8125rem; }

.nxaff-grid-2 { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }

@media (min-width: 600px) {
	.nxaff-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Buttons --------------------------------------------------------------- */

.nxaff-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .625rem 1.25rem;
	border: 1px solid var(--nxaff-border);
	border-radius: var(--nxaff-radius);
	background: var(--nxaff-bg);
	color: inherit;
	font: inherit;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.nxaff-button:hover { border-color: var(--nxaff-accent); color: var(--nxaff-accent); }

.nxaff-button--primary {
	background: var(--nxaff-accent);
	border-color: var(--nxaff-accent);
	color: var(--nxaff-on-accent);
}

.nxaff-button--primary:hover { filter: brightness(1.08); color: var(--nxaff-on-accent); }
.nxaff-button--block { width: 100%; }
.nxaff-button svg { flex: none; }
.nxaff-button.is-copied { border-color: var(--nxaff-success); color: var(--nxaff-success); }

/* Copy row -------------------------------------------------------------- */

.nxaff-copy { display: flex; gap: .5rem; align-items: stretch; }
.nxaff-copy .nxaff-input { flex: 1; }
.nxaff-copy .nxaff-button { flex: none; }

.nxaff-generator { margin-bottom: 1.5rem; }
.nxaff-details { margin-top: .75rem; }
.nxaff-details summary { cursor: pointer; color: var(--nxaff-accent); font-size: .875rem; }
.nxaff-details > .nxaff-field { margin-top: .75rem; }
.nxaff-generator__config { display: none; }

/* Creatives ------------------------------------------------------------- */

.nxaff-creatives {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 700px) {
	.nxaff-creatives { grid-template-columns: repeat(var(--nxaff-cols, 2), minmax(0, 1fr)); }
}

.nxaff-creative {
	padding: 1rem;
	border: 1px solid var(--nxaff-border);
	border-radius: var(--nxaff-radius);
}

.nxaff-creative__title { margin: 0 0 .5rem; font-size: 1rem; }
.nxaff-creative__preview { margin: .75rem 0; }
.nxaff-creative__preview img { max-width: 100%; height: auto; display: block; }

/* Leaderboard ----------------------------------------------------------- */

.nxaff-leaderboard { margin: 0; padding: 0; list-style: none; counter-reset: nxaff-rank; }

.nxaff-leaderboard__item {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .625rem 0;
	border-bottom: 1px solid var(--nxaff-border);
}

.nxaff-leaderboard__item:last-child { border-bottom: 0; }

.nxaff-leaderboard__rank {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--nxaff-bg-soft);
	font-size: .8125rem;
	font-weight: 700;
}

.nxaff-leaderboard__name { flex: 1; }
.nxaff-leaderboard__value { font-weight: 600; }

/* Pagination ------------------------------------------------------------ */

.nxaff-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nxaff-pagination a,
.nxaff-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 .5rem;
	border: 1px solid var(--nxaff-border);
	border-radius: var(--nxaff-radius);
	font-size: .875rem;
	text-decoration: none;
}

.nxaff-pagination .current {
	background: var(--nxaff-accent);
	border-color: var(--nxaff-accent);
	color: #fff;
}

/* Login ----------------------------------------------------------------- */

.nxaff-login { margin-bottom: 2rem; }
.nxaff-login #nxaff-login-form p { margin-bottom: 1rem; }
.nxaff-login #nxaff-login-form label { display: block; margin-bottom: .375rem; font-size: .875rem; font-weight: 500; }

.nxaff-login #nxaff-login-form input[type="text"],
.nxaff-login #nxaff-login-form input[type="password"] {
	width: 100%;
	padding: .625rem .75rem;
	border: 1px solid var(--nxaff-border);
	border-radius: var(--nxaff-radius);
	font: inherit;
}

.nxaff-login #nxaff-login-form .button,
.nxaff-login #nxaff-login-form input[type="submit"] {
	padding: .625rem 1.25rem;
	background: var(--nxaff-accent);
	border: 1px solid var(--nxaff-accent);
	border-radius: var(--nxaff-radius);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

/* Page builder placeholder ------------------------------------------------
   Only ever seen inside an editor, where a widget has nothing to show
   because its output depends on who is signed in. */

.nxaff-placeholder {
	padding: 24px;
	border: 1px dashed var(--nxaff-border);
	border-radius: var(--nxaff-radius);
	background: var(--nxaff-bg-soft);
	text-align: center;
}

.nxaff-placeholder p {
	margin: 0;
	font-weight: 600;
}

.nxaff-placeholder__hint {
	margin-top: 6px !important;
	font-weight: 400 !important;
	font-size: 13px;
	color: var(--nxaff-muted);
}

/* Application form ------------------------------------------------------- */

.nxaff-apply {
	max-width: 760px;
	margin-inline: auto;
	padding: clamp(1.25rem, 4vw, 2.5rem);
	background: var(--nxaff-card);
	border: 1px solid var(--nxaff-card-border);
	border-radius: var(--nxaff-radius);
}

.nxaff-apply__head { margin-bottom: 1.75rem; text-align: center; }
.nxaff-apply__title { margin-bottom: .5rem; font-size: clamp(1.5rem, 3vw, 2rem); }
.nxaff-apply__intro { margin: 0; }

.nxaff .nxaff-fieldset {
	min-width: 0;
	margin: 0 0 1.75rem;
	padding: 0;
	border: 0;
	background: none;
}

.nxaff .nxaff-legend {
	display: flex;
	align-items: center;
	gap: .75rem;
	width: 100%;
	margin: 0 0 1.25rem;
	padding: 0 0 .75rem;
	border-bottom: 1px solid var(--nxaff-border);
	color: var(--nxaff-text);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.nxaff-legend__num { color: var(--nxaff-accent); font-variant-numeric: tabular-nums; }

.nxaff .nxaff-field label { color: var(--nxaff-text); }
.nxaff-optional { margin-left: .25rem; color: var(--nxaff-muted); font-size: .75rem; font-weight: 400; }
.nxaff-hint { margin: .375rem 0 0; color: var(--nxaff-muted); font-size: .75rem; line-height: 1.5; }
.nxaff-signed-in { margin: 0; color: var(--nxaff-muted); }
.nxaff-signed-in strong { color: var(--nxaff-text); }

.nxaff .nxaff-field--check label { color: var(--nxaff-muted); font-size: .875rem; line-height: 1.5; }
.nxaff .nxaff-field--check input { flex: none; width: 1rem; height: 1rem; margin: .1875rem 0 0; accent-color: var(--nxaff-accent); }
.nxaff-field--check a { color: var(--nxaff-accent); }

.nxaff-apply__submit { padding-top: .25rem; }
.nxaff-apply__submit .nxaff-button { gap: .625rem; padding-block: .9375rem; font-size: .9375rem; }

.nxaff-apply__foot { margin: 1rem 0 0; color: var(--nxaff-muted); font-size: .875rem; text-align: center; }
.nxaff-apply__foot a { color: var(--nxaff-accent); font-weight: 600; }

/* Notices and callouts sit on the same width as the form. */
.nxaff-apply ~ .nxaff-notice,
.nxaff-notice + .nxaff-apply { margin-top: 0; }

.nxaff > .nxaff-notice,
.nxaff > .nxaff-callout { max-width: 760px; margin-inline: auto; }

.nxaff > .nxaff-notice { margin-bottom: 1.25rem; }
.nxaff-notice--success { background: color-mix(in srgb, var(--nxaff-success) 10%, var(--nxaff-bg-soft)); }
.nxaff-notice--error { background: color-mix(in srgb, var(--nxaff-danger) 10%, var(--nxaff-bg-soft)); }