/**
 * استایل ساختاری ویجت‌های بیکری عظام.
 * فقط چیدمان و مقادیر پیش‌فرض اینجا تعریف می‌شود؛ رنگ، تایپوگرافی و
 * فاصله‌های قابل‌تنظیم همگی از کنترل‌های تب استایل المنتور (selectors)
 * به‌صورت inline روی هر ویجت اعمال می‌شوند.
 *
 * ساختار ویجت icon-box عمداً دو‌سطری است:
 *   سطر ۱ (.bkw-icon-box__header): عنوان، + آیکون در صورتی که «جایگاه
 *     آیکون» روی «کنار عنوان» باشد.
 *   سطر ۲ (.bkw-icon-box__description-row): توضیحات، + آیکون در صورتی
 *     که «جایگاه آیکون» روی «کنار توضیحات» باشد.
 * آیکون همیشه فقط در یکی از این دو سطر است، هیچ‌وقت هر دو. این جدایی
 * تضمین می‌کند آیکون هیچ‌وقت با ارتفاعش وارد سطر دیگر نشود و فقط با
 * متن هم‌سطر خودش هم‌تراز بماند؛ وقتی آیکون کنار عنوان است، توضیحات هم
 * با margin-inline-start محاسبه‌شده در PHP (کنترل «هم‌تراز کردن
 * توضیحات») دقیقاً زیر عنوان می‌نشیند.
 */

.bkw-icon-box {
	--bkw-icon-size: 40px;
	--bkw-box-gap: 16px;
	display: flex;
	flex-direction: column;
	row-gap: 8px;
}

.bkw-icon-box a {
	color: inherit;
	text-decoration: none;
}

.bkw-icon-box__header,
.bkw-icon-box__description-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--bkw-box-gap);
}

.bkw-icon-box__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.bkw-icon-box__icon svg {
	width: var(--bkw-icon-size);
	height: var(--bkw-icon-size);
	display: block;
}

.bkw-icon-box__icon img {
	width: var(--bkw-icon-size);
	height: auto;
	display: block;
}

.bkw-icon-box__title,
.bkw-icon-box__description {
	margin: 0;
	min-width: 0;
}

/*
 * ویجت price: یک فلکس‌ردیف ساده با سه فرزند مستقل (فعلی/پیشین/واحد پول).
 * ترتیب واقعی نمایش‌شان با کنترل «ترتیب نمایش» هر کدام (CSS order) از
 * تب چیدمان تعیین می‌شود، نه با ترتیب مارک‌آپ — پس هر توالی‌ای ممکن است.
 */
.bkw-price {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	gap: 8px;
}

.bkw-price__now,
.bkw-price__old,
.bkw-price__currency {
	margin: 0;
}

.bkw-price__old {
	text-decoration: line-through;
}

.bkw-price__notice {
	padding: 16px;
	border: 1px dashed #c00;
	color: #c00;
	font-size: 13px;
}

/*
 * ویجت account-bar: سه پیل مستقل (سبد خرید / کاربر / خروج) کنار هم.
 * جایگاه نهایی هر پیل با CSS order (کنترل «ترتیب نمایش» در تب چیدمان)
 * تعیین می‌شود، نه ترتیب DOM — دقیقاً مثل .bkw-price. کادر پیل‌ها
 * (پس‌زمینه/حاشیه/رادیوس/پدینگ) روی کلاس مشترک __item است چون در
 * رفرنس فیگما هر سه پیل دقیقاً یک ظاهر دارند.
 */
.bkw-account-bar {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.bkw-account-bar__item {
	display: flex;
	flex-direction: row;
	align-items: center;
	box-sizing: border-box;
	color: inherit;
	text-decoration: none;
}

a.bkw-account-bar__item {
	cursor: pointer;
}

.bkw-account-bar__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.bkw-account-bar__icon svg,
.bkw-account-bar__icon img {
	display: block;
}

.bkw-account-bar__badge,
.bkw-account-bar__name,
.bkw-account-bar__separator,
.bkw-account-bar__balance-label,
.bkw-account-bar__balance-amount,
.bkw-account-bar__balance-currency {
	white-space: nowrap;
	line-height: 1;
}

.bkw-account-bar__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.bkw-account-bar__balance {
	display: inline-flex;
	align-items: baseline;
}

/*
 * حالت «فشرده» پیل کاربر (رفرنس فیگما «نسخه موبایل تک آیتم کیف پول»):
 * برخلاف بقیهٔ پیل‌ها که shrink-to-fit هستند، این حالت طوری طراحی شده
 * که یک نوار تمام‌عرض باشد (خوش‌آمدگویی یک سر، موجودی سر دیگر) — پس
 * width:100% می‌گیرد؛ کنترل «عرض کامل» در تب چیدمان همین را روی خودِ
 * .bkw-account-bar هم اعمال می‌کند، برای وقتی این پیل به‌تنهایی
 * (بدون سبد/خروج) استفاده می‌شود.
 */
.bkw-account-bar__user--compact {
	width: 100%;
	justify-content: space-between;
}

.bkw-account-bar__greeting,
.bkw-account-bar__balance-compact {
	white-space: nowrap;
	line-height: 1.4;
}

/*
 * ویجت section-title: پیش‌عنوان + عنوان + خط تزئینی اختیاری، ستونی.
 * تفاوت رفرنس دسکتاپ/موبایل فیگما (وسط‌چین بدون خط ↔ راست‌چین با خط)
 * هر دو با مقدار پیش‌فرض جداگانهٔ کنترل‌های ریسپانسیو در تب استایل
 * پوشش داده می‌شود؛ این‌جا فقط ساختار پایه است.
 */
.bkw-section-title {
	display: flex;
	flex-direction: column;
}

.bkw-section-title__eyebrow,
.bkw-section-title__title {
	margin: 0;
}

.bkw-section-title__line {
	flex-shrink: 0;
}

/*
 * ویجت header: سه ترکیب مارک‌آپ کاملاً متفاوت زیر یک ریشه (رجوع کن به
 * یادداشت بالای Widgets\Header) — دسکتاپ، ردیف جمع‌شدهٔ موبایل، و پنل
 * کشویی موبایل. جابه‌جایی دسکتاپ↔موبایل با یک بریک‌پوینت ثابت ۱۰۲۴px
 * انجام می‌شود (مطابق بریک‌پوینت پیش‌فرض «تبلت» خود المنتور) — جدا از
 * بریک‌پوینت‌های ریسپانسیو کنترل‌های تب استایل که مستقل کار می‌کنند.
 * پیل‌های سبد/کاربر/خروج همان کلاس‌های .bkw-account-bar__* را دارند
 * (از Traits\Account_Actions_Controls) و بدون تغییر همین‌جا هم درست
 * نمایش داده می‌شوند.
 */
.bkw-header {
	position: relative;
	box-sizing: border-box;
}

.bkw-header__desktop-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.bkw-header__brand-nav {
	display: flex;
	align-items: center;
	gap: 48px;
}

.bkw-header__brand {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: inherit;
}

.bkw-header__brand-logo {
	display: inline-flex;
	flex-shrink: 0;
	line-height: 1;
}

.bkw-header__brand-logo svg,
.bkw-header__brand-logo img {
	display: block;
}

.bkw-header__brand-text {
	white-space: nowrap;
}

.bkw-header__nav {
	display: flex;
	align-items: center;
}

.bkw-header__nav-link {
	text-decoration: none;
	white-space: nowrap;
}

.bkw-header__mobile-row {
	display: none;
	align-items: center;
	justify-content: space-between;
}

.bkw-header__mobile-wallet {
	display: none;
	margin-top: 12px;
}

.bkw-header__hamburger,
.bkw-header__close {
	appearance: none;
	background: transparent;
	border: 0 none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	line-height: 1;
}

.bkw-header__hamburger {
	padding: 8px;
}

.bkw-header__close {
	padding: 10px;
}

.bkw-header__hamburger svg,
.bkw-header__close svg {
	display: block;
}

@media (max-width: 1024px) {
	.bkw-header__desktop-row {
		display: none;
	}

	.bkw-header__mobile-row {
		display: flex;
	}

	.bkw-header__mobile-wallet {
		display: block;
	}
}

/* --- پنل کشویی موبایل ------------------------------------------------ */

.bkw-header__panel-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.bkw-header__panel-overlay.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.bkw-header__panel {
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: 1001;
	box-sizing: border-box;
	transform: translateX(var(--bkw-panel-closed-x, 100%));
	transition: transform 0.3s ease;
}

.bkw-header__panel.is-open {
	transform: translateX(0);
}

.bkw-header__panel-content {
	display: flex;
	flex-direction: column;
	gap: 28px;
	height: 100%;
	overflow-y: auto;
	box-sizing: border-box;
	padding: 12px 20px 32px;
}

.bkw-header__panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	flex-shrink: 0;
}

.bkw-header__user-card {
	display: flex;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	padding: 16px;
	flex-shrink: 0;
}

.bkw-header__user-card-stack {
	display: flex;
	flex-direction: column;
	/* در ستون rtl، flex-start فیزیکاً راست است، نه چپ — رجوع کن به
	   یادداشت مشابه در Widgets\Section_Title::register_layout_controls() */
	align-items: flex-start;
	gap: 4px;
	flex: 1 1 0;
	min-width: 0;
	text-align: right;
}

.bkw-header__user-card-name,
.bkw-header__user-card-balance {
	margin: 0;
	width: 100%;
	white-space: nowrap;
}

.bkw-header__nav-stack {
	display: flex;
	flex-direction: column;
	width: 100%;
	flex-shrink: 0;
}

.bkw-header__nav-row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	box-sizing: border-box;
	padding: 12px 16px;
	text-decoration: none;
	cursor: pointer;
}

.bkw-header__nav-badge {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	box-sizing: border-box;
	border-radius: 8px;
	border: 1px solid #eaded6;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bkw-header__nav-badge svg {
	display: block;
	width: 18px;
	height: 18px;
}

.bkw-header__nav-label {
	flex: 1 1 0;
	min-width: 0;
	text-align: right;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bkw-header__nav-chevron {
	flex-shrink: 0;
	display: inline-flex;
	line-height: 1;
}

.bkw-header__nav-chevron svg {
	display: block;
	width: 16px;
	height: 16px;
}

.bkw-header__panel-footer-zone {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	flex-shrink: 0;
}

.bkw-header__logout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
	padding: 12px;
	text-decoration: none;
	cursor: pointer;
	background: transparent;
}

.bkw-header__logout-button svg {
	display: block;
}

.bkw-header__panel-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	text-align: center;
	width: 100%;
}

.bkw-header__panel-footer-line1,
.bkw-header__panel-footer-line2 {
	margin: 0;
}

.bkw-header__panel-footer-line1 {
	font-size: 10px;
	font-weight: 500;
}

.bkw-header__panel-footer-line2 {
	font-size: 9px;
}

/* قفل اسکرول پس‌زمینه وقتی پنل بازست (assets/js/bakery-header.js) */
html.bkw-panel-open {
	overflow: hidden;
}

/*
 * ویجت login: کارت دومرحله‌ای (کد ملی+موبایل → کد تأیید). هر دو مرحله
 * همیشه در DOM هستند؛ فقط یکی با ویژگی HTML `hidden` مخفی است —
 * assets/js/bakery-login.js با تغییر همین ویژگی بین‌شان جابه‌جا می‌کند،
 * بدون هیچ درخواست شبکه (این ویجت فعلاً فقط ظاهری است).
 *
 * دکمهٔ اصلی هر مرحله دو برچسب دارد (کامل/کوتاه) که یکی با یک
 * بریک‌پوینت ثابت پنهان می‌شود — دقیقاً همان تفاوت متن دسکتاپ/موبایل
 * رفرنس فیگما («ورود به حساب کاربری» ↔ «ورود»)، بدون دو دکمهٔ جدا.
 */
/*
 * ریست تهاجمی روی همهٔ فرزندهای .bkw-login: تم/کیت پیش‌فرض المنتور
 * معمولاً یک استایل عمومی برای input/textarea/button/select کل سایت
 * تعریف می‌کند (بردر، رادیوس، پدینگ) که چون سلکتورش هم‌تخصص با CSS
 * همین افزونه است، صرفاً به‌خاطر ترتیب لود ممکن است آن را رد کند. این
 * قانون‌ها روی تک‌تک عنصرهای فرم داخل ویجت با !important قفل می‌شوند
 * تا صرفاً کنترل‌های خودِ این ویجت (که همه‌شان روی همین سلکتورها inline
 * ست می‌شوند) واقعاً همیشه برنده باشند.
 */
.bkw-login,
.bkw-login *,
.bkw-login *::before,
.bkw-login *::after {
	box-sizing: border-box;
}

.bkw-login {
	width: 100%;
	position: relative;
}

.bkw-login__card {
	box-sizing: border-box !important;
	width: 100%;
	background-clip: padding-box !important;
	position: relative;
	z-index: 1;
}

/*
 * پس‌زمینهٔ صفحه (اختیاری، پیش‌فرض خاموش — رجوع کن به
 * Widgets\Login::register_page_background_controls). حالت تمام‌صفحه
 * با position:fixed پشت کل ویوپورت را می‌پوشاند (برای وقتی این ویجت
 * خودش کل «صفحهٔ ورود» است)؛ بدون آن، فقط پشت خودِ ویجت را می‌پوشاند.
 */
.bkw-login__backdrop,
.bkw-login__backdrop-overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.bkw-login--full-bleed .bkw-login__backdrop,
.bkw-login--full-bleed .bkw-login__backdrop-overlay {
	position: fixed;
}

.bkw-login--full-bleed {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding-top: 24px;
	padding-bottom: 24px;
}

.bkw-login__backdrop {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transform: scale(1.05);
}

.bkw-login__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
}

.bkw-login__step[hidden] {
	display: none;
}

.bkw-login__brand-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.bkw-login__brand-logo {
	display: inline-flex;
	line-height: 1;
}

.bkw-login__brand-logo svg,
.bkw-login__brand-logo img {
	display: block;
}

.bkw-login__brand-name,
.bkw-login__brand-subtitle {
	margin: 0;
	text-align: center;
	white-space: nowrap;
}

.bkw-login__divider {
	width: 100%;
	flex-shrink: 0;
}

.bkw-login__step-heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 100%;
	text-align: center;
}

.bkw-login__step-title,
.bkw-login__step-description {
	margin: 0;
	width: 100%;
}

.bkw-login__fields {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
}

.bkw-login__field {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	width: 100%;
}

.bkw-login__label {
	display: block;
	width: 100%;
	text-align: right;
}

/*
 * .bkw-login__input-wrap خودِ کادر قابل‌مشاهده است (بردر/پس‌زمینه/رادیوس
 * از کنترل‌های تب استایل می‌آید)؛ input واقعی داخلش کاملاً بی‌قاب است.
 * چون استایل پیش‌فرض تم/کیت المنتور معمولاً مستقیم روی input[type=text]
 * می‌نشیند (نه یک کلاس)، این ریست‌ها !important دارند تا هر ترتیب لودی
 * که باشد، ظاهر نهایی همیشه دست کنترل‌های همین ویجت بماند.
 */
.bkw-login__input-wrap {
	display: flex !important;
	align-items: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box !important;
	margin: 0 !important;
}

.bkw-login__input-icon {
	flex-shrink: 0;
	display: inline-flex;
	line-height: 1;
}

.bkw-login__input-icon svg {
	display: block;
}

.bkw-login__input {
	flex: 1 1 0;
	min-width: 0;
	width: 100% !important;
	height: auto !important;
	border: 0 none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: right;
	direction: rtl;
	font: inherit !important;
	line-height: normal;
	-webkit-appearance: none;
	appearance: none;
}

.bkw-login__input:focus {
	outline: 0 none !important;
	box-shadow: none !important;
}

.bkw-login__submit {
	-webkit-appearance: none;
	appearance: none;
	border: 0 none !important;
	cursor: pointer;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box !important;
	margin: 0 !important;
	font: inherit;
	line-height: normal;
	text-decoration: none !important;
}

.bkw-login__submit-text-short {
	display: none;
}

.bkw-login__footer-note {
	margin: 0;
	text-align: center;
	width: 100%;
}

/*
 * پیام «این شماره ثبت نشده» (Widgets\Login::render_step1) — هیچ رفرنس
 * فیگمایی ندارد چون تا وقتی Mobile_Login وصل نشده بود اصلاً چنین
 * حالتی وجود نداشت؛ رنگ/تایپوگرافی از یادداشت پایین فرم مجاور خودش
 * پیروی می‌کند تا با بقیهٔ فرم هم‌خانواده بماند، فقط رنگش هشداردهنده است.
 */
.bkw-login__field-error {
	margin: 0;
	text-align: center;
	width: 100%;
	color: #c0392b;
	font-size: 13px;
}

.bkw-login__field-error[hidden] {
	display: none;
}

.bkw-login__edit-number-row {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 4px;
	width: 100%;
}

.bkw-login__edit-number {
	-webkit-appearance: none;
	appearance: none;
	background: transparent !important;
	border: 0 none !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 0 !important;
	cursor: pointer;
	text-decoration: underline;
	font: inherit;
	line-height: normal;
}

.bkw-login__edit-number-value {
	white-space: nowrap;
}

.bkw-login__otp-row {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.bkw-login__otp-input {
	box-sizing: border-box !important;
	text-align: center;
	border-style: solid !important;
	flex-shrink: 0;
	margin: 0 !important;
	font: inherit !important;
	line-height: normal;
	-webkit-appearance: none;
	appearance: none;
}

.bkw-login__otp-input:focus {
	outline: 0 none !important;
	box-shadow: none !important;
}

.bkw-login__timer-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.bkw-login__countdown {
	display: flex;
	align-items: center;
	gap: 6px;
}

.bkw-login__countdown-icon {
	display: inline-flex;
	line-height: 1;
}

.bkw-login__countdown-icon svg {
	display: block;
}

.bkw-login__resend {
	-webkit-appearance: none;
	appearance: none;
	background: transparent !important;
	border: 0 none !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 0 !important;
	font: inherit;
	line-height: normal;
}

.bkw-login__resend:disabled {
	cursor: default;
}

.bkw-login__resend:not(:disabled) {
	cursor: pointer;
}

.bkw-login__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 16px;
	width: 100%;
}

@media (max-width: 600px) {
	.bkw-login__submit-text-full {
		display: none;
	}

	.bkw-login__submit-text-short {
		display: inline;
	}
}

/*
 * ویجت terms-modal: پردهٔ تیرهٔ اجباری + کارت قوانین. برخلاف پنل هدر،
 * این عمداً هیچ دکمهٔ بستن، کلیک-روی-پرده یا کلید Escape برای بستن
 * ندارد — تنها راه، چک‌کردن چک‌باکس و کلیک روی دکمهٔ تأیید است
 * (assets/js/bakery-terms-modal.js). پیش‌فرض نمایش «باز» است (نه
 * پنهان) تا بدون جاوااسکریپت هم قفل بماند؛ اسکریپت inline داخل
 * Widgets\Terms_Modal::render() برای کاربری که قبلاً پذیرفته، پیش از
 * رنگ‌آمیزی صفحه آن را همگام پنهان می‌کند تا فلش نزند.
 *
 * بدنهٔ بندهای قوانین با یک تکنیک استاندارد فلکس (بخش‌های ثابت
 * shrink:0 + یک بخش flex:1 با overflow-y:auto) اسکرول می‌شود — نه با
 * ارتفاع پیکسلی ثابتِ رفرنس فیگما، چون آن عدد فقط برای همان تعداد بند
 * مشخص درست است و با هر تعداد بند دیگری (که ادمین از ریپیتر اضافه/کم
 * می‌کند) می‌شکند؛ این روش با هر مقدار محتوا خودش را تنظیم می‌کند.
 */
.bkw-terms-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
}

/*
 * حالت تعبیه‌شده در Login با ویژگی HTML `hidden` رندر می‌شود (نه یک
 * کلاس)؛ چون خودِ این سلکتور بالا `display: flex` دارد و با ویژگی
 * `hidden` هم‌ارزش است (هر دو روی خودِ عنصر)، بدون `!important` بارگذاری
 * کدام یکی برنده می‌شود قطعی نیست — اینجا صریحاً تضمین می‌شود که پنهان
 * بماند تا وقتی assets/js/bakery-login.js آن را نمایان کند.
 */
.bkw-terms-modal-overlay[hidden] {
	display: none !important;
}


.bkw-terms-modal,
.bkw-terms-modal * {
	box-sizing: border-box;
}

.bkw-terms-modal {
	display: flex;
	flex-direction: column;
	min-height: 0;
	max-height: 100%;
	position: relative;
}

.bkw-terms-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	flex-shrink: 0;
}

.bkw-terms-modal__header-text {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	flex: 1 1 0;
	min-width: 0;
	text-align: right;
}

.bkw-terms-modal__title,
.bkw-terms-modal__subtitle {
	margin: 0;
	width: 100%;
}

.bkw-terms-modal__icon {
	flex-shrink: 0;
	display: inline-flex;
	line-height: 1;
}

.bkw-terms-modal__icon svg,
.bkw-terms-modal__icon img {
	display: block;
}

.bkw-terms-modal__divider {
	width: 100%;
	height: 1px !important;
	flex-shrink: 0;
}

.bkw-terms-modal__divider--footer {
	display: none;
}

.bkw-terms-modal__body {
	display: flex;
	flex-direction: column;
	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.bkw-terms-modal__term {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	width: 100%;
	flex-shrink: 0;
	padding-bottom: 12px;
	border-bottom: 1px solid;
}

.bkw-terms-modal__term-row-header {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	width: 100%;
}

.bkw-terms-modal__term-title {
	text-align: right;
}

.bkw-terms-modal__term-dot {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.bkw-terms-modal__term-body {
	margin: 0;
	width: 100%;
	text-align: right;
	line-height: 1.6;
}

.bkw-terms-modal__acceptance {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	width: 100%;
	flex-shrink: 0;
}

.bkw-terms-modal__checkbox-label {
	cursor: pointer;
	text-align: right;
}

.bkw-terms-modal__checkbox-wrap {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
}

.bkw-terms-modal__checkbox {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.bkw-terms-modal__checkbox-box {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid;
	background: transparent;
	pointer-events: none;
}

.bkw-terms-modal__checkbox-box svg {
	display: block;
	width: 60%;
	height: 60%;
	opacity: 0;
	transition: opacity 0.1s ease;
}

.bkw-terms-modal__checkbox:checked ~ .bkw-terms-modal__checkbox-box svg {
	opacity: 1;
}

.bkw-terms-modal__checkbox:focus-visible ~ .bkw-terms-modal__checkbox-box {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

.bkw-terms-modal__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	flex-shrink: 0;
}

.bkw-terms-modal__accept {
	-webkit-appearance: none;
	appearance: none;
	border: 0 none !important;
	box-shadow: none;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font: inherit;
	line-height: normal;
	margin: 0 !important;
}

.bkw-terms-modal__accept:disabled {
	cursor: not-allowed;
}

.bkw-terms-modal__accept:not(:disabled) {
	cursor: pointer;
}

/* در موبایل، رفرنس فیگما یک خط جداکننده هم بین بدنه و ردیف پذیرش دارد */
@media (max-width: 767px) {
	.bkw-terms-modal__divider--footer {
		display: block;
	}
}

/*
 * ویجت add-to-cart: در هر لحظه فقط یکی از دو فرزند مستقیم نمایش داده
 * می‌شود — دکمهٔ افزودن (.bkw-atc__btn--add) یا محفظهٔ تعداد (.bkw-atc__qty)
 * — و جاوااسکریپت با toggle کردن `data-state` روی ریشه سوییچ می‌کند؛
 * حالت ناموجود اصلاً این دو را رندر نمی‌کند، فقط دکمهٔ غیرفعال
 * .bkw-atc__btn--oos را دارد.
 */
.bkw-atc {
	--bkw-atc-icon-size: 14px;
	--bkw-atc-step-size: 28px;
	--bkw-atc-loading-bg: rgba(255, 255, 255, 0.45);
	--bkw-atc-loading-blur: 4px;
	--bkw-atc-loading-duration: 180ms;
	display: inline-flex;
}

.bkw-atc[data-state="add"] .bkw-atc__qty,
.bkw-atc[data-state="qty"] .bkw-atc__btn--add {
	display: none;
}

.bkw-atc__notice {
	padding: 16px;
	border: 1px dashed #c00;
	color: #c00;
	font-size: 13px;
}

.bkw-atc__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	font: inherit;
}

.bkw-atc__btn--oos {
	cursor: default;
}

.bkw-atc__icon {
	display: inline-flex;
	flex-shrink: 0;
	width: var(--bkw-atc-icon-size);
	height: var(--bkw-atc-icon-size);
	line-height: 0;
}

.bkw-atc__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.bkw-atc__qty {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.bkw-atc__step {
	flex-shrink: 0;
	width: var(--bkw-atc-step-size);
	height: var(--bkw-atc-step-size);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	font: inherit;
	line-height: 1;
	transition: background-color 0.15s ease;
}

.bkw-atc__step:not(:disabled):hover {
	background-color: rgba(255, 255, 255, 0.4);
}

.bkw-atc__step:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.bkw-atc__count {
	min-width: 1.5em;
	text-align: center;
}

/*
 * لایهٔ «در حال انجام»: هر دو حالت تعاملی (دکمهٔ افزودن و محفظهٔ تعداد)
 * یک .bkw-atc__overlay مستقل دارند؛ جاوااسکریپت فقط کلاس is-loading را
 * روی ریشه می‌گذارد و opacity لایهٔ داخل عنصر در حال حاضر قابل مشاهده
 * (طبق data-state) به ۱ می‌رود — بدون هیچ منطق نمایش/پنهانی اضافه.
 */
.bkw-atc__overlay {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--bkw-atc-loading-bg);
	backdrop-filter: blur(var(--bkw-atc-loading-blur));
	-webkit-backdrop-filter: blur(var(--bkw-atc-loading-blur));
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--bkw-atc-loading-duration) ease;
}

.bkw-atc__btn--add {
	position: relative;
}

.bkw-atc.is-loading .bkw-atc__overlay {
	opacity: 1;
}

.bkw-atc.is-loading button {
	pointer-events: none;
}

/*
 * ویجت cart-sidebar: پردهٔ تیرهٔ بلورشده (fixed inset:0) + پنل کشویی
 * تمام‌ارتفاع. باز/بسته‌شدن با toggle کلاس is-open روی هر دو انجام
 * می‌شود (assets/js/bakery-cart-sidebar.js) — دقیقاً همان الگوی پنل
 * کشویی موبایل ویجت Header (.bkw-header__panel-overlay/.bkw-header__panel).
 * جهت باز شدن (چپ/راست) و رنگ حاشیهٔ لبهٔ تماس با محتوا از کنترل
 * «جهت باز شدن» (تب استایل → پنل) با هم عوض می‌شوند تا حاشیه همیشه
 * روی لبهٔ درست بماند.
 */
.bkw-cart-sidebar {
	--bkw-cart-sidebar-blur: 8px;
}

.bkw-cart-sidebar__overlay {
	position: fixed;
	inset: 0;
	/* هم‌سطح .bkw-terms-modal-overlay: باید بالای هر چیز دیگری در صفحه
	 * (هدر چسبان، نوار ادمین، مینی‌سبدهای دیگر و ...) بنشیند، نه فقط
	 * بالای پنل موبایل هدر (که z-index پایین‌تر 1000/1001 دارد). */
	z-index: 100000;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	background-color: rgba(26, 19, 14, 0.8);
	backdrop-filter: blur(var(--bkw-cart-sidebar-blur));
	-webkit-backdrop-filter: blur(var(--bkw-cart-sidebar-blur));
	transition: opacity 0.25s ease;
}

.bkw-cart-sidebar__overlay.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.bkw-cart-sidebar__panel {
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: 100001;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow-y: auto;
	width: 500px;
	max-width: 100vw;
	padding: 24px;
	background-color: #efe6d5;
	/* فقط فالبک برای پیش از اعمال شدن CSS المنتور؛ کنترل «جهت باز شدن»
	 * (تب استایل) این حاشیه را با جهت واقعی هماهنگ می‌کند. پیش‌فرض
	 * «از چپ» است، پس زیرِ dir="rtl" لبهٔ تماس با محتوا سمت راست است
	 * (inline-start در rtl = راست). */
	border-inline-start: 1px solid #eaded6;
	transform: translateX(var(--bkw-cart-sidebar-closed-x, -100%));
	transition: transform 0.3s ease;
}

.bkw-cart-sidebar__panel.is-open {
	transform: translateX(0);
}

.bkw-cart-sidebar__top {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.bkw-cart-sidebar__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.bkw-cart-sidebar__title {
	margin: 0;
	color: #231912;
	font-size: 22px;
	font-weight: 900;
}

.bkw-cart-sidebar__close {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	appearance: none;
	cursor: pointer;
	box-sizing: border-box;
	line-height: 1;
	width: 40px;
	height: 40px;
	border-radius: 20px;
	background-color: #faf6f0;
	border: 1px solid #faf6f0;
}

.bkw-cart-sidebar__close svg {
	display: block;
	width: 40px;
	height: 40px;
}

.bkw-cart-sidebar__credit {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #7d7065;
}

.bkw-cart-sidebar__credit-label,
.bkw-cart-sidebar__credit-value,
.bkw-cart-sidebar__total-label,
.bkw-cart-sidebar__total-value,
.bkw-cart-sidebar__item-name,
.bkw-cart-sidebar__item-price {
	margin: 0;
}

.bkw-cart-sidebar__credit-value,
.bkw-cart-sidebar__total-value {
	font-size: 20px;
	font-weight: 800;
}

.bkw-cart-sidebar__credit-label,
.bkw-cart-sidebar__total-label {
	font-size: 16px;
	font-weight: 600;
}

.bkw-cart-sidebar__total-value {
	color: #231912;
}

.bkw-cart-sidebar__total-label {
	color: #7d7065;
}

.bkw-cart-sidebar__divider {
	/* رفرنس فیگما این خط را با یک تصویر SVG جدا رندر می‌کند، نه با
	 * همان رنگ حاشیهٔ پنل (#eaded6) — رنگ واقعی‌اش #C3AB9B با opacity
	 * ۰.۵ است. */
	border-top: 1px solid rgba(195, 171, 155, 0.5);
}

.bkw-cart-sidebar__items {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.bkw-cart-sidebar__empty {
	margin: 0;
	color: #7d7065;
	text-align: center;
}

.bkw-cart-sidebar__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 8px;
}

.bkw-cart-sidebar__item-right {
	display: flex;
	align-items: center;
	gap: 16px;
}

.bkw-cart-sidebar__item-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	width: 64px;
	height: 64px;
	border-radius: 18px;
	background-color: #ffffff;
}

.bkw-cart-sidebar__item-icon img {
	width: 50%;
	height: 50%;
	object-fit: contain;
	display: block;
}

.bkw-cart-sidebar__item-details {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	text-align: right;
}

.bkw-cart-sidebar__item-name {
	color: #231912;
	font-size: 16px;
	font-weight: 700;
}

.bkw-cart-sidebar__item-price {
	color: #7d7065;
	font-size: 14px;
	font-weight: 500;
}

.bkw-cart-sidebar__qty {
	position: relative;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 8px 12px;
	border-radius: 16px;
	background-color: #ffffff;
}

/*
 * لایهٔ «در حال انجام» کنترل تعداد هر ردیف — دقیقاً همان مفهوم بلورِ
 * سفیدِ کم‌رنگ ویجت افزودن به سبد (.bkw-atc__overlay)؛ جاوااسکریپت
 * (assets/js/bakery-cart-sidebar.js) فقط کلاس is-loading را روی همین
 * ردیف [data-bkw-cart-item] می‌گذارد تا کاربر قبل از رسیدن پاسخ AJAX
 * دوباره کلیک نکند.
 */
.bkw-cart-sidebar__qty-overlay {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--bkw-cart-sidebar-loading-bg, rgba(255, 255, 255, 0.45));
	backdrop-filter: blur(var(--bkw-cart-sidebar-loading-blur, 4px));
	-webkit-backdrop-filter: blur(var(--bkw-cart-sidebar-loading-blur, 4px));
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--bkw-cart-sidebar-loading-duration, 180ms) ease;
}

[data-bkw-cart-item].is-loading .bkw-cart-sidebar__qty-overlay {
	opacity: 1;
}

[data-bkw-cart-item].is-loading .bkw-cart-sidebar__step {
	pointer-events: none;
}

.bkw-cart-sidebar__step {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	appearance: none;
	border: none;
	background: transparent;
	cursor: pointer;
	font: inherit;
	line-height: 1;
	padding: 0;
	color: #231912;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	transition: background-color 0.15s ease;
}

.bkw-cart-sidebar__step svg {
	display: block;
	width: 12px;
	height: 12px;
}

.bkw-cart-sidebar__step:not(:disabled):hover {
	background-color: rgba(35, 25, 18, 0.08);
}

.bkw-cart-sidebar__step:disabled {
	cursor: not-allowed;
	opacity: 0.4;
}

.bkw-cart-sidebar__qty-value {
	min-width: 1em;
	text-align: center;
	color: #231912;
	font-size: 15px;
	font-weight: 600;
}

.bkw-cart-sidebar__footer {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.bkw-cart-sidebar__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.bkw-cart-sidebar__checkout {
	appearance: none;
	border: none;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font: inherit;
	box-sizing: border-box;
	height: 56px;
	border-radius: 16px;
	background-color: #366874;
	color: #ffffff;
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
}

/*
 * حالت «در حال ثبت»: دکمه تا آمدن پاسخ قفل است (دو کلیک پشت‌هم نباید دو
 * سفارش بسازد) و متنش عوض می‌شود. هر دو متن همیشه در DOM هستند و فقط
 * یکی دیده می‌شود — همان الگوی دو متن دکمهٔ ویجت ورود.
 */
.bkw-cart-sidebar__checkout-pending {
	display: none;
}

.bkw-cart-sidebar__checkout.is-pending .bkw-cart-sidebar__checkout-label {
	display: none;
}

.bkw-cart-sidebar__checkout.is-pending .bkw-cart-sidebar__checkout-pending {
	display: inline;
}

.bkw-cart-sidebar__checkout:disabled {
	cursor: default;
	opacity: 0.7;
}

.bkw-cart-sidebar__error {
	margin: 0 0 12px;
	color: #b3261e;
	font-size: 14px;
	line-height: 1.7;
	text-align: center;
}

.bkw-cart-sidebar__error[hidden],
.bkw-cart-sidebar__success[hidden] {
	display: none !important;
}

/*
 * تأیید سفارش جای کل محتوای پنل را می‌گیرد، نه اینکه زیرش اضافه شود:
 * بعد از پرداخت، سبد واقعاً خالی شده و نشان‌دادن «سبد خرید شما خالی
 * است» درست زیر پیام موفقیت، دقیقاً همان لحظه‌ای‌ست که کاربر باید
 * مطمئن باشد سفارشش ثبت شده.
 */
.bkw-cart-sidebar.is-placed .bkw-cart-sidebar__top,
.bkw-cart-sidebar.is-placed .bkw-cart-sidebar__footer {
	display: none;
}

.bkw-cart-sidebar__success {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex: 1 1 auto;
	padding: 32px 24px;
	text-align: center;
}

.bkw-cart-sidebar__success-title {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	color: #231912;
}

.bkw-cart-sidebar__success-text,
.bkw-cart-sidebar__success-order {
	margin: 0;
	font-size: 14px;
	line-height: 1.9;
	color: #7d7065;
}

.bkw-cart-sidebar__success-close {
	appearance: none;
	border: none;
	cursor: pointer;
	font: inherit;
	margin-top: 12px;
	padding: 12px 32px;
	border-radius: 16px;
	background-color: #366874;
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
}

/*
 * مودال تأیید سفارش — بین کلیک روی «ثبت سفارش» و کسر واقعی اعتبار.
 *
 * بالاتر از خودِ سایدبار می‌نشیند (پنل ۱۰۰۰۰۱ است) چون باید روی آن
 * بیاید، نه داخلش. پرده بلور شیشه‌ای دارد؛ backdrop-filter در مرورگرهای
 * قدیمی نادیده گرفته می‌شود و فقط رنگ نیمه‌شفاف می‌ماند — که خودش
 * به‌تنهایی خواناست، پس تنزل بی‌خطر است.
 */
.bkw-cart-confirm {
	position: fixed;
	inset: 0;
	z-index: 100002;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
	background-color: rgba(26, 19, 14, 0.45);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.bkw-cart-confirm[hidden] {
	display: none !important;
}

.bkw-cart-confirm__card,
.bkw-cart-confirm__card * {
	box-sizing: border-box;
}

.bkw-cart-confirm__card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: center;
	max-width: 100%;
	max-height: 100%;
	overflow-y: auto;
	width: 450px;
	gap: 32px;
	padding: 40px;
	border-radius: 32px;
	background-color: #fcf9f5;
	border: 1px solid #eaded6;
	box-shadow: 0 24px 24px rgba(26, 19, 14, 0.25);
}

.bkw-cart-confirm__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.bkw-cart-confirm__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 1;
}

/*
 * دایرهٔ پس‌زمینه داخل خودِ فایل SVG است (خروجی فیگما: rect با rx=36 و
 * بعد مسیرهای آیکون رویش)، نه یک پس‌زمینهٔ CSS. برای همین اینجا فقط
 * اندازهٔ کل SVG تنظیم می‌شود و رنگ دایره/آیکون از تب استایل مستقیم روی
 * rect و path می‌نشیند.
 */
.bkw-cart-confirm__icon svg,
.bkw-cart-confirm__icon img {
	display: block;
	width: 72px;
	height: 72px;
}

.bkw-cart-confirm__title {
	margin: 0;
	color: #8c583a;
	font-size: 24px;
	font-weight: 900;
	line-height: 1.4;
}

.bkw-cart-confirm__text {
	margin: 0;
	color: #231912;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}

/*
 * ترتیب DOM «تأیید» بعد «انصراف» است و این ردیف زیر dir="rtl" فرزند اول
 * را سمت راست می‌گذارد — همان چیدمان دیزاین. (خروجی JSX فیگما ترتیب
 * برعکس دارد؛ اسکرین‌شات مرجع است، نه ترتیب خام JSX.) هر دو دکمه
 * هم‌عرض‌اند تا هیچ‌کدام با پهنای متنش برجسته‌تر از دیگری نشود.
 */
.bkw-cart-confirm__actions {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 16px;
	width: 100%;
}

.bkw-cart-confirm__actions button {
	appearance: none;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font: inherit;
	height: 52px;
	border: none;
	border-radius: 16px;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}

.bkw-cart-confirm__accept {
	background-color: #8c583a;
	color: #ffffff;
}

.bkw-cart-confirm__cancel {
	background-color: #ffffff;
	color: #7d7065;
	border: 1.5px solid #eaded6;
}

.bkw-cart-confirm__actions button:disabled {
	cursor: default;
	opacity: 0.7;
}

.bkw-cart-confirm__accept-pending {
	display: none;
}

.bkw-cart-confirm__accept.is-pending .bkw-cart-confirm__accept-label {
	display: none;
}

.bkw-cart-confirm__accept.is-pending .bkw-cart-confirm__accept-pending {
	display: inline;
}

.bkw-cart-confirm .bkw-cart-sidebar__error {
	margin: 0;
}

/*
 * فالبک تضمینی برای موبایل: کنترل «عرض» (تب استایل → پنل) با
 * max-width:100vw قاعدتاً همین را می‌دهد، اما اگر به هر دلیلی CSS
 * تولیدشدهٔ المنتور با تأخیر بارگذاری شود (مثلاً کش قدیمی)، این قانون
 * !important — که فقط زیر بریک‌پوینت موبایل خودِ المنتور فعال است، نه
 * همیشه — عرض تمام‌صفحه را در هر صورت تضمین می‌کند.
 */
@media (max-width: 767px) {
	.bkw-cart-sidebar__panel {
		width: 100vw !important;
	}
}

/*
 * ویجت سابقهٔ سفارش‌ها.
 *
 * ترتیب DOM هر ردیف عمداً برعکس ترتیب خروجی JSX فیگماست: آن فریم چیدمان
 * LTR دارد، پس ترتیبش «چپ‌به‌راستِ دیده‌شده» است، در حالی که این‌جا زیر
 * dir="rtl" فرزندِ اولِ یک ردیف فلکس سمت راست می‌نشیند. پس بلوک شمارهٔ
 * سفارش اول می‌آید (تا راست بنشیند) و مبلغ آخر (تا چپ بیفتد) — همان
 * چیزی که در رفرنس دیده می‌شود.
 *
 * جای «مراحل سفارش» فعلاً خالی است و فقط با flex فاصلهٔ وسط را نگه
 * می‌دارد؛ وقتی پر شود، هیچ‌کدام از قواعد این‌جا لازم نیست عوض شود.
 */
.bkw-order-history {
	display: flex;
	flex-direction: column;
	gap: 20px;
	box-sizing: border-box;
}

.bkw-order-history *,
.bkw-order-history *::before,
.bkw-order-history *::after {
	box-sizing: border-box;
}

.bkw-order-history__card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	padding: 24px;
	border-radius: 24px;
	background-color: #ffffff;
	border: 1px solid #eaded6;
	box-shadow: 0 4px 8px rgba(35, 25, 18, 0.03);
}

.bkw-order-history__row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
}

.bkw-order-history__meta {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 32px;
	min-width: 0;
}

.bkw-order-history__order,
.bkw-order-history__items-block {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	/* زیر dir="rtl"، flex-start یعنی راست — همان تراز رفرنس */
	align-items: flex-start;
	text-align: right;
}

.bkw-order-history__caption {
	margin: 0;
	color: #a8968d;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
}

.bkw-order-history__number {
	margin: 0;
	color: #231912;
	font-size: 18px;
	font-weight: 900;
	white-space: nowrap;
}

.bkw-order-history__number-value {
	color: #8c583a;
}

.bkw-order-history__date {
	margin: 0;
	color: #a8968d;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
}

/* متن بلندتر از عرض مجاز با «…» کوتاه می‌شود، دقیقاً مثل رفرنس */
.bkw-order-history__items {
	margin: 0;
	color: #615249;
	font-size: 15px;
	font-weight: 700;
	max-width: 400px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bkw-order-history__stepper {
	flex: 1 1 auto;
	height: 50px;
	min-width: 0;
}

.bkw-order-history__price {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 120px;
	flex-shrink: 0;
	/* زیر dir="rtl"، flex-end یعنی چپ */
	align-items: flex-end;
	text-align: left;
}

.bkw-order-history__price-row {
	margin: 0;
	display: flex;
	flex-direction: row;
	align-items: baseline;
	gap: 4px;
	white-space: nowrap;
}

.bkw-order-history__amount {
	color: #231912;
	font-size: 18px;
	font-weight: 900;
}

.bkw-order-history__currency {
	color: #c59b62;
	font-size: 13px;
	font-weight: 500;
}

.bkw-order-history__divider {
	width: 100%;
	height: 1px;
	flex-shrink: 0;
	background-color: #eaded6;
}

.bkw-order-history__cancel-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 100%;
}

.bkw-order-history__cancel {
	appearance: none;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font: inherit;
	border: none;
	padding: 10px 16px;
	border-radius: 100px;
	background-color: #ba291e;
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
}

.bkw-order-history__cancel:disabled {
	cursor: default;
	opacity: 0.7;
}

.bkw-order-history__cancel-note {
	margin: 0;
	width: 100%;
	text-align: center;
	color: #ba291e;
	font-size: 10px;
	font-weight: 500;
	line-height: 1.8;
}

.bkw-order-history__empty {
	margin: 0;
	padding: 32px 24px;
	text-align: center;
	color: #615249;
	font-size: 15px;
	font-weight: 700;
	border-radius: 24px;
	background-color: #ffffff;
	border: 1px solid #eaded6;
}

/* --- صفحه‌بندی ------------------------------------------------------- */

.bkw-order-history__pagination {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
	margin-top: 12px;
}

.bkw-order-history__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border-radius: 100px;
	background-color: #ffffff;
	border: 1px solid #eaded6;
	color: #615249;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.bkw-order-history__page.is-current {
	background-color: #ba291e;
	border-color: #ba291e;
	color: #ffffff;
	cursor: default;
}

.bkw-order-history__page.is-disabled {
	opacity: 0.45;
	cursor: default;
}

/*
 * زیر بریک‌پوینت موبایل، ردیف افقی کارت جا نمی‌شود: شمارهٔ سفارش،
 * اقلام و مبلغ زیر هم می‌روند و مبلغ به لبهٔ راست برمی‌گردد تا با بقیه
 * هم‌تراز بماند.
 */
@media (max-width: 767px) {
	.bkw-order-history__row,
	.bkw-order-history__meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.bkw-order-history__price {
		width: auto;
		align-items: flex-start;
		text-align: right;
	}

	.bkw-order-history__items {
		white-space: normal;
	}
}