/* =============================================================================
   Wexico Eiga List Widget
   ============================================================================= */

.wel-widget {
	background-color: #eaf3fc;
	border-radius: 12px;
	padding: 28px;
	box-sizing: border-box;
}

/* Widget title */
.wel-title {
	font-size: 1.1rem;
	line-height: 1.3;
	color: #0093bc !important;
	margin-bottom: 30px !important;
	font-weight: 600 !important;
}

/* List reset */
.wel-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	row-gap: 16px;
}

/* Each row: dot-col | label-col | desc-col */
.wel-item {
	display: flex;
	align-items: flex-start;
	gap: 0;
	position: relative;
}

/* ── Dot + Line column ──────────────────────────────────────────────────────── */
.wel-dot-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	/*position: relative;*/
	/* width matches dot size + some breathing room */
	width: 24px;
	margin-right: 12px;
}

/* The dot bubble */
.wel-dot {
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #0093bc !important;
	flex-shrink: 0;
	/* vertically center with the label text */
	margin-top: 9px;
	/*position: relative;*/
	z-index: 1;
}

/* Vertical line drawn via ::after — runs from dot downward to next item */
.wel-dot-col::after {
	content: '';
	display: block;
	position: absolute;
	top: calc(4px + 9px);
	left: 12px;
	transform: translateX(-50%);
	width: 1px !important;
	background: #0093bc !important;
	bottom: calc(-16px - 1px);
	height: calc(100% + 16px);
}

/* Hide line on last item */
.wel-item--last .wel-dot-col::after {
	display: none;
}

/* ── Label column (left text) ───────────────────────────────────────────────── */
.wel-label-col {
	width: 150px;
	min-width: 150px;
	flex-shrink: 0;
	padding-right: 16px;
}

.wel-label {
	font-size: 0.875rem;
	font-weight: 600;
	color: #1a4b8c;
	line-height: 1.5;
}

/* ── Description column (right text) ───────────────────────────────────────── */
.wel-desc-col {
	flex: 1 1 0;
	min-width: 0;
}

.wel-desc {
	font-size: 0.9375rem;
	color: #374151;
	line-height: 1.5;
}

/* =============================================================================
   Responsive — mobile: stack label above description, no connecting line
   ============================================================================= */

@media (max-width: 600px) {

	.wel-item {
		flex-wrap: wrap;
		align-items: flex-start;
	}

	/* Hide the dot column (and line) on mobile */
	.wel-dot-col {
		display: none;
	}

	/* Label goes full-width */
	.wel-label-col {
		width: 100% !important;
		min-width: 100% !important;
		padding-right: 0;
		margin-bottom: 5px;
		border-bottom: 1px solid #1a4b8c;
	}
	.wel-widget {
		padding: 20px !important;
	}
	/* Description goes full-width below */
	.wel-desc-col {
		width: 100%;
		min-width: 100%;
	}
}