/* ================================================================
   Service Process Timeline Widget — timeline-widget.css
   ================================================================ */

/* ── Reset inside widget ── */
.tl-widget *,
.tl-widget *::before,
.tl-widget *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* ── Widget root ── */
.tl-widget {
	width: 100%;
	font-family: 'DM Sans', sans-serif;
}

/* ================================================================
   SHARED CARD
   ================================================================ */
.tl-step-card {
	background: #ffffff;
	border-radius: 16px;
	padding: 22px 22px 26px;
	box-shadow: 0 2px 18px rgba(0, 0, 0, 0.07);
	position: relative;
	z-index: 2;
	width: 100%;
}

.tl-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 38px;
	border-radius: 10px;
	background: linear-gradient(140deg, #f0793a 0%, #5e3fbf 100%);
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.5px;
	margin-bottom: 16px;
}

.tl-step-title {
	font-size: 19px;
	font-weight: 700;
	color: #18182e;
	line-height: 1.28;
	margin-bottom: 10px;
}

.tl-step-desc {
	font-size: 14px;
	color: #6b7280;
	line-height: 1.65;
}

/* ================================================================
   DESKTOP STAGE  (absolutely positioned columns)
   ================================================================ */
.tl-desktop-stage {
	position: relative;
	width: 100%;
	/* height set by JS */
}

/* Orange horizontal axis line */
.tl-axis-line {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: #E8622A;
	z-index: 1;
	/* top set by JS */
}

/* Each column */
.tl-col {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* width, left, top set by JS */
	padding: 0 8px;
}

/* Vertical connector */
.tl-conn {
	width: 2px;
	background: #3d3d5c;
	flex-shrink: 0;
	/* height set by JS */
}

/* Dot */
.tl-dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #E8622A;
	flex-shrink: 0;
	position: relative;
	z-index: 3;
}

/* ================================================================
   MOBILE  (vertical stack)
   ================================================================ */
.tl-mobile-stack {
	display: none;
	flex-direction: column;
	position: relative;
	padding-left: 36px;
}

/* Vertical orange line */
.tl-mobile-stack::before {
	content: '';
	position: absolute;
	left: 6px;
	top: 18px;
	bottom: 18px;
	width: 2px;
	background: var(--tl-line-color, #E8622A);
	z-index: 0;
}

.tl-m-step {
	position: relative;
	margin-bottom: 24px;
}

.tl-m-step:last-child {
	margin-bottom: 0;
}

.tl-m-dot {
	position: absolute;
	left: -36px;
	top: 18px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #E8622A;
	z-index: 2;
}

/* ================================================================
   RESPONSIVE — breakpoint driven by JS data attribute
   ================================================================ */
/* Default hide mobile, show desktop */
.tl-desktop-stage { display: block; }
.tl-mobile-stack  { display: none;  }

/* JS adds this class to .tl-widget when viewport < breakpoint */
.tl-widget.tl-is-mobile .tl-desktop-stage { display: none !important; }
.tl-widget.tl-is-mobile .tl-mobile-stack  { display: flex !important; }