/** timeline styles for Bargheto Widgets */

.elementor-widget-bargheto_timeline .bargheto-timeline {
	max-width: 48rem;
	margin: 0 auto;
}

.elementor-widget-bargheto_timeline .timeline {
	--tl-accent: 0, 67, 203;
	--tl-accent-dark: 0, 67, 203;
	--tl-fill: 0%;
	position: relative;
	padding-right: 3rem;
}

/* خط عمودی — پایه طوسی */
.elementor-widget-bargheto_timeline .timeline::before {
	content: "";
	position: absolute;
	right: 1.125rem;
	top: 0;
	bottom: 0;
	width: 3px;
	border-radius: 3px;
	background: #CBD5E1;
	z-index: 1;
}

/* خط عمودی — رنگی (overlay) */
.elementor-widget-bargheto_timeline .timeline::after {
	content: "";
	position: absolute;
	right: 1.125rem;
	top: 0;
	width: 3px;
	border-radius: 3px;
	height: var(--tl-fill);
	background: linear-gradient(to bottom, rgb(var(--tl-accent)), #CBD5E1);
	transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 1;
}

/* هر آیتم — پیش‌فرض مرئی است؛ فقط وقتی JS کلاس anim-ready را اضافه کند مخفی می‌شود */
.elementor-widget-bargheto_timeline .timeline__item {
	position: relative;
	z-index: 2;
	padding-bottom: 2.5rem;
	padding-right: 1rem;
}

/* حالت انیمیشن (فعال‌شده توسط JS) — بدون JS محتوا نامرئی نمی‌شود */
.elementor-widget-bargheto_timeline .timeline.anim-ready .timeline__item {
	opacity: 0;
	transform: translateX(20px);
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(var(--i) * 0.15s);
}

.elementor-widget-bargheto_timeline .timeline.anim-ready .timeline__item.is-visible {
	opacity: 1;
	transform: translateX(0);
}

.elementor-widget-bargheto_timeline .timeline__item--last {
	padding-bottom: 0;
}

/* دایره شماره — حالت اولیه طوسی */
.elementor-widget-bargheto_timeline .timeline__dot {
	position: absolute;
	right: -3rem;
	top: 0;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: #CBD5E1;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: background 0.5s ease, box-shadow 0.5s ease, transform 0.3s ease;
}

/* دایره شماره — حالت active رنگی */
.elementor-widget-bargheto_timeline .timeline__item.is-active .timeline__dot {
	background: linear-gradient(135deg, rgb(var(--tl-accent)) 0%, rgb(var(--tl-accent-dark)) 100%);
	box-shadow: 0 4px 12px rgba(var(--tl-accent), 0.3);
}

.elementor-widget-bargheto_timeline .timeline__item:hover .timeline__dot {
	transform: scale(1.1);
}

.elementor-widget-bargheto_timeline .timeline__dot span {
	color: #fff;
	font-size: 0.75rem;
	font-weight: 900;
}

/* محتوا */
.elementor-widget-bargheto_timeline .timeline__content {
	padding: 0.25rem 0;
}

/* عنوان — حالت اولیه طوسی */
.elementor-widget-bargheto_timeline .timeline__title {
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.75rem;
	color: rgb(145 148 150);
	transition: color 0.5s ease;
}

/* عنوان — حالت active تیره */
.elementor-widget-bargheto_timeline .timeline__item.is-active .timeline__title {
	color: rgb(18 21 23);
}

/* توضیحات — حالت اولیه طوسی روشن */
.elementor-widget-bargheto_timeline .timeline__desc {
	margin-top: 0.375rem;
	font-size: 0.8125rem;
	line-height: 1.5rem;
	color: rgb(209 213 219);
	transition: color 0.5s ease;
}

/* توضیحات — حالت active رنگی */
.elementor-widget-bargheto_timeline .timeline__item.is-active .timeline__desc {
	color: rgb(var(--tl-accent));
}

/* موبایل */
@media (max-width: 639px) {
	.elementor-widget-bargheto_timeline .timeline {
		padding-right: 2.5rem;
	}

	.elementor-widget-bargheto_timeline .timeline::before,
	.elementor-widget-bargheto_timeline .timeline::after {
		right: 0.875rem;
	}

	.elementor-widget-bargheto_timeline .timeline__dot {
		right: -2.5rem;
		width: 2.25rem;
		height: 2.25rem;
	}

	.elementor-widget-bargheto_timeline .timeline__title {
		font-size: 0.875rem;
	}
}