/* Setup wizard */

/* #wpsc-container is otherwise a transparent, full-width flex box (shared base
   rule in framework/style.css) - this page only overrides it to a centered
   white card, since onboarding.css is enqueued solely on this screen. */
#wpsc-container {
	max-width: 1000px;
	margin: 20px auto !important;
	background-color: #fff !important;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	box-shadow: 6px 6px 10px 0px #ced6e0;
	overflow: hidden;
}

.wpsc-onboarding-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 15px;
	padding: 20px 25px;
	border-bottom: 1px solid #e2e2e2;
}

.wpsc-onboarding-title h1 {
	margin: 0 0 5px 0;
	font-size: 22px;
	padding: 0;
}

.wpsc-onboarding-title p {
	margin: 0;
	color: #6a6a6a;
}

.wpsc-onboarding-progress {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 15px 25px;
	border-bottom: 1px solid #e2e2e2;
}

.wpsc-onboarding-step-nav {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 20px;
	cursor: pointer;
	background: #f3f3f3;
	color: #3c434a;
	font-size: 13px;
}

.wpsc-onboarding-step-nav label {
	cursor: pointer;
}

.wpsc-onboarding-step-nav .step-index {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #d0d0d0;
	color: #fff;
	font-size: 11px;
	flex-shrink: 0;
}

.wpsc-onboarding-step-nav .step-index svg {
	width: 10px;
	height: 10px;
	fill: #fff;
}

.wpsc-onboarding-step-nav.active {
	background: #e9f2ff;
	font-weight: 600;
}

.wpsc-onboarding-step-nav.completed .step-index {
	background: #009432;
}

.wpsc-onboarding-body {
	padding: 25px;
}

.wpsc-onboarding-step h2 {
	margin-top: 0;
}

.wpsc-onboarding-step-desc {
	color: #6a6a6a;
}

.wpsc-onboarding-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding: 15px 20px;
	margin-bottom: 15px;
	border: 1px solid #e2e2e2;
	border-radius: 6px;
}

.wpsc-onboarding-card h3 {
	margin: 0 0 15px 0;
}

.wpsc-onboarding-card p {
	margin: 0 0 8px 0;
	color: #6a6a6a;
}

.wpsc-onboarding-card-action {
	flex-shrink: 0;
}

.wpsc-onboarding-card.stacked {
	flex-direction: column;
	align-items: flex-start;
}

.wpsc-onboarding-card.stacked .wpsc-onboarding-card-info h3 {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wpsc-onboarding-card.stacked .wpsc-onboarding-card-info h3 svg {
	width: 14px;
	height: 14px;
	fill: #3c434a;
}

.wpsc-onboarding-card.stacked .wpsc-onboarding-card-action {
	margin-top: 5px;
}

.wpsc-onboarding-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 12px;
}

.wpsc-onboarding-badge.enabled {
	background: #c1ffcf;
	color: #22940d;
}

.wpsc-onboarding-badge.disabled {
	background: #ececec;
	color: #6a6a6a;
}

.wpsc-onboarding-status {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
}

.wpsc-onboarding-status svg {
	width: 12px;
	height: 12px;
}

.wpsc-onboarding-status.success {
	color: #009432;
}

.wpsc-onboarding-status.success svg {
	fill: #009432;
}

.wpsc-onboarding-status.pending {
	color: #a35a00;
}

.wpsc-onboarding-stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 15px;
	margin-bottom: 15px;
}

.wpsc-onboarding-stat-card {
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	padding: 15px 20px;
}

.wpsc-onboarding-stat-count {
	display: block;
	font-size: 26px;
	font-weight: 600;
	color: #3c434a;
}

.wpsc-onboarding-stat-card h3 {
	margin: 4px 0;
	font-size: 14px;
}

.wpsc-onboarding-stat-card p {
	margin: 0 0 8px 0;
	color: #6a6a6a;
	font-size: 12px;
	min-height: 32px;
}

.wpsc-onboarding-field-preview {
	font-style: italic;
	min-height: 30px !important;
}

.wpsc-onboarding-tag-list {
	list-style: none;
	margin: 0 0 10px 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.wpsc-onboarding-tag-list li {
	padding: 4px 10px;
	border-radius: 20px;
	font-size: 12px;
}

.wpsc-onboarding-info-list li {
	margin-bottom: 8px;
}

.wpsc-onboarding-pill-list {
	list-style: none;
	margin: 0 0 15px 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.wpsc-onboarding-pill-list li {
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 13px;
	background: #f3f3f3;
	color: #3c434a;
}

.wpsc-onboarding-inline-form {
	display: flex;
	gap: 10px;
	max-width: 420px;
}

.wpsc-onboarding-inline-form input[type="text"] {
	flex-grow: 1;
}

.wpsc-onboarding-inline-message {
	margin: 10px 0;
	font-size: 13px;
}

.wpsc-onboarding-inline-message.error {
	color: #d63638;
}

.wpsc-onboarding-inline-actions {
	margin: 15px 0;
}

.wpsc-onboarding-divider {
	border: none;
	border-top: 1px solid #e2e2e2;
	margin: 25px 0;
}

.wpsc-onboarding-notice {
	margin: 15px 0;
	padding: 12px 15px;
	background: #fff8e5;
	border-left: 3px solid #f1c40f;
	font-size: 13px;
}

.wpsc-onboarding-addon-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 20px 0;
}

.wpsc-onboarding-addon-card {
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	overflow: hidden;
	text-align: center;
	padding-bottom: 15px;
}

.wpsc-onboarding-addon-card img {
	display: block;
	width: 100%;
	/* banners are 500x250 (2:1) - reserve the space up front so the grid
	   doesn't jump around while images load. */
	aspect-ratio: 2 / 1;
	object-fit: cover;
}

.wpsc-onboarding-addon-card p {
	margin: 12px;
	font-size: 12px;
	color: #6a6a6a;
	min-height: 48px;
}

.wpsc-onboarding-addon-card .wpsc-button {
	margin-bottom: 12px;
}

.wpsc-onboarding-footer-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 25px;
	padding-top: 15px;
	border-top: 1px solid #e2e2e2;
}