/* ==========================================================================
   گوشی: سربرگ فشرده، منوی دسته‌بندی تازه، نوار پایین (۱۴۰۵/۰۷/۱۳)

   از templates/tpls/mobile_category_menu.tpl.html لینک می‌شود (آن قالب بالای body همه‌ی صفحه‌ها
   و صفحه‌ی اقساط هست)، فقط وقتی config/bpr_old_mobile.on نباشد. با آن فایل این CSS و
   client/js/bpr-mobile.js لود نمی‌شوند، منوی قبلی (mobile_category_menu_legacy.tpl.html) برمی‌گردد
   و header.tpl.html هم دکمه‌ی جستجو و کلاس ردیف را چاپ نمی‌کند.

   سربرگ (تا 767px): همان جعبه‌های چیدمان (لوگو، جستجو، ورود، سبد) جابه‌جا نشده‌اند؛ ردیفشان
   (.bpm-hrow) گرید می‌شود: لوگو | آیکن کاربر | علاقه‌مندی/مقایسه (فقط وقتی چیزی دارند) | آیکن
   جستجو، و کادر جستجو در ردیف دوم. دکمه‌ی سبد سربرگ پنهان است؛ سبد در نوار پایین است (با عدد،
   و روی گوشی همان پنجره‌ی پایین‌آیند را باز می‌کند). پنجره‌های ورود و «به سبد افزوده شد» داخل همین
   جعبه‌ها هستند، پس جعبه‌ها display:none نمی‌گیرند.

   نوار پایین (تا 768px): نوار شناور شیشه‌ای با گوشه‌های گرد، آیکن‌های خطی تازه، سبد خرید دکمه‌ی وسط؛
   هاله‌ی نوار دستیار هوشمند یک کمان کامل روی بخش صاف لبه‌ی بالای نوار.
   ========================================================================== */

@font-face { font-family: "bpmYekan"; font-style: normal; font-weight: 400; font-display: swap;
	src: url("../fonts/iranyekan/fonts/woff2/iranyekanwebregular.woff2") format("woff2"); }
@font-face { font-family: "bpmYekan"; font-style: normal; font-weight: 700; font-display: swap;
	src: url("../fonts/iranyekan/fonts/woff2/iranyekanwebbold.woff2") format("woff2"); }

/* ---------------------------------------------------------------- سربرگ گوشی */
@media (max-width: 767px) {
	header.header { background: #fff !important; box-shadow: 0 1px 0 #EDF0F4; }
	header .row.bpm-hrow {
		display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center;
		column-gap: 2px; row-gap: 10px; margin: 0 !important;
		/* !important: CSS-Bprshop-Merg-1 به header .row پدینگ چپ و راست ۰ !important می‌دهد */
		padding: 10px 14px 12px 8px !important;
	}
	/* .row بوت‌استرپ ::before/::after دارد که در گرید خانه می‌گرفتند */
	header .row.bpm-hrow::before, header .row.bpm-hrow::after { content: none !important; display: none !important; }
	header .row.bpm-hrow > * { grid-column: 1 / -1; }
	header .row.bpm-hrow > .mod { float: none !important; width: auto !important; min-width: 0; min-height: 0 !important; margin: 0 !important; padding: 0 !important; }
	header .row.bpm-hrow > .mod > .mod-holder,
	header .row.bpm-hrow > .mod > .mod-holder > .mod-inner {
		margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important;
		box-shadow: none !important; min-height: 0 !important; height: auto !important;
	}
	header .row.bpm-hrow > .mod .mod-title { display: none !important; }
	header .row.bpm-hrow > .mod.logo { grid-column: 1; grid-row: 1; justify-self: start; }
	header .row.bpm-hrow > .mod.login_profile { grid-column: 2; grid-row: 1; }
	header .row.bpm-hrow > .mod.shopping_cart { grid-column: 3; grid-row: 1; }
	header .row.bpm-hrow > .bpm-hsearch { grid-column: 4; grid-row: 1; }
	header .row.bpm-hrow > .mod.products_search { grid-column: 1 / -1; grid-row: 2; padding: 0 0 0 6px !important; }

	/* لوگو: نسخه‌ی فشرده‌ی گوشی (نشانه + نام) با ارتفاع ۳۶ */
	header .row.bpm-hrow > .mod.logo .mod-inner { text-align: right !important; line-height: 0 !important; }
	header .row.bpm-hrow > .mod.logo .bpr-site-logo { display: inline-block; max-width: 100%; line-height: 0; }
	header .row.bpm-hrow > .mod.logo .bpr-site-logo img { width: auto !important; height: 36px !important; max-width: 100% !important; object-fit: contain; }

	/* دکمه‌های آیکنی: کاربر و جستجو (مثل طرح: آیکن خطی بی‌زمینه، روی لمس زمینه‌ی روشن) */
	header .row.bpm-hrow > .mod.login_profile .mod-inner,
	header .row.bpm-hrow > .mod.shopping_cart .mod-inner { text-align: center !important; direction: rtl !important; }
	header .bpm-hsearch,
	[dir] header .row.bpm-hrow .login-regester .btn.login-regester-panel-control.bpu-guest,
	header .row.bpm-hrow .login-liner .bpu-trigger {
		display: inline-flex !important; align-items: center; justify-content: center; position: relative;
		width: 42px !important; height: 42px !important; min-width: 0 !important; max-width: none !important; margin: 0 !important;
		padding: 0 !important; border: 0 !important; border-radius: 12px !important; background: transparent !important;
		color: #1F2937 !important; box-shadow: none !important; cursor: pointer; -webkit-tap-highlight-color: transparent;
		transition: background-color .15s;
	}
	header .bpm-hsearch:active,
	[dir] header .row.bpm-hrow .login-regester .btn.login-regester-panel-control.bpu-guest:active,
	header .row.bpm-hrow .login-liner .bpu-trigger:active,
	header .row.bpm-hrow .login-liner .bpu-trigger[aria-expanded="true"] { background: #F1F4F7 !important; }
	header .bpm-hsearch svg { width: 24px; height: 24px; display: block; }
	/* مهمان: فقط آیکن آدمک خطی */
	[dir] header .row.bpm-hrow .login-regester .bpu-guest > span:not(.bpu-avatar) { display: none !important; }
	header .row.bpm-hrow .login-regester .bpu-guest .bpu-avatar {
		width: 24px; height: 24px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2937' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5c.8-3.6 3.9-6 7.5-6s6.7 2.4 7.5 6'/%3E%3C/svg%3E") center / 24px 24px no-repeat !important;
		box-shadow: none !important;
	}
	header .row.bpm-hrow .login-regester .bpu-guest .bpu-avatar .fa { display: none !important; }
	/* واردشده: آواتار فیروزه‌ای (فرق با مهمان پیدا باشد)؛ نام و فلش در گوشی نه */
	header .row.bpm-hrow .login-liner .user-menu-handle.bpu-handle { display: inline-block !important; margin: 0 !important; }
	header .row.bpm-hrow .login-liner .bpu-trigger .bpu-name,
	header .row.bpm-hrow .login-liner .bpu-trigger .bpu-chev { display: none !important; }
	header .row.bpm-hrow .login-liner .bpu-trigger .bpu-avatar { width: 32px; height: 32px; font-size: 14px; }

	/* سبد سربرگ پنهان (در نوار پایین است)؛ علاقه‌مندی و مقایسه وقتی چیزی دارند همین‌جا می‌آیند.
	   خط خالی جعبه (قلم ۱۱px طراحی جعبه) جا نگیرد. */
	header .row.bpm-hrow > .mod.shopping_cart .mod-inner { font-size: 0 !important; line-height: 0 !important; text-indent: 0 !important; }
	header .row.bpm-hrow > .mod.login_profile .mod-inner { text-indent: 0 !important; }
	header .row.bpm-hrow .sale-basket { display: inline-flex !important; align-items: center; gap: 0 !important; margin: 0 !important; min-width: 0; }
	header .row.bpm-hrow .sale-basket > .sale-basket-cart-wrap,
	header .row.bpm-hrow .sale-basket > a,
	header .row.bpm-hrow .sale-basket .sale-basket-panel-control { display: none !important; }
	header .row.bpm-hrow .sale-basket #bpr-fav-header-btn.visible,
	header .row.bpm-hrow .sale-basket #bpr-compare-header-btn.visible {
		display: inline-flex !important; width: 42px !important; height: 42px !important; border: 0 !important; border-radius: 12px !important;
		background: transparent !important; color: #1F2937 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important;
	}
	header .row.bpm-hrow .sale-basket #bpr-fav-header-btn svg.bpr-fav-icon,
	header .row.bpm-hrow .sale-basket #bpr-compare-header-btn svg.bpr-icon-compare { width: 22px !important; height: 22px !important; }
	header .row.bpm-hrow .sale-basket #bpr-fav-header-btn .bpr-fav-badge,
	header .row.bpm-hrow .sale-basket #bpr-compare-header-btn .bpr-cmp-badge {
		top: 3px !important; left: 3px !important; right: auto !important; min-width: 17px !important; height: 17px !important; padding: 0 4px !important;
		border-radius: 9px !important; background: #1AC3BA !important; color: #fff !important; box-shadow: 0 0 0 2px #fff !important;
		font: 700 10.5px/17px "bpmYekan", Tahoma, sans-serif !important; text-align: center !important; text-indent: 0 !important; box-sizing: border-box !important;
	}

	/* کادر جستجو */
	header .row.bpm-hrow > .mod.products_search .mod-inner { text-align: right !important; }
	header .mod.products_search [class*="search-container-"] { width: 100% !important; margin: 0 !important; }
	header .mod.products_search .search-box-input {
		display: block; width: 100% !important; height: 46px !important; margin: 0 !important; padding: 0 44px 0 40px !important;
		border: 1px solid #EEF1F5 !important; border-radius: 14px !important; background: #F4F6F9 !important; box-shadow: none !important;
		color: #1F2937 !important; font-family: "bpmYekan", Tahoma, sans-serif !important; font-size: 13.5px !important;
		-webkit-appearance: none; appearance: none; transition: border-color .15s, background-color .15s, box-shadow .15s;
	}
	header .mod.products_search .search-box-input::placeholder { color: #8A94A3; opacity: 1; }
	header .mod.products_search .search-box-input:focus { background: #fff !important; border-color: #1AC3BA !important; box-shadow: 0 0 0 4px rgba(26, 195, 186, .14) !important; outline: 0; }
	header .mod.products_search .search-icon { right: 16px !important; color: #64748B !important; font-size: 16px !important; width: auto !important; }
}

/* ---------------------------------------------------------------- نوار پایین گوشی (نوار شناور شیشه‌ای)
   همان markup قالب صفحه‌ها (و صفحه‌ی اقساط) است؛ bpr-mobile.js کلاس bpm-nav و آیکن‌های خطی تازه
   (.bpm-ico) را می‌گذارد و آیکن‌های فونتی Material پنهان می‌شوند. خود .bottom-nav پهن و چسبیده به
   پایین می‌ماند (شفاف، بی‌کلیک) و فقط فهرست درونش جعبه‌ی شناور است: اسکریپت نوار دستیار هوشمند
   (ai-chat/mobile/launcher.js) جای خودش را از ارتفاع همین .bottom-nav حساب می‌کند (پایینش باید
   لب صفحه باشد). سبد خرید دکمه‌ی فیروزه‌ای وسط است، با عدد.
   شیشه: سفید نیمه‌شفاف با blur پشت؛ روی فوتر تیره (html.bpm-nav-dark، از bpr-mobile.js) شیشه‌ی تیره. */
@media (max-width: 768px) {
	/* جای نوار: پایین صفحه؛ اگر فوتر هست ته خود فوتر (هم‌رنگش)، نه نوار سفید زیرش */
	body { padding-bottom: 86px; }
	body:has(> footer.container-fluid) { padding-bottom: 0; }
	body > footer.container-fluid { padding-bottom: 86px !important; }

	.bottom-nav.bpm-nav {
		left: 0; right: 0; bottom: 0; width: auto; padding: 0 10px 10px; background: transparent; box-shadow: none;
		pointer-events: none; font-family: "bpmYekan", "iranyekan", Tahoma, sans-serif;
	}
	.bpm-nav .bottom-nav-list {
		pointer-events: auto; position: relative; display: flex; align-items: stretch; justify-content: space-between; height: 64px; margin: 0;
		padding: 0 4px; list-style: none; border-radius: 22px;
		background-color: rgba(255, 255, 255, .74);
		background-image: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 60%);
		-webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
		border: 1px solid rgba(255, 255, 255, .7);
		box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .5), 0 2px 10px rgba(15, 23, 42, .07),
			inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(15, 23, 42, .04);
		transition: background-color .35s, border-color .35s, box-shadow .35s;
	}
	.bpm-nav .bottom-nav-item { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; text-align: center; }
	.bpm-nav .bottom-nav-link {
		position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
		gap: 3px; padding: 0; color: #4B5563; font-weight: 400; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
		transition: color .35s;
	}
	.bpm-nav .bottom-nav-link:hover, .bpm-nav .bottom-nav-link:focus { color: #1F2937; text-decoration: none; outline: 0; }
	.bpm-nav .bottom-nav-link:focus-visible .bpm-ico { box-shadow: 0 0 0 2px #1AC3BA; }
	.bpm-nav .bottom-nav-link > .material-icons { display: none !important; }
	.bpm-nav .bottom-nav-link > span:not(.bpm-ico) { font-size: 10.5px; line-height: 1.5; white-space: nowrap; color: inherit; }
	.bpm-ico {
		position: relative; display: inline-flex; font-weight: 400; font-style: normal; align-items: center; justify-content: center; width: 48px; height: 30px;
		border-radius: 999px; transition: background-color .2s, color .2s, transform .12s;
	}
	.bpm-ico svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
	.bpm-ico svg .f { fill: currentColor; fill-opacity: 0; transition: fill-opacity .2s; }
	.bpm-nav .bottom-nav-link:active .bpm-ico { transform: scale(.92); }
	.bpm-nav .bottom-nav-link.active { color: #0B8F88; font-weight: 700; }
	.bpm-nav .bottom-nav-link.active .bpm-ico { background: rgba(26, 195, 186, .16); }
	.bpm-nav .bottom-nav-link.active .bpm-ico svg .f { fill-opacity: .2; }

	/* سبد خرید: مربع گرد فیروزه‌ای وسط (نام «سبد خرید» برای صفحه‌خوان می‌ماند) */
	.bpm-nav .bottom-nav-item.bpm-li-cart { flex: 0 0 64px; }
	.bpm-nav .bpm-cart > span:not(.bpm-ico) {
		position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0;
	}
	.bpm-nav .bpm-cart .bpm-ico {
		width: 48px; height: 48px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, #1AC3BA 0%, #0B8F88 100%);
		box-shadow: 0 10px 20px -10px rgba(11, 143, 136, .95), inset 0 1px 0 rgba(255, 255, 255, .35);
	}
	.bpm-nav .bpm-cart .bpm-ico svg { width: 24px; height: 24px; stroke-width: 1.9; }
	.bpm-nav .bpm-cart.active .bpm-ico { background: linear-gradient(135deg, #17B0A8 0%, #087A74 100%); box-shadow: 0 0 0 3px rgba(26, 195, 186, .3), 0 10px 20px -10px rgba(11, 143, 136, .95); }
	/* عدد سبد (همان نشان سبد سربرگ) */
	.bpm-nav .bpm-badge {
		position: absolute; top: -6px; left: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: #002B51;
		color: #fff; box-shadow: 0 0 0 2px #fff; font: 700 10.5px/19px "bpmYekan", Tahoma, sans-serif; text-align: center; box-sizing: border-box;
	}
	.bpm-nav .bpm-badge[hidden] { display: none; }

	/* روی فوتر تیره: شیشه‌ی تیره */
	html.bpm-nav-dark .bpm-nav .bottom-nav-list {
		background-color: rgba(17, 21, 30, .58);
		background-image: linear-gradient(180deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 60%);
		border-color: rgba(255, 255, 255, .1);
		box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .12);
	}
	html.bpm-nav-dark .bpm-nav .bottom-nav-link { color: #C3CCD8; }
	html.bpm-nav-dark .bpm-nav .bottom-nav-link:hover, html.bpm-nav-dark .bpm-nav .bottom-nav-link:focus { color: #fff; }
	html.bpm-nav-dark .bpm-nav .bottom-nav-link.active { color: #3FD6CD; }
	html.bpm-nav-dark .bpm-nav .bottom-nav-link.active .bpm-ico { background: rgba(26, 195, 186, .18); }
	html.bpm-nav-dark .bpm-nav .bpm-cart .bpm-ico { color: #fff; }
	html.bpm-nav-dark .bpm-nav .bpm-badge { background: #fff; color: #002B51; box-shadow: 0 0 0 2px #11151E; }

	/* مرورگر بی backdrop-filter: شیشه‌ی کدر، تا نوشته‌ها خوانا بمانند */
	@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		.bpm-nav .bottom-nav-list { background-color: rgba(255, 255, 255, .97); }
		html.bpm-nav-dark .bpm-nav .bottom-nav-list { background-color: rgba(23, 28, 39, .97); }
	}

	/* نوار دستیار هوشمند (ai-chat/mobile/launcher.css): همان هاله و نوشته‌ی قبلی (رنگ، تپش، لایه، لبه‌ی
	   صاف پایین روی لبه‌ی بالای نوار). جعبه‌اش فقط روی بخش صاف لبه‌ی بالای نوار است (۱۰px فاصله‌ی نوار
	   + ۲۲px گردی گوشه از هر طرف) تا هاله روی گوشه‌های گرد و کنار نوار نیفتد، و خود بیضی هم به پهنای
	   همین جعبه است: کمان کامل از سر تا سر بخش صاف (نه تکه‌ی وسط بیضی پهن قبلی با دو سر بریده).
	   کمی بلندتر از قبل (۱۰۰ به‌جای ۸۶) تا نوشته‌ی وسط باز روی آبی بماند؛ مرکزش همان لبه‌ی نوار.
	   (درخواست مدیر سایت ۱۴۰۵/۰۷/۱۳: «گوشه‌ها خم نشود، فقط قسمت صاف بالا»، بعد «کمان کامل»). */
	html.bpm-nav-ready #bpr-ai-bar-m { left: 32px; right: 32px; }
	html.bpm-nav-ready #bpr-ai-bar-m .bpr-ai-bar-m-glow { left: 0; width: 100%; min-width: 0; margin-left: 0; height: 100px; bottom: -50px; }

	/* تا اسکریپت آیکن‌ها را بگذارد، اسکلت هم‌شکل نوار؛ بعد خود نوار (زودتر از load که قبلاً منتظرش بود) */
	.bottom-nav-loader {
		left: 10px; right: 10px; bottom: 10px; width: auto; height: 64px; border-radius: 22px; background: rgba(255, 255, 255, .92);
		border: 1px solid rgba(15, 23, 42, .07); box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .5);
	}
	.bottom-nav-loader .loader-ellipsis { font-size: 30px; line-height: 1; padding: 0; color: #CBD5E1; }
	html.bpm-nav-ready body.loading .bottom-nav.bpm-nav { display: block !important; }
	html.bpm-nav-ready .bottom-nav-loader { display: none !important; }
}

/* ---------------------------------------------------------------- منوی دسته‌بندی */
/* ظرف قدیمی (در قالب هر صفحه): زمینه‌ی سفید تمام‌صفحه؛ × قدیمی پنهان است ولی اسکریپت آن را برای
   بستن کلیک می‌کند (mobile-navbar-script.js دکمه‌ی فعال نوار پایین را همان‌جا برمی‌گرداند). */
.mobile-menu-overlay { background: #fff !important; align-items: stretch !important; justify-content: flex-start !important; }
.mobile-menu-overlay > .mobile-menu-header { display: none !important; }
.mobile-menu-overlay > .mobile-menu-content { display: block !important; width: 100%; height: 100%; padding: 0 !important; background: #fff !important; }
html.bpm-open, html.bpm-open body { overflow: hidden !important; }
html.bpm-open #bpr-ai-bar-m { display: none !important; }

.bpm-menu {
	display: flex; flex-direction: column; height: 100%; direction: rtl; text-align: right; background: #fff; color: #1F2937;
	font-family: "bpmYekan", Tahoma, sans-serif; font-size: 14px; line-height: 1.7; -webkit-font-smoothing: antialiased;
	animation: bpmIn .24s cubic-bezier(.2, .8, .2, 1);
}
.bpm-menu *, .bpm-menu *::before, .bpm-menu *::after { box-sizing: border-box; }
.bpm-menu button, .bpm-menu input { font-family: inherit; }
.bpm-menu a, .bpm-menu a:hover, .bpm-menu a:focus { text-decoration: none; }
.bpm-menu :focus { outline: 0; }
.bpm-menu :focus-visible { outline: 2px solid #1AC3BA; outline-offset: -2px; }
@keyframes bpmIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes bpmFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.bpm-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 58px; padding: 0 16px 0 10px; }
.bpm-head-t { font-size: 16.5px; font-weight: 700; color: #0F172A; }
.bpm-close {
	flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px; background: #F4F6F9; color: #334155;
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.bpm-close svg { width: 20px; height: 20px; }
.bpm-close:active { background: #E9EDF2; }

.bpm-find { flex: none; position: relative; padding: 0 16px 12px; border-bottom: 1px solid #F0F2F5; }
.bpm-find-ico { position: absolute; right: 30px; top: 13px; width: 18px; height: 18px; color: #8A94A3; pointer-events: none; }
.bpm-q {
	display: block; width: 100%; height: 44px; margin: 0; padding: 0 42px 0 42px; border: 1px solid #EEF1F5; border-radius: 12px;
	background: #F4F6F9; color: #1F2937; font-size: 13.5px; line-height: 44px; box-shadow: none; -webkit-appearance: none; appearance: none;
	transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.bpm-q::placeholder { color: #8A94A3; opacity: 1; }
.bpm-q::-webkit-search-cancel-button, .bpm-q::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.bpm-q:focus { background: #fff; border-color: #1AC3BA; box-shadow: 0 0 0 4px rgba(26, 195, 186, .14); }
.bpm-q-clear {
	position: absolute; left: 22px; top: 6px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 10px; background: transparent;
	color: #8A94A3; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.bpm-q-clear svg { width: 18px; height: 18px; }
.bpm-q-clear[hidden] { display: none; }

.bpm-body { flex: 1 1 auto; min-height: 0; display: flex; }
.bpm-body[hidden], .bpm-results[hidden], .bpm-panel[hidden] { display: none !important; }

/* ستون دسته‌های اصلی (راست) */
.bpm-rail {
	flex: none; width: 92px; overflow-y: auto; background: #F6F8FA; border-left: 1px solid #EEF1F5;
	padding: 6px 0 110px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none;
}
.bpm-rail::-webkit-scrollbar { display: none; }
.bpm-tab {
	position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; margin: 0; padding: 12px 6px 11px;
	border: 0; border-radius: 0; background: transparent; color: #475569; font-size: 12px; line-height: 1.55; text-align: center;
	cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.bpm-tab-ico {
	width: 46px; height: 46px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center;
	background: #fff; color: #475569; box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 0 0 1px #EEF1F5;
	transition: background-color .18s, color .18s, box-shadow .18s;
}
.bpm-tab-ico .material-icons { font-size: 23px; line-height: 1; }
.bpm-tab-t { display: block; max-width: 100%; overflow-wrap: anywhere; }
.bpm-tab.is-on { background: #fff; color: #0B8F88; font-weight: 700; }
.bpm-tab.is-on::before { content: ""; position: absolute; right: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 3px 0 0 3px; background: #1AC3BA; }
.bpm-tab.is-on .bpm-tab-ico { background: #1AC3BA; color: #fff; box-shadow: 0 10px 20px -12px rgba(11, 143, 136, .95); }

/* محتوای دسته (چپ) */
.bpm-panels { flex: 1 1 auto; min-width: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: 110px; }
.bpm-panel { animation: bpmFade .18s ease-out; }
.bpm-panel-head {
	position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 14px 16px 12px; background: #fff; box-shadow: 0 1px 0 #F1F4F7;
}
.bpm-panel-t { min-width: 0; font-size: 15px; font-weight: 700; color: #0F172A; }
.bpm-all {
	flex: none; display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 12px 0 8px; border-radius: 999px;
	background: #E9F8F7; color: #0B8F88 !important; font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.bpm-all svg { width: 16px; height: 16px; }
.bpm-all:active { background: #CDEFEC; }

.bpm-list { list-style: none; margin: 0; padding: 0; }
.bpm-row { margin: 0; border-bottom: 1px solid #F1F4F7; }
.bpm-row:last-child { border-bottom: 0; }
.bpm-row-t {
	display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 52px; margin: 0;
	padding: 10px 16px; border: 0; border-radius: 0; background: transparent; color: #1F2937 !important; font-size: 14px; font-weight: 400;
	line-height: 1.7; text-align: right; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.bpm-row-t:active { background: #F7F9FB; }
.bpm-row-t svg { flex: none; width: 18px; height: 18px; color: #9AA4B2; transition: transform .2s, color .2s; }
.bpm-row.is-open > .bpm-row-t { color: #0B8F88 !important; font-weight: 700; }
.bpm-row.is-open > .bpm-row-t svg { transform: rotate(180deg); color: #1AC3BA; }

/* سطح سوم: زیر هم، با خط راهنمای فیروزه‌ای؛ «همه‌ی ...» اول و پررنگ */
.bpm-kids { display: none; }
.bpm-row.is-open > .bpm-kids { display: block; margin: 0 16px 14px; padding: 2px 0; border-right: 2px solid #E3F6F4; animation: bpmFade .18s ease-out; }
.bpm-kid { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 14px 6px 4px; color: #475569 !important; font-size: 13px; line-height: 1.7; }
.bpm-kid::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #CBD5E1; }
.bpm-kid:active { background: #F7F9FB; }
.bpm-kid.is-all { color: #0B8F88 !important; font-weight: 700; }
.bpm-kid.is-all::before { background: #1AC3BA; }

/* نتیجه‌ی جستجو در دسته‌ها */
.bpm-results { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 4px 0 110px; }
.bpm-res { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 9px 16px; border-bottom: 1px solid #F1F4F7; color: #1F2937 !important; }
.bpm-res:active { background: #F7F9FB; }
.bpm-res-ico { flex: none; width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: #F3F6F9; color: #64748B; }
.bpm-res-ico .material-icons { font-size: 20px; line-height: 1; }
.bpm-res-ico svg { width: 19px; height: 19px; }
.bpm-res-txt { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.bpm-res-n { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.bpm-res-n mark { padding: 0; background: none; color: #0B8F88; font-weight: 700; }
.bpm-res-p { font-size: 11.5px; line-height: 1.6; color: #8A94A3; }
.bpm-res-go .bpm-res-ico { background: #E9F8F7; color: #0B8F88; }
.bpm-res-go .bpm-res-n { color: #0B8F88; font-weight: 700; }
.bpm-empty { padding: 26px 24px 10px; text-align: center; color: #64748B; font-size: 13px; line-height: 2; }