/**
 * Rahino Custom Steps widget styles (Timeline layout).
 */

.rahino-custom-steps {
	--rcs-line-color: #e2d3ae;
	--rcs-line-width: 2px;
	--rcs-dot-color: #1f3c88;
	--rcs-card-bg: #f7f8fa;
	--rcs-card-border: rgba(15, 23, 42, 0.05);
	--rcs-title-color: #24418f;
	--rcs-desc-color: #6b7280;
	--rcs-radius: 12px;
	--rcs-gap: 18px;
	direction: rtl;
}

.custom-steps-timeline {
	display: flex;
	flex-direction: column;
}
/* ---------- حالت مخفی‌سازی برچسب وضعیت ---------- */
.rahino-custom-steps--no-badges .custom-step__badge {
	display: none;
}
/* ---------- هر مرحله: نقطه + کارت ---------- */
.custom-step {
	display: grid;
	grid-template-columns: 40px 1fr; /* در RTL ستون اول = سمت راست (تایم‌لاین) */
	column-gap: 14px;
	position: relative;
	padding-bottom: var(--rcs-gap);
}

.custom-step:last-child {
	padding-bottom: 0;
}

/* ---------- خط اتصال تایم‌لاین ---------- */
.custom-step__marker {
	position: relative;
}

.custom-step__marker::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: calc(var(--rcs-gap) * -1); /* پل زدن روی فاصله بین آیتم‌ها */
	right: 50%;
	transform: translateX(50%);
	width: var(--rcs-line-width);
	border-radius: 999px;
	background: var(--rcs-line-color);
}

.custom-step:first-child .custom-step__marker::before {
	top: 50%; /* خط از مرکز اولین نقطه شروع شود */
}

.custom-step:last-child .custom-step__marker::before {
	bottom: 50%; /* خط در مرکز آخرین نقطه تمام شود */
}

.custom-step:only-child .custom-step__marker::before {
	display: none;
}

/* ---------- نقطه‌های حلقه‌ای ---------- */
.custom-step__dot {
	position: absolute;
	top: 50%;
	right: 50%;
	transform: translate(50%, -50%);
	box-sizing: border-box;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: #ffffff;
	border: 6px solid var(--rcs-dot-color);
	z-index: 1;
}

/* ---------- کارت ---------- */
.custom-step__card {
	background: var(--rcs-card-bg);
	border: 1px solid var(--rcs-card-border);
	border-radius: var(--rcs-radius);
	padding: 20px 26px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 26px -18px rgba(15, 23, 42, 0.16);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.custom-step__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05), 0 18px 34px -18px rgba(15, 23, 42, 0.22);
}

.custom-step__info {
	min-width: 0;
}

.custom-step__title {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--rcs-title-color);
}

.custom-step__desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.9;
	color: var(--rcs-desc-color);
}

/* ---------- برچسب وضعیت ---------- */
.custom-step__badge {
	flex-shrink: 0;
	padding: 9px 15px;
	border-radius: 9px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}

.custom-step__badge--green {
	background: #e3f2e8;
	color: #4d9d6f;
}

.custom-step__badge--yellow {
	background: #f5e5cc;
	color: #b0803f;
}

.custom-step__badge--blue {
	background: #dbeaf2;
	color: #5b93ad;
}

.custom-step__badge--red {
	background: #f3dee3;
	color: #b96a78;
}

/* ---------- انیمیشن ورود (با JS فعال می‌شود) ---------- */
.rahino-custom-steps.rcs-animate .custom-step {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.55s ease, transform 0.55s ease;
}

.rahino-custom-steps.rcs-animate .custom-step.is-visible {
	opacity: 1;
	transform: none;
}

/* ---------- ریسپانسیو ---------- */
@media (max-width: 640px) {
	.custom-step {
		grid-template-columns: 28px 1fr;
		column-gap: 10px;
	}

	.custom-step__dot {
		width: 16px;
		height: 16px;
		border-width: 5px;
	}

	.custom-step__card {
		padding: 16px 18px;
		flex-wrap: wrap;
		gap: 12px;
	}

	.custom-step__badge {
		white-space: normal;
	}

	.custom-step__title {
		font-size: 15px;
	}

	.custom-step__desc {
		font-size: 13px;
	}
}