/* --- Bundled design tokens (Phase E) ---
 * The plugin's components consume --n-* tokens that normally come from
 * `nefdak-theme`'s global.css. That theme is NOT active on prod (YITH Wonder
 * is), so the tokens are defined here too, making the plugin's UI theme-
 * independent. Mirror of themes/nefdak-theme/assets/css/global.css :root —
 * keep in sync (same manual-sync rule as templates/emails/layout.php).
 * Loaded by every platform page (login / registration / pending all enqueue
 * this stylesheet). */
:root {
	--n-primary-900: #0F2A56;
	--n-primary-700: #1E4A9C;
	--n-primary-500: #3B82F6;
	--n-primary-100: #DBEAFE;
	--n-accent-600: #0EA5A8;
	--n-accent-100: #CCFBF1;
	--n-success: #16A34A;
	--n-warning: #F59E0B;
	--n-error:   #DC2626;
	--n-slate-900: #0F172A;
	--n-slate-600: #475569;
	--n-slate-300: #CBD5E1;
	--n-slate-100: #F1F5F9;
	--n-slate-50:  #F8FAFC;
	--n-white:     #FFFFFF;
	--n-font-ui:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--n-font-display: "Manrope", "Inter", sans-serif;
	--n-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
	--n-text-caption: 12px;
	--n-text-small:   14px;
	--n-text-body:    16px;
	--n-text-h4:      20px;
	--n-text-h3:      24px;
	--n-text-h2:      36px;
	--n-text-h1:      48px;
	--n-space-1: 4px;
	--n-space-2: 8px;
	--n-space-3: 12px;
	--n-space-4: 16px;
	--n-space-6: 24px;
	--n-space-8: 32px;
	--n-space-12: 48px;
	--n-space-16: 64px;
	--n-space-24: 96px;
	--n-radius-sm: 4px;
	--n-radius-md: 8px;
	--n-radius-lg: 12px;
	--n-radius-xl: 16px;
	--n-radius-2xl: 24px;
	--n-radius-full: 9999px;
	--n-container-sm: 640px;
	--n-container-md: 768px;
	--n-container-lg: 1024px;
	--n-container-xl: 1280px;
	--n-container-2xl: 1440px;
	--n-shadow-sm:    0 1px 2px 0 rgb(15 23 42 / 0.05);
	--n-shadow-md:    0 4px 6px -1px rgb(15 23 42 / 0.07), 0 2px 4px -2px rgb(15 23 42 / 0.05);
	--n-shadow-lg:    0 10px 15px -3px rgb(15 23 42 / 0.08), 0 4px 6px -4px rgb(15 23 42 / 0.05);
	--n-shadow-focus: 0 0 0 3px rgb(59 130 246 / 0.3);
}

/*
 * Nefdak Platform — auth styles.
 * Consumes only --n-* tokens from theme global.css.
 */

.np-auth {
	display: flex;
	justify-content: center;
	padding: var(--n-space-12) var(--n-space-4);
	font-family: var(--n-font-ui);
}

.np-auth__card {
	width: 100%;
	max-width: 440px;
	background: var(--n-white);
	border: 1px solid var(--n-slate-300);
	border-radius: var(--n-radius-xl);
	padding: var(--n-space-8);
	box-shadow: var(--n-shadow-md);
}

.np-auth__title {
	font-family: var(--n-font-display);
	font-weight: 700;
	font-size: var(--n-text-h3);
	color: var(--n-primary-900);
	margin: 0 0 var(--n-space-2) 0;
	line-height: 1.2;
}

.np-auth__lede {
	color: var(--n-slate-600);
	font-size: var(--n-text-small);
	margin: 0 0 var(--n-space-6) 0;
}

.np-auth__foot {
	margin: var(--n-space-6) 0 0 0;
	text-align: center;
	font-size: var(--n-text-small);
}

.np-form {
	display: flex;
	flex-direction: column;
	gap: var(--n-space-4);
}

.np-field {
	display: flex;
	flex-direction: column;
	gap: var(--n-space-2);
}

.np-field__label {
	font-size: var(--n-text-small);
	font-weight: 600;
	color: var(--n-slate-900);
}

.np-field__row {
	display: flex;
	align-items: stretch;
	gap: var(--n-space-2);
}

.np-input {
	width: 100%;
	padding: 10px 12px;
	font: inherit;
	font-size: var(--n-text-body);
	color: var(--n-slate-900);
	background: var(--n-white);
	border: 1px solid var(--n-slate-300);
	border-radius: var(--n-radius-md);
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.np-input:focus {
	outline: none;
	border-color: var(--n-primary-500);
	box-shadow: var(--n-shadow-focus);
}

.np-toggle {
	flex: 0 0 auto;
	padding: 0 14px;
	font: inherit;
	font-size: var(--n-text-small);
	color: var(--n-primary-700);
	background: var(--n-slate-100);
	border: 1px solid var(--n-slate-300);
	border-radius: var(--n-radius-md);
	cursor: pointer;
}

.np-toggle:hover {
	background: var(--n-slate-300);
}

.np-check {
	display: flex;
	align-items: center;
	gap: var(--n-space-2);
	font-size: var(--n-text-small);
	color: var(--n-slate-600);
}

.np-help {
	margin: 0;
	font-size: var(--n-text-caption);
	color: var(--n-slate-600);
}

.np-btn {
	display: inline-block;
	padding: 12px 20px;
	font: inherit;
	font-size: var(--n-text-body);
	font-weight: 600;
	border: 1px solid transparent;
	border-radius: var(--n-radius-md);
	cursor: pointer;
	transition: background 0.15s ease;
}

.np-btn--primary {
	background: var(--n-primary-700);
	color: var(--n-white);
}

.np-btn--primary:hover {
	background: var(--n-primary-900);
}

.np-btn--ghost {
	background: var(--n-slate-100);
	color: var(--n-slate-900);
	border-color: var(--n-slate-300);
}

.np-btn--ghost:hover {
	background: var(--n-slate-300);
}

/* Step nav row: Back on the left, primary action pinned right. */
.np-form__actions {
	display: flex;
	align-items: center;
	gap: var(--n-space-3);
	margin-top: var(--n-space-2);
}

.np-form__actions .np-btn--primary {
	margin-left: auto;
}

.np-form__startover {
	margin: var(--n-space-4) 0 0 0;
	text-align: center;
}

.np-link {
	color: var(--n-primary-700);
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: inherit;
	text-decoration: none;
	cursor: pointer;
}

.np-link:hover {
	text-decoration: underline;
}

.np-banner {
	margin: 0 0 var(--n-space-4) 0;
	padding: var(--n-space-3) var(--n-space-4);
	border-radius: var(--n-radius-md);
	font-size: var(--n-text-small);
}

.np-banner--success {
	background: var(--n-accent-100);
	color: #065F46;
	border: 1px solid var(--n-success);
}

.np-banner--warning {
	background: #FEF3C7;
	color: #92400E;
	border: 1px solid var(--n-warning);
}

.np-banner--error {
	background: #FEE2E2;
	color: #991B1B;
	border: 1px solid var(--n-error);
}

.np-resend {
	display: inline-block;
	margin-left: var(--n-space-2);
	font-weight: 600;
}

/* ---- Pending / rejected status page (B2.5) ---- */

.np-auth--pending .np-auth__card {
	text-align: center;
}

.np-pending__icon {
	font-size: 48px;
	line-height: 1;
	margin: 0 0 var(--n-space-4) 0;
}

.np-pending__cols {
	display: flex;
	flex-wrap: wrap;
	gap: var(--n-space-4);
	margin: var(--n-space-6) 0;
	text-align: left;
}

.np-pending__col {
	flex: 1 1 200px;
}

.np-pending__h {
	font-size: var(--n-text-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--n-slate-600);
	margin: 0 0 var(--n-space-2) 0;
}

.np-pending__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.np-pending__list li {
	position: relative;
	padding: var(--n-space-1) 0 var(--n-space-1) var(--n-space-6);
	font-size: var(--n-text-small);
	color: var(--n-slate-600);
}

.np-pending__list li::before {
	position: absolute;
	left: 0;
	font-weight: 700;
}

.np-pending__list--yes li::before {
	content: "✓";
	color: var(--n-success);
}

.np-pending__list--no li::before {
	content: "○";
	color: var(--n-slate-300);
}

.np-pending__text {
	margin: var(--n-space-4) 0 0 0;
	font-size: var(--n-text-small);
	color: var(--n-slate-600);
}