/* Eigen, geïsoleerde stijl voor de configurator — leunt op de design tokens
   uit Fase 3, met een hardcoded fallback zodat dit blok correct oogt zelfs
   zonder lucas-theme actief (zie class-security.php-achtige isolatie-eis
   uit de architectuur: "mag niet breken bij themewissel"). */

.vbc-configurator-root {
	--vbc-accent: var( --wp--preset--color--accent, #9c520f );
	--vbc-accent-hover: var( --wp--preset--color--accent-hover, #7f420b );
	--vbc-accent-tint: var( --wp--preset--color--accent-tint, #fbebd9 );
	--vbc-ink: var( --wp--preset--color--ink, #262626 );
	--vbc-border: var( --wp--preset--color--border, #dcdcda );
	--vbc-surface-alt: var( --wp--preset--color--surface-alt, #f5f4f2 );
	--vbc-error: var( --wp--preset--color--error, #c1272d );
	--vbc-error-bg: var( --wp--preset--color--error-bg, #fbe9e9 );

	font-family: var( --wp--preset--font-family--body, 'Poppins', sans-serif );
	color: var( --vbc-ink );
	max-width: 720px;
	margin: 0 auto;
}

.vbc-step-progress {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
}

.vbc-step-dot {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid var( --vbc-border );
	color: #767676;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	flex-shrink: 0;
}

.vbc-step-dot.is-done,
.vbc-step-dot.is-active {
	background: var( --vbc-accent );
	border-color: var( --vbc-accent );
	color: #fff;
}

.vbc-step-line {
	flex: 1;
	height: 2px;
	background: var( --vbc-border );
}

.vbc-step-line.is-done {
	background: var( --vbc-accent );
}

.vbc-card {
	background: #fff;
	border-radius: 4px;
	padding: 36px;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.05 );
}

.vbc-option {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var( --vbc-border );
	border-radius: 4px;
	padding: 14px 16px;
	cursor: pointer;
}

.vbc-option.is-selected {
	border-color: var( --vbc-accent );
	background: var( --vbc-accent-tint );
}

.vbc-btn-primary {
	background: var( --vbc-accent );
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 12px 28px;
	font-weight: 600;
	cursor: pointer;
}

.vbc-btn-primary:hover {
	background: var( --vbc-accent-hover );
}

.vbc-btn-primary:focus-visible {
	outline: 2px solid var( --vbc-accent );
	outline-offset: 2px;
}

.vbc-btn-secondary {
	background: #fff;
	color: #4a4a4a;
	border: 1px solid var( --vbc-border );
	border-radius: 4px;
	padding: 12px 24px;
	font-weight: 600;
	cursor: pointer;
}

.vbc-field-error {
	background: var( --vbc-error-bg );
	color: var( --vbc-error );
	border-radius: 4px;
	padding: 10px 14px;
	font-size: 13px;
}