/* ==========================================================================
   NiloKala - فاز ۳: Quick View + فیلتر AJAX فروشگاه
   ========================================================================== */

/* ----------------------------- آیکون روی کارت محصول (نمای سریع) ----------------------------- */

.nk-card-actions {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 3;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.nk-product-card:hover .nk-card-actions { opacity: 1; transform: translateX(0); }
@media (hover: none) {
	.nk-card-actions { opacity: 1; transform: none; }
}

.nk-card-action-btn {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--shadow-sm);
	color: var(--color-text-secondary);
}
.nk-card-action-btn .nk-icon { width: 16px; height: 16px; }
.nk-card-action-btn:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ----------------------------- Quick View Modal ----------------------------- */

.nk-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(20, 18, 15, 0.55);
	z-index: 1000;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.nk-modal-overlay.is-open { display: flex; }

.nk-modal-box {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	max-width: 900px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	overflow-x: hidden;
	position: relative;
	padding: 30px;
	box-sizing: border-box;
}
.nk-modal-close {
	position: absolute;
	top: 14px;
	inset-inline-start: 14px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--color-border);
	color: var(--color-text-primary);
	border: none;
	font-size: 20px;
	cursor: pointer;
	z-index: 2;
}
.nk-modal-loading { text-align: center; padding: 60px 0; color: var(--color-text-secondary); }

.nk-qv-gallery { min-width: 0; overflow: hidden; }
.nk-qv-gallery a { display: block; cursor: pointer; }
.nk-qv-gallery img {
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	display: block;
	border-radius: var(--radius-md);
	aspect-ratio: 1;
	background: var(--color-background);
	object-fit: contain;
}
#nk-quick-view-body { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; box-sizing: border-box; max-width: 100%; }
/* فاصله‌ی مستقل و تضمین‌شده از دکمه‌ی بستن، مستقیم روی خودِ ستون خلاصه (نه فقط تکیه بر
   padding کلی مودال) - چون برای محصولات با عنوان طولانی (که ممکن است دو خط شود)، فقط
   یک padding مشترک بالای کل مودال کافی نبود و خط اول عنوان زیر دکمه می‌رفت. */
.nk-qv-summary { padding-top: 44px; padding-inline-start: 40px; }
.nk-qv-title { font-size: 20px; margin-bottom: 8px; line-height: 1.4; }
.nk-qv-price { font-size: 20px; font-weight: 700; color: var(--color-primary); margin: 8px 0; }
.nk-qv-price del { display: block; color: var(--color-text-secondary); font-weight: 400; font-size: 14px; margin-bottom: 2px; }
.nk-qv-price ins { display: block; text-decoration: none; }
.nk-qv-desc { font-size: 14px; color: var(--color-text-secondary); margin-bottom: 16px; }
.nk-qv-summary form.cart { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: nowrap; }
.nk-qv-error {
	flex-basis: 100%;
	color: var(--color-text-primary);
	background: var(--color-error-bg, var(--color-surface));
	border-inline-start: var(--nk-msg-border-width, 3px) solid var(--color-error);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	font-size: 13px;
}
body.nk-msg-border-full .nk-qv-error {
	border: var(--nk-msg-border-width, 3px) solid var(--color-error);
}
.nk-qv-summary form.cart .quantity { flex-shrink: 0; }
.nk-qv-summary form.cart .quantity input {
	width: 60px;
	padding: 10px 8px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	text-align: center;
}
.nk-qv-summary form.cart .single_add_to_cart_button {
	white-space: nowrap;
	flex: 1;
}
.nk-qv-fulllink { display: block; font-size: 13px; margin-top: 10px; }
.nk-qv-outofstock { color: var(--color-error); font-weight: 700; }

@media (max-width: 640px) {
	#nk-quick-view-body { grid-template-columns: 1fr; }

	/* کاهش padding و اجازه‌ی شکستن ردیف تعداد/دکمه‌ی خرید به خط بعد - علت اصلی اسکرول افقی
	   گزارش‌شده در نمایش سریع موبایل: مجموع عرض دکمه‌های +/- + فیلد تعداد + دکمه‌ی خرید با
	   flex-wrap:nowrap در یک مودال باریک جا نمی‌شد. مقادیر زیر توسط کارفرما تست و تأیید شده. */
	.nk-modal-overlay { padding: 15px !important; }
	.nk-modal-box { padding: 58px 10px 10px !important; }
	/* در موبایل، گالری و خلاصه زیر هم (تک‌ستونه) قرار می‌گیرند و گالری بالای صفحه (همان‌جایی که
	   دکمه‌ی بستن هست) می‌نشیند؛ بنابراین دیگر نیازی به فاصله‌ی اضافه‌ی بالای ستون خلاصه برای
	   فرار از دکمه‌ی بستن نیست (آن فاصله فقط برای چیدمان ۲ستونه‌ی دسکتاپ لازم بود) - رفع باگ #۳ */
	.nk-qv-summary { padding-top: 0; padding-inline-start: 0; }
	.nk-qv-summary form.cart { flex-wrap: wrap; }
	.nk-qv-summary form.cart .single_add_to_cart_button { flex-basis: 100%; }
	.nk-qty-btn { width: 20px !important; } /* توجه: مقدارِ نهایی (بزرگ‌تر) در shop.css با
	   اختصاصیتِ کافی جایگزین می‌شود؛ رجوع به «مورد ۲۶» در shop.css - این‌جا فقط برای
	   مستندسازیِ تاریخچه نگه داشته شده که چرا اصلاً این کوچک‌سازی لازم بود. */
	.nk-qv-summary form.cart .quantity input { width: 44px; padding: 8px 4px; }

	/* کوتاه‌کردن توضیحات نمایش سریع در موبایل (فقط ۳ خط + سه‌نقطه) - قابل‌غیرفعال‌سازی از
	   بخش سفارشی‌سازی («نمایش سریع محصول»). روی نمای دسکتاپ این قانون اصلاً اعمال نمی‌شود. */
	.nk-qv-desc--truncate {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* ----------------------------- فیلتر AJAX فروشگاه ----------------------------- */

.nk-shop-main.is-loading { opacity: 0.4; pointer-events: none; transition: opacity 0.15s ease; }
.nk-shop-widget a { transition: color 0.15s ease; }