/* ==========================================================================
   صفحه‌ی سبد خرید (/cart/)
   - چیدمان دوستونه در دسکتاپ (اقلام سمت راست/عریض‌تر، خلاصه sticky سمت چپ)
   - تک‌ستونه در موبایل، خلاصه زیر لیست اقلام (نه بالای آن)
   - همه‌ی رنگ‌ها/فاصله‌ها از توکن‌های موجود
   ========================================================================== */

/* عنوان صفحه («سبد خرید» بالای صفحه، h1.nk-cart-page-title) در shop.css استایل
   دارد - چون همان رفتار برای checkout هم لازم است (h1.nk-checkout-page-title) و
   بهتر است یک‌بار، مشترک، تعریف شود. */

.nk-cart-page-layout {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 32px;
	align-items: start;
	margin: 24px 0 40px;
}

/* نوار مراحل خرید (.nk-checkout-steps) به shop.css منتقل شد - چون حالا هم در این
   صفحه، هم در Checkout استفاده می‌شود؛ اینجا نگه‌داشتنش یعنی بارگذاری کل این فایل
   روی صفحه‌ی Checkout فقط برای یک بخش کوچک، که درست نیست. */

/* ---------- جدول اقلام ---------- */
.nk-cart-table {
	width: 100%;
	border-collapse: collapse;
}
.nk-cart-table thead th {
	text-align: start;
	font-size: 13px;
	font-weight: 700;
	color: var(--color-text-secondary);
	padding: 0 8px 14px;
	border-bottom: 1px solid var(--color-border);
}
.nk-cart-table thead .product-remove { width: 1%; }
/* رفع باگ (نقطه به‌جای تامبنیل): قبلاً این ستون هم width:1% بود (کوچک‌ترین‌ اندازه‌ی
   ممکن). چون خودِ ووکامرس/وردپرس روی تگ <img> استایل inline با max-width:100%
   !important می‌گذارد، عکس به همان عرضِ فشرده‌شده‌ی ستون (چند پیکسل) محدود می‌شد -
   با width:72px !important هم در CSS خودمان چون max-width از width کوچک‌تر بود
   برنده می‌شد. اندازه‌ی واقعی به ستون می‌دهیم تا max-width:100% دیگر تنگ نباشد. */
.nk-cart-table thead .product-thumbnail {
	width: 90px;
	/* فاصله‌ی بیشتر زیرِ نوار مراحل خرید، فقط در دسکتاپ (چون thead طبق قانون پایین‌تر
	   زیر ۹۰۰px کلاً مخفی می‌شود - روی موبایل/تبلت اثری ندارد). خودِ کارفرما این مقدار
	   را تست کرده و تأیید کرده. */
	padding-top: 20px;
}

.nk-cart-row td {
	padding: 16px 8px;
	border-bottom: 1px solid var(--color-border);
	vertical-align: middle;
}
.nk-cart-row .product-remove {
	width: 32px;
	text-align: center;
}
.nk-cart-row-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-size: 18px;
	line-height: 1;
	color: var(--color-text-secondary);
	text-decoration: none;
}
.nk-cart-row-remove:hover { background: var(--color-background); color: var(--color-error); }

.nk-cart-row .product-thumbnail img {
	/* وردپرس/ووکامرس خودش روی این تگ استایل inline با max-width:100% !important
	   می‌گذارد. یک inline !important را هیچ قاعده‌ی خارجی (even با !important)
	   واقعاً نمی‌تواند شکست بدهد - علت واقعیِ باگِ «نقطه به‌جای عکس» تنگ بودنِ خودِ
	   ستون بود (width:1% در thead، بالاتر در همین فایل)، نه این !important‌ها؛
	   بعد از دادن عرض واقعی به ستون، max-width:100% دیگر چیزی را فشرده نمی‌کند.
	   این‌ها همچنان به‌عنوان یک تضمینِ بی‌ضرر باقی می‌مانند. */
	width: 72px !important;
	height: 72px !important;
	object-fit: cover;
	border-radius: var(--radius-sm);
}
.nk-cart-row-title {
	font-weight: 700;
	font-size: 14.5px;
	color: var(--color-text-primary);
}
.nk-cart-row-title:hover { color: var(--color-primary); }

.nk-cart-row .product-price,
.nk-cart-row .product-subtotal {
	font-size: 14px;
	color: var(--color-text-secondary);
	white-space: nowrap;
}
.nk-cart-row .product-subtotal { color: var(--color-primary); font-weight: 700; }

/* این دو فقط در موبایل (زیر ۷۶۸px) دیده می‌شوند - رجوع کنید به همان بریک‌پوینت پایین‌تر */
.nk-cart-mobile-head { display: none; }
.nk-cart-row-price-mobile { display: none; }

.nk-cart-actions-row td { padding: 16px 8px 8px; border-bottom: none; }
/* رفع باگ: وقتی حالت «بروزرسانی خودکار» فعال است (تنظیمات قالب > صفحه‌ی سبد خرید)،
   دیگر نیازی به دکمه‌ی دستی «بروزرسانی سبد» نیست - قبلاً حتی در این حالت هم نمایش
   داده می‌شد. body_class مربوطه در functions.php اضافه شده. */
body.nk-cart-update-auto .woocommerce-cart-form button[name="update_cart"],
body.nk-cart-update-auto .woocommerce-cart-form input[name="update_cart"] { display: none; }
.nk-cart-actions-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}
.nk-cart-coupon {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.nk-cart-coupon input[type="text"] {
	padding: 9px 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: 13.5px;
	width: 160px;
	max-width: 100%;
}
.nk-cart-continue-shopping {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.nk-cart-continue-shopping::before {
	content: "\2192"; /* → - در RTL «رفتن به فروشگاه» به‌سمت راست است، برخلاف دکمه‌ی «ادامه‌ی پرداخت» */
	font-size: 15px;
}

/* ---------- ستون خلاصه (sticky) ---------- */
.nk-cart-page-summary { position: sticky; top: 20px; }
.nk-cart-page-summary .cart_totals {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md, var(--radius-sm));
	box-shadow: var(--shadow-md);
	padding: 24px;
}
.nk-cart-page-summary .cart_totals > h2 {
	margin: 0 0 16px;
	padding-bottom: 16px;
	font-size: 17px;
	font-weight: 700;
	border-bottom: 2px solid var(--color-primary);
}
.nk-cart-page-summary table.shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.nk-cart-page-summary table.shop_table th {
	text-align: start;
	font-weight: 400;
	color: var(--color-text-secondary);
	padding: 10px 0;
}
.nk-cart-page-summary table.shop_table td {
	text-align: end;
	padding: 10px 0;
}
.nk-cart-page-summary table.shop_table tr {
	border-bottom: 1px solid var(--color-border);
}
.nk-cart-page-summary .order-total th,
.nk-cart-page-summary .order-total td {
	font-size: 17px;
	font-weight: 700;
	border-bottom: none;
	padding-top: 16px;
}
.nk-cart-page-summary .order-total td { color: var(--color-primary); }
.nk-cart-page-summary .wc-proceed-to-checkout { margin-top: 16px; }
.nk-cart-page-summary .checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	text-align: center;
	padding: 16px;
	border-radius: var(--radius-sm);
	background: var(--btn-primary-bg, var(--color-primary));
	color: var(--btn-primary-text, #fff);
	font-size: 15.5px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: var(--shadow-sm);
}
/* پیکان جهت‌دار (مثل نمونه‌ای که کارفرما نشان داد) - در RTL «ادامه» به‌سمت چپ است */
.nk-cart-page-summary .checkout-button::after {
	content: "\2190"; /* ← */
	font-size: 16px;
}
.nk-cart-page-summary .checkout-button:hover { background: var(--btn-primary-bg-hover, var(--color-primary-hover)); }

/* متن اطمینان‌بخش امنیت پرداخت، زیر دکمه‌ی اقدام به پرداخت */
.nk-secure-checkout-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 10px 0 0;
	font-size: 10px;
	color: var(--color-text-secondary);
}
.nk-secure-checkout-note .nk-icon { width: 14px; height: 14px; flex-shrink: 0; }

/* پیشنهادهای مرتبط (Cross-sell) - داخل همان ستون خلاصه، به‌شکل کارت‌های فشرده */
.nk-cart-page-summary .cross-sells {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--color-border);
}
.nk-cart-page-summary .cross-sells > h2 { font-size: 14px; font-weight: 700; margin: 0 0 12px; }
.nk-cart-page-summary .cross-sells ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.nk-cart-page-summary .cross-sells .product {
	display: flex;
	align-items: center;
	gap: 10px;
}
.nk-cart-page-summary .cross-sells img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: var(--radius-sm);
	flex-shrink: 0;
}
.nk-cart-page-summary .cross-sells a.woocommerce-LoopProduct-link {
	font-size: 12.5px;
	color: var(--color-text-primary);
	text-decoration: none;
	display: block;
}
.nk-cart-page-summary .cross-sells .price { font-size: 12px; color: var(--color-primary); font-weight: 700; }

/* ---------- حالت سبد خالی ---------- */
.nk-cart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 60px 20px;
	text-align: center;
	color: var(--color-text-secondary);
}
.nk-cart-empty svg { width: 64px; height: 64px; opacity: 0.4; }
.nk-cart-empty p { font-size: 15px; margin: 0; }

/* ---------- واکنش‌گرا (تبلت به پایین) ---------- */
@media (max-width: 900px) {
	.nk-cart-page-layout { grid-template-columns: 1fr; gap: 24px; }
	.nk-cart-page-summary { position: static; }

	/* در جدول واکنش‌گرای پیش‌فرض ووکامرس، سلول‌ها ردیفی می‌شوند - این‌جا فقط ظاهرش را
	   با سیستم طراحی خودمان هماهنگ می‌کنیم، نه این‌که از صفر بسازیمش. نسخه‌ی کامل‌ترِ
	   کارتیِ موبایل (طبق مشخصات کارفرما) پایین‌تر، در ۷۶۸px، روی همین پایه اضافه می‌شود. */
	.nk-cart-table thead { display: none; }
	.nk-cart-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
	.nk-cart-row td { border-bottom: none; padding: 6px 4px; }
	.nk-cart-row:not(:last-child) { border-bottom: 1px solid var(--color-border); }
	.nk-cart-row .product-thumbnail { order: 1; }
	.nk-cart-row .product-remove { order: 2; margin-inline-start: auto; }
	.nk-cart-row .product-name { order: 3; flex-basis: 100%; }
	.nk-cart-row .product-quantity { order: 4; }
	.nk-cart-row .product-subtotal { order: 5; margin-inline-start: auto; }
	.nk-cart-row .product-price { display: none; }
}

/* ---------- بازطراحی کامل موبایل (طبق مشخصات دقیق کارفرما) ---------- */
@media (max-width: 768px) {
	/* .nk-checkout-steps و .nk-cart-page-title خودشان در shop.css مدیریت می‌شوند
	   (چون بین cart/checkout مشترک‌اند)؛ این‌جا فقط چیزهای مخصوص چیدمان کارتیِ خودِ cart. */

	.nk-cart-mobile-head {
		display: flex;
		justify-content: space-between;
		padding: 0 4px 10px;
		font-size: 13px;
		font-weight: 700;
		color: var(--color-text-secondary);
		border-bottom: 1px solid var(--color-border);
	}

	.nk-cart-row {
		flex-wrap: nowrap;
		align-items: flex-start;
		padding: 14px 4px;
		position: relative; /* مبنای موقعیت‌دهی badge حذف روی گوشه‌ی تصویر */
	}
	/* خط‌چین فقط دقیقاً بین دو آیتمِ پشت‌سرهم - نه قبل از اولی، نه بعد از آخری (که به‌جایش
	   یک خط ممتد از nk-cart-actions-row می‌آید، پایین‌تر) */
	.nk-cart-row:not(:last-child) { border-bottom: none; }
	.nk-cart-row + .nk-cart-row { border-top: 1px dashed var(--color-border); }

	.nk-cart-row .product-remove {
		order: 2;
		margin-inline-start: 0;
		position: absolute;
		top: -6px;
		right: -2px; /* روی گوشه‌ی بالا-راستِ تصویر آویزان است، نه کاملاً داخلش - طبق مقایسه با فلتسام */
	}
	.nk-cart-row-remove {
		width: 18px;
		height: 18px;
		font-size: 12px;
		font-weight: 700;
		background: var(--color-surface);
		border: 1px solid var(--color-border);
		box-shadow: var(--shadow-sm);
	}
	.nk-cart-row .product-name { order: 3; flex: 1; flex-basis: auto; min-width: 0; }
	.nk-cart-row .product-quantity { order: 4; flex-shrink: 0; align-self: center; }
	.nk-cart-row .product-subtotal { display: none; } /* جایگزینش خط فشرده‌ی زیر نام است */
	.nk-cart-row-price-mobile {
		display: block;
		margin-top: 4px;
		font-size: 12.5px;
		color: var(--color-text-secondary);
	}

	.nk-cart-actions-row { border-top: 1px solid var(--color-border); }
	.nk-cart-actions-row td { padding: 16px 4px 4px; }
	.nk-cart-actions-inner { justify-content: space-between; }
	.nk-cart-coupon { order: 1; flex-basis: 100%; width: 100%; }
	.nk-cart-coupon input[type="text"] { flex: 1; width: auto; }
	.nk-cart-continue-shopping { order: 2; }
	.nk-cart-update { order: 3; }
}

/* ---------- تبلت (بدون نسخه‌ی کارتیِ کامل موبایل - فقط عرض معقول برای کوپن) ---------- */
@media (min-width: 769px) and (max-width: 900px) {
	.nk-cart-coupon input[type="text"] { width: 200px; }
}