/**
 * Welcome Wizard — full-screen first-run flow + the Visual Builder
 * sample-data loading overlay.
 *
 * The wizard takes over the whole viewport: on .spbwc-wizard-screen we hide the
 * WP admin chrome (sidebar / toolbar / footer / notices) and paint our own
 * centered, branded surface. Everything is token-driven (no hardcoded palette),
 * RTL-safe (logical margins / flex, no left/right hardcoding for flow).
 */

/* ── Hide the host admin chrome on the wizard screen ─────────────────── */
body.spbwc-wizard-screen #adminmenumain,
body.spbwc-wizard-screen #wpadminbar,
body.spbwc-wizard-screen #wpfooter,
body.spbwc-wizard-screen #screen-meta,
body.spbwc-wizard-screen #screen-meta-links,
body.spbwc-wizard-screen .update-nag,
body.spbwc-wizard-screen .notice,
body.spbwc-wizard-screen .notice-error,
body.spbwc-wizard-screen .notice-warning,
body.spbwc-wizard-screen .notice-info,
body.spbwc-wizard-screen .notice-success,
body.spbwc-wizard-screen .updated,
body.spbwc-wizard-screen .error {
	display: none !important;
}

body.spbwc-wizard-screen #wpcontent,
body.spbwc-wizard-screen #wpbody-content {
	margin: 0 !important;
	padding: 0 !important;
}

body.spbwc-wizard-screen.wp-toolbar {
	padding-top: 0 !important;
}

body.spbwc-wizard-screen #wpbody-content > .wrap {
	margin: 0;
}

/* ── Wizard shell ─────────────────────────────────────────────────────── */
.spbwc-wiz {
	position: fixed;
	inset: 0;
	z-index: var(--st-z-overlay, 1000);
	display: flex;
	flex-direction: column;
	background:
		radial-gradient(1200px 600px at 50% -10%, var(--st-brand-tint, #eff6ff), transparent 60%),
		var(--nbd-st-bg-soft, #f6f7f7);
	font-family: var(--st-font-sans);
	color: var(--nbd-st-text, #1d2327);
	overflow: auto;
	-webkit-font-smoothing: antialiased;
}

/* ── Top bar ──────────────────────────────────────────────────────────── */
.spbwc-wiz__topbar {
	display: flex;
	align-items: center;
	gap: var(--nbd-space-4, 16px);
	padding: var(--nbd-space-4, 16px) var(--nbd-space-8, 32px);
	background: var(--nbd-st-bg, #fff);
	border-bottom: 1px solid var(--nbd-st-border-light, #dcdcde);
	box-shadow: var(--shadow-sm);
}

.spbwc-wiz__brand {
	display: flex;
	align-items: center;
	gap: var(--nbd-space-2, 8px);
	flex: 0 0 auto;
}

.spbwc-wiz__logo {
	width: 28px;
	height: 28px;
	border-radius: var(--nbd-radius-sm, 4px);
}

.spbwc-wiz__brand-name {
	font-size: var(--text-xl, 16px);
	font-weight: var(--font-bold, 700);
	color: var(--nbd-st-text, #1d2327);
}

.spbwc-wiz__steps {
	display: flex;
	align-items: center;
	gap: var(--nbd-space-6, 24px);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.spbwc-wiz__step {
	display: flex;
	align-items: center;
	gap: var(--nbd-space-2, 8px);
	color: var(--nbd-st-text-mute, #8c8f94);
	font-size: var(--text-md, 13px);
	font-weight: var(--font-medium, 500);
}

.spbwc-wiz__step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: var(--nbd-radius-pill, 9999px);
	background: var(--nbd-st-bg-canvas, #f0f0f1);
	color: var(--nbd-st-text-mute, #8c8f94);
	font-size: var(--text-base, 12px);
	font-weight: var(--font-bold, 700);
	border: 1px solid var(--nbd-st-border-light, #dcdcde);
}

.spbwc-wiz__step.is-current {
	color: var(--nbd-st-text-brand, #1e40af);
}

.spbwc-wiz__step.is-current .spbwc-wiz__step-num {
	background: var(--st-brand, #1d4ed8);
	color: var(--nbd-st-text-inverse, #fff);
	border-color: var(--st-brand, #1d4ed8);
}

.spbwc-wiz__step.is-done {
	color: var(--nbd-color-success, #16a34a);
}

.spbwc-wiz__step.is-done .spbwc-wiz__step-num {
	background: var(--st-pill-active-bg, #dcfce7);
	color: var(--st-pill-active-text, #14532d);
	border-color: transparent;
}

.spbwc-wiz__topbar-end {
	flex: 0 0 auto;
	margin-inline-start: auto;
}

.spbwc-wiz__skip {
	color: var(--nbd-st-text-soft, #50575e);
	text-decoration: none;
	font-size: var(--text-md, 13px);
}

.spbwc-wiz__skip:hover {
	color: var(--nbd-st-text-brand, #1e40af);
	text-decoration: underline;
}

/* ── Stage / card ─────────────────────────────────────────────────────── */
.spbwc-wiz__stage {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: var(--nbd-space-10, 40px) var(--nbd-space-6, 24px);
}

.spbwc-wiz__stage > * {
	width: 100%;
	max-width: 860px;
}

.spbwc-wiz__head {
	text-align: center;
	margin-bottom: var(--nbd-space-8, 32px);
}

.spbwc-wiz__title {
	margin: 0 0 var(--nbd-space-3, 12px);
	font-size: var(--text-5xl, 28px);
	line-height: var(--st-leading-tight, 1.25);
	font-weight: var(--font-extrabold, 800);
	color: var(--nbd-st-text, #1d2327);
}

.spbwc-wiz__lede {
	margin: 0 auto;
	max-width: 620px;
	font-size: var(--text-lg, 14px);
	line-height: 1.6;
	color: var(--nbd-st-text-soft, #50575e);
}

/* ── Step 1: re-roll link ─────────────────────────────────────────────── */
.spbwc-wiz__reroll {
	display: inline-flex;
	align-items: center;
	gap: var(--nbd-space-1, 4px);
	margin-top: var(--nbd-space-3, 12px);
	font-size: var(--text-md, 13px);
	color: var(--nbd-st-text-brand, #1e40af);
	text-decoration: none;
}

.spbwc-wiz__reroll:hover {
	text-decoration: underline;
}

.spbwc-wiz__reroll .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* ── Step 1: template grid ────────────────────────────────────────────── */
.spbwc-wiz-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--nbd-space-4, 16px);
	margin-bottom: var(--nbd-space-8, 32px);
}

.spbwc-wiz-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--nbd-st-bg, #fff);
	border: 2px solid var(--nbd-st-border-light, #dcdcde);
	border-radius: var(--nbd-radius-lg, 12px);
	overflow: hidden;
	cursor: pointer;
	transition: var(--transition-card);
}

.spbwc-wiz-card:hover {
	border-color: var(--nbd-st-border-brand, #bfdbfe);
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
}

.spbwc-wiz-card.is-selected {
	border-color: var(--st-brand, #1d4ed8);
	box-shadow: var(--shadow-hero);
}

.spbwc-wiz-card.is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.spbwc-wiz-card.is-disabled:hover {
	transform: none;
	box-shadow: none;
	border-color: var(--nbd-st-border-light, #dcdcde);
}

/* Visually-hidden native checkbox (keeps it focusable / accessible). */
.spbwc-wiz-card__cb {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

.spbwc-wiz-card__tick {
	position: absolute;
	inset-block-start: var(--nbd-space-2, 8px);
	inset-inline-end: var(--nbd-space-2, 8px);
	width: 22px;
	height: 22px;
	border-radius: var(--nbd-radius-pill, 9999px);
	background: var(--nbd-st-bg, #fff);
	border: 2px solid var(--nbd-st-border, #c3c4c7);
	z-index: 1;
	transition: var(--transition-fast);
}

.spbwc-wiz-card.is-selected .spbwc-wiz-card__tick {
	background: var(--st-brand, #1d4ed8);
	border-color: var(--st-brand, #1d4ed8);
}

.spbwc-wiz-card.is-selected .spbwc-wiz-card__tick::after {
	content: "";
	position: absolute;
	inset-block-start: 3px;
	inset-inline-start: 7px;
	width: 5px;
	height: 9px;
	border: solid var(--nbd-st-text-inverse, #fff);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.spbwc-wiz-card__cb:focus-visible + .spbwc-wiz-card__tick {
	box-shadow: 0 0 0 3px var(--st-brand-soft, #dbeafe);
}

.spbwc-wiz-card__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 110px;
	background: var(--nbd-st-bg-brand, #f8fafc);
	border-bottom: 1px solid var(--nbd-st-border-subtle, #f0f0f1);
}

.spbwc-wiz-card__thumb img {
	max-width: 80%;
	max-height: 80px;
	object-fit: contain;
}

.spbwc-wiz-card__thumb .dashicons {
	font-size: var(--st-icon-2xl);
	width: var(--st-icon-2xl);
	height: var(--st-icon-2xl);
	color: var(--nbd-st-text-mute, #8c8f94);
}

.spbwc-wiz-card__body {
	padding: var(--nbd-space-3, 12px);
	display: flex;
	flex-direction: column;
	gap: var(--nbd-space-1, 4px);
}

.spbwc-wiz-card__name {
	font-size: var(--text-md, 13px);
	font-weight: var(--font-semibold, 600);
	color: var(--nbd-st-text, #1d2327);
}

.spbwc-wiz-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nbd-space-2, 8px);
	font-size: var(--text-sm, 11px);
	color: var(--nbd-st-text-mute, #8c8f94);
}

.spbwc-wiz-card__cat {
	color: var(--nbd-st-text-brand, #1e40af);
	font-weight: var(--font-medium, 500);
}

/* ── Step 1: per-card preview ─────────────────────────────────────────── */
.spbwc-wiz-card__preview-btn {
	align-self: flex-start;
	margin-top: var(--nbd-space-2, 8px);
	padding: 2px 0;
	background: none;
	border: 0;
	color: var(--nbd-st-text-brand, #1e40af);
	font-size: var(--text-sm, 11px);
	font-weight: var(--font-semibold, 600);
	cursor: pointer;
	text-decoration: underline;
}

.spbwc-wiz-card__preview-btn:hover {
	color: var(--st-brand-pressed, #1e40af);
}

.spbwc-wiz-card__details {
	display: block;
	margin-top: var(--nbd-space-2, 8px);
	padding-top: var(--nbd-space-2, 8px);
	border-top: 1px dashed var(--nbd-st-border-light, #dcdcde);
}

.spbwc-wiz-card__details[hidden] {
	display: none;
}

.spbwc-wiz-card__pmeth {
	display: block;
	font-size: var(--text-sm, 11px);
	color: var(--nbd-st-text-mute, #8c8f94);
	margin-bottom: var(--nbd-space-1, 4px);
}

.spbwc-wiz-card__fieldlist {
	margin: 0;
	padding-inline-start: var(--nbd-space-4, 16px);
	list-style: disc;
}

.spbwc-wiz-card__fieldlist li {
	font-size: var(--text-sm, 11px);
	color: var(--nbd-st-text-soft, #50575e);
	margin: 0;
}

/* ── Actions row ──────────────────────────────────────────────────────── */
.spbwc-wiz__actions {
	display: flex;
	align-items: center;
	gap: var(--nbd-space-4, 16px);
}

.spbwc-wiz__actions--end {
	justify-content: flex-end;
}

.spbwc-wiz__actions--center {
	justify-content: center;
}

.spbwc-wiz__actions--split {
	justify-content: space-between;
}

.spbwc-wiz__counter {
	margin-inline-start: auto;
	font-size: var(--text-md, 13px);
	color: var(--nbd-st-text-soft, #50575e);
}

.spbwc-wiz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--st-btn-gap);
	padding: var(--st-btn-pad-lg);
	border-radius: var(--st-btn-radius);
	font-size: var(--st-btn-font-lg);
	font-weight: var(--font-semibold, 600);
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: var(--transition-fast);
	line-height: 1.2;
}

.spbwc-wiz-btn--primary {
	background: var(--st-brand, #1d4ed8);
	color: var(--nbd-st-text-inverse, #fff);
	box-shadow: var(--st-btn-shadow);
}

.spbwc-wiz-btn--primary:hover {
	background: var(--st-brand-pressed, #1e40af);
	color: var(--nbd-st-text-inverse, #fff);
}

.spbwc-wiz-btn--primary:disabled {
	background: var(--nbd-st-border, #c3c4c7);
	cursor: not-allowed;
	box-shadow: none;
}

.spbwc-wiz-btn.is-loading::before {
	content: "";
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-top-color: var(--nbd-st-text-inverse, #fff);
	border-radius: var(--nbd-radius-pill, 9999px);
	animation: spbwc-wiz-spin 0.8s linear infinite;
}

.spbwc-wiz-btn.is-loading {
	background: var(--st-brand, #1d4ed8);
}

.spbwc-wiz-btn--ghost {
	background: var(--nbd-st-bg, #fff);
	color: var(--nbd-st-text-soft, #50575e);
	border-color: var(--nbd-st-border, #c3c4c7);
}

.spbwc-wiz-btn--ghost:hover {
	border-color: var(--st-brand, #1d4ed8);
	color: var(--nbd-st-text-brand, #1e40af);
}

.spbwc-wiz__empty {
	text-align: center;
	padding: var(--nbd-space-8, 32px);
	background: var(--nbd-st-bg, #fff);
	border-radius: var(--nbd-radius-lg, 12px);
	border: 1px solid var(--nbd-st-border-light, #dcdcde);
}

.spbwc-wiz__empty p {
	margin: 0 0 var(--nbd-space-4, 16px);
	color: var(--nbd-st-text-soft, #50575e);
}

/* ── Step 2: task list ────────────────────────────────────────────────── */
.spbwc-wiz-tasks {
	list-style: none;
	margin: 0 0 var(--nbd-space-8, 32px);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--nbd-space-3, 12px);
}

.spbwc-wiz-task {
	display: flex;
	align-items: flex-start;
	gap: var(--nbd-space-4, 16px);
	padding: var(--nbd-space-5, 20px);
	background: var(--nbd-st-bg, #fff);
	border: 1px solid var(--nbd-st-border-light, #dcdcde);
	border-radius: var(--nbd-radius-lg, 12px);
	box-shadow: var(--shadow-card);
}

.spbwc-wiz-task__icon {
	font-size: var(--st-icon-xl);
	width: var(--st-icon-xl);
	height: var(--st-icon-xl);
	flex: 0 0 auto;
}

.spbwc-wiz-task.is-done .spbwc-wiz-task__icon {
	color: var(--nbd-color-success, #16a34a);
}

.spbwc-wiz-task.is-running .spbwc-wiz-task__icon {
	color: var(--st-brand, #1d4ed8);
	animation: spbwc-wiz-spin 1.4s linear infinite;
}

.spbwc-wiz-task.is-idle .spbwc-wiz-task__icon {
	color: var(--nbd-st-text-mute, #8c8f94);
}

.spbwc-wiz-task__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.spbwc-wiz-task__text strong {
	font-size: var(--text-lg, 14px);
	color: var(--nbd-st-text, #1d2327);
}

.spbwc-wiz-task__text span {
	font-size: var(--text-md, 13px);
	color: var(--nbd-st-text-soft, #50575e);
}

/* ── Step 3: done ─────────────────────────────────────────────────────── */
.spbwc-wiz__done {
	text-align: center;
}

.spbwc-wiz__done-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin-bottom: var(--nbd-space-5, 20px);
	border-radius: var(--nbd-radius-pill, 9999px);
	background: var(--st-pill-active-bg, #dcfce7);
	color: var(--nbd-color-success, #16a34a);
	font-size: 44px;
}

.spbwc-wiz-summary {
	list-style: none;
	margin: var(--nbd-space-6, 24px) auto var(--nbd-space-8, 32px);
	padding: 0;
	max-width: 460px;
	text-align: start;
	display: flex;
	flex-direction: column;
	gap: var(--nbd-space-3, 12px);
}

.spbwc-wiz-summary li {
	display: flex;
	align-items: center;
	gap: var(--nbd-space-3, 12px);
	padding: var(--nbd-space-3, 12px) var(--nbd-space-4, 16px);
	background: var(--nbd-st-bg, #fff);
	border: 1px solid var(--nbd-st-border-light, #dcdcde);
	border-radius: var(--nbd-radius-md, 8px);
	font-size: var(--text-md, 13px);
	color: var(--nbd-st-text, #1d2327);
}

.spbwc-wiz-summary .dashicons {
	color: var(--st-brand, #1d4ed8);
	flex: 0 0 auto;
}

/* ── Step 3: "see it in action" sample preview ────────────────────────── */
.spbwc-wiz-preview {
	max-width: 560px;
	margin: 0 auto var(--nbd-space-8, 32px);
	text-align: start;
	padding: var(--nbd-space-5, 20px);
	background: var(--nbd-st-bg-brand, #f8fafc);
	border: 1px solid var(--nbd-st-border-light, #dcdcde);
	border-radius: var(--nbd-radius-lg, 12px);
}

.spbwc-wiz-preview__title {
	margin: 0 0 var(--nbd-space-3, 12px);
	font-size: var(--text-lg, 14px);
	font-weight: var(--font-bold, 700);
	color: var(--nbd-st-text, #1d2327);
}

.spbwc-wiz-preview__list {
	margin: 0 0 var(--nbd-space-3, 12px);
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--nbd-space-2, 8px);
}

.spbwc-wiz-preview__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--nbd-space-3, 12px);
	padding: var(--nbd-space-3, 12px);
	background: var(--nbd-st-bg, #fff);
	border: 1px solid var(--nbd-st-border-light, #dcdcde);
	border-radius: var(--nbd-radius-md, 8px);
}

.spbwc-wiz-preview__name {
	font-size: var(--text-md, 13px);
	font-weight: var(--font-semibold, 600);
	color: var(--nbd-st-text, #1d2327);
}

.spbwc-wiz-preview__actions {
	display: flex;
	align-items: center;
	gap: var(--nbd-space-3, 12px);
}

.spbwc-wiz-preview__assign {
	font-size: var(--text-sm, 11px);
	color: var(--nbd-st-text-brand, #1e40af);
	text-decoration: none;
}

.spbwc-wiz-preview__assign:hover {
	text-decoration: underline;
}

.spbwc-wiz-preview__hint {
	margin: 0;
	font-size: var(--text-sm, 11px);
	color: var(--nbd-st-text-mute, #8c8f94);
}

.spbwc-wiz-btn--sm {
	padding: 6px 12px;
	font-size: var(--text-md, 13px);
}

.spbwc-wiz-btn--sm .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* ── Visual Builder sample-data overlay ───────────────────────────────── */
.spbwc-vb-seed {
	position: fixed;
	inset: 0;
	z-index: var(--st-z-modal, 1100);
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(16, 24, 40, 0.55);
	backdrop-filter: blur(2px);
	padding: var(--nbd-space-6, 24px);
	animation: spbwc-wiz-fade 0.2s ease;
}

.spbwc-vb-seed.is-closing {
	opacity: 0;
	transition: opacity 0.2s ease;
}

.spbwc-vb-seed__panel {
	width: 100%;
	max-width: 440px;
	background: var(--nbd-st-bg, #fff);
	border-radius: var(--nbd-radius-xl, 16px);
	box-shadow: var(--shadow-xl);
	padding: var(--nbd-space-8, 32px);
	text-align: center;
	font-family: var(--st-font-sans);
}

.spbwc-vb-seed__spinner {
	width: 44px;
	height: 44px;
	margin: 0 auto var(--nbd-space-5, 20px);
	border: 4px solid var(--st-brand-soft, #dbeafe);
	border-top-color: var(--st-brand, #1d4ed8);
	border-radius: var(--nbd-radius-pill, 9999px);
	animation: spbwc-wiz-spin 0.9s linear infinite;
}

.spbwc-vb-seed__title {
	margin: 0 0 var(--nbd-space-2, 8px);
	font-size: var(--text-2xl, 18px);
	font-weight: var(--font-bold, 700);
	color: var(--nbd-st-text, #1d2327);
}

.spbwc-vb-seed__body {
	margin: 0 0 var(--nbd-space-5, 20px);
	font-size: var(--text-md, 13px);
	line-height: 1.6;
	color: var(--nbd-st-text-soft, #50575e);
}

.spbwc-vb-seed__progress {
	margin: 0 0 var(--nbd-space-5, 20px);
}

.spbwc-vb-seed__progress[hidden] {
	display: none;
}

.spbwc-vb-seed__bar {
	height: 8px;
	background: var(--st-brand-soft, #dbeafe);
	border-radius: var(--nbd-radius-pill, 9999px);
	overflow: hidden;
}

.spbwc-vb-seed__fill {
	display: block;
	height: 100%;
	width: 0;
	background: var(--st-brand, #1d4ed8);
	border-radius: var(--nbd-radius-pill, 9999px);
	transition: width 0.4s ease;
}

.spbwc-vb-seed__count {
	display: block;
	margin-top: var(--nbd-space-2, 8px);
	font-size: var(--text-sm, 11px);
	color: var(--nbd-st-text-mute, #8c8f94);
}

.spbwc-vb-seed__skip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--st-btn-pad-lg);
	border-radius: var(--st-btn-radius);
	background: var(--nbd-st-bg, #fff);
	border: 1px solid var(--nbd-st-border, #c3c4c7);
	color: var(--nbd-st-text-soft, #50575e);
	font-size: var(--st-btn-font-md);
	font-weight: var(--font-semibold, 600);
	cursor: pointer;
	transition: var(--transition-fast);
}

.spbwc-vb-seed__skip:hover {
	border-color: var(--st-brand, #1d4ed8);
	color: var(--nbd-st-text-brand, #1e40af);
}

.spbwc-vb-seed__hint {
	margin: var(--nbd-space-3, 12px) 0 0;
	font-size: var(--text-sm, 11px);
	color: var(--nbd-st-text-mute, #8c8f94);
}

@keyframes spbwc-wiz-spin {
	to { transform: rotate(360deg); }
}

@keyframes spbwc-wiz-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media screen and (max-width: 600px) {
	.spbwc-wiz__topbar {
		flex-wrap: wrap;
		padding: var(--nbd-space-3, 12px) var(--nbd-space-4, 16px);
	}
	.spbwc-wiz__steps {
		order: 3;
		width: 100%;
		justify-content: space-between;
		gap: var(--nbd-space-2, 8px);
	}
	.spbwc-wiz__step-label {
		display: none;
	}
	.spbwc-wiz__title {
		font-size: var(--text-4xl, 24px);
	}
	.spbwc-wiz__actions {
		flex-wrap: wrap;
	}
}