/*
 * نوار پایین موبایل (inc/tabbar.php). فقط زیر ۷۸۲ پیکسل؛ در دسکتاپ پنهان است.
 * z-index زیر سربرگ (۵۰) است تا کشوی سبد خرید سربرگ رویش بیفتد.
 */
:root {
	--weesa-tabbar-h: 4.25rem;
}
.weesa-tabbar {
	display: none !important;
}
@media (max-width: 781px) {
	.weesa-tabbar {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 45;
		display: flex !important;
		align-items: stretch;
		gap: 0 !important;
		box-sizing: border-box;
		max-width: none !important;
		height: calc(var(--weesa-tabbar-h) + env(safe-area-inset-bottom));
		margin: 0 !important;
		padding: 0 0.35rem env(safe-area-inset-bottom);
		border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--border) 80%, transparent);
		background: var(--wp--preset--color--base);
		color: var(--wp--preset--color--muted, var(--wp--preset--color--contrast));
		box-shadow: 0 -8px 24px -12px color-mix(in srgb, var(--wp--preset--color--contrast) 22%, transparent);
	}
	/* جای نوار ته صفحه خالی بماند تا پابرگ زیرش پنهان نشود. */
	body:has(.weesa-tabbar) {
		padding-bottom: calc(var(--weesa-tabbar-h) + env(safe-area-inset-bottom));
	}
	/* نوار «افزودن به سبد» صفحه‌ی محصول بالای نوار می‌نشیند. */
	body:has(.weesa-tabbar) .weesa-sticky-atc {
		bottom: calc(var(--weesa-tabbar-h) + env(safe-area-inset-bottom));
		padding-bottom: 0.65rem;
		transform: translateY(calc(110% + var(--weesa-tabbar-h) + env(safe-area-inset-bottom)));
	}
	body:has(.weesa-tabbar) .weesa-sticky-atc.is-on {
		transform: none;
	}
}
.weesa-tabbar__item {
	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.2rem;
	min-width: 0;
	margin: 0 !important;
	-webkit-tap-highlight-color: transparent;
}
.weesa-tabbar .weesa-tabbar__item > .wp-block-image {
	--weesa-icon: 1.5rem;
	position: relative;
	display: grid;
	place-items: center;
	inline-size: 3.25rem;
	block-size: 1.9rem;
	margin: 0;
	border-radius: 999px;
	color: inherit;
	transition: background-color 0.2s, color 0.2s, transform 0.2s;
}
.weesa-tabbar__item > p {
	margin: 0;
	overflow: hidden;
	max-width: 100%;
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.weesa-tabbar__item a {
	color: inherit;
	text-decoration: none;
}
/* کل دکمه (آیکون و برچسب) قابل لمس است. */
.weesa-tabbar__item a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.weesa-tabbar__item a:focus-visible {
	outline: none;
}
.weesa-tabbar__item:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -4px;
	border-radius: var(--wp--custom--radius--md, 0.75rem);
}
.weesa-tabbar__item:active > .wp-block-image {
	transform: scale(0.9);
}
.weesa-tabbar__item.is-current {
	color: var(--wp--preset--color--primary);
}
.weesa-tabbar__item.is-current > .wp-block-image {
	background: color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent);
}
.weesa-tabbar__item.is-current > p {
	font-weight: 800;
}
/* شمارنده‌ی سبد روی آیکون (assets/js/tabbar.js از کشوی سبد سربرگ می‌خواند). */
.weesa-tabbar__badge {
	position: absolute;
	top: -0.3rem;
	inset-inline-end: 0.2rem;
	min-width: 1.15rem;
	height: 1.15rem;
	padding: 0 0.3rem;
	box-sizing: border-box;
	border: 2px solid var(--wp--preset--color--base);
	border-radius: 999px;
	background: var(--wp--preset--color--accent, var(--wp--preset--color--primary));
	color: var(--wp--preset--color--on-primary, #fff);
	font-size: 0.68rem;
	font-weight: 800;
	line-height: 0.8rem;
	text-align: center;
	pointer-events: none;
}
.weesa-tabbar__badge[hidden] {
	display: none;
}
.weesa-tabbar__badge.is-bump {
	animation: weesa-tabbar-bump 0.4s ease;
}
@keyframes weesa-tabbar-bump {
	40% { transform: scale(1.35); }
}

/* ویرایشگر: نوار در جای خودش (ته پابرگ) دیده و ویرایش می‌شود. */
.editor-styles-wrapper .weesa-tabbar {
	position: static;
	display: flex !important;
	max-width: 30rem !important;
	margin: 1rem auto !important;
	padding: 0.5rem 0.35rem;
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md, 0.75rem);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}
.editor-styles-wrapper .weesa-tabbar__item > .wp-block-image img {
	inline-size: 1.5rem;
	block-size: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
	.weesa-tabbar__item > .wp-block-image,
	.weesa-tabbar__badge.is-bump {
		transition: none;
		animation: none;
	}
}