/* ==========================================================================
   صفحه‌ی حساب کاربری (/my-account/)
   - بدون override قالب: خودِ ساختار استاندارد ووکامرس (nav.woocommerce-MyAccount-navigation
   + div.woocommerce-MyAccount-content، هر دو فرزند مستقیم div.woocommerce) با
   CSS Grid به چیدمان دوستونه تبدیل می‌شود - دقیقاً همان الگوی cart/checkout.
   - همه‌ی رنگ‌ها/فاصله‌ها از همان توکن‌های موجود (پالت‌ها + حالت شب/روز رایگان).
   ========================================================================== */

.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 32px;
	align-items: start;
	margin: 24px 0 40px;
}

/* ---------- نوار ناوبری ---------- */
.woocommerce-MyAccount-navigation {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md, var(--radius-sm));
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	position: sticky;
	top: 20px;
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation-link { border-bottom: 1px solid var(--color-border); }
.woocommerce-MyAccount-navigation-link:last-child { border-bottom: none; }
.woocommerce-MyAccount-navigation-link a {
	display: block;
	padding: 14px 18px;
	color: var(--color-text-primary);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border-inline-start: 3px solid transparent;
}
.woocommerce-MyAccount-navigation-link a:hover { background: var(--color-background); }
.woocommerce-MyAccount-navigation-link.is-active a {
	border-inline-start-color: var(--color-primary);
	background: var(--color-background);
	color: var(--color-primary);
}
.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--color-error); }

/* ---------- محتوا ---------- */
.woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-MyAccount-content > p:first-child { font-size: 15px; line-height: 2; }

/* ---------- داشبورد / پیام خوش‌آمد ---------- */
.woocommerce-MyAccount-content mark { background: none; color: var(--color-primary); font-weight: 700; }

/* ---------- جدول سفارش‌ها ---------- */
.woocommerce-orders-table__cell-order-status mark.order-status,
mark.order-status {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--radius-pill, 999px);
	background: var(--color-background);
	color: var(--color-text-secondary);
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
}
/* داخل جمله‌ی معرفیِ سفارش (my-account/view-order)، این نشان کنار متنی با فونت ۱۵px
   قرار می‌گیرد - همان سایز ۱۲px که برای سلول جمع‌وجورِ جدول سفارش‌ها مناسب است،
   این‌جا ریز به‌نظر می‌رسد؛ فقط همین حالت را بزرگ‌تر می‌کنیم، جدول دست‌نخورده می‌ماند. */
.woocommerce-MyAccount-content > p mark.order-status { font-size: 14px; }
mark.order-status.status-completed { background: var(--color-success-bg, var(--color-background)); color: var(--color-success, var(--color-primary)); }
mark.order-status.status-processing { background: var(--color-primary-bg, var(--color-background)); color: var(--color-primary); }
mark.order-status.status-cancelled,
mark.order-status.status-failed,
mark.order-status.status-refunded { background: var(--color-error-bg, var(--color-background)); color: var(--color-error); }
/* رفع باگ: این دو وضعیت (در انتظار بررسی/پرداخت) قبلاً پوشش داده نشده بودند و با
   رنگ خاکستریِ پیش‌فرض نمایش داده می‌شدند - طبق درخواست کارفرما، با رنگ اصلیِ پالت
   (همان رنگی که شماره‌ی سفارش/تاریخ دارند) هماهنگ می‌شوند. */
mark.order-status.status-pending,
mark.order-status.status-on-hold { background: var(--color-primary-bg, var(--color-background)); color: var(--color-primary); }

/* ---------- جزئیات یک سفارش ---------- */
.woocommerce-order-details,
.woocommerce-customer-details { margin-top: 32px; }
.woocommerce-order-details h2,
.woocommerce-customer-details h2 {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 16px;
}

/* جدولِ محصولات/جمع‌کل به شکل فاکتور: سرتیتر مشخص، ردیف‌های جدا با خط، ردیف جمع کل پررنگ. */
table.woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md, var(--radius-sm));
	overflow: hidden;
}
table.woocommerce-table--order-details thead th {
	background: var(--color-background);
	color: var(--color-text-secondary);
	font-size: 13px;
	font-weight: 700;
	text-align: right;
	padding: 12px 16px;
	border-bottom: 1px solid var(--color-border);
}
table.woocommerce-table--order-details tbody td,
table.woocommerce-table--order-details tfoot td,
table.woocommerce-table--order-details tfoot th {
	padding: 12px 16px;
	border-bottom: 1px solid var(--color-border);
	font-size: 14px;
}
table.woocommerce-table--order-details thead th:last-child,
table.woocommerce-table--order-details tbody td:last-child,
table.woocommerce-table--order-details tfoot td:last-child { text-align: left; }
table.woocommerce-table--order-details tfoot th {
	text-align: right;
	font-weight: 600;
	color: var(--color-text-secondary);
}
table.woocommerce-table--order-details tfoot tr:last-child td,
table.woocommerce-table--order-details tfoot tr:last-child th {
	border-bottom: none;
	font-weight: 700;
	font-size: 15.5px;
	color: var(--color-text-primary);
}

address {
	font-style: normal;
	line-height: 1.9;
	color: var(--color-text-secondary);
}

/* کارت «آدرس صورت‌حساب» در جزئیات سفارش - هم‌سطح با ظاهر جدول جزئیات سفارش */
.woocommerce-customer-details {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md, var(--radius-sm));
	padding: 20px;
}
.woocommerce-customer-details h2 { margin-bottom: 10px; }

/* کارت «بروزرسانی‌های سفارش» (یادداشت‌های سفارش برای مشتری) - قبلاً بدون هیچ استایلی
   بود؛ حالا هر یادداشت یک ردیف کارت‌مانند جدا با پس‌زمینه‌ی ملایم می‌گیرد. */
.woocommerce-OrderUpdates {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.woocommerce-OrderUpdate-inner {
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md, var(--radius-sm));
	padding: 14px 16px;
}
.woocommerce-OrderUpdate-meta {
	margin: 0 0 6px;
	font-size: 12.5px;
	color: var(--color-text-secondary);
}
.woocommerce-OrderUpdate-description p { margin: 0; font-size: 14px; line-height: 1.9; }
.woocommerce-columns--addresses {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}
.woocommerce-column--billing-address,
.woocommerce-column--shipping-address { flex: 1 1 240px; }

/* ---------- آدرس‌ها ---------- */
.woocommerce-Addresses {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.woocommerce-Address {
	flex: 1 1 260px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md, var(--radius-sm));
	padding: 20px;
}
.woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}
.woocommerce-Address-title h2 { font-size: 15px; font-weight: 700; margin: 0; border: none; padding: 0; }
.woocommerce-Address address { margin: 0; }

/* رفع باگ (مورد ۱): جزئیات تنوع محصول («سایز: کوچک» و مشابه) زیر نام محصول در
   جدول جزئیاتِ یک سفارش (my-account/view-order) هم زائد است - همان استدلالِ قبلی
   برای Checkout؛ چون این صفحه از یک مسیر رندر متفاوت (آیتم‌های سفارشِ ثبت‌شده، نه
   سبد خرید) استفاده می‌کند، فیلتر PHP قبلی این‌جا اثر نداشت - راه‌حل مستقیم CSS. */
.woocommerce-order-details table.woocommerce-table--order-details .wc-item-meta { display: none; }

/* ---------- فاصله‌ی دکمه‌ی «ذخیره‌ی تغییرات» از فیلدهای رمز عبور (مورد ۲) ---------- */
.woocommerce-EditAccountForm button[type="submit"],
.woocommerce-Addresses form button[type="submit"] { margin-top: 8px; }

/* ---------- موبایل: ناوبری و فاصله‌گذاری ---------- */
@media (max-width: 768px) {
	.woocommerce-account .woocommerce {
		grid-template-columns: 1fr;
		margin: 16px 0 32px;
	}
	/* مورد ۲ (تأیید کارفرما): ناوبری موبایل به‌جای تب افقیِ اسکرول‌دار، دقیقاً مثل
	   دسکتاپ/تبلت یک لیست عمودی زیر هم می‌ماند (مثل فلتسام) - چیزی جز لغو Sticky
	   لازم نیست چون قانون پایه (نوار = کارت با آیتم‌های block و بوردر پایین) از
	   قبل دقیقاً همین شکل عمودی را می‌سازد. */
	.woocommerce-MyAccount-navigation { position: static; }

	/* مورد ۳ (طبق دستور کارفرما): فاصله‌ی بیشتر بین ناوبری و محتوا، فقط موبایل. */
	.woocommerce-MyAccount-content { margin-top: 30px; }

	.woocommerce-columns--addresses,
	.woocommerce-Addresses { flex-direction: column; }

	/* مورد ۱: علت واقعیِ خارج‌شدنِ دکمه‌ی «نمایش» از صفحه، پدینگِ خودِ دکمه نبود؛
	   جدول سفارش‌ها/دانلودها (بر خلاف بقیه‌ی جدول‌های سایت) هیچ اسکرول افقیِ
	   مستقلی نداشت، پس کل جدول با ستون آخر از عرض صفحه بیرون می‌زد. با همان الگوی
	   اسکرول افقیِ محدود به خودِ جدول (که برای جدول‌های دیگر سایت هم استفاده شده)
	   حل می‌شود - نه با دست‌کاریِ .button که روی کل سایت هم اثر می‌گذاشت. */
	.woocommerce-MyAccount-content table.shop_table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
	}
	.woocommerce-MyAccount-content table.shop_table :is(td, th) { white-space: nowrap; }
}

/* ---------- کارت‌های میان‌بر پیشخوان (سفارش‌ها/دانلودها/آدرس/اطلاعات حساب) ---------- */
.nk-account-dashboard-links {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin: 32px 0 32px;
	padding: 0;
}
.nk-account-dashboard-links a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	text-decoration: none;
	color: var(--color-text-primary);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md, var(--radius-sm));
	box-shadow: var(--shadow-sm);
	padding: 22px 12px;
	font-size: 13.5px;
	font-weight: 700;
	transition: border-color 0.15s ease, transform 0.1s ease;
}
.nk-account-dashboard-links a:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
	transform: translateY(-2px);
}
.nk-account-dashboard-links .nk-icon { width: 26px; height: 26px; }
@media (max-width: 768px) {
	.nk-account-dashboard-links { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ---------- عنوان صفحه («حساب کاربری من») ---------- */
.nk-account-page-title {
	font-size: 28px;
	text-align: center;
	padding-bottom: 25px;
}

/* ---------- ورود/عضویت (کاربر لاگین نکرده) ----------
   طبق درخواست کارفرما: چون این‌جا نوار ناوبری اصلاً محتوایی ندارد، کاملاً حذفش
   می‌کنیم و فرم‌های ورود/عضویت را ۵۰-۵۰ و در دو کارت جدا کنار هم می‌چینیم؛ خودِ
   مرز دو کارت جای خط جداکننده‌ای که قبلاً لازم بود را هم می‌گیرد. */
body.nk-account-login-view.woocommerce-account .woocommerce { grid-template-columns: 1fr; }
body.nk-account-login-view .woocommerce-MyAccount-navigation { display: none; }
body.nk-account-login-view .u-columns.col2-set,
body.nk-account-login-view #customer_login.col2-set {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: start;
}
body.nk-account-login-view .u-columns.col2-set .col-1,
body.nk-account-login-view .u-columns.col2-set .col-2,
body.nk-account-login-view #customer_login .col-1,
body.nk-account-login-view #customer_login .col-2 {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md, var(--radius-sm));
	box-shadow: var(--shadow-sm);
	padding: 24px;
	width: auto;
	float: none;
}
body.nk-account-login-view .col-1 h2,
body.nk-account-login-view .col-2 h2 {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--color-border);
}
@media (max-width: 768px) {
	body.nk-account-login-view .u-columns.col2-set,
	body.nk-account-login-view #customer_login.col2-set { grid-template-columns: 1fr; }
}

/* ---------- فاصله از فوتر در حالت شب ----------
   در حالت روز، رنگ پس‌زمینه‌ی فوتر و صفحه فرق دارد و مرزشان طبیعتاً مشخص است؛ در
   حالت شب هر دو یک رنگ پس‌زمینه دارند و بدون این فاصله‌ی اضافه به‌هم چسبیده به‌نظر
   می‌رسند. فقط حالت شب را تغییر می‌دهیم تا در حالت روز چیزی عوض نشود. */
[data-theme="dark"] .woocommerce-account .woocommerce { margin-bottom: 64px; }