/**
 * STICKY ORDER BAR — نوار سفارش چسبان (فقط موبایل)
 * وابسته به: styles/base/tokens.css
 * استفاده در PHP: template-parts/sections/sticky-order-bar.php
 */

.sticky-order-bar {
	display: none; /* پیش‌فرض: پنهان در دسکتاپ/تبلت بزرگ */
}

@media (max-width: 767.98px) {

	/* فضای خالی معادل ارتفاع نوار + ناحیه‌ی امن پایین گوشی، تا محتوای
	   انتهای صفحه (مثل فوتر) زیر نوار پنهان نشود. */
	body {
		padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
	}

	.sticky-order-bar {
		display: block;
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 40;
		padding: var(--space-2) var(--space-4);
		padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
		background-color: var(--color-bg-elevated);
		border-top: 1px solid var(--color-border);
		box-shadow: 0 -4px 16px rgba(32, 20, 16, 0.14);
	}

	.sticky-order-bar__btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2);
		width: 100%;
		min-height: var(--tap-target-min);
		border-radius: var(--radius-md);
		background-color: var(--color-primary);
		color: var(--color-on-primary);
		font-family: var(--font-family-base);
		font-size: var(--font-size-md);
		font-weight: var(--font-weight-bold);
	}

	.sticky-order-bar__btn:hover,
	.sticky-order-bar__btn:active {
		background-color: var(--color-primary-hover);
		color: var(--color-text-inverse);
	}

	.sticky-order-bar__btn svg {
		width: 20px;
		height: 20px;
		flex-shrink: 0;
	}
}

/* اگر جاوااسکریپت غیرفعال باشد یا حرکت کاهش‌یافته ترجیح داده شود،
   این نوار همچنان بدون هیچ افکتی و کاملاً کاربردی نمایش داده می‌شود؛
   هیچ ترنزیشن یا انیمیشنی برای نمایش/پنهان‌شدن آن استفاده نشده است. */