/**
 * شريط الشحن المجّاني.
 *
 * الحالتان مرسومتان معاً في الوسم و`data-state` يُظهر إحداهما: فالانتقال من
 * «باقي كذا» إلى «مبروك» تبديلُ سمةٍ لا إعادةُ بناء، ولا يحتاج السكربت أن
 * يصوغ نصّاً عربياً بنفسه.
 */

.ss-fsbar {
	--ss-fsbar-accent: #a4004f;
	--ss-fsbar-done: #1e8e3e;

	display: block;
	margin: 14px 0;
	font-size: 14px;
	line-height: 1.5;
	color: inherit;
}

.ss-fsbar--boxed {
	padding: 12px 14px;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 10px;
	background: rgba(0, 0, 0, .02);
}

.ss-fsbar__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.ss-fsbar__icon {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	color: var(--ss-fsbar-accent);
}

.ss-fsbar[data-state="done"] .ss-fsbar__icon {
	color: var(--ss-fsbar-done);
}

.ss-fsbar__text {
	flex: 1 1 auto;
	min-width: 0;
}

/* حالةٌ واحدة تُرى. */
.ss-fsbar[data-state="progress"] .ss-fsbar__text--done,
.ss-fsbar[data-state="done"] .ss-fsbar__text--progress {
	display: none;
}

.ss-fsbar__text--done {
	font-weight: 600;
	color: var(--ss-fsbar-done);
}

.ss-fsbar__amount,
.ss-fsbar__amount .amount {
	font-weight: 700;
	white-space: nowrap;
	color: var(--ss-fsbar-accent);
}

/*
 * المسار عنصرٌ خاصٌّ لا `<progress>`: الأخير يُلوَّن بثلاثة مُحدِّدات لكل
 * محرّك (`::-webkit-progress-value` و`::-moz-progress-bar`)، ولا يقبل انتقالاً
 * سلساً في فايرفوكس. وهذا يفعل ما نريد بسطرين.
 */
.ss-fsbar__track {
	position: relative;
	height: 8px;
	border-radius: 99px;
	background: rgba(0, 0, 0, .1);
	overflow: hidden;
}

.ss-fsbar__fill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 99px;
	background: var(--ss-fsbar-accent);
	transition: width .45s cubic-bezier(.4, 0, .2, 1), background-color .3s ease;
}

.ss-fsbar[data-state="done"] .ss-fsbar__fill {
	background: var(--ss-fsbar-done);
}

@media (prefers-reduced-motion: reduce) {
	.ss-fsbar__fill {
		transition: none;
	}
}

/* --- المواضع --- */

/* صفحة المنتج: فوق زرّ الشراء، بمسافةٍ تفصله عن السعر. */
.ss-fsbar--product {
	margin: 16px 0;
}

/* داخل ملخّص الطلب: بلا هامشٍ سفليٍّ زائد فوق سطر الإجمالي. */
.ss-fsbar--summary {
	margin: 0 0 16px;
}

/* أعلى صفحة السلّة أو الدفع. */
.ss-fsbar--top {
	margin: 0 auto 20px;
	max-width: var(--ss-journey-band, 1000px);
}

/* الدرج المنسدل: العرض ضيّق، والحشو يجب أن يوازي حشو التذييل. */
.ss-fsbar--mini {
	margin: 0;
	padding: 12px 16px;
	border: 0;
	border-top: 1px solid rgba(0, 0, 0, .1);
	border-radius: 0;
	background: transparent;
	font-size: 13px;
}

/*
 * الإخفاء حين لا شحنَ مجّانيّ في منطقة الوجهة الجديدة — و`display: block`
 * أعلاه يتغلّب على `hidden` وحده، فلا بدّ من قاعدةٍ صريحة.
 */
.ss-fsbar[hidden] {
	display: none;
}