/* =============================================================
   PMPro Max styles
   Loaded on all pages. Component-scoped — safe globally.
   Unscoped page-level resets (*, body, h1-h6) remain inline
   in pmpro-max-onboarding.php since that page is a standalone
   full HTML document where those resets are intentional.
   ============================================================= */

/* --- Shared variables (onboarding wizard colour palette) --- */
:root {
	--green: #72a02a;
	--green-dark: #5a8020;
	--green-light: #e8f5d4;
	--green-subtle: #f4faeb;
	--orange: #e8913a;
	--blue-light: #63b3ed;
	--page-bg: #f5f8fa;
	--card-bg: #fff;
	--text: #222;
	--muted: #4b5563;
	--border: #dbe6ed;
	--radius: 12px;
	--shadow: 2px 2px 7px rgba(0, 0, 0, 0.07);
	--shadow-hover: 0 8px 32px rgba(0, 0, 0, .12);
	--transition: .35s ease;
	--wb-bg: #1a1a2e;
	--wb-muted: #9ca3af;
	--wb-status-ready-bg: rgba(114, 160, 42, 0.2);
	--wb-status-active-bg: rgba(232, 145, 58, 0.2);
	--wb-status-setup-bg: rgba(99, 179, 237, 0.2);
}

/* ============================================================
   Onboarding wizard
   ============================================================ */

/* Wizard shell */
.wizard-outer {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--pmpro--base--spacing--large) 0;
	position: relative;
}
.pmpro-logo {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: calc( var(--pmpro--base--spacing--small) / 2);
	font-size: var(--wp--preset--font-size--32);
	font-weight: 900;
	text-align: center;
	margin: 0 auto var(--pmpro--base--spacing--medium);
	letter-spacing: -.3px;
	font-family: 'Poppins', sans-serif;
}
.pmpro-logo img {
	width: 42px;
	height: 42px;
}
.pmpro-logo .logo-max {
	color: var(--memberlite-color-secondary);
}

/* Exit link */
.wizard-exit {
	position: fixed;
	top: var(--pmpro--base--spacing--large);
	right: var(--pmpro--base--spacing--large);
	font-size: var(--wp--preset--font-size--16);
	padding: 0;
}

/* Back-to-account link on step 1 */
.wizard-back-account {
	display: block;
	text-align: center;
	margin: var(--pmpro--base--spacing--medium) 0 0;
	font-size: var(--wp--preset--font-size--14);
	text-decoration: none;
}

/* Step indicator */
.step-indicator {
	align-items: center;
	display: flex;
	justify-content: center;
	gap: 0;
	margin-bottom: var(--pmpro--base--spacing--medium);
}
.step-dot {
	border-radius: 50%;
	color: var(--memberlite-color-borders);
	flex-shrink: 0;
	font-size: var(--wp--preset--font-size--14);
	position: relative;
	z-index: 1;
}
.step-dot.done {
	color: var(--memberlite-color-secondary);
}
.step-dot.active {
	color: var(--memberlite-color-secondary);
}
.step-connector {
	background: var(--memberlite-color-borders);
	flex-shrink: 0;
	height: 2px;
	width: var(--pmpro--base--spacing--large);
}
.step-connector.done {
	background: var(--memberlite-color-secondary);
}

/* Card */
.wizard-card {
	animation: fadeUp .35s ease forwards;
	max-width: 680px;
	transition: max-width .4s ease;
	width: 100%;
}
.wizard-card.wide-md {
	max-width: 840px;
}
.wizard-card.wide-lg {
	max-width: 920px;
}
@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Card content */
.wizard-card .pmpro_card {
	.pmpro_card_title {
		text-align: center;
	}
	.pmpro_card_content {
		padding-top: 0;
	}
	.pmpro_form_fields {
		margin: var(--pmpro--base--spacing--large) 0 0 0;

		label {
			font-weight: 700;
		}
	}
	.btn {
		cursor: pointer;
		transition: background .2s, transform .1s, box-shadow .2s;
	
		&:active {
			transform: translateY(1px);
		}
	}
	.btn_secondary {
		justify-content: center;
		margin-top: 28px;
		width: 100%;
	}

	input[data-prefilled="true"] {
		background: var(--green-subtle);
		border-color: #c6e495;
	}

	.prefill-note {
		align-items: center;
		color: var(--memberlite-color-secondary);
		display: flex;
		font-size: var(--wp--preset--font-size--14);
		gap: calc( var(--pmpro--base--spacing--small) / 2);
		margin-top: var(--pmpro--base--spacing--small);
	}

}

.wizard-card {
	.btn_link {
		text-decoration: none;
		transition: background-color .2s;

		&:hover {
			background-color: var(--memberlite-color-borders);
			text-decoration: none;
		}
	}
}

.validation-msg { font-size: var(--wp--preset--font-size--14);
	color: #dc2626;
	margin-top: 6px;
	display: none;
	}
.validation-msg.show { display: block;
	}

/* Site type cards */
.site-type-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--pmpro--base--spacing--medium);
	margin-top: var(--pmpro--base--spacing--large);
}

/* General "picker card" styles */
.picker-card {
	border: 1px solid var(--memberlite-color-borders);
	border-radius: var(--pmpro--base--border-radius);
	background: var(--memberlite-color-white);
	box-shadow: none;
	color: var(--memberlite-color-text);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: var(--pmpro--base--spacing--small);
	padding: var(--pmpro--base--spacing--medium);
	text-align: left;
	transition: border-color .2s, background .2s, box-shadow .2s;
	user-select: none;
}
.picker-card:hover {
	background: var(--green-subtle);
	border-color: var(--memberlite-color-secondary);
	box-shadow: var(--pmpro--box-shadow);
}
.picker-card.selected {
	background: var(--green-subtle);
	border-color: var(--memberlite-color-secondary);
}
.picker-card .card-label {
	align-items: center;
	display: flex;
	font-weight: 700;
	gap: calc( var(--pmpro--base--spacing--small) / 2);
}
.picker-card .card-sub {
	color: var(--muted);
	font-size: var(--wp--preset--font-size--14);
}

/* Preset grid */
.preset-grid {
	display: grid;
	gap: var(--pmpro--base--spacing--medium);
	grid-template-columns: repeat(3, 1fr);
	margin-top: var(--pmpro--base--spacing--large);
}
.preset-card {
	border: 1px solid var(--memberlite-color-borders);
	border-radius: var(--pmpro--base--border-radius);
	cursor: pointer;
	padding: var(--pmpro--base--spacing--medium);
	position: relative;
	transition: border-color .2s, box-shadow .25s, transform .2s;
	overflow: hidden;
}
.preset-card:hover {
	border-color: var(--memberlite-color-secondary);
	box-shadow: var(--pmpro--box-shadow);
	transform: translateY(-2px);
}
.preset-card.selected {
	border-color: var(--memberlite-color-secondary);
	box-shadow: var(--pmpro--box-shadow);
}

.preset-check {
	color: var(--memberlite-color-secondary);
	display: none;
	font-size: var(--wp--preset--font-size--14);
	position: absolute;
	right: 10px;
	top: 10px;
}
.preset-card.selected .preset-check {
	display: block;
}
.preset-vibe {
	color: var(--muted);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .1em;
	margin-bottom: var(--pmpro--base--spacing--small);
	text-transform: uppercase;
}
.preset-headline {
	font-size: var(--wp--preset--font-size--21);
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.preset-body-sample {
	font-size: var(--wp--preset--font-size--14);
	line-height: 1.4;
	margin-bottom: var(--pmpro--base--spacing--medium);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.preset-swatches { display: flex;
	gap: var(--pmpro--base--spacing--small);
	margin-bottom: var(--pmpro--base--spacing--small);
	flex-wrap: wrap;
}
.swatch { width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1.5px solid rgba(0, 0, 0, .08);
	flex-shrink: 0;
}
.preset-meta { font-size: .72rem;
	color: var(--muted);
	line-height: 1.4;
}
.preset-meta strong { color: var(--text);
	display: block;
	font-size: .78rem;
	margin-bottom: 2px;
}

/* Migration detect */
#detect-loading {
	padding: 24px 0 8px;
}
.shimmer-block {
	background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: shimmer 1.4s infinite;
	border-radius: var(--pmpro--base--border-radius);
	margin: 12px auto;
}
@keyframes shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
.detected-colors-wrap {
	text-align: center;
}
.detected-swatches { display: flex;
	justify-content: center;
	gap: 16px;
	margin: 24px 0;
	flex-wrap: wrap;
}
.detected-swatch { display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.detected-swatch .swatch-large { width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 3px solid rgba(0, 0, 0, .08);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}
.detected-swatch .swatch-label {
	color: var(--muted);
	font-size: var(--wp--preset--font-size--14);
	font-family: 'Courier New', monospace;
	font-weight: 500;
}
.detect-site-name {
	font-size: var(--wp--preset--font-size--16);
	color: var(--muted);
	margin: var(--pmpro--base--spacing--medium) 0;
}
.detect-actions {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--pmpro--base--spacing--medium);
	justify-content: center;
	margin-top: var(--pmpro--base--spacing--large);
}

/* Provisioning */
.provision-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--pmpro--base--spacing--large);
	margin-bottom: var(--pmpro--base--spacing--large);
}
.provision-cols h2 {
	font-size: var(--wp--preset--font-size--21);
}
.provision-bar-track {
	width: 100%;
	height: 10px;
	background: var(--green-light);
	border-radius: var(--pmpro--base--border-radius);
	overflow: hidden;
	margin-bottom: var(--pmpro--base--spacing--medium);
}
.provision-bar-fill {
	height: 100%;
	width: 0%;
	background: var(--memberlite-color-secondary);
	border-radius: var(--pmpro--base--border-radius);
	transition: width .5s ease;
}
.provision-bar-fill.warming {
	width: 100%;
	background: linear-gradient(90deg, var(--green-light) 0%, var(--memberlite-color-secondary) 50%, var(--green-light) 100%);
	background-size: 200% 100%;
	animation: bar-pulse 1.5s ease-in-out infinite;
}

@keyframes bar-pulse {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

.provision-steps {
	list-style: none;
	padding: 0;
	margin: 0;
}
.provision-step {
	align-items: center;
	display: flex;
	font-family: 'Courier New', monospace;
	font-weight: 700;
	gap: calc( var(--pmpro--base--spacing--small) / 2);
	transition: color .3s;
}
.provision-step.complete {
	color: var(--muted);
}
.provision-step.working {
	color: var(--memberlite-color-secondary);
}
.provision-step-icon {
	align-items: center;
	display: flex;
	flex-shrink: 0;
	justify-content: center;
}
.provision-step.complete .provision-step-icon {
	color: var(--memberlite-color-secondary);
}
.provision-step-icon .psi-pending {
	border: 2px solid var(--memberlite-color-borders);
	border-radius: 50%;
	height: 24px;
	width: 24px;
}
.provision-step-icon .psi-spinner {
	animation: spin .8s linear infinite;
	border: 2px solid var(--green-light);
	border-top-color: var(--memberlite-color-secondary);
	border-radius: 50%;
	height: 24px;
	width: 24px;
}
@keyframes spin {
	to { transform: rotate(360deg); }
}
.provision-step-icon i {
	font-size: var(--wp--preset--font-size--18);
}

.provision-ready-banner {
	border: 1px solid var(--memberlite-color-borders);
	border-radius: var(--pmpro--base--border-radius);
	margin-top: var(--pmpro--base--spacing--large);
	padding: var(--pmpro--base--spacing--medium);	
	border-radius: var(--pmpro--base--border-radius);
	text-align: center;
	display: none;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}
.provision-ready-banner.show { display: block;
	animation: fadeUp .35s ease forwards;
}
.provision-ready-banner .ready-icon { width: 40px;
	height: 40px;
	background: var(--green-subtle);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 12px;
}
.provision-ready-banner .fa-solid {
	color: var(--memberlite-color-secondary);
}
.provision-ready-banner .ready-text {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--18);
	margin-bottom: 4px;
}
.provision-ready-banner .ready-domain {
	align-items: center;
	color: var(--muted);
	font-family: 'Courier New', monospace;
	font-size: var(--wp--preset--font-size--16);
	font-weight: 600;
	gap: calc(var(--pmpro--base--spacing--small) / 2);
	display: flex;
	justify-content: center;
	margin-bottom: var(--pmpro--base--spacing--medium);
}

/* Wait panel */
.while-links-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--pmpro--base--spacing--small);
}
.while-link {
	align-items: center;
	border-radius: var(--pmpro--base--border-radius);
	border: 1px solid var(--memberlite-color-borders);
	display: flex;
	gap: calc(var(--pmpro--base--spacing--small) / 2);
	font-size: var(--wp--preset--font-size--14);
	text-decoration: none;
	padding: calc(var(--pmpro--base--spacing--small) / 2) var(--pmpro--base--spacing--small);
	transition: background .2s;
}
.while-link:hover {
	background: var(--memberlite-color-borders);
}

.provision-footer {
	border-top: 1px solid var(--memberlite-color-borders);
	font-size: var(--wp--preset--font-size--16);
	padding-top: var(--pmpro--base--spacing--large);
}

/* Done */
.done-wrap { text-align: center;
}
.check-circle { width: 80px;
	height: 80px;
	margin: 0 auto 28px;
}
.check-circle-bg { fill: none;
	stroke: var(--green-light);
	stroke-width: 3;
}
.check-circle-stroke { fill: none;
	stroke: var(--memberlite-color-secondary);
	stroke-width: 3;
	stroke-dasharray: 220;
	stroke-dashoffset: 220;
	animation: circleIn .6s ease forwards;
	stroke-linecap: round;
}
@keyframes circleIn { to { stroke-dashoffset: 0;
	} }
.check-tick { fill: none;
	stroke: var(--memberlite-color-secondary);
	stroke-width: 3.5;
	stroke-dasharray: 60;
	stroke-dashoffset: 60;
	animation: tickIn .4s .6s ease forwards;
	stroke-linecap: round;
	stroke-linejoin: round;
}
@keyframes tickIn { to { stroke-dashoffset: 0;
	} }
.done-wrap h2 { font-size: 2rem;
	font-weight: 700;
	margin-bottom: 12px;
}
.done-domain {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #f3f4f6;
	border: 1px solid var(--memberlite-color-borders);
	border-radius: var(--pmpro--base--border-radius);
	padding: 10px 18px;
	font-family: 'Courier New', monospace;
	font-size: 1.05rem;
	margin-bottom: 28px;
}
.done-domain .domain-dot { width: 8px;
	height: 8px;
	background: var(--memberlite-color-secondary);
	border-radius: 50%;
	animation: pulse-dot 1.5s ease-in-out infinite;
}
@keyframes pulse-dot { 0%, 100% { transform: scale(1);
	opacity: 1;
	} 50% { transform: scale(1.4);
	opacity: .7;
	} }
.done-primary-btn { display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--memberlite-color-secondary);
	color: #fff;
	padding: 14px 32px;
	border-radius: var(--pmpro--base--border-radius);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	margin-bottom: 36px;
	transition: background .2s, box-shadow .2s;
}
.done-primary-btn:hover { background: var(--memberlite-color-secondary);
	box-shadow: 0 4px 16px rgba(114, 160, 42, .35);
}
.done-explore h3 { font-size: .875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--muted);
	margin-bottom: 16px;
}
.done-explore-cards { display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.explore-card { border: 1.5px solid var(--memberlite-color-borders);
	border-radius: var(--pmpro--base--border-radius);
	padding: 18px 14px;
	text-align: center;
	text-decoration: none;
	transition: border-color .2s, transform .2s;
	display: block;
}
.explore-card:hover { border-color: var(--memberlite-color-secondary);
	transform: translateY(-2px);
}
.explore-card .ec-icon { margin-bottom: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.explore-card .ec-icon svg { width: 24px;
	height: 24px;
}
.explore-card .ec-label { font-size: .85rem;
	font-weight: 600;
}
.explore-card .ec-sub { font-size: .75rem;
	color: var(--muted);
	margin-top: 3px;
}

/* Skip link */
.skip-link { display: block;
	text-align: center;
	margin-top: 16px;
	font-size: var(--wp--preset--font-size--14);
	color: var(--muted);
	cursor: pointer;
	text-decoration: underline;
	transition: color .2s;
}
.skip-link:hover { color: var(--memberlite-color-secondary);
}

/* Detection progress */
.detect-progress-steps {
	display: flex;
	flex-direction: column;
	gap: var(--pmpro--base--spacing--medium);
	max-width: 420px;
	margin: var(--pmpro--base--spacing--large) auto 0;
	text-align: left;
}
.detect-progress-step {
	align-items: center;
	display: flex;
	font-family: 'Courier New', monospace;
	font-weight: 700;
	gap: calc( var(--pmpro--base--spacing--small) / 2);
	transition: color .3s;
}
.detect-progress-step.active {
	color: var(--memberlite-color-secondary);
}
.detect-progress-step.done {
	color: var(--memberlite-color-text);
}
.detect-progress-step .dp-icon {
	align-items: center;
	display: flex;
	flex-shrink: 0;
	height: 24px;
	justify-content: center;
	width: 24px;

	i {
		font-size: 14px;
	}
}
.detect-progress-step .dp-icon .dp-pending {
	border: 2px solid var(--memberlite-color-borders);
	border-radius: 50%;
	height: 24px;
	width: 24px;
}
.detect-progress-step .dp-icon .dp-spinner {
	animation: spin .8s linear infinite;
	border: 2px solid var(--green-light);
	border-top-color: var(--memberlite-color-secondary);
	border-radius: 50%;
	height: 24px;
	width: 24px;
}

/* Detection result context */
.detect-context {
	background: var(--wp--preset--color--grey-blue);
	border: 1px solid var(--memberlite-color-borders);
	border-radius: var(--pmpro--base--border-radius);
	padding: var(--pmpro--base--spacing--medium);
	margin: var(--pmpro--base--spacing--medium) 0;
	text-align: center;
}
.detect-context .detect-badge {
	align-items: center;
	color: var(--memberlite-color-text);
	display: inline-flex;
	font-weight: 700;
	gap: var(--pmpro--base--spacing--small);
}

/* Plugin/platform picker */
.picker-list {
	display: flex;
	flex-direction: column;
	gap: var(--pmpro--base--spacing--small);
	list-style: none;
	margin: var(--pmpro--base--spacing--medium) 0 0;
	padding: 0;
}
.picker-list .picker-card {
	align-items: center;
	cursor: pointer;
	flex-direction: row;
	gap: var(--pmpro--base--spacing--small);
	margin: 0;
	user-select: none;
}
.picker-list .picker-card .picker-radio {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var(--memberlite-color-borders);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color .2s;
}
.picker-list .picker-card.selected .picker-radio {
	border-color: var(--memberlite-color-secondary);
}
.picker-list .picker-card.selected .picker-radio::after { content: '';
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--memberlite-color-secondary);
}
.picker-list .picker-card .picker-label {
	font-size: var(--wp--preset--font-size--16);
}
.picker-list .picker-card .picker-detected {
	font-size: var(--wp--preset--font-size--14);
	color: var(--memberlite-color-secondary);
	margin-left: auto;
	font-weight: 700;
}
.picker-source-toggle {
	display: flex;
	gap: var(--pmpro--base--spacing--medium);
	margin: var(--pmpro--base--spacing--medium) 0 var(--pmpro--base--spacing--small);
}
.picker-source-toggle .picker-card {
	align-items: center;
	flex: 1;
	justify-content: center;
	cursor: pointer;
}

/* Credential step */
.cred-section {
	margin-bottom: var(--pmpro--base--spacing--medium);
	overflow: hidden;
}
.cred-section.verified {
	background: var(--green-subtle);
	border-color: var(--memberlite-color-secondary);
}
.cred-badge {
	display: inline-block;
	font-size: var(--wp--preset--font-size--14);
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 20px;
}
.cred-badge.recommended {
	background: var(--green-light);
	color: var(--memberlite-color-secondary);
}
.cred-badge.required {
	background: #fee2e2;
	color: #991b1b;
}
.cred-badge.verified { background: var(--memberlite-color-secondary);
	color: #fff;
}
.cred-badge.failed {
	background: #fef2f2;
	color: #dc2626;
}
.cred-section .cred-body {
	display: block;
	padding: 0 18px 18px;
}
.cred-verify-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 18px;
	border-radius: 7px;
	font-size: var(--wp--preset--font-size--14);
	font-weight: 700;
	border: none;
	cursor: pointer;
	background: var(--memberlite-color-secondary);
	color: #fff;
	transition: background .2s;
	font-family: 'Poppins', sans-serif;
	margin-top: 4px;
}
.cred-verify-btn:hover { background: var(--memberlite-color-secondary);
}
.cred-verify-btn:disabled { background: #c7d4b8;
	cursor: not-allowed;
}
.cred-verify-btn .spinner-sm { width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .3);
	border-top-color: #fff;
	animation: spin .8s linear infinite;
	display: none;
}
.cred-verify-btn.loading .spinner-sm { display: inline-block;
}
.cred-verify-btn.loading span { display: none;
}
.cred-result { margin-top: 10px;
	padding: 10px 14px;
	border-radius: 7px;
	font-size: var(--wp--preset--font-size--14);
	display: none;
}
.cred-result.success { display: block;
	background: var(--green-subtle);
	color: var(--memberlite-color-secondary);
	border: 1px solid #c6e495;
}
.cred-result.error { display: block;
	background: #fef2f2;
	color: #dc2626;
	border: 1px solid #fecaca;
}
.cred-intro {
	text-align: center;
	margin-bottom: 24px;
	padding: 16px 20px;
	background: var(--green-subtle);
	border: 1px solid #c6e495;
	border-radius: var(--pmpro--base--border-radius);
}
.cred-intro p {
	color: var(--memberlite-color-secondary);
	font-size: var(--wp--preset--font-size--14);
	line-height: 1.5;
	margin: 0;
}
.cred-guidance {
	font-size: var(--wp--preset--font-size--14);
	margin: var(--pmpro--base--spacing--medium) 0;
}
.cred-guidance .cred-or { display: block;
	text-align: center;
	font-size: var(--wp--preset--font-size--14);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--muted);
	margin: 8px 0;
}
.cred-warn { display: flex;
	align-items: flex-start;
	gap: 8px;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 7px;
	padding: 10px 14px;
	margin-top: 10px;
	font-size: var(--wp--preset--font-size--14);
	color: #92400e;
	line-height: 1.45;
}
.cred-warn i {
	color: #f59e0b;
	flex-shrink: 0;
	font-size: var(--wp--preset--font-size--18);
	margin-top: 1px;
}
.cred-footer {
	display: flex;
	gap: var(--pmpro--base--spacing--medium);
}
.cred-footer .btn {
	flex: 1;
	margin-top: 0;
}
.cred-mode-toggle {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--pmpro--base--spacing--medium);
	margin-top: var(--pmpro--base--spacing--medium);
}
.cred-mode-toggle .picker-card {
	display: block;
	font-size: var(--wp--preset--font-size--16);
	font-weight: 700;
	text-align: center;
}

/* Reusable spinner */
.pmpro-spinner {
	animation: spin .8s linear infinite;
	border: 2px solid var(--green-light);
	border-top-color: var(--memberlite-color-secondary);
	border-radius: 50%;
	height: 24px;
	width: 24px;
}

/* Colors-loading state (step-3b) */
#colors-loading {
	padding: var(--pmpro--base--spacing--large) 0;
	text-align: center;
	color: var(--muted);

	.pmpro-spinner {
		border-width: 3px;
		margin: 0 auto calc(var(--pmpro--base--spacing--small) / 2);
	}

	p {
		font-size: var(--wp--preset--font-size--16);
	}
}

/* Utils */
.hidden { display: none !important;
}

/* Responsive */
@media (max-width: 720px) {
	.wizard-card { padding: 32px 24px;
}
	.preset-grid { grid-template-columns: repeat(2, 1fr);
}
	.provision-cols { grid-template-columns: 1fr;
}
	.done-explore-cards { grid-template-columns: 1fr;
}
	.step-connector { width: 32px;
}
	.site-type-grid { grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
	.preset-grid { grid-template-columns: 1fr;
}
}

/* ============================================================
   Workbench bar
   ============================================================ */
#pmpro-workbench {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 99999;
	background: var(--memberlite-color-primary);
	color: #fff;
	font-size: var(--wp--preset--font-size--16);
	box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.15);
	transition: transform 0.3s ease;
}
#pmpro-workbench .wb-inner {
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: var(--pmpro--base--spacing--medium);
	padding: var(--pmpro--base--spacing--large) 0;
}
#pmpro-workbench .wb-icon {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
#pmpro-workbench .wb-icon.status-ready {
	background: var(--memberlite-color-secondary);
	color: var(--memberlite-color-white);
}
#pmpro-workbench .wb-icon.status-active {
	background: var(--memberlite-color-action);
	color: var(--memberlite-color-white);
}
#pmpro-workbench .wb-icon.status-setup {
	background: var(--memberlite-color-borders);
	color: var(--memberlite-color-primary);
}
#pmpro-workbench .wb-icon i {
	font-size: var(--wp--preset--font-size--18);
}
#pmpro-workbench .wb-text {
	flex: 1;
	min-width: 0;
}
#pmpro-workbench .wb-title {
	font-size: var(--wp--preset--font-size--18);
	margin: 0;
}
#pmpro-workbench .wb-sub {
	font-size: var(--wp--preset--font-size--18);
}
#pmpro-workbench .wb-pulse {
	width: 6px;
	height: 6px;
	background: var(--orange);
	border-radius: 50%;
	animation: wb-pulse 1.5s ease-in-out infinite;
}
@keyframes wb-pulse {
	0%, 100% { opacity: 1;
	transform: scale(1);
}
	50% { opacity: 0.5;
	transform: scale(1.4);
}
}
#pmpro-workbench .wb-dot-ready {
	width: 6px;
	height: 6px;
	background: var(--memberlite-color-secondary);
	border-radius: 50%;
	animation: wb-pulse 1.5s ease-in-out infinite;
}
#pmpro-workbench .wb-progress {
	width: 120px;
	height: 4px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 2px;
	overflow: hidden;
	flex-shrink: 0;
}
#pmpro-workbench .wb-progress-fill {
	height: 100%;
	background: var(--memberlite-color-secondary);
	border-radius: 2px;
	transition: width 0.5s ease;
}
#pmpro-workbench .wb-action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	background: var(--memberlite-color-secondary);
	color: #fff;
	border: none;
	border-radius: var(--pmpro--base--border-radius);
	font-size: var(--wp--preset--font-size--14);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s;
	flex-shrink: 0;
	font-family: inherit;
}
#pmpro-workbench .wb-action:hover { background: var(--green-dark);
}
@media (max-width: 600px) {
	#pmpro-workbench .wb-inner {
		padding: 10px 16px;
		gap: 12px;
	}
	#pmpro-workbench .wb-progress {
		width: 80px;
	}
	#pmpro-workbench .wb-action {
		padding: 6px 12px;
		font-size: var(--wp--preset--font-size--14);
	}
}

/* ============================================================
   DIFM Request Form
   ============================================================ */

.pmpro-difm {
	margin: 0 auto;
}

/* Card */
.pmpro-difm-card .pmpro_card {
	animation: fadeUp .35s ease forwards;
}
.pmpro-difm-card textarea {
	resize: vertical;
}

/* Thinking overlay */
.pmpro-difm-thinking {
	position: relative;
	margin-top: -150px;
	height: 150px;
	pointer-events: none;
	background: linear-gradient(to top, var(--card-bg) 45%, rgba(255, 255, 255, 0) 100%);
	display: none;
	align-items: flex-end;
	justify-content: center;
	padding: 0 16px 14px;
	z-index: 2;
}
.pmpro-difm-thinking.visible {
	display: flex;
}
.pmpro-difm-thinking .phrase {
	text-align: center;
	font-size: .92rem;
	color: var(--muted);
	font-style: italic;
	line-height: 1.45;
	animation: difmPhraseFade .5s ease;
}
@keyframes difmPhraseFade {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Actions */
.pmpro-difm-actions {
	margin-top: 28px;
}
.pmpro-difm-card .btn_secondary {
	width: 100%;
}
.pmpro-difm-card .btn_link {
	text-decoration: none;
	transition: background-color .2s;

	&:hover {
		background-color: var(--memberlite-color-borders);
		text-decoration: none;
	}
}
.pmpro-difm-btn .spinner {
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, .3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: spin .6s linear infinite;
	display: none;
}
.pmpro-difm-btn.loading .spinner {
	display: inline-block;
}
.pmpro-difm-btn.loading {
	pointer-events: none;
	opacity: .8;
}

/* Review DL */
.pmpro-difm-review dt {
	font-weight: 600;
	font-size: .85rem;
	color: var(--text);
	margin-top: 14px;
}
.pmpro-difm-review dd {
	margin: 4px 0 0;
	color: #374151;
	font-size: .925rem;
	line-height: 1.5;
}
.pmpro-difm-review-section-dt {
	margin-top: 18px !important;
	border-top: 1px solid var(--border);
	padding-top: 14px;
}
.pmpro-difm-review-q-dt {
	font-weight: 400 !important;
	color: var(--muted) !important;
	font-size: .82rem !important;
}
.pmpro-difm-not-answered {
	color: var(--muted);
}

/* Scores */
.pmpro-difm-scores {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 20px;
	margin: 18px 0;
}
.pmpro-difm-score {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: .85rem;
}
.pmpro-difm-score .label { color: var(--muted); }
.pmpro-difm-score .dots { letter-spacing: 2px; font-size: .9rem; }
.pmpro-difm-score .dot-good  { color: #22c55e; }
.pmpro-difm-score .dot-ok    { color: #f59e0b; }
.pmpro-difm-score .dot-bad   { color: #ef4444; }
.pmpro-difm-score .dot-empty { color: #d1d5db; }

/* Section label */
.pmpro-difm-section-label {
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--muted);
	margin: 20px 0 8px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--border);
}

/* Approach list */
.pmpro-difm-approach {
	margin: 8px 0;
	padding: 0;
	list-style: none;
}
.pmpro-difm-approach li {
	padding: 4px 0;
	font-size: .9rem;
	color: #374151;
}
.pmpro-difm-approach li::before {
	content: '→ ';
	color: var(--green);
	font-weight: 700;
}
.pmpro-difm-approach.verify li::before {
	content: '✓ ';
	color: #3b82f6;
}

/* Edit link */
.pmpro-difm-edit-link {
	font-size: .78rem;
	color: var(--green);
	cursor: pointer;
	margin-top: 2px;
	display: inline-block;
}
.pmpro-difm-edit-link:hover {
	text-decoration: underline;
	color: var(--green-dark);
}

/* Customer summary */
.pmpro-difm-customer-summary {
	padding: var(--pmpro--base--spacing--medium);
	background: var(--wp--preset--color--grey-blue);
	border: 1px solid var(--memberlite-color-borders);
	border-radius: var(--pmpro--base--border-radius);
	margin: var(--pmpro--base--spacing--medium) 0 var(--pmpro--base--spacing--large);
}

/* Meta row + type pill */
.pmpro-difm-meta-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	flex-wrap: wrap;
}
.pmpro-difm-type-pill {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
}
.pmpro-difm-type-pill.customization     { background: var(--green-light); color: var(--green-dark); }
.pmpro-difm-type-pill.new_plugin        { background: #dbeafe; color: #1e40af; }
.pmpro-difm-type-pill.feature_request   { background: #ede9fe; color: #6b21a8; }
.pmpro-difm-type-pill.migration         { background: #ffedd5; color: #9a3412; }
.pmpro-difm-type-pill.mixed             { background: #f3f4f6; color: #374151; }
.pmpro-difm-type-pill.consultation      { background: #fef3c7; color: #92400e; }
.pmpro-difm-type-pill.out_of_scope      { background: #fee2e2; color: #991b1b; }
.pmpro-difm-ambition {
	font-size: .78rem;
	color: var(--muted);
}
.pmpro-difm-ambition .dots {
	color: var(--green);
	letter-spacing: 1px;
	margin-left: 4px;
	font-size: .85rem;
}

/* Scope breakdown */
.pmpro-difm-scope-group { margin: 0 0 18px; }
.pmpro-difm-component {
	background: var(--green-subtle);
	border: 1px solid #CCC;
	border-radius: var(--pmpro--base--border-radius);
	box-shadow: var(--pmpro--box-shadow);
	margin: var(--pmpro--base--spacing--medium) 0;
	padding: var(--pmpro--base--spacing--medium);
}
.pmpro-difm-component.owner-you_configure {
	background: #eff6ff;
}
.pmpro-difm-component.owner-your_developer{
	background: #f5f3ff;
}
.pmpro-difm-component.owner-third_party_service {
	background: #fff7ed;
}
.pmpro-difm-component.owner-pmpro_team{
	background: #fdf4ff;
}
.pmpro-difm-component .comp-label {
	display: block;
	font-weight: 700;
}

/* Assessment heading + divider */
.pmpro-difm-assessment-heading {
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 8px;
}
.pmpro-difm-divider {
	border: none;
	border-top: 1px solid var(--border);
	margin: 20px 0;
}

/* Skip checkbox */
.pmpro-difm-skip-wrap { margin-top: 18px; }
.pmpro-difm-skip-label {
	font-size: .85rem;
	color: var(--muted);
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

/* Done screen */
.pmpro-difm-done {
	text-align: center;
	padding: 48px 24px;
}
.pmpro-difm-done .check {
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	background: var(--green-light);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pmpro-difm-done .check svg {
	stroke: var(--green);
	width: 28px;
	height: 28px;
}
.pmpro-difm-done h2 { margin-bottom: 10px; }
.pmpro-difm-done p  { color: var(--muted); margin-bottom: 20px; }
.pmpro-difm-done a  { color: var(--green); font-weight: 600; text-decoration: none; }
.pmpro-difm-done a:hover { text-decoration: underline; }

/* ============================================================
   Hosting details & magic login
   ============================================================ */
.pmpro-max-hosting-details table th,
.pmpro-max-hosting-details table td {
	vertical-align: top;
}
.pmpro-max-hosting-details .pmhd-migrating {
	font-size: var(--wp--preset--font-size--14);
	margin-left: var(--pmpro--base--spacing--small);
	padding: calc(var(--pmpro--base--spacing--small) / 2) var(--pmpro--base--spacing--small);
}
.pmpro-max-magic-login .pmml-generate {
	font-size: var(--wp--preset--font-size--14);
	margin-top: var(--pmpro--base--spacing--small);
	padding: calc(var(--pmpro--base--spacing--small) / 2) var(--pmpro--base--spacing--small);
}

/* AI Usage Shortcode */
#pmpro-ai-usage {
	.pmpro_card_title {
		display: flex;
		gap: var(--pmpro--base--spacing--small);
		justify-content: space-between;
	}

	.pmpro_ai_tier {
		align-items: center;
		background: var(--memberlite-color-borders);
		border-radius: 20px;
		display: inline-flex;
		font-size: var(--wp--preset--font-size--14);
		font-weight: 600;
		padding: 0 var(--pmpro--base--spacing--medium);
	}

	.pmpro_ai_tokens_today_headine {
		align-items: baseline;
		display: flex;
		gap: var(--pmpro--base--spacing--small);
		justify-content: space-between;
		margin: var(--pmpro--base--spacing--small) 0 calc(var(--pmpro--base--spacing--small) / 2) ;

		span {
			color: var(--muted);
			font-size: var(--wp--preset--font-size--14);
			font-variant-numeric: tabular-nums;
		}
	}

	.pmpro_ai_tokens_progress {
		width: 100%;
		height: 10px;
		background: var(--memberlite-color-borders);
		border-radius: var(--pmpro--base--border-radius);
		overflow: hidden;
		margin-bottom: var(--pmpro--base--spacing--medium);
	}
	.pmpro_ai_tokens_progress-fill {
		background: var(--memberlite-color-secondary);
		border-radius: var(--pmpro--base--border-radius);
		height: 100%;
		min-width:4px;
		transition: width .5s ease;
		width: 0%;
	}

	details {
		padding-left: 0;
		padding-right: 0;
		summary {
			font-family: var(--memberlite-body-font);
			font-weight: normal;
		}
	}
}