/* J4N Referral Tracker — public styles
 *
 * All colours and key sizes are driven by CSS custom properties.
 * The view files (subscription-form.php, leaderboard.php) set these
 * properties on a unique scoped ID so every shortcode instance can
 * be styled independently without specificity fights.
 *
 * Defaults below match the original design exactly, so the plugin
 * looks identical if no shortcode colour attributes are supplied.
 */

/* ── Design tokens (defaults) ──────────────────────────────────────────────── */

.j4nr-container {
	/* Layout */
	--j4nr-radius      : 12px;

	/* Palette */
	--j4nr-white       : #ffffff;
	--j4nr-border      : #e5e7eb;
	--j4nr-border-light: #f3f4f6;
	--j4nr-bg-subtle   : #f9fafb;

	/* Brand / interactive */
	--j4nr-btn-bg      : #6366f1;
	--j4nr-btn-hover   : #4f46e5;
	--j4nr-btn-active  : #4338ca;
	--j4nr-btn-text    : #ffffff;
	--j4nr-focus       : #6366f1;

	/* Typography */
	--j4nr-text-dark   : #111827;
	--j4nr-text-mid    : #374151;
	--j4nr-text-muted  : #6b7280;
	--j4nr-text-faint  : #9ca3af;
	--j4nr-label-color : #374151;

	/* Form title (subscription-form shortcode) */
	--j4nr-title-color     : #111827;

	/* Form subtitle / lookup label */
	--j4nr-subtitle-color     : #6b7280;

	/* Body text */

	/* Input */
	--j4nr-input-bg     : #ffffff;
	--j4nr-input-border : #d1d5db;
	--j4nr-input-text   : #111827;
	--j4nr-placeholder  : #9ca3af;

	/* Notice */
	--j4nr-notice-color : #6b7280;

	/* Success card */
	--j4nr-card-bg          : #ffffff;
	--j4nr-card-border      : #e5e7eb;
	--j4nr-check-bg         : #d1fae5;
	--j4nr-check-color      : #065f46;
	--j4nr-card-title-color : #111827;
	--j4nr-card-text-color  : #6b7280;

	/* Anon badge */
	--j4nr-badge-bg     : #eef2ff;
	--j4nr-badge-text   : #4338ca;
	--j4nr-badge-border : #c7d2fe;

	/* Referral / copy row */
	--j4nr-copy-input-bg     : #f9fafb;
	--j4nr-copy-input-border : #d1d5db;
	--j4nr-copy-input-text   : #374151;
	--j4nr-copy-btn-bg       : var(--j4nr-btn-bg);
	--j4nr-copy-btn-hover    : var(--j4nr-btn-hover);
	--j4nr-copy-btn-text     : var(--j4nr-btn-text);
	--j4nr-copy-confirm      : #059669;

	/* Leaderboard */
	--j4nr-lb-bg             : transparent;
	--j4nr-lb-border         : #e5e7eb;
	--j4nr-lb-title-color    : #111827;
	--j4nr-lb-subtitle-color     : #9ca3af;
	--j4nr-lb-name-color     : #374151;
	--j4nr-lb-count-color    : #6b7280;
	--j4nr-lb-rank-color     : #9ca3af;
	--j4nr-lb-empty-color    : #9ca3af;
	--j4nr-lb-row-bg         : #f9fafb;
	--j4nr-lb-row-alt-bg     : #f9fafb;
	--j4nr-lb-row-border     : #f3f4f6;
	--j4nr-lb-row-hover      : #f3f4f6;
	--j4nr-lb-leader-bg      : #fffbeb;
	--j4nr-lb-leader-border  : #fcd34d;
	--j4nr-lb-leader-accent  : #d97706;

	max-width : 540px;
	margin    : 0 auto;
	font-family: inherit;
	box-sizing: border-box;
}

/* ── Form ──────────────────────────────────────────────────────────────────── */

.j4nr-form {
	background   : var(--j4nr-white);
	border       : 1px solid var(--j4nr-border);
	border-radius: var(--j4nr-radius);
	padding      : 32px;
	box-shadow   : 0 1px 4px rgba(0,0,0,.06);
}

.j4nr-field {
	margin-bottom: 18px;
}

/* Form title (replaces the old .j4nr-label heading role) */
.j4nr-form-title {
	display      : block;
	font-weight  : 700;
	color        : var(--j4nr-title-color);
	margin       : 0 0 14px;
}

/* Legacy .j4nr-label kept for backward compat (lookup widget still uses it) */
.j4nr-label {
	display      : block;
	font-weight  : 600;
	margin-bottom: 7px;
	color        : var(--j4nr-label-color);
}

.j4nr-input {
	display      : block;
	width        : 100%;
	padding      : 12px 14px;
	border       : 1px solid var(--j4nr-input-border);
	border-radius: var(--j4nr-radius);
	font-size    : inherit;
	color        : var(--j4nr-input-text);
	background   : var(--j4nr-input-bg);
	box-sizing   : border-box;
	transition   : border-color .15s, box-shadow .15s;
}

.j4nr-input::placeholder { color: var(--j4nr-placeholder); }

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

/* ── Buttons ───────────────────────────────────────────────────────────────── */

.j4nr-btn {
	display      : block;
	width        : 100%;
	padding      : 13px 20px;
	background   : var(--j4nr-btn-bg);
	color        : var(--j4nr-btn-text);
	border       : none;
	border-radius: var(--j4nr-radius);
	font-size    : inherit;
	font-weight  : 600;
	cursor       : pointer;
	transition   : background .15s, color .15s;
	box-sizing   : border-box;
	text-align   : center;
}

.j4nr-btn:hover    { background: var(--j4nr-btn-hover);  color: var(--j4nr-btn-text); }
.j4nr-btn:active   { background: var(--j4nr-btn-active); color: var(--j4nr-btn-text); }
.j4nr-btn:disabled { background: #a5b4fc; cursor: not-allowed; }

.j4nr-btn-sm {
	flex-shrink  : 0;
	width        : auto;
	padding      : 10px 18px;
	font-size    : inherit;
	background   : var(--j4nr-copy-btn-bg);
	color        : var(--j4nr-copy-btn-text);
}

.j4nr-btn-sm:hover { background: var(--j4nr-copy-btn-hover); color: var(--j4nr-copy-btn-text); }

.j4nr-notice {
	margin-top : 14px;
	color      : var(--j4nr-notice-color);
	text-align : center;
	line-height: 1.5;
}

.j4nr-notice.is-error { color: #dc2626; }
.j4nr-notice.is-info  { color: #2563eb; }

/* ── Success / referral card ───────────────────────────────────────────────── */

.j4nr-card {
	background   : var(--j4nr-card-bg);
	border       : 1px solid var(--j4nr-card-border);
	border-radius: var(--j4nr-radius);
	padding      : 32px;
	text-align   : center;
	box-shadow   : 0 1px 4px rgba(0,0,0,.06);
}

.j4nr-check-icon {
	display         : flex;
	align-items     : center;
	justify-content : center;
	width           : 60px;
	height          : 60px;
	margin          : 0 auto 18px;
	background      : var(--j4nr-check-bg);
	color           : var(--j4nr-check-color);
	font-size       : 1.7rem;
	border-radius   : 50%;
}

.j4nr-card-title {
	margin    : 0 0 10px;
	font-weight: 700;
	color     : var(--j4nr-card-title-color);
}

.j4nr-card-text {
	margin     : 0 0 14px;
	color      : var(--j4nr-card-text-color);
	line-height: 1.6;
}

.j4nr-referral-intro {
	margin-top : 20px;
	padding-top: 20px;
	border-top : 1px solid var(--j4nr-border-light);
}

.j4nr-copy-row {
	display      : flex;
	gap          : 8px;
	margin-bottom: 8px;
}

.j4nr-copy-input {
	flex         : 1;
	min-width    : 0;
	padding      : 10px 12px;
	border       : 1px solid var(--j4nr-copy-input-border);
	border-radius: var(--j4nr-radius);
	font-size    : inherit;
	color        : var(--j4nr-copy-input-text);
	background   : var(--j4nr-copy-input-bg);
	text-overflow: ellipsis;
}

.j4nr-copy-confirm {
	color      : var(--j4nr-copy-confirm);
	font-weight: 600;
	margin     : 0;
}

/* ── Anonymous name badge ──────────────────────────────────────────────────── */

.j4nr-anon-badge {
	display      : inline-block;
	background   : var(--j4nr-badge-bg);
	color        : var(--j4nr-badge-text);
	border       : 1px solid var(--j4nr-badge-border);
	border-radius: 999px;
	padding      : 8px 22px;
	font-weight  : 700;
	letter-spacing: .01em;
	margin       : 6px 0 16px;
}

/* ── Lookup widget ─────────────────────────────────────────────────────────── */

.j4nr-lookup-wrap  { max-width: 540px; }
.j4nr-lookup-form  { margin-bottom: 0; }

.j4nr-lookup-label {
	font-weight: 600;
	color      : var(--j4nr-subtitle-color);
	margin     : 0 0 10px;
	text-align : center;
}

.j4nr-lookup-result {
	margin-top : 20px;
	padding-top: 20px;
	border-top : 1px solid var(--j4nr-border-light);
	text-align : center;
}

.j4nr-lookup-entries {
	color    : var(--j4nr-text-muted);
	margin   : 0 0 12px;
}

/* ── Leaderboard ───────────────────────────────────────────────────────────── */

.j4nr-leaderboard-wrap { max-width: 600px; }

.j4nr-lb-title {
	font-weight: 700;
	margin     : 0 0 4px;
	color      : var(--j4nr-lb-title-color);
}

.j4nr-lb-week {
	color              : var(--j4nr-lb-subtitle-color);
	margin             : 0 0 18px;
	font-variant-numeric: tabular-nums;
}

.j4nr-lb-list {
	list-style: none;
	padding   : 0;
	margin    : 0;
}

.j4nr-lb-item {
	display      : flex;
	align-items  : center;
	gap          : 14px;
	padding      : 13px 16px;
	border-radius: 10px;
	margin-bottom: 6px;
	background   : var(--j4nr-lb-row-bg);
	border       : 1px solid var(--j4nr-lb-row-border);
	transition   : background .1s;
}

.j4nr-lb-item:nth-child(even) { background: var(--j4nr-lb-row-alt-bg); }
.j4nr-lb-item:hover           { background: var(--j4nr-lb-row-hover); }

.j4nr-lb-leader {
	background  : var(--j4nr-lb-leader-bg);
	border-color: var(--j4nr-lb-leader-border);
}

.j4nr-lb-leader:hover { background: var(--j4nr-lb-leader-bg); filter: brightness(0.97); }

.j4nr-lb-rank {
	font-weight: 700;
	color     : var(--j4nr-lb-rank-color);
	min-width : 28px;
	text-align: center;
}

.j4nr-lb-leader .j4nr-lb-rank { color: var(--j4nr-lb-leader-accent); }

.j4nr-lb-name {
	flex       : 1;
	font-weight: 600;
	color      : var(--j4nr-lb-name-color);
}

.j4nr-lb-leader .j4nr-lb-name  { color: var(--j4nr-lb-name-color); }
.j4nr-lb-leader .j4nr-lb-count { color: var(--j4nr-lb-count-color); }

.j4nr-lb-count {
	color      : var(--j4nr-lb-count-color);
	font-weight: 500;
	white-space: nowrap;
}

.j4nr-lb-empty {
	color     : var(--j4nr-lb-empty-color);
	font-style: italic;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
	.j4nr-form,
	.j4nr-card { padding: 22px 18px; }

	.j4nr-copy-row { flex-direction: column; }
	.j4nr-btn-sm   { width: 100%; }
}