/**
 * Setup Wizard Styles — Vertical Timeline Layout
 *
 * @package    SmartCycleDiscounts
 * @since      1.8.29
 */

/* ===== LAYOUT ===== */
.wsscd-setup-wizard {
	max-width: 720px;
	margin: 40px auto;
	padding: 0 var(--wsscd-spacing-lg, 20px);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

.wsscd-setup-wizard__container {
	background: var(--wsscd-color-white, #fff);
	border: 1px solid var(--wsscd-color-border, #e2e8f0);
	border-radius: var(--wsscd-radius-xl, 12px);
	box-shadow: var(--wsscd-shadow-lg, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
	overflow: hidden;
}

/* ===== HEADER ===== */
.wsscd-setup-wizard__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--wsscd-spacing-lg, 20px) var(--wsscd-spacing-xl, 24px);
	border-bottom: 1px solid var(--wsscd-color-border, #e2e8f0);
}

.wsscd-setup-wizard__logo {
	display: flex;
	align-items: center;
	gap: var(--wsscd-spacing-sm, 8px);
}

.wsscd-setup-wizard__title {
	font-size: var(--wsscd-font-size-large, 16px);
	font-weight: var(--wsscd-font-weight-semibold, 600);
	color: var(--wsscd-color-text, #1e293b);
}

.wsscd-setup-wizard__skip {
	font-size: var(--wsscd-font-size-small, 13px);
	color: var(--wsscd-color-text-lighter, #64748b);
	text-decoration: none;
}

.wsscd-setup-wizard__skip:hover {
	color: var(--wsscd-color-text, #1e293b);
}

/* ===== VERTICAL TIMELINE ===== */
.wsscd-setup-wizard__body {
	padding: var(--wsscd-spacing-xl, 24px) var(--wsscd-spacing-xxl, 32px) var(--wsscd-spacing-xxl, 32px);
}

.wsscd-setup-timeline {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.wsscd-setup-timeline__step {
	display: flex;
	gap: var(--wsscd-spacing-lg, 20px);
}

/* ===== RAIL (dots + lines) ===== */
.wsscd-setup-timeline__rail {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	padding-top: 3px;
}

.wsscd-setup-timeline__dot {
	width: 32px;
	height: 32px;
	border-radius: var(--wsscd-radius-full, 50%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--wsscd-font-size-small, 13px);
	font-weight: var(--wsscd-font-weight-semibold, 600);
	flex-shrink: 0;
}

.wsscd-setup-timeline__step--active .wsscd-setup-timeline__dot {
	border: 2px solid var(--wsscd-color-primary);
	color: var(--wsscd-color-primary);
	background: var(--wsscd-color-primary-alpha-5);
}

.wsscd-setup-timeline__step--completed .wsscd-setup-timeline__dot {
	background: var(--wsscd-color-success, #22c55e);
	color: var(--wsscd-color-white, #fff);
	border: 2px solid var(--wsscd-color-success, #22c55e);
}

.wsscd-setup-timeline__step--pending .wsscd-setup-timeline__dot {
	border: 2px solid var(--wsscd-color-border, #cbd5e1);
	color: var(--wsscd-color-text-lighter, #94a3b8);
}

.wsscd-setup-timeline__line {
	width: 2px;
	flex: 1;
	min-height: 24px;
}

.wsscd-setup-timeline__step--active .wsscd-setup-timeline__line {
	background: var(--wsscd-color-primary);
}

.wsscd-setup-timeline__step--completed .wsscd-setup-timeline__line {
	background: var(--wsscd-color-success, #22c55e);
}

.wsscd-setup-timeline__step--pending .wsscd-setup-timeline__line {
	background: var(--wsscd-color-border, #e2e8f0);
}

/* ===== STEP CONTENT ===== */
.wsscd-setup-timeline__content {
	flex: 1;
	min-width: 0;
	padding-bottom: var(--wsscd-spacing-lg, 20px);
}

/* Active step: full content */
.wsscd-setup-timeline__active {
	padding-bottom: var(--wsscd-spacing-sm, 8px);
}

/* Completed step: compact */
.wsscd-setup-timeline__completed {
	padding: var(--wsscd-spacing-xs, 6px) 0;
}

.wsscd-setup-timeline__completed .wsscd-setup-timeline__step-title {
	font-size: var(--wsscd-font-size-medium, 14px);
	font-weight: var(--wsscd-font-weight-medium, 500);
	color: var(--wsscd-color-success, #22c55e);
}

/* Pending step: dimmed */
.wsscd-setup-timeline__pending {
	padding: var(--wsscd-spacing-xs, 6px) 0;
	opacity: 0.4;
}

.wsscd-setup-timeline__step-title {
	display: block;
	font-size: var(--wsscd-font-size-medium, 14px);
	font-weight: var(--wsscd-font-weight-medium, 500);
	color: var(--wsscd-color-text-lighter, #64748b);
}

.wsscd-setup-timeline__step-subtitle {
	display: block;
	font-size: var(--wsscd-font-size-small, 12px);
	color: var(--wsscd-color-text-lighter, #94a3b8);
	margin-top: 2px;
}

/* ===== INNER CONTENT (from step templates) ===== */
.wsscd-setup-wizard__content {
	padding: 0;
}

.wsscd-setup-wizard__heading {
	font-size: var(--wsscd-font-size-xl, 18px);
	font-weight: var(--wsscd-font-weight-semibold, 600);
	color: var(--wsscd-color-text, #1e293b);
	margin: 0 0 var(--wsscd-spacing-xs, 4px);
}

.wsscd-setup-wizard__subheading {
	font-size: var(--wsscd-font-size-small, 13px);
	color: var(--wsscd-color-text-lighter, #64748b);
	margin: 0 0 var(--wsscd-spacing-lg, 20px);
}

/* ===== SCAN STATS ===== */
.wsscd-setup-scan__stats {
	display: flex;
	gap: var(--wsscd-spacing-sm, 12px);
	margin-bottom: var(--wsscd-spacing-lg, 20px);
}

.wsscd-setup-scan__stat {
	flex: 1;
	background: var(--wsscd-color-bg-subtle, #f8fafc);
	border: 1px solid var(--wsscd-color-border, #e2e8f0);
	border-radius: var(--wsscd-radius-lg, 8px);
	padding: var(--wsscd-spacing-sm, 12px) var(--wsscd-spacing-md, 16px);
	text-align: center;
}

.wsscd-setup-scan__stat--highlight {
	background: #fef9f0;
	border-color: #fde68a;
}

.wsscd-setup-scan__stat-value {
	display: block;
	font-size: 22px;
	font-weight: var(--wsscd-font-weight-bold, 700);
	color: var(--wsscd-color-primary);
	line-height: 1;
}

.wsscd-setup-scan__stat--highlight .wsscd-setup-scan__stat-value {
	color: #d97706;
}

.wsscd-setup-scan__stat-label {
	display: block;
	font-size: 11px;
	color: var(--wsscd-color-text-lighter, #64748b);
	margin-top: var(--wsscd-spacing-xxs, 3px);
}

/* ===== SCAN FINDINGS ===== */
.wsscd-setup-scan__finding {
	display: flex;
	align-items: flex-start;
	gap: var(--wsscd-spacing-sm, 10px);
	padding: var(--wsscd-spacing-sm, 12px) var(--wsscd-spacing-md, 14px);
	border-radius: var(--wsscd-radius-lg, 8px);
	margin-bottom: var(--wsscd-spacing-sm, 10px);
}

.wsscd-setup-scan__finding--success {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	color: #166534;
}

.wsscd-setup-scan__finding--warning {
	background: #fffbeb;
	border: 1px solid #fde68a;
	color: #92400e;
}

.wsscd-setup-scan__finding--danger {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #991b1b;
}

.wsscd-setup-scan__finding strong {
	display: block;
	margin-bottom: var(--wsscd-spacing-xxs, 2px);
	font-size: var(--wsscd-font-size-small, 13px);
}

.wsscd-setup-scan__finding p {
	margin: 0;
	font-size: 12px;
	opacity: 0.85;
}

/* ===== RECOMMENDATIONS ===== */
.wsscd-setup-recommendation {
	display: flex;
	gap: var(--wsscd-spacing-md, 16px);
	padding: var(--wsscd-spacing-md, 16px);
	background: var(--wsscd-color-bg-subtle, #f8fafc);
	border: 1px solid var(--wsscd-color-border, #e2e8f0);
	border-radius: var(--wsscd-radius-lg, 8px);
	margin-bottom: var(--wsscd-spacing-sm, 12px);
}

.wsscd-setup-recommendation__icon {
	width: 44px;
	height: 44px;
	border-radius: var(--wsscd-radius-full, 50%);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.wsscd-setup-recommendation__icon--warning {
	background: #fef3c7;
	color: #d97706;
}

.wsscd-setup-recommendation__icon--danger {
	background: #fee2e2;
	color: #dc2626;
}

.wsscd-setup-recommendation__content h3 {
	font-size: var(--wsscd-font-size-medium, 14px);
	font-weight: var(--wsscd-font-weight-semibold, 600);
	color: var(--wsscd-color-text, #1e293b);
	margin: 0 0 var(--wsscd-spacing-xs, 4px);
}

.wsscd-setup-recommendation__content p {
	font-size: var(--wsscd-font-size-small, 13px);
	color: var(--wsscd-color-text-lighter, #64748b);
	margin: 0 0 var(--wsscd-spacing-sm, 10px);
	line-height: 1.5;
}

.wsscd-setup-recommendation__note {
	font-style: italic;
}

.wsscd-setup-recommendation__actions {
	display: flex;
	align-items: center;
	gap: var(--wsscd-spacing-sm, 10px);
	margin-top: var(--wsscd-spacing-xs, 6px);
}

.wsscd-setup-recommendation__status {
	font-size: var(--wsscd-font-size-small, 13px);
	font-weight: var(--wsscd-font-weight-medium, 500);
}

/* ===== READY CARD ===== */
.wsscd-setup-ready__card {
	background: var(--wsscd-color-bg-subtle, #f8fafc);
	border: 1px solid var(--wsscd-color-border, #e2e8f0);
	border-radius: var(--wsscd-radius-xl, 12px);
	padding: var(--wsscd-spacing-lg, 20px);
	margin-bottom: var(--wsscd-spacing-lg, 20px);
}

.wsscd-setup-ready__stats {
	display: flex;
	gap: var(--wsscd-spacing-sm, 12px);
	margin-bottom: var(--wsscd-spacing-md, 16px);
}

.wsscd-setup-ready__stat {
	flex: 1;
	text-align: center;
	padding: var(--wsscd-spacing-xs, 6px);
}

.wsscd-setup-ready__stat-value {
	display: block;
	font-size: 22px;
	font-weight: var(--wsscd-font-weight-bold, 700);
	color: var(--wsscd-color-primary);
}

.wsscd-setup-ready__stat--accent .wsscd-setup-ready__stat-value {
	color: #d97706;
}

.wsscd-setup-ready__stat-label {
	display: block;
	font-size: 11px;
	color: var(--wsscd-color-text-lighter, #64748b);
	margin-top: var(--wsscd-spacing-xxs, 2px);
}

.wsscd-setup-ready__recommendation {
	display: flex;
	align-items: flex-start;
	gap: var(--wsscd-spacing-sm, 10px);
	padding: var(--wsscd-spacing-sm, 14px);
	background: #eff6ff;
	border-radius: var(--wsscd-radius-md, 6px);
	border-left: 3px solid var(--wsscd-color-primary);
}

.wsscd-setup-ready__recommendation p {
	margin: 0;
	font-size: var(--wsscd-font-size-small, 13px);
	color: var(--wsscd-color-text, #334155);
	line-height: 1.5;
}

/* ===== NAVIGATION ===== */
.wsscd-setup-wizard__nav {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: var(--wsscd-spacing-sm, 10px);
	margin-top: var(--wsscd-spacing-lg, 20px);
}

.wsscd-setup-wizard__nav--centered {
	flex-direction: column;
	align-items: center;
	gap: var(--wsscd-spacing-sm, 10px);
}

.wsscd-setup-wizard__dashboard-link {
	font-size: var(--wsscd-font-size-small, 13px);
	color: var(--wsscd-color-text-lighter, #64748b);
	text-decoration: none;
}

.wsscd-setup-wizard__dashboard-link:hover {
	color: var(--wsscd-color-text, #1e293b);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
	.wsscd-setup-wizard {
		margin: 20px auto;
		padding: 0 var(--wsscd-spacing-sm, 8px);
	}

	.wsscd-setup-wizard__body {
		padding: var(--wsscd-spacing-md, 16px);
	}

	.wsscd-setup-timeline__step {
		gap: var(--wsscd-spacing-sm, 12px);
	}

	.wsscd-setup-timeline__dot {
		width: 28px;
		height: 28px;
		font-size: 12px;
	}

	.wsscd-setup-scan__stats,
	.wsscd-setup-ready__stats {
		flex-direction: column;
	}

	.wsscd-setup-recommendation {
		flex-direction: column;
		gap: var(--wsscd-spacing-sm, 10px);
	}

	.wsscd-setup-recommendation__icon {
		width: 36px;
		height: 36px;
	}
}