/**
 * نوارِ چسبانِ خرید روی موبایل.
 *
 * جاوااسکریپت این نوار را می‌ساخت ولی هیچ استایلی برایش نوشته نشده بود —
 * یعنی به‌جای نوارِ چسبان، یک دکمه‌ی رها ته صفحه ظاهر می‌شد. مالک آن را
 * باگ گزارش کرد و درست هم بود.
 *
 * فقط وقتی دیده می‌شود که فرمِ خرید از دید خارج شده باشد؛ آن منطق در
 * theme.js با IntersectionObserver است و اینجا فقط ظاهرش.
 */

.nb-atc-bar {
	display: none;
}

@media (max-width: 991px) {

	.nb-atc-bar {
		position: fixed;
		z-index: 840;
		right: 0;
		left: 0;

		/*
		 * بالای نوارِ میان‌برها می‌نشیند، نه رویش.
		 *
		 * وقتی نوارِ پایینی خاموش باشد متغیرش صفر می‌شود و این نوار خودش
		 * به کفِ صفحه می‌چسبد — بدون اینکه لازم باشد دو حالت جدا بنویسیم.
		 */
		bottom: calc( var( --nb-mb-space, 0px ) + env( safe-area-inset-bottom, 0px ) );

		display: block;
		padding: 10px 12px;

		background: color-mix( in srgb, var( --nb-surface, #0d1424 ) 92%, transparent );
		border-top: 1px solid var( --nb-line, rgba( 255, 255, 255, .07 ) );
		backdrop-filter: blur( 12px );
		-webkit-backdrop-filter: blur( 12px );
	}

	.nb-atc-bar[hidden] {
		display: none;
	}

	.nb-atc-bar__btn {
		display: block;
		width: 100%;
		min-height: 46px;
	}
}