/* EasySite Pro – Admin Styles */

.easysite-onboarding { max-width: 900px; }
.easysite-intro { font-size: 1.1rem; color: #50575e; }

.easysite-steps {
	display: flex;
	gap: 0.75rem;
	margin: 1.5rem 0 2rem;
}

.easysite-step {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #dcdcde;
	color: #1d2327;
	font-weight: 600;
}

.easysite-step.is-active { background: #2563eb; color: #fff; }
.easysite-step.is-done { background: #00a32a; color: #fff; }

.easysite-starter-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1rem;
	margin: 1rem 0;
}

.easysite-starter-card {
	border: 2px solid #dcdcde;
	border-radius: 8px;
	padding: 1rem;
	cursor: pointer;
}

.easysite-starter-card:has(input:checked) { border-color: #2563eb; background: #f0f6ff; }
.easysite-starter-card input { margin-right: 0.5rem; }
.easysite-starter-card p { margin: 0.5rem 0 0; color: #50575e; font-size: 0.9rem; }

.easysite-preset-option { display: inline-block; margin-right: 1rem; margin-bottom: 0.5rem; }

.easysite-gradient-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.75rem 0 0;
}

.easysite-gradient-swatch {
	width: 44px;
	height: 44px;
	border-radius: 8px;
	border: 2px solid #dcdcde;
	box-shadow: 0 2px 6px rgba(0,0,0,.1);
	cursor: default;
}

.easysite-gradient-swatch.is-active {
	border-color: #2563eb;
	box-shadow: 0 0 0 2px #2563eb;
}

.easysite-customizer-gradients .easysite-gradient-swatch {
	width: 36px;
	height: 36px;
}

.easysite-summary,
.easysite-checklist {
	background: #f6f7f7;
	border-left: 4px solid #2563eb;
	padding: 1rem 1.25rem;
	border-radius: 4px;
}

.easysite-finish-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0; }

.easysite-help-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1rem;
}

.easysite-help-card {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	padding: 1.25rem;
}

.easysite-help-card ol {
	margin: 0.75rem 0 0 1.25rem;
	padding: 0;
}

.easysite-help-card li {
	margin-bottom: 0.35rem;
	font-size: 0.9rem;
}

.easysite-demo-kits {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1rem;
	margin-top: 1rem;
}

.easysite-demo-kit-card {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	padding: 1rem;
}

.easysite-video-placeholder {
	background: #1d2327;
	color: #fff;
	padding: 2rem;
	text-align: center;
	border-radius: 6px;
	font-size: 0.9rem;
}

.easysite-builder-panel {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	padding: 1rem;
	margin-top: 1.5rem;
}

.easysite-builder-sortable {
	list-style: none;
	margin: 0;
	padding: 0;
}

.easysite-builder-sortable li {
	background: #f0f6ff;
	border: 1px dashed #2563eb;
	padding: 0.75rem 1rem;
	margin-bottom: 0.5rem;
	border-radius: 6px;
	cursor: grab;
}

.easysite-ai-suggest { margin-top: 0.5rem; }

/* Client help page */
.easysite-client-help-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1.25rem 0 2rem;
}

.easysite-client-help-section {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.25rem;
	max-width: 920px;
}

.easysite-client-help-section h2 {
	margin-top: 0;
	font-size: 1.15rem;
}

.easysite-client-help-section ol {
	margin: 0.75rem 0 0 1.25rem;
}

.easysite-client-help-figure {
	margin: 1rem 0;
}

.easysite-client-help-figure img {
	max-width: 100%;
	height: auto;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.easysite-client-help-support {
	background: #f0f6ff;
	border-color: #2563eb;
}
