/*
 * Wallex Timeline – frontend styles
 *
 * Horizontal (RTL) process timeline: circular icons joined by connector arrows,
 * with a subtitle and title beneath each icon. Colors resolve from the Wallex
 * theme CSS variables where present, and fall back to a self-contained palette.
 */

.wallex-tl-wrap {
	box-sizing: border-box;
	width: 100%;
	direction: rtl;
}

.wallex-tl-wrap *,
.wallex-tl-wrap *::before,
.wallex-tl-wrap *::after {
	box-sizing: border-box;
}

.wallex-tl {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: 12px 8px;
}

/* ---------------------------------- Step ---------------------------------- */
.wallex-tl__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	flex: 0 1 auto;
	min-width: 96px;
}

.wallex-tl__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--color-primary, #2f6bff);
	color: #ffffff;
	line-height: 1;
}

.wallex-tl__icon i {
	font-size: 26px;
	color: inherit;
}

.wallex-tl__icon svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

.wallex-tl__subtitle {
	margin-top: 14px;
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--color-text-2, #6b7280);
}

.wallex-tl__title {
	margin-top: 8px;
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-text-1, #1f2430);
	overflow-wrap: anywhere;
}

/* -------------------------------- Connector -------------------------------- */
/* Sits between steps, vertically aligned with the icon circle (half its height). */
.wallex-tl__connector {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: var(--color-primary, #2f6bff);
}

.wallex-tl__connector svg {
	display: block;
}

/* ------------------------------- Responsive ------------------------------- */
/* On narrow screens the row wraps; connector arrows (horizontal) are hidden so
   the stacked steps stay clean and aligned. */
@media (max-width: 782px) {
	.wallex-tl {
		flex-direction: column;
	}

	.wallex-tl__content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		gap: 4px;
	}

	.wallex-tl__subtitle,
	.wallex-tl__title {
		margin-top: 0;
	}

	.wallex-tl {
		gap: 22px 12px;
	}

	.wallex-tl__connector {
		transform: rotate(270deg);
		margin-right: -15px;

	}

	.wallex-tl__connector svg {
		scale: 0.6;
	}

	.wallex-tl__step {
		flex-basis: 40%;
		flex-direction: row;
		gap: 24px;
	}
}

@media (max-width: 480px) {
	.wallex-tl__step {
		flex-basis: 100%;
		flex-direction: row;
		gap: 24px;
	}
}