/**
 * نوار پیشرفت ارسال رایگان
 * رنگ نوار از متغیر --fsp-color می‌آید که در تنظیمات پیشخوان انتخاب می‌شود.
 */

/*
 * سطح و متن نوار از توکن‌های میزبان می‌آیند اگر باشند — یعنی داخل پیشخوان
 * کاربر با پوستهٔ روشن/تاریک همان صفحه هماهنگ می‌شود. بیرون از پیشخوان
 * هیچ‌کدام تعریف نشده‌اند و مقدارهای پشتیبان همان ظاهر قبلی را می‌دهند.
 */
.fsp {
	--fsp-color: #0f834d;
	--fsp-done: #0f834d;
	--fsp-track: var(--co-soft, #eceff1);
	--fsp-text: var(--co-text, #1f2933);
	--fsp-muted: var(--co-muted, #6b7280);
	--fsp-surface: var(--co-card, #fff);
	--fsp-border: var(--co-border, #e5e7eb);

	direction: rtl;
	text-align: right;
	box-sizing: border-box;
	font-family: inherit;
}

.fsp *,
.fsp *::before,
.fsp *::after {
	box-sizing: inherit;
}

.fsp[hidden] {
	display: none !important;
}

/* ---------- باکس سبد و تسویه ---------- */

.fsp--box {
	background: var(--fsp-surface);
	border: 1px solid var(--fsp-border);
	border-radius: 12px;
	padding: 16px;
	margin: 16px 0;
}

/* ---------- پیام و مبلغ ---------- */

.fsp-head {
	margin-bottom: 10px;
}

.fsp-message {
	margin: 0;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
	color: var(--fsp-text);
	line-height: 1.5;
}

/* مبلغ باقی‌مانده، عنصر اصلی کادر است */
.fsp-amount {
	font-size: clamp(20px, 5vw, 26px);
	font-weight: 700;
	color: var(--fsp-color);
	line-height: 1.2;
}

.fsp .woocommerce-Price-currencySymbol {
	margin-inline-start: 3px;
}

.fsp-amount .woocommerce-Price-currencySymbol {
	font-size: 0.62em;
	font-weight: 500;
}

.fsp-caption {
	font-size: 14px;
	color: var(--fsp-muted);
}

.fsp-message--done {
	font-size: 15px;
	font-weight: 600;
	color: var(--fsp-done);
}

.fsp-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--fsp-done);
	color: #fff;
	font-size: 13px;
	flex: 0 0 auto;
}

/* ---------- نوار پیشرفت ---------- */

.fsp-track {
	position: relative;
	width: 100%;
	height: 10px;
	background: var(--fsp-track);
	border-radius: 999px;
	overflow: hidden;
}

.fsp-fill {
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: var(--fsp-color);
	transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.4s ease;
}

.fsp.is-reached .fsp-fill {
	background: var(--fsp-done);
}

/* لحظهٔ عبور از آستانه */
.fsp.fsp-celebrate .fsp-fill {
	animation: fsp-pulse 1.2s ease;
}

@keyframes fsp-pulse {
	0%, 100% { filter: none; }
	35%      { filter: brightness(1.35); }
}

/* ---------- محصول پیشنهادی ---------- */

.fsp-suggestion {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dashed var(--fsp-border);
}

.fsp-suggestion__media {
	flex: 0 0 auto;
	line-height: 0;
}

.fsp-suggestion__media img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var(--fsp-border);
	display: block;
}

.fsp-suggestion__body {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.fsp-suggestion__name {
	font-size: 14px;
	font-weight: 600;
	color: var(--fsp-text);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fsp-suggestion__name:hover {
	color: var(--fsp-color);
}

.fsp-suggestion__price {
	font-size: 13px;
	color: var(--fsp-muted);
}

.fsp-suggestion__hint {
	font-size: 12px;
	color: var(--fsp-done);
	font-weight: 600;
}

.fsp-suggestion__form {
	flex: 0 0 auto;
	margin: 0;
}

.fsp-add {
	position: relative;
	background: var(--fsp-color);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 9px 16px;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	line-height: 1.4;
	cursor: pointer;
	transition: filter 0.2s ease, opacity 0.2s ease;
	white-space: nowrap;
}

.fsp-add:hover:not(:disabled) {
	filter: brightness(0.9);
}

.fsp-add:disabled {
	opacity: 0.75;
	cursor: default;
}

.fsp-add__spinner {
	display: none;
	width: 14px;
	height: 14px;
	margin-inline-start: 8px;
	border: 2px solid rgba(255, 255, 255, 0.45);
	border-top-color: #fff;
	border-radius: 50%;
	vertical-align: -2px;
	animation: fsp-spin 0.7s linear infinite;
}

.fsp-add.is-loading .fsp-add__spinner {
	display: inline-block;
}

@keyframes fsp-spin {
	to { transform: rotate(360deg); }
}

/* ---------- نوار چسبان ---------- */

.fsp--bar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 9998;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
	background: var(--fsp-surface);
	border-top: 1px solid var(--fsp-border);
	box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.08);
	transform: translateY(0);
	transition: transform 0.35s ease;
}

.fsp--bar.is-hiding {
	transform: translateY(110%);
}

.fsp--bar .fsp-bar__content {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 1080px;
	margin-inline: auto;
}

.fsp--bar .fsp-head {
	margin-bottom: 6px;
}

.fsp--bar .fsp-amount {
	font-size: clamp(17px, 4.5vw, 20px);
}

.fsp--bar .fsp-track {
	height: 7px;
}

.fsp-bar__close {
	flex: 0 0 auto;
	background: none;
	border: none;
	color: var(--fsp-muted);
	font-size: 24px;
	line-height: 1;
	padding: 4px 6px;
	cursor: pointer;
	border-radius: 6px;
}

.fsp-bar__close:hover {
	color: var(--fsp-text);
	background: var(--fsp-track);
}

/* ---------- ویجت سبد (فضای کم) ---------- */

.widget_shopping_cart .fsp--box {
	padding: 12px;
	margin: 10px 0;
}

.widget_shopping_cart .fsp-suggestion {
	display: none;
}

/* ---------- موبایل ---------- */

@media (max-width: 480px) {
	.fsp--box {
		padding: 14px;
		border-radius: 10px;
	}

	.fsp-suggestion {
		flex-wrap: wrap;
	}

	.fsp-suggestion__form {
		flex: 1 1 100%;
	}

	.fsp-add {
		width: 100%;
		padding: 11px 16px;
		font-size: 14px;
	}

	.fsp--bar {
		padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
	}

	.fsp--bar .fsp-caption {
		font-size: 13px;
	}
}

/* ---------- احترام به تنظیم کاهش حرکت ---------- */

@media (prefers-reduced-motion: reduce) {
	.fsp-fill,
	.fsp--bar {
		transition: none;
	}

	.fsp.fsp-celebrate .fsp-fill,
	.fsp-add__spinner {
		animation: none;
	}
}

/* ---------- حالت تیره ---------- */

@media (prefers-color-scheme: dark) {
	.fsp {
		--fsp-track: #33373d;
		--fsp-text: #e9edf1;
		--fsp-muted: #9aa3ad;
		--fsp-surface: #1e2126;
		--fsp-border: #33373d;
	}
}