/**
 * ویجت «مراحل خرید».
 *
 * سه دایره روی یک خط، با خطی که از مرحله‌ی اول تا مرحله‌ی فعلی پر می‌شود.
 *
 *   گذشته  → دایره‌ی پُر با تیک، لینک به همان مرحله
 *   فعلی   → دایره‌ی پُر با آیکونِ خودش و حلقه‌ای که آرام می‌تپد
 *   بعدی   → فقط کادر، کم‌رنگ
 *
 * افکت‌ها: پرشدنِ خط هنگامِ ورود، و تپشِ حلقه‌ی مرحله‌ی فعلی. هر دو با
 * transform و box-shadow ساخته شده‌اند نه با عرض و اندازه — هیچ‌کدام چیدمان را
 * جابه‌جا نمی‌کند (قانونِ «سطرها نپرند»).
 *
 * هم‌عرضِ محتوای زیرش (۰.۷۰.۵): مرحله‌ی اول به لبه‌ی راست می‌چسبد، آخر به لبه‌ی
 * چپ و وسطی دقیقاً وسط — لبه‌ها با جعبه‌های سبد/تسویه‌ی زیرش یکی‌اند. خط از
 * مرکزِ دایره‌ی اول تا مرکزِ دایره‌ی آخر است، یعنی از هر طرف نیم‌قطرِ دایره.
 * مرکزِ دایره‌ی وسط در ۵۰٪ِ خط می‌افتد، پس «پیشرفت» همان ۰/۵۰/۱۰۰ است.
 */

.nb-steps {
	--nb-steps-on: var( --nb-accent, #720eec );
	--nb-steps-off: var( --nb-border, #2c3550 );
	--nb-steps-text: var( --nb-text, #ededed );
	--nb-steps-dot: 44px;
	--nb-steps-line: 3px;

	position: relative;
	width: 100%;
	margin-inline: auto;
}

.nb-steps__list {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	margin: 0;
	padding: 0;
	list-style: none;
}

.nb-steps__item {
	margin: 0;
	padding: 0;
	text-align: center;
}

.nb-steps__item:first-child {
	text-align: right;
}

.nb-steps__item:last-child {
	text-align: left;
}

.nb-steps__item:first-child .nb-steps__link {
	align-items: flex-start;
}

.nb-steps__item:last-child .nb-steps__link {
	align-items: flex-end;
}

.nb-steps__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: inherit;
	text-decoration: none;
}

a.nb-steps__link:hover .nb-steps__dot {
	transform: scale( 1.06 );
}

a.nb-steps__link:focus-visible {
	outline: none;
}

a.nb-steps__link:focus-visible .nb-steps__dot {
	outline: 2px solid var( --nb-steps-on );
	outline-offset: 3px;
}

/* ---------------------------------------------------------------- خط */

.nb-steps__track {
	position: absolute;
	top: calc( var( --nb-steps-dot ) / 2 - var( --nb-steps-line ) / 2 );
	inset-inline: calc( var( --nb-steps-dot ) / 2 );
	height: var( --nb-steps-line );
	border-radius: var( --nb-steps-line );
	background: var( --nb-steps-off );
	overflow: hidden;
}

/*
 * پُرشدن با scaleX نه با width: عرض از `--nb-steps-progress` می‌آید و ثابت
 * است؛ فقط مقیاسش از صفر به یک می‌رود. مبدأِ تبدیل لبه‌ی شروع (راست) است.
 */
.nb-steps__fill {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: var( --nb-steps-progress, 0% );
	border-radius: inherit;
	background: var( --nb-steps-on );
	transform-origin: right center;
	animation: nb-steps-fill .9s cubic-bezier( .22, .61, .36, 1 ) .15s both;
}

[dir="ltr"] .nb-steps__fill {
	transform-origin: left center;
}

@keyframes nb-steps-fill {
	from { transform: scaleX( 0 ); }
	to   { transform: scaleX( 1 ); }
}

/* ------------------------------------------------------------- دایره */

.nb-steps__dot {
	position: relative;
	display: grid;
	place-items: center;
	width: var( --nb-steps-dot );
	height: var( --nb-steps-dot );
	border: 2px solid var( --nb-steps-off );
	border-radius: 50%;
	background: var( --nb-surface, #0f1524 );
	color: var( --nb-text-muted, #98a2b3 );
	transition: transform .2s ease;
}

.nb-steps__icon {
	width: 46%;
	height: 46%;
}

.nb-steps__item.is-done .nb-steps__dot,
.nb-steps__item.is-current .nb-steps__dot {
	border-color: var( --nb-steps-on );
	background: var( --nb-steps-on );
	color: #fff;
}

/* تپشِ مرحله‌ی فعلی — حلقه بیرونِ دایره پخش می‌شود و دایره ثابت می‌ماند. */
.nb-steps__item.is-current .nb-steps__dot {
	animation: nb-steps-pulse 2.4s cubic-bezier( .4, 0, .2, 1 ) 1s infinite;
}

@keyframes nb-steps-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix( in srgb, var( --nb-steps-on ) 55%, transparent ); }
	70%  { box-shadow: 0 0 0 12px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

/* تیکِ مرحله‌ی گذشته با یک «پاپ» کوتاه وارد می‌شود. */
.nb-steps__item.is-done .nb-steps__icon {
	animation: nb-steps-pop .45s cubic-bezier( .34, 1.56, .64, 1 ) .2s both;
}

@keyframes nb-steps-pop {
	from { transform: scale( 0 ); }
	to   { transform: scale( 1 ); }
}

/* پایانِ خرید: مرحله‌ی سوم تیک می‌گیرد و تپشش یک بار است، نه بی‌پایان. */
.nb-steps.is-finished .nb-steps__item.is-current .nb-steps__dot {
	animation-iteration-count: 2;
}

.nb-steps.is-finished .nb-steps__item.is-current .nb-steps__icon {
	animation: nb-steps-pop .5s cubic-bezier( .34, 1.56, .64, 1 ) .9s both;
}

/* ------------------------------------------------------------- برچسب */

.nb-steps__label {
	max-width: 100%;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.6;
	color: var( --nb-steps-text );
	opacity: .55;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nb-steps__item.is-done .nb-steps__label {
	opacity: .85;
}

.nb-steps__item.is-current .nb-steps__label {
	font-weight: 500;
	opacity: 1;
}

/* -------------------------------------------------------------- گوشی */

@media ( max-width: 600px ) {

	.nb-steps {
		--nb-steps-dot: 38px;
	}

	.nb-steps__label {
		font-size: 12px;
	}

	.nb-steps__link {
		gap: 8px;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.nb-steps__fill,
	.nb-steps__item .nb-steps__dot,
	.nb-steps__item .nb-steps__icon {
		animation: none !important;
	}
}