/**
 * Shared access-denied component — one look for every corner.
 * Uses the platform --nx-* tokens with fallbacks, so it renders correctly on
 * the dark front-end and degrades sensibly in wp-admin (tokens not injected).
 */

.nxt-access-denied {
	display: flex;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	font-family: var(--nx-font-family, "Inter", system-ui, -apple-system, sans-serif);
}

/* Full-page variant: center in the viewport for whole-page gates. */
.nxt-access-denied--screen {
	min-height: 62vh;
	align-items: center;
	padding: 40px 18px;
}

.nxt-access-denied__card {
	width: 100%;
	max-width: 460px;
	text-align: center;
	padding: 34px 30px 30px;
	border-radius: var(--nx-border-radius, 14px);
	background: var(--nx-panel, #0b1a30);
	border: 1px solid var(--nx-border, #243a56);
	color: var(--nx-text, #f8fafc);
	box-shadow: var(--nx-surface-2, 0 12px 40px rgba(0, 0, 0, 0.48));
}

.nxt-access-denied__icon {
	width: 46px;
	height: 46px;
	margin: 0 auto 14px;
	padding: 10px;
	border-radius: 50%;
	color: var(--nx-amber, #f59e0b);
	background: color-mix(in srgb, var(--nx-amber, #f59e0b) 12%, transparent);
	box-sizing: content-box;
}

.nxt-access-denied__title {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--nx-text, #f8fafc);
	text-wrap: balance;
}

.nxt-access-denied__message {
	margin: 0 auto;
	max-width: 42ch;
	font-size: 14px;
	line-height: 1.55;
	color: var(--nx-text-soft, #cbd5e1);
}

.nxt-access-denied__actions {
	margin-top: 20px;
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

.nxt-access-denied__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 9px 20px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid var(--nx-border, #243a56);
	color: var(--nx-text, #f8fafc);
	background: transparent;
	transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.nxt-access-denied__btn:hover {
	transform: translateY(-1px);
	border-color: var(--nx-cyan, #22d3ee);
}

.nxt-access-denied__btn--primary {
	border-color: transparent;
	color: var(--nx-btn-text, #04111f);
	background: linear-gradient(135deg, var(--nx-cyan, #22d3ee), var(--nx-sky, #38bdf8));
}

.nxt-access-denied__btn:focus-visible {
	outline: 2px solid var(--nx-cyan, #22d3ee);
	outline-offset: 2px;
}

/* ---- Action-level popup: modal overlay (built by access-denied.js) ---- */
.nxt-ad-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: color-mix(in srgb, var(--nx-bg-deep, #030812) 72%, transparent);
	opacity: 0;
	transition: opacity 0.18s ease;
}

.nxt-ad-modal.is-open {
	opacity: 1;
}

.nxt-ad-modal__dialog {
	transform: translateY(8px);
	transition: transform 0.18s ease;
}

.nxt-ad-modal.is-open .nxt-ad-modal__dialog {
	transform: translateY(0);
}

/* The dialog reuses the card look. */
.nxt-ad-modal .nxt-access-denied__card {
	max-width: 420px;
}

/* ---- Action-level lightweight toast ---- */
.nxt-ad-toast {
	position: fixed;
	left: 50%;
	bottom: 26px;
	transform: translate(-50%, 16px);
	z-index: 100001;
	max-width: 90vw;
	padding: 12px 18px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--nx-text, #f8fafc);
	background: var(--nx-panel, #0b1a30);
	border: 1px solid var(--nx-border, #243a56);
	border-left: 3px solid var(--nx-amber, #f59e0b);
	box-shadow: var(--nx-surface-2, 0 12px 40px rgba(0, 0, 0, 0.48));
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.nxt-ad-toast.is-open {
	opacity: 1;
	transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
	.nxt-access-denied__btn,
	.nxt-access-denied__btn:hover,
	.nxt-ad-modal,
	.nxt-ad-modal__dialog,
	.nxt-ad-toast {
		transition: none;
		transform: none;
	}
}