/**
 * سبد خرید — ظاهرِ قرصِ تعداد و تراز ردیف‌ها.
 *
 * از اسنیپت «۰۲ سبد خرید» v1.6.0 آمده. یک قاعده به آن اضافه شده:
 * کادرِ تعدادی که ورودیِ عددی ندارد (محصولِ «فروش تکی») کامل برداشته
 * می‌شود، وگرنه یک قرصِ خالی روی صفحه می‌ماند.
 */

/* ---- رنگ برند ----
   به متغیرِ خودِ ووکامرس وصل است، نه یک رنگ ثابت. رنگ برند را که
   عوض کنی، همه‌ی این‌ها خودشان دنبالش می‌آیند. */
body {
	--nb-accent: var(--wc-primary, #720eec);
}

/* ---- تراز عمودی ردیف سبد ----
   بدون این، هر سلول محتوایش را از بالای خودش می‌چیند و چون ارتفاع
   تصویر، متن و کادرِ تعداد فرق دارد، هیچ‌کدام با هم روی یک خط
   نمی‌نشینند. important لازم است چون قالب خودش روی سلول‌ها
   vertical-align می‌نویسد. */
.woocommerce-cart-form table.shop_table td,
.woocommerce-cart-form table.shop_table th {
	vertical-align: middle !important;
}

/* :not(.hidden) مهم است — وقتی حداقل و حداکثر تعداد برابرند ووکامرس
   همین کادر را با کلاس hidden و یک input مخفی چاپ می‌کند؛ بدون این
   شرط، آن کادرِ نامرئی دوباره دیده می‌شد.

   :has(input.qty) هم لازم شد: ووکامرس همین کلاس را در mini-cart روی
   یک span متنی («۱ × ۲۸۰٬۰۰۰ تومان») هم می‌گذارد که هیچ ورودی‌ای
   ندارد. بدون این شرط، آن متن هم کادرِ کوچکِ شمارنده را می‌گرفت و
   داخل سبد کشویی به چند خط می‌شکست. شرط درست همان «ورودی دارد» است. */
.quantity:not(.hidden):has( input.qty ) {
	display: inline-flex !important;
	align-items: center;
	gap: 2px;
	padding: 2px;
	direction: ltr;            /* تا چیدمان همیشه «− عدد +» بماند */
	border: 1px solid rgba(255, 255, 255, .11);
	border-radius: 9px;
	background: rgba(0, 0, 0, .22);
	width: auto !important;
	max-width: none !important;
	vertical-align: middle;
}

/* ---- دکمه‌ها ----
   بدون کادر در حالت عادی؛ هایلایت فقط روی هاور می‌آید.
   رنگ علامت‌ها صریح است نه inherit — نسخه‌ی قبلی currentColor بود،
   یعنی از رنگِ متنِ سلولِ جدول ارث می‌برد که خاکستریِ کم‌رنگ است،
   و به همین دلیل − و + تقریباً محو دیده می‌شدند. */
.quantity:not(.hidden) .nb-qty-btn {
	position: relative;
	flex: none;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: rgba(255, 255, 255, .6);
	font-size: 0;              /* متنِ دکمه فقط برای خوانشگر صفحه است */
	line-height: 0;
	cursor: pointer;
	box-shadow: none;
	transition: background .16s ease, color .16s ease, transform .12s ease;
}

/* ---- علامت‌های − و + ----
   با CSS کشیده می‌شوند نه با کاراکتر: وزن و ارتفاعِ گلیف‌های
   «−» و «+» بین فونت‌ها فرق می‌کند و تقریباً هیچ‌وقت هم‌تراز
   درنمی‌آیند. خطوطِ کشیده‌شده دقیقاً قرینه و هم‌اندازه‌اند. */
.quantity:not(.hidden) .nb-qty-btn::before,
.quantity:not(.hidden) .nb-qty-btn::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: currentColor;
	border-radius: 2px;
}
.quantity:not(.hidden) .nb-qty-btn::before {
	width: 9px;
	height: 1.5px;
}
.quantity:not(.hidden) .nb-qty-minus::after {
	display: none;
}
.quantity:not(.hidden) .nb-qty-plus::after {
	width: 1.5px;
	height: 9px;
}

.quantity:not(.hidden) .nb-qty-btn:hover:not(:disabled) {
	background: rgba(255, 255, 255, .1);
	color: #fff;
}
.quantity:not(.hidden) .nb-qty-btn:active:not(:disabled) {
	background: color-mix(in srgb, var(--nb-accent) 55%, transparent);
	color: #fff;
	transform: scale(.92);
}
.quantity:not(.hidden) .nb-qty-btn:focus-visible {
	outline: 2px solid var(--nb-accent);
	outline-offset: 2px;
}

/* حالت غیرفعال — روی حداقل یا سقفِ موجودی */
.quantity:not(.hidden) .nb-qty-btn:disabled {
	color: rgba(255, 255, 255, .18);
	cursor: default;
	background: transparent;
}

/* ---- عدد ----
   text-align با important است: قالب روی اینپوت‌ها text-align: right
   می‌گذارد (پیش‌فرضِ صفحه‌ی راست‌چین) و بدون important عدد به لبه
   می‌چسبد نه وسط.
   line-height هم عمداً normal است نه عددِ ثابت — تراز عمودیِ متنِ
   داخل input را خودِ مرورگر دقیق‌تر از هر عددی که ما بگذاریم
   انجام می‌دهد، به شرطی که padding صفر باشد. */
.quantity:not(.hidden) input.qty {
	width: 34px !important;
	min-width: 0 !important;
	height: 26px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	text-align: center !important;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	line-height: normal !important;

	/* پیکان‌های خودِ مرورگر باید بروند، وگرنه کنار دکمه‌های ما تکراری‌اند */
	-moz-appearance: textfield;
	appearance: textfield;
}
.quantity:not(.hidden) input.qty:focus {
	outline: none !important;
	box-shadow: none !important;
}
.quantity:not(.hidden) input.qty::-webkit-outer-spin-button,
.quantity:not(.hidden) input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.quantity:not(.hidden) .nb-qty-btn {
		transition: none;
	}
	.quantity:not(.hidden) .nb-qty-btn:active:not(:disabled) {
		transform: none;
	}
}


/* ==================================================================
   دکمه‌ی «ادامه جهت تسویه حساب» — افکت پالس

   با box-shadow زده شده نه transform: اگر خودِ دکمه بزرگ و کوچک شود،
   درست موقعی که کاربر دارد رویش کلیک می‌کند هدف زیر انگشتش
   جابه‌جا می‌شود. حلقه بیرون از دکمه پخش می‌شود و دکمه ثابت می‌ماند.
   ================================================================== */
@keyframes nb-cart-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--nb-accent) 50%, transparent); }
	70%  { box-shadow: 0 0 0 14px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	animation: nb-cart-pulse 2.2s cubic-bezier(.4, 0, .2, 1) infinite;
}

/* وقتی کاربر رسید روی دکمه، دیگر لازم نیست جلبش کنیم */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:focus {
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
		animation: none;
	}
}

/* ---- فروش تکی ----
   ووکامرس فقط ورودی را type="hidden" می‌کند و کادر دورش را نگه
   می‌دارد. important لازم است چون همین فایل بالاتر روی .quantity
   قاعده‌ی display: inline-flex !important دارد. */
form.cart .quantity:not(:has(input[type="number"])),
.woocommerce-cart-form .quantity:not(:has(input[type="number"])) {
	display: none !important;
}


/* ==========================================================================
   صفحه‌ی سبد — چیدمان
   ==========================================================================
   جدولِ ووکامرس روی دسکتاپ درست است ولی خام؛ روی موبایل خودش هر سلول را
   به یک ردیفِ برچسب‌دار تبدیل می‌کند و نتیجه‌اش این بود (اندازه‌گیری‌شده
   روی ۳۹۰ پیکسل):
     • هر قلم ۳۳۲ پیکسل ارتفاع، سبدِ سه‌قلمی ۴۱۴۲ پیکسل
     • تصویر محصول اصلاً چاپ نمی‌شد (سلولش ۰×۰ بود)
     • «قیمت» و «جمع جزء» دو ردیفِ جدا با عددِ یکسان
     • یک ردیفِ «تعداد:» کاملاً خالی، چون محصول‌ها فروش تکی‌اند
   پس روی موبایل ردیف به کارت تبدیل می‌شود — همان زبانِ کارتِ سبد کشویی.
   ========================================================================== */

/* ------------------------------------------------------------- دسکتاپ */

.woocommerce-cart-form table.shop_table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
}

.woocommerce-cart-form table.shop_table th {
	font-size: 12.5px;
	font-weight: 600;
	color: var( --nb-text-muted, #98a2b3 );
	padding: 12px 10px;
	border: 0;
	white-space: nowrap;
}

.woocommerce-cart-form table.shop_table td {
	padding: 16px 10px;
	border: 0;
	border-top: 1px solid var( --nb-border, #242c42 );
	vertical-align: middle;
}

.woocommerce-cart-form .product-thumbnail img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 10px;
	display: block;
	border: 1px solid var( --nb-line-soft, rgba( 255, 255, 255, 0.06 ) );
}

.woocommerce-cart-form td.product-name a {
	color: var( --nb-text, #ededed );
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.7;
	text-decoration: none;
}

.woocommerce-cart-form td.product-name a:hover {
	color: var( --nb-link, #a78bfa );
}

/* مشخصاتی که مشتری وارد کرده (آیدی تلگرام و مانند آن). */
.woocommerce-cart-form td.product-name dl.variation {
	margin: 6px 0 0;
	font-size: 11.5px;
	line-height: 1.7;
	color: var( --nb-text-muted, #98a2b3 );
}

.woocommerce-cart-form td.product-name dl.variation dt,
.woocommerce-cart-form td.product-name dl.variation dd,
.woocommerce-cart-form td.product-name dl.variation p {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: inherit;
}

.woocommerce-cart-form td.product-name dl.variation dd::after {
	content: "";
	display: block;
}

.woocommerce-cart-form td.product-price,
.woocommerce-cart-form td.product-subtotal {
	font-size: 13.5px;
	font-weight: 700;
	color: var( --nb-text, #ededed );
	white-space: nowrap;
}

/* دکمه‌ی حذف — دایره‌ی کوچک، نه یک ضربدرِ قرمزِ لخت. */
.woocommerce-cart-form td.product-remove a.remove {
	width: 26px;
	height: 26px;
	display: grid !important;
	place-items: center;
	border-radius: 50%;
	background: var( --nb-surface-alt, #1a2033 );
	color: var( --nb-text-muted, #98a2b3 ) !important;
	font-size: 17px;
	line-height: 1;
	text-decoration: none;
}

.woocommerce-cart-form td.product-remove a.remove:hover {
	background: var( --nb-danger, #e5484d );
	color: #fff !important;
}

/*
 * ستونِ «تعداد» وقتی هیچ ردیفی ورودی عددی ندارد بی‌معنی است — روی این
 * فروشگاه همه‌ی محصول‌ها فروش تکی‌اند و این ستون همیشه خالی می‌ماند.
 * شرط روی خودِ فرم است تا اگر روزی محصولی چندتایی اضافه شد، ستون
 * خودش برگردد.
 */
.woocommerce-cart-form:not( :has( td.product-quantity input[type="number"] ) ) th.product-quantity,
.woocommerce-cart-form:not( :has( td.product-quantity input[type="number"] ) ) td.product-quantity {
	display: none;
}

/* ------------------------------------------------------------- موبایل */

/* ۷۶۸ عمدی است: همان نقطه‌ای که ووکامرس خودش جدول را می‌شکند. */
@media ( max-width: 768px ) {

	.woocommerce-cart-form table.shop_table_responsive thead {
		display: none;
	}

	.woocommerce-cart-form table.shop_table_responsive,
	.woocommerce-cart-form table.shop_table_responsive tbody {
		display: block;
		width: 100%;
	}

	.woocommerce-cart-form table.shop_table_responsive tr.cart_item {
		display: grid;
		grid-template-columns: 64px minmax( 0, 1fr ) 26px;
		grid-template-areas:
			"thumb name  remove"
			"thumb money qty";
		align-items: center;
		gap: 6px 12px;
		padding: 14px;
		margin: 0 0 12px;
		border: 1px solid var( --nb-border, #242c42 );
		border-radius: 12px;
		background: var( --nb-surface-alt, #1a2033 );
	}

	/* برچسب‌های «محصول:»، «قیمت:» … که ووکامرس با ::before می‌سازد. */
	.woocommerce-cart-form table.shop_table_responsive tr.cart_item td::before {
		display: none !important;
	}

	.woocommerce-cart-form table.shop_table_responsive tr.cart_item td {
		display: block;
		width: auto;
		padding: 0;
		border: 0;
		text-align: start;
	}

	/* تصویر روی موبایل مخفی بود؛ همان چیزی که کارت را قابل‌تشخیص می‌کند. */
	.woocommerce-cart-form table.shop_table_responsive td.product-thumbnail {
		grid-area: thumb;
		display: block !important;
	}

	.woocommerce-cart-form table.shop_table_responsive td.product-thumbnail img {
		width: 64px;
		height: 64px;
	}

	.woocommerce-cart-form table.shop_table_responsive td.product-name {
		grid-area: name;
	}

	.woocommerce-cart-form table.shop_table_responsive td.product-name a {
		font-size: 13px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.woocommerce-cart-form table.shop_table_responsive td.product-subtotal {
		grid-area: money;
		font-size: 13.5px;
	}

	.woocommerce-cart-form table.shop_table_responsive td.product-quantity {
		grid-area: qty;
		justify-self: end;
	}

	.woocommerce-cart-form table.shop_table_responsive td.product-remove {
		grid-area: remove;
		justify-self: end;
	}

	/*
	 * «قیمت» فقط وقتی حذف می‌شود که تعداد قابل تغییر نباشد — آن‌وقت با
	 * «جمع جزء» عدد یکسانی دارد و تکرارش روی صفحه‌ی کوچک فقط جا می‌گیرد.
	 * اگر محصولی چندتایی باشد هر دو می‌مانند، چون دیگر یکی نیستند.
	 */
	.woocommerce-cart-form tr.cart_item:not( :has( td.product-quantity input[type="number"] ) ) td.product-price {
		display: none;
	}

	.woocommerce-cart-form tr.cart_item:has( td.product-quantity input[type="number"] ) td.product-price {
		grid-area: money;
		font-size: 12px;
		font-weight: 500;
		color: var( --nb-text-muted, #98a2b3 );
	}

	/* ردیفِ کوپن و دکمه‌ها ته جدول. */
	.woocommerce-cart-form table.shop_table_responsive tr:not( .cart_item ) {
		display: block;
	}

	.woocommerce-cart-form table.shop_table_responsive tr:not( .cart_item ) td {
		display: block;
		width: auto;
		padding: 0;
		border: 0;
	}
}