/* Stuart Numbered Steps Widget */

.sns-wrapper {
	display: flex;
	flex-direction: column;
}

/*
 * Each step is the flex ROW itself.
 * .sns-left stretches to the full row height so .sns-line (flex:1)
 * fills all remaining space — including the bottom padding gap —
 * and connects seamlessly to the next badge.
 */
.sns-step {
	display: flex;
	align-items: stretch; /* critical: left column fills full row height */
	gap: 20px;
}

/* ── Left column ── */
.sns-left {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
}

.sns-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	min-width: 52px;
	border-radius: 50%;
	background-color: #c0304a;
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

.sns-line {
	flex: 1;             /* fills all remaining height in the column */
	width: 0;
	border-left: 2px dashed #c0304a;
	margin-top: 4px;
	/* Last step: show a short fixed line instead of a full connector */
}

.sns-step--last .sns-line {
	flex: 0 0 50px;      /* short trailing line on last item */
}

/* ── Right column ── */
.sns-content {
	flex: 1;
	min-width: 0;
	padding-top: 12px;
	/*
	 * Bottom padding creates the gap between steps AND keeps the
	 * left-column line filled — because .sns-step uses align-items:stretch.
	 */
	padding-bottom: 40px;
}

.sns-step--last .sns-content {
	padding-bottom: 0;
}

.sns-title {
	margin: 0 0 6px;
	padding: 0;
	font-size: 17px;
	font-weight: 700;
	color: #1a1a1a;
	line-height: 1.3;
}

.sns-description {
	margin: 0;
	padding: 0;
	font-size: 15px;
	color: #555555;
	line-height: 1.6;
}

/* ── Responsive ── */
@media (max-width: 767px) {
	.sns-step {
		gap: 14px;
	}

	.sns-badge {
		width: 40px;
		height: 40px;
		min-width: 40px;
		font-size: 12px;
	}

	.sns-content {
		padding-top: 8px;
		padding-bottom: 28px;
	}

	.sns-title {
		font-size: 15px;
	}

	.sns-description {
		font-size: 14px;
	}
}