/*
Theme Name: qlaunch
Theme URI: https://github.com/qluch
Author: Gemini AI Developer
Description: Advanced Product Hunt clone with Multi-step submission, Topics, Comments, Social Auth, and Frontend Dashboard.
Version: 1.0.13
License: GNU General Public License v2 or later
Text Domain: qluch
*/

@font-face {
	font-family: 'Vazirmatn RD';
	src: url('assets/fonts/vazirmatn-round-dots/Vazirmatn-RD-VF.woff2') format('woff2-variations'),
	     url('assets/fonts/vazirmatn-round-dots/Vazirmatn-RD-VF.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*, *::before, *::after { font-family: inherit; }
html { font-family: 'Vazirmatn RD', Tahoma, sans-serif; }
body { font-family: 'Vazirmatn RD', Tahoma, sans-serif; background-color: #ffffff; color: #1a202c; direction: rtl; text-align: right; line-height: 1.6; overflow-x: hidden; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* لینک‌های متنی قوانین/مقررات و مشابه آن‌ها در کل سایت: آبی و بدون خط زیر */
.qluch-legal-link,
.qluch-legal-link:hover,
.qluch-legal-link:visited { color: #2563eb; text-decoration: none; }

/* استایل پایهٔ محتوای برگه‌های عادی وردپرس (page.php) چون * { margin:0;padding:0 } کل ریست شده */
.qluch-page-entry-content p { margin-bottom: 16px; line-height: 1.9; color: #2d3748; }
.qluch-page-entry-content h1, .qluch-page-entry-content h2, .qluch-page-entry-content h3,
.qluch-page-entry-content h4, .qluch-page-entry-content h5, .qluch-page-entry-content h6 { margin: 24px 0 12px; color: #1a202c; }
.qluch-page-entry-content ul, .qluch-page-entry-content ol { margin: 0 0 16px; padding-right: 22px; }
.qluch-page-entry-content li { margin-bottom: 6px; }
.qluch-page-entry-content img { max-width: 100%; height: auto; border-radius: 10px; }
.qluch-page-entry-content a { color: #da552f; }
.qluch-page-entry-content blockquote { margin: 16px 0; padding: 10px 18px; border-right: 3px solid #da552f; background: #f8f9fa; border-radius: 8px; color: #4a5568; }

/* Global Avatars Fully Rounded & Removed Outline Fix */
img.avatar, .comment-author img, .qluch-avatar-toggle img, .profile-header img { border-radius: 42% !important; object-fit: cover; }
.qluch-avatar-toggle { outline: none !important; -webkit-tap-highlight-color: transparent; }
.qluch-avatar-toggle:focus, .qluch-avatar-toggle:active { outline: none !important; box-shadow: none !important; }

/* هم‌ترازی کامل تمام اجزای هدر روی یک خط (لوگو/جستجو/منو/دکمه‌ها/اعلان/آواتار) */
.logo, .logo a { display: flex; align-items: center; }
.logo img { display: block; }
.qluch-avatar-toggle, .qluch-notif-toggle, .mobile-add-btn, .hamburger-btn { line-height: 0; }
.header-right, .header-center, .header-left,
.header-m-right, .header-m-left,
.qluch-user-menu, .qluch-notif-menu { align-items: center; }

/* ==========================================================================
   NEW HEADER STYLES (Desktop & Mobile)
   ========================================================================== */
.site-header { background: #fff; border-bottom: 1px solid #e2e8f0; padding: 0; position: sticky; top: 0; z-index: 100000; box-shadow: 0 1px 10px rgba(0,0,0,0.03); height: 76px; display: flex; align-items: center; }
.header-flex { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100%; position: relative; }

/* Right Section */
.header-right { display: flex; align-items: center; gap: 24px; }
.logo a { color: #1a202c; font-size: 24px; font-weight: 700; text-decoration: none; display: flex; align-items: center; gap: 8px; transition: 0.2s;}
.header-search-trigger { background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 16px; display: flex; align-items: center; gap: 10px; color: #64748b; font-family: inherit; font-size: 14px; cursor: pointer; transition: all 0.2s; width: 220px; }
.header-search-trigger:hover { background: #fff; border-color: #cbd5e1; box-shadow: 0 4px 6px rgba(0,0,0,0.02); color: #1a202c; }

/* Center Section (Mega Menu - 2026 Modern Design) */
.header-center { flex: 1; display: flex; justify-content: center; padding: 0 20px; }
.mega-menu { display: flex; list-style: none; gap: 25px; margin: 0; padding: 0; height: 100%; align-items: center; }
.mega-menu > li { height: 76px; display: flex; align-items: center; }
.mega-menu > li > a { color: #4a5568; font-weight: 600; font-size: 15px; text-decoration: none; transition: color 0.2s; display: flex; align-items: center; gap: 6px; }
.mega-menu > li:hover > a { color: #da552f; }
/* Dropdown Caret */
.mega-menu > li.menu-item-has-children > a::after { content: ""; display: inline-block; width: 6px; height: 6px; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; transform: rotate(-45deg); margin-top: -3px; transition: 0.2s; }
.mega-menu > li.menu-item-has-children:hover > a::after { transform: rotate(-225deg); margin-top: 3px; }
/* Sub-menu - Modern 2026 Glassmorphism Effect */
/* حالت پیش‌فرض (تعداد آیتم کم، حداکثر ۴ تا = تک‌ستونه): زیرمنو دقیقاً زیر همان آیتم منو
   (لینک والدش) و کاملاً وسط‌چین نسبت به همان آیتم باز می‌شود، نه وسط کل هدر. به همین
   دلیل مرجع موقعیت‌دهی خودِ <li> است (position: relative روی li)، نه .header-flex. */
.mega-menu > li {
	position: relative;
}
.mega-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	right: auto;
	transform: translateX(-50%) translateY(10px);
	margin-top: 6px;
	background: #fff;
	border: 1px solid rgba(226, 232, 240, 0.6);
	border-radius: 20px;
	padding: 14px;
	box-shadow: 0 20px 40px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.03);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
	will-change: transform, opacity;
	backface-visibility: hidden;
	z-index: 101;
	list-style: none;
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(4, auto);
	grid-auto-columns: 190px;
	column-gap: 4px;
	row-gap: 2px;
	width: max-content;
	min-width: 200px;
	max-width: calc(100vw - 40px);
	box-sizing: border-box;
}
/* پل نامرئی: همان تکنیک منوی زیر آواتار، تا با اضافه‌شدن فاصله، هاور روی گپ قطع نشود */
.mega-menu .sub-menu::before { content: ''; position: absolute; top: -6px; left: 0; right: 0; height: 6px; background: transparent; }
.mega-menu > li:hover .sub-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s; }
.mega-menu .sub-menu li { min-width: 0; width: 100%; }
.mega-menu .sub-menu li a { display: flex; align-items: center; width: 100%; min-height: 42px; padding: 10px 16px; color: #4a5568; font-size: 14px; font-weight: 600; text-decoration: none; border-radius: 12px; line-height: 1.4; transition: background 0.2s, color 0.2s; white-space: normal; word-break: break-word; }
.mega-menu .sub-menu li a:hover { background: rgba(218, 85, 47, 0.08); color: #da552f; }

/* توسعه: وقتی زیرمنو ۵ آیتم یا بیشتر دارد (چندستونه)، وسط‌چینِ کل هدر می‌شود، نه وسط‌چینِ
   خودِ آیتم. کلاس qluch-wide-submenu توسط header.js بر اساس تعداد واقعی آیتم‌های هر زیرمنو
   اضافه می‌شود (به‌جای تکیه بر سلکتور :has که پشتیبانی/رفتار یکسانی در همه‌جا ندارد و باعث
   می‌شد این زیرمنوها به‌جای وسط‌چین، کنار آیتم و گاهی بیرون‌زده به سمت راست باز شوند).
   فقط position لازم است عوض شود؛ left/transform همان مقادیر پایه (بالا) را می‌گیرند، چون
   تکرارشان در یک قاعدهٔ جدا با همان مقدار هیچ فایده‌ای نداشت و صرفاً ریسک بی‌مورد در
   محاسبهٔ کسکید (و پرش/چشمک‌زدن هنگام باز شدن) ایجاد می‌کرد. */
.mega-menu > li.qluch-wide-submenu {
	position: static;
}

/* صفحه‌بندی (Pagination) در آرشیو محصولات، جستجو، تگ‌ها و دسته‌بندی‌ها - طراحی مدرن */
.navigation.pagination {
	margin: 30px 0 10px;
	display: flex;
	justify-content: center;
}
.navigation.pagination .nav-links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 8px;
}
.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	border-radius: 10px;
	background: transparent;
	border: 1px solid transparent;
	color: #4a5568;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.navigation.pagination a.page-numbers:hover {
	background: #fff5f2;
	border-color: #fbd38d;
	color: #da552f;
}
.navigation.pagination .page-numbers.current {
	background: #da552f;
	border-color: #da552f;
	color: #fff;
	box-shadow: 0 4px 12px rgba(218, 85, 47, 0.25);
	cursor: default;
}
.navigation.pagination .page-numbers.dots {
	border: none;
	background: transparent;
	color: #a0aec0;
	min-width: auto;
	padding: 0 4px;
}
.navigation.pagination a.page-numbers.prev,
.navigation.pagination a.page-numbers.next {
	padding: 0 18px;
	background: #f8f9fa;
	border-color: #e2e8f0;
	font-weight: 600;
}
.navigation.pagination a.page-numbers.prev:hover,
.navigation.pagination a.page-numbers.next:hover {
	background: #fff5f2;
	border-color: #fbd38d;
	color: #da552f;
}
@media (max-width: 480px) {
	.navigation.pagination .nav-links { gap: 4px; padding: 6px; }
	.navigation.pagination .page-numbers { min-width: 34px; height: 34px; padding: 0 10px; font-size: 13px; }
	.navigation.pagination a.page-numbers.prev,
	.navigation.pagination a.page-numbers.next { padding: 0 12px; }
}

/* Left Section */
.header-left { display: flex; align-items: center; gap: 16px; }
.btn-submit { background: #da552f; color: #fff; padding: 10px 20px; border-radius: 12px; text-decoration: none; font-weight: 600; font-size: 14px; transition: background 0.2s; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border:none; }
.btn-submit:hover { background: #b33e1c; }

/* User Dropdown Refined & Hover Support */
.qluch-user-menu { position: relative; display: flex; align-items: center; }
.qluch-avatar-toggle { display: block; border-radius: 50%; border: none !important; transition: 0.2s; }
.qluch-avatar-toggle:hover { border: none !important; }
.qluch-dropdown-menu { display: none; position: absolute; left: 0; top: 100%; margin-top: 20px; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 8px 0; min-width: 200px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); list-style: none; z-index: 999; }
.qluch-dropdown-menu::before { content: ''; position: absolute; top: -6px; left: 20px; width: 12px; height: 12px; background: #fff; border-top: 1px solid #e2e8f0; border-right: 1px solid #e2e8f0; transform: rotate(-45deg); }
.qluch-dropdown-menu::after { content: ''; position: absolute; top: -20px; left: 0; right: 0; height: 20px; background: transparent; }

.qluch-dropdown-menu.active { display: block; animation: fadeIn 0.2s; }
.qluch-dropdown-menu li a { display: flex; align-items: center; gap: 10px; padding: 12px 20px; text-decoration: none; color: #4a5568; font-size: 14px; font-weight: 600; transition: 0.2s; }
.qluch-dropdown-menu li a svg { color: #a0aec0; transition: 0.2s; }
.qluch-dropdown-menu li a:hover { background: #f8f9fa; color: #1a202c; }
.qluch-dropdown-menu li a:hover svg { color: #da552f; }
.qluch-dropdown-menu li.logout-item { border-top: 1px solid #e2e8f0; margin-top: 5px; padding-top: 5px; }
.qluch-dropdown-menu li.logout-item a { color: #e53e3e; }
.qluch-dropdown-menu li.logout-item a svg { color: #fc8181; }

@media (min-width: 901px) {
    .qluch-user-menu:hover .qluch-dropdown-menu { display: block; animation: fadeIn 0.2s; }
}

/* AJAX Search Modal */
.search-modal-overlay { position: fixed; inset: 0; background: rgba(255,255,255,0.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 9999; display: flex; justify-content: center; align-items: flex-start; padding-top: 10vh; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
@media (min-width: 901px) { .search-modal-overlay { z-index: 100005; } }
.search-modal-overlay.active { opacity: 1; visibility: visible; }
.search-modal-box { background: #fff; width: 90%; max-width: 700px; border-radius: 24px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15); border: 1px solid #e2e8f0; overflow: hidden; transform: translateY(-20px); transition: transform 0.3s ease; position: relative; }
.search-modal-overlay.active .search-modal-box { transform: translateY(0); }
.close-search-modal { position: absolute; left: 20px; top: 20px; background: #f1f5f9; border: none; width: 36px; height: 36px; border-radius: 50%; font-size: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #64748b; transition: 0.2s; z-index: 10; line-height: 1; }
.close-search-modal:hover { background: #e2e8f0; color: #1a202c; }
.modal-search-form { display: flex; align-items: center; padding: 25px 30px; border-bottom: 1px solid #f1f5f9; position: relative; }
.modal-search-form .search-icon { color: #da552f; margin-left: 15px; }
.modal-search-form input { flex: 1; border: none; font-size: 20px; font-family: inherit; color: #1a202c; outline: none; background: transparent; }
.modal-search-form input::placeholder { color: #94a3b8; }

/* Popular Searches Styles */
.popular-searches { padding: 18px 30px; border-bottom: 1px solid #f1f5f9; background: #fafafa; }
.sidebar-search-box .popular-searches { padding: 15px 0 0 0; border: none; background: transparent; }
.popular-searches span { display: block; font-size: 13px; font-weight: 600; color: #64748b; margin-bottom: 12px; }
.popular-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pop-search-tag { background: #f1f5f9; color: #4a5568; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; text-decoration: none; border: 1px solid transparent; transition: all 0.2s; }
.pop-search-tag:hover { background: #fff5f2; color: #da552f; border-color: #fbd38d; }

.ajax-search-results { padding: 0; max-height: 45vh; overflow-y: auto; display: none; }
.ajax-search-results.active { display: block; padding: 15px; }
.ajax-search-loading, .ajax-search-no-result { padding: 30px; text-align: center; color: #64748b; font-size: 15px; }
.ajax-search-item { display: flex; gap: 15px; padding: 15px; border-radius: 16px; text-decoration: none; transition: 0.2s; align-items: center; }
.ajax-search-item:hover { background: #f8f9fa; }
.search-item-thumb { width: 56px; height: 56px; border-radius: 12px; border: 1px solid #e2e8f0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #fff; flex-shrink: 0;}
.search-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.search-item-info h4 { color: #1a202c; font-size: 16px; margin-bottom: 4px; font-weight: 600; }
.search-item-info p { color: #64748b; font-size: 13px; margin: 0; line-height: 1.4; }
.ajax-search-more { display: block; text-align: center; padding: 15px; color: #da552f; font-weight: 600; text-decoration: none; border-top: 1px solid #f1f5f9; background: #fff5f2; border-radius: 0 0 24px 24px; transition: 0.2s; }
.ajax-search-more:hover { background: #da552f; color: #fff; }

/* ==========================================================================
   MOBILE HEADER & SIDEBAR
   ========================================================================== */
.site-header-mobile { background: #fff; border-bottom: 1px solid #e2e8f0; padding: 0; position: sticky; top: 0; z-index: 100002; height: 70px; display: flex; align-items: center; }
.header-m-flex { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100%; padding: 0 15px; }
.header-m-right { display: flex; align-items: center; gap: 15px; }
.hamburger-btn { background: transparent; border: none; color: #1a202c; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 5px; outline: none; -webkit-tap-highlight-color: transparent;}
.header-m-left { display: flex; align-items: center; gap: 12px; }
.mobile-add-btn { background: #fff5f2; color: #da552f; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; text-decoration: none; border: 1px solid #fbd38d; transition: 0.2s; }
.mobile-add-btn:hover { background: #da552f; color: #fff; }

.mobile-dropdown { left: 0; right: auto; min-width: 220px; }
.mobile-dropdown::before { left: 15px; right: auto; }

/* دکمهٔ ورود/ثبت‌نام و معرفی محصول در هدر (دسکتاپ و موبایل): رنگ خنثی طبق درخواست */
.header-cta-btn { background: #efefef; border-color: #efefef; color: #4e4e4e; }
.header-cta-btn:hover { background: #eaeaea; border-color: #eaeaea; color: #4e4e4e; }
.header-cta-btn svg { color: #4e4e4e; }

/* زنگولهٔ اعلان‌ها در موبایل از رنگ نارنجی دکمه‌های دیگر مستثنی است: هم‌شکل دکمهٔ معرفی محصول، بدون پس‌زمینه، فقط نوار خاکستری */
.mobile-add-btn.qluch-notif-toggle { background: transparent; border-color: #e2e8f0; }
.mobile-add-btn.qluch-notif-toggle:hover { background: transparent !important; color: inherit !important; border-color: #e2e8f0; }

.mobile-sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 100000; opacity: 0; visibility: hidden; transition: 0.3s; }
.mobile-sidebar-overlay.active { opacity: 1; visibility: visible; }
.mobile-sidebar { position: fixed; top: 70px; bottom: 0; right: -100%; width: 100%; max-width: 100%; background: #fff; z-index: 100001; transition: right 0.3s ease; display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mobile-sidebar.active { right: 0; }
.sidebar-search-box { padding: 20px; border-bottom: 1px solid #e2e8f0; background: #f8f9fa; }
.sidebar-search-box form { position: relative; display: flex; align-items: center; }
.sidebar-search-box input { width: 100%; padding: 12px 40px 12px 15px; border-radius: 12px; border: 1px solid #cbd5e1; font-family: inherit; outline: none; }
.sidebar-search-box form svg { position: absolute; right: 12px; color: #94a3b8; }
.sidebar-search-box .ajax-search-results { max-height: 300px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; margin-top: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }

/* ==========================================================================
   توسعه‌های جدید: آیکون فهرست‌ها و منوی آکاردئونی موبایل ۲۰۲۶
   ========================================================================== */
.menu-item-inner { display: flex; align-items: center; gap: 10px; }
.menu-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; color: currentColor; }
.menu-icon.svg-icon svg { width: 100%; height: 100%; }

/* Mobile Menu Accordion 2026 Redesign */
.sidebar-menu-wrap { padding: 15px 20px 30px; }
.mobile-mega-menu { list-style: none; margin: 0; padding: 0; }
.mobile-mega-menu > li { margin-bottom: 6px; border-radius: 14px; overflow: hidden; }
.mobile-mega-menu > li > a { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; color: #1a202c; font-weight: 600; text-decoration: none; background: #f8f9fa; border-radius: 14px; transition: all 0.2s; border: 1px solid transparent; }
.mobile-mega-menu > li > a:hover { background: #f1f5f9; }
.mobile-mega-menu > li.active > a { background: #fff5f2; color: #da552f; border-color: #fbd38d; }

.submenu-toggle-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: transparent; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); color: #64748b; margin-right: auto; pointer-events: none; }
.mobile-mega-menu > li.active > a .submenu-toggle-btn { color: #da552f; transform: rotate(180deg); }

.mobile-mega-menu .sub-menu { list-style: none; padding: 0 15px 0 0; margin: 0; max-height: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1); background: transparent; }
.mobile-mega-menu .sub-menu li { border-right: 2px solid #e2e8f0; margin-left: 10px; position: relative; }
.mobile-mega-menu .sub-menu li a { display: flex; align-items: center; gap: 10px; padding: 12px 20px; color: #64748b; font-size: 14px; font-weight: 500; text-decoration: none; border-radius: 0 10px 10px 0; transition: all 0.2s; margin-top: 4px; margin-bottom: 4px; }
.mobile-mega-menu .sub-menu li a::before { content: ''; position: absolute; right: -2px; top: 0; bottom: 0; width: 2px; background: #da552f; opacity: 0; transition: 0.2s; }
.mobile-mega-menu .sub-menu li a:hover { background: rgba(218, 85, 47, 0.05); color: #da552f; }
.mobile-mega-menu .sub-menu li a:hover::before { opacity: 1; }
/* End of New Menu Styles */


/* Display Toggles based on screen */
.hidden-mobile { display: flex !important; }
.hidden-desktop { display: none !important; }

/* Main Layout & Old Styles Below */
.main-layout { display: flex; gap: 30px; margin-top: 40px; margin-bottom: 60px; align-items: flex-start; }
.content-area { flex: 3; min-width: 0; }
.sidebar { flex: 1; background: #fff; padding: 24px; border-radius: 12px; border: 1px solid #e2e8f0; height: fit-content; position: sticky; top: 90px; }

/* ==========================================================================
   رتبه‌بندی مینیمال صفحه اصلی (امروز/دیروز/هفته گذشته/ماه گذشته/هر ماه)
   ========================================================================== */
.qluch-rank-section { margin-bottom: 44px; }
.qluch-rank-section:last-child { margin-bottom: 0; }
.qluch-rank-title { font-size: 20px; font-weight: 700; margin-bottom: 20px; color: #1a202c; }
.qluch-rank-section[data-section="today"] .qluch-rank-title { font-size: 20px; }
.qluch-rank-list { display: flex; flex-direction: column; gap: 12px; }

.qluch-row { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 16px; background: #fdfdfd; border: 1px solid #ffffff; border-radius: 14px; transition: all 0.2s; }
.qluch-row-stretched-link { position: absolute; inset: 0; z-index: 1; }
.qluch-row-tags, .qluch-row .turbo-container { position: relative; z-index: 2; pointer-events: none; }
.qluch-row-tags .qluch-row-tag,
.qluch-row .turbo-container .btn-turbo,
.qluch-row .turbo-container .btn-comments { pointer-events: auto; }
.qluch-row:hover { border-color: #cbd5e1; box-shadow: 0 6px 16px rgba(0,0,0,0.05); transform: translateY(-1px); }

.qluch-row-thumb { flex-shrink: 0; width: 70px; height: 70px; border-radius: 25px; overflow: hidden; margin-top: 2px; display: block; }
.qluch-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qluch-row-thumb-placeholder { width: 100%; height: 100%; background: #f1f5f9; color: #94a3b8; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; }

.qluch-row-main { flex: 1; min-width: 0; display: block; }
.qluch-row-title-link, .qluch-row-desc-link { display: block; text-decoration: none; color: inherit; }
.qluch-row-title { font-size: 16px; font-weight: 700; color: #1a202c; margin-bottom: 4px; transition: color 0.15s; }
.qluch-row:hover .qluch-row-title { color: #da552f; }
.qluch-row-num { color: #000000; font-weight: 700; margin-left: 6px; }
.qluch-row-launch { font-size: 12px; font-weight: 700; color: #da552f; margin-bottom: 5px; }
.qluch-row-desc { font-size: 14px; color: #718096; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.qluch-row-tags { font-size: 13px; color: #a0aec0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.qluch-row-tags .qluch-row-tag { background: #f1f5f9; color: #4a5568; font-size: 13px; padding: 6px 12px; border-radius: 20px; text-decoration: none; display: inline-block; transition: background 0.2s; }
.qluch-row-tags .qluch-row-tag:hover { background: #e2e8f0; color: #da552f; }
.qluch-row-tags .qluch-row-tag-sep { display: none; }

.qluch-more-btn { display: block; margin: 18px auto 0; background: #fff; border: 1px solid #e2e8f0; color: #4a5568; font-family: inherit; font-size: 13.5px; font-weight: 600; padding: 10px 22px; border-radius: 10px; cursor: pointer; transition: all 0.2s; }
.qluch-more-btn:hover { border-color: #da552f; color: #da552f; }
.qluch-more-btn.loading { opacity: 0.6; cursor: wait; }

.qluch-monthly-list { display: flex; flex-direction: column; gap: 22px; }
.qluch-month-block { border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px 16px 4px; }
.qluch-month-name { font-size: 13px; font-weight: 700; color: #a0aec0; margin-bottom: 2px; }
.qluch-month-block .qluch-row { border: none; border-radius: 0; padding: 10px 0 4px; background: transparent; box-shadow: none; transform: none; }

/* شماره رتبه، قبل از هر محصول */
.product-rank { flex-shrink: 0; width: 34px; height: 34px; margin-left: 16px; border-radius: 50%; background: #f1f5f9; color: #718096; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; }
.product-rank.rank-1 { background: linear-gradient(135deg, #ffe08a, #f5a623); color: #7a4a00; }
.product-rank.rank-2 { background: linear-gradient(135deg, #e6eaf0, #c3cbd6); color: #4a5568; }
.product-rank.rank-3 { background: linear-gradient(135deg, #f3cba3, #d99a5b); color: #6b3d10; }

/* Product List */
.section-title { font-size: 22px; font-weight: 700; margin-bottom: 24px; color: #1a202c; }
.product-list { display: flex; flex-direction: column; gap: 16px; }
.product-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; display: flex; justify-content: space-between; align-items: center; transition: all 0.2s; }
.product-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.05); border-color: #cbd5e1; }
.product-main { display: flex; gap: 20px; align-items: center; flex: 1; text-decoration: none; }
.product-thumb { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 1px solid #e2e8f0; overflow: hidden; }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-thumb-placeholder { width: 100%; height: 100%; background: #edf2f7; display: flex; align-items: center; justify-content: center; color: #a0aec0; font-size: 28px; }
.product-details { display: flex; flex-direction: column; justify-content: center; }
.product-details h2 { font-size: 18px; margin-bottom: 4px; font-weight: 600; color: #1a202c; transition: color 0.2s; }
.product-card:hover .product-details h2 { color: #da552f; }
.product-desc { color: #718096; font-size: 15px; margin-bottom: 8px; }
.topic-tag { font-size: 12px; background: #edf2f7; color: #4a5568; padding: 4px 10px; border-radius: 12px; margin-left: 5px; display: inline-block; }

/* دکمه توربو (رای دادن) */
.turbo-container { margin-right: 15px; }

/* توسعه ۲: کوچک‌تر کردن دکمه توربو و افزودن دکمه کامنت‌ها، فقط در باکس‌های محصول صفحه اصلی */
.qluch-row .turbo-container { display: flex; align-items: center; gap: 8px; margin-right: 15px; align-self: center; }
.qluch-row .btn-turbo { padding: 8px 10px; min-width: 52px; border-radius: 10px; }
.qluch-row .btn-turbo .turbo-icon { margin-bottom: 3px; }
.qluch-row .btn-turbo .count { font-size: 13px; }
.qluch-row .btn-comments { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 52px; transition: all 0.2s; font-family: inherit; text-decoration: none; color: #1a202c; }
.qluch-row .btn-comments:hover { border-color: #da552f; background: #fff5f2; color: #da552f; }
.qluch-row .btn-comments .comment-icon { margin-bottom: 3px; line-height: 1; display: block; }
.qluch-row .btn-comments .count { font-weight: 700; font-size: 13px; line-height: 1; }
.btn-turbo { position: relative; overflow: visible; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 16px; cursor: pointer; display: flex; flex-direction: column; align-items: center; min-width: 70px; transition: all 0.2s; font-family: inherit; }
.btn-turbo:hover { border-color: #da552f; background: #fff5f2; color: #da552f; }
.btn-turbo.voted { background: #da552f; border-color: #da552f; color: #fff; }
.btn-turbo .turbo-icon { margin-bottom: 4px; line-height: 1; display: block; }
.btn-turbo.turbo-masked .count { letter-spacing: 1px; opacity: 0.55; }
.btn-turbo .count { font-weight: 700; font-size: 15px; line-height: 1; }

/* حس شتاب و توربو کردن: انیمیشن واو مومنت هنگام کلیک روی دکمه توربو */
@keyframes turboButtonPop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.09); }
    60%  { transform: scale(0.97); }
    100% { transform: scale(1); }
}
@keyframes turboIconPunch {
    0%   { transform: scale(1) rotate(0deg); }
    25%  { transform: scale(1.5) rotate(-18deg); }
    55%  { transform: scale(0.85) rotate(10deg); }
    80%  { transform: scale(1.15) rotate(-4deg); }
    100% { transform: scale(1) rotate(0deg); }
}
@keyframes turboRingBurst {
    0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0.9; }
    100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}
.btn-turbo.turbo-boost { animation: turboButtonPop 0.5s ease; }
.btn-turbo.turbo-boost .turbo-icon { animation: turboIconPunch 0.55s ease; }
.btn-turbo.turbo-boost::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 2px solid #da552f;
    transform: translate(-50%, -50%) scale(0.4);
    animation: turboRingBurst 0.6s ease-out;
    pointer-events: none;
}

/* Multi-step Form & Auth */
.form-container { background: #fff; border: 1px solid #e2e8f0; padding: 40px; border-radius: 16px; max-width: 700px; margin: 40px auto; box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
.form-group { margin-bottom: 24px; text-align: right; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 15px; color: #2d3748; }
.form-control { width: 100%; padding: 14px; border: 1px solid #cbd5e1; border-radius: 10px; font-family: inherit; font-size: 15px; transition: all 0.2s; background: #f8f9fa; }
.form-control:focus { outline: none; border-color: #da552f; background: #fff; box-shadow: 0 0 0 3px rgba(218, 85, 47, 0.1); }
textarea.form-control { min-height: 120px; resize: vertical; }

.auth-container { max-width: 450px; margin: 30px auto 60px auto; text-align: center; background: #fff; padding: 40px; border-radius: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); border: 1px solid #e2e8f0; }
.social-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 14px; border-radius: 12px; font-size: 16px; font-weight: 600; text-decoration: none; margin-bottom: 15px; transition: 0.2s; cursor: pointer; }
.btn-google { background: #fff; color: #3c4043; border: 1px solid #dadce0; }
.btn-google:hover { background: #f8f9fa; border-color: #d2e3fc; }
.btn-github { background: #24292e; color: #fff; border: 1px solid #24292e; }
.btn-github:hover { background: #1b1f23; }
.btn-x { background: #000; color: #fff; border: 1px solid #000; }
.btn-x:hover { background: #222; }
/* ==========================================================================
   ویزارد ورود / ثبت‌نام با ایمیل + کد تایید (توسعه ۱ و ۳)
   ========================================================================== */
.auth-logo-badge { width: 60px; height: 60px; background: #da552f; color: #fff; border-radius: 50%; display: inline-flex; justify-content: center; align-items: center; font-size: 30px; font-weight: bold; margin-bottom: 15px; }
.auth-title { font-size: 22px; color: #1a202c; margin-bottom: 8px; }
.auth-subtitle { color: #718096; font-size: 14px; margin-bottom: 24px; }
.auth-step.step-hidden, .step-hidden { display: none !important; }
.auth-form { text-align: right; }
.auth-form .form-group { margin-bottom: 16px; }
.auth-submit-btn { width: 100%; padding: 14px; font-size: 16px; }

/* Loading Spinner دکمه‌های فرم ورود/ثبت‌نام (به‌جای متن «در حال پردازش...») */
.qluch-btn-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.45); border-top-color: #fff; border-radius: 50%; animation: qluchSpin 0.7s linear infinite; }
@keyframes qluchSpin { to { transform: rotate(360deg); } }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.auth-alert { border-radius: 10px; padding: 12px 16px; font-size: 13px; margin-bottom: 18px; text-align: right; }
.auth-alert-error { background: #fff5f5; color: #c53030; border: 1px solid #feb2b2; }
.auth-alert-info { background: #ebf8ff; color: #2b6cb0; border: 1px solid #90cdf4; }
.otp-input { text-align: center; letter-spacing: 12px; font-size: 22px; font-weight: 700; direction: ltr; }
.password-hint { font-size: 12px; color: #a0aec0; margin: -6px 0 16px 0; text-align: right; }
.username-hint { display: block; font-size: 12px; color: #a0aec0; margin-top: 6px; text-align: right; }
.username-hint-ok { color: #38a169; }
.username-hint-error { color: #c53030; }
.username-hint-locked { color: #dd6b20; }
.auth-resend-row { font-size: 13px; color: #718096; margin-top: 18px; }
.resend-timer { font-size: 12px; color: #a0aec0; }
.link-btn { background: none; border: none; color: #da552f; font-weight: 600; font-size: 13px; cursor: pointer; padding: 0; font-family: inherit; }
.link-btn:hover { text-decoration: underline; }
.auth-back-btn { display: block; margin: 16px auto 0 auto; }
.btn-otp-login-alt { width: 100%; margin-top: 10px; padding: 13px; font-size: 14px; font-weight: 600; font-family: inherit; background: #f1f3f5; color: #718096; border: 1px solid #e2e8f0; border-radius: 12px; cursor: pointer; transition: all 0.2s; }
.btn-otp-login-alt:hover { background: #e9ecef; color: #4a5568; }
.btn-otp-login-alt:disabled { opacity: 0.6; cursor: default; }
.auth-terms { margin-top: 25px; font-size: 12px; color: #a0aec0; }
.auth-divider { display: flex; align-items: center; text-align: center; color: #a0aec0; font-size: 12px; margin: 20px 0; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; border-bottom: 1px solid #e2e8f0; }
.auth-divider span { padding: 0 12px; }
.social-btn.disabled, button.social-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-tabs { display: flex; background: #f1f5f9; border-radius: 12px; padding: 4px; margin-bottom: 20px; gap: 4px; }
.auth-tab { flex: 1; border: none; background: transparent; padding: 10px; border-radius: 9px; font-family: inherit; font-size: 13px; font-weight: 600; color: #718096; cursor: pointer; transition: 0.2s; }
.auth-tab.active { background: #fff; color: #da552f; box-shadow: 0 2px 6px rgba(0,0,0,0.06); }



/* ==========================================
   Comments — بدون باکسِ اسکرول‌دار: کادر نوشتن نظر یک کارتِ بزرگ و مستقل در
   ابتدای فهرست است، و خودِ فهرستِ نظرات به‌جای اسکرولِ داخلی با دکمه‌ی
   «بارگذاری بیشتر نظرات» هر بار ۳۰ تای دیگر را نمایش می‌دهد (طبق طرح نمونه)
   ========================================== */
.qluch-comments-heading { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; color: #1a202c; margin: 24px 0 14px; }
.qluch-comments-heading .qluch-comments-count { font-weight: 600; color: #8e8e8e; font-size: 15px; }
.qluch-comments-heading-icon { display: inline-flex; align-items: center; color: #a0aec0; flex-shrink: 0; }

/* ردیفِ شمارشِ نظرات + مرتب‌سازی — زیرِ کادر نوشتن نظر و بالای اولین نظر:
   شمارش سمت راست، انتخابِ ترتیب (جدیدترین/قدیمی‌ترین) سمت چپ */
.qluch-comments-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.qluch-comments-count-label { font-size: 14.5px; font-weight: 700; color: #1a202c; }
.qluch-comments-sort-select { background: #fff; border: 1px solid #e2e8f0; color: #4a5568; font-family: inherit; font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 10px; cursor: pointer; }
.qluch-comments-sort-select:focus { outline: none; border-color: #da552f; }
.qluch-comments-sort-select:disabled { opacity: 0.6; cursor: default; }

.ig-no-comments-yet { text-align: center; color: #8e8e8e; font-size: 14px; padding: 40px 10px; margin: 0; direction: rtl; }

/* کارتِ کادر نوشتن نظر — عریض، مستقل، بالای فهرست نظرات (نه دیگر چسبیده به فوترِ یک باکسِ اسکرول‌دار) */
.qluch-composer-card { background: #fff; border: 1px solid #c7d2e0; border-radius: 26px; padding: 22px 22px 18px; margin-bottom: 28px; }
.comment-notes, .logged-in-as { display: none !important; }

.ig-login-footer.qluch-composer-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; }
.ig-login-footer span { font-size: 13.5px; color: #4a5568; font-weight: 600; }
.ig-login-footer .btn-submit { flex-shrink: 0; padding: 9px 18px; font-size: 13px; border-radius: 20px; }

.comment-list { padding-right: 0 !important; list-style: none; direction: rtl; }
.comment-list .comment { background: transparent !important; border: none !important; padding: 0 !important; margin-bottom: 0 !important; }

/* هر آیتم کامنت: بدون کارت/باکس، فاصله‌گذاری سخاوتمندانه‌تر و یک خط نازک جداکننده */
.comment-body-qluch.ig-comment { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; transition: none !important; }
.comment-list > li.ig-comment-item { padding: 24px 0; border-bottom: 1px solid #f2f3f5; }
.comment-list > li.ig-comment-item:first-child { padding-top: 0; }
.comment-list > li.ig-comment-item:last-child { border-bottom: none; padding-bottom: 0; }
.comment-list .children > li.ig-comment-item { border-bottom: none; padding: 18px 0; }

.ig-comment-row { display: flex; align-items: flex-start; gap: 12px; }

/* آواتار کاملاً گرد و کوچک، دقیقاً مثل اینستاگرام */
.ig-comment-avatar-col { flex-shrink: 0; }
.ig-comment-avatar-col img.ig-avatar-img,
img.avatar.ig-avatar-img { border-radius: 50% !important; object-fit: cover; display: block; }
.ig-avatar-link { display: block; line-height: 0; }

.ig-comment-content-col { flex: 1; min-width: 0; }

/* ردیف بالا: نام‌کاربری + نشان سازنده + زمان ارسال، همه با هم */
.ig-comment-header-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 4px 0; }
.ig-comment-username { font-weight: 600; color: #1a202c; text-decoration: none; }
.ig-comment-username:hover { text-decoration: underline; }
.ig-comment-time { font-size: 12px; color: #8e8e8e; font-weight: 400; }

/* متن نظر: همیشه در خط جدید و زیر نام شروع می‌شود، با تراز و جهت یکدست فارسی تا خط‌ها جلو/عقب نشوند */
.ig-comment-textline { font-size: 14.5px; line-height: 1.75; color: #1a202c; margin: 0 0 6px 0; word-wrap: break-word; overflow-wrap: break-word; text-align: right; direction: rtl; unicode-bidi: plaintext; }
.ig-comment-text { display: block; color: #262626; font-weight: 400; }
.ig-comment-text a { color: #00376b; }

/* نشان «سازنده»: کنار نام کاربری، برای نظری که سازنده‌ی همین محصول ثبت کرده است */
.ig-maker-badge { display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 3px; background: #fff2ec; color: #da552f; border: 1px solid rgba(218,85,47,0.25); border-radius: 999px; padding: 1px 8px 1px 7px; font-size: 10.5px; font-weight: 700; vertical-align: middle; line-height: 1.7; }
.ig-maker-badge svg { flex-shrink: 0; }
.ig-maker-badge-text { white-space: nowrap; }

/* نوار «سنجاق‌شده توسط سازنده» و برجسته‌سازی نظر سنجاق‌شده */
.ig-comment-pinned { background: linear-gradient(180deg, #fff8f6, transparent 60px); border-radius: 12px; margin: 0 -12px 4px; padding-left: 12px !important; padding-right: 12px !important; }
.ig-pinned-banner { display: flex; align-items: center; gap: 6px; color: #da552f; font-size: 11.5px; font-weight: 700; margin: 0 0 8px 0; padding-right: 48px; }
@media (max-width: 480px) { .ig-pinned-banner { padding-right: 0; } }

/* نوار «گزارش باگ خصوصی» — فقط برای گزارش‌دهنده و سازنده قابل مشاهده است */
.ig-private-banner { display: flex; align-items: center; gap: 6px; color: #e53e3e; font-size: 11.5px; font-weight: 700; margin: 0 0 8px 0; padding-right: 48px; }
@media (max-width: 480px) { .ig-private-banner { padding-right: 0; } }

/* ردیف متادیتا: تعداد پسند · پاسخ · سنجاق · حذف — کوچک و خاکستری، دقیقاً مثل اینستاگرام */
.ig-comment-meta-row { display: flex; align-items: center; gap: 14px; font-size: 12px; color: #8e8e8e; flex-wrap: wrap; }
.ig-comment-likes-count { color: #8e8e8e; }
.ig-comment-meta-row .comment-reply-link { background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; font-size: 12px !important; font-weight: 600 !important; color: #8e8e8e !important; text-decoration: none !important; display: inline !important; }
.ig-comment-meta-row .comment-reply-link:hover { color: #1a202c !important; }
.ig-comment-meta-row .comment-reply-link span { color: inherit !important; }
.ig-comment-meta-row .comment-reply-login { background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; font-size: 12px !important; font-weight: 600 !important; color: #8e8e8e !important; text-decoration: none !important; display: inline !important; }
.ig-comment-meta-row .comment-reply-login:hover { color: #1a202c !important; }


.comment-pin-btn, .comment-delete-btn, .comment-report-btn { background: transparent; border: none; padding: 0; margin: 0; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; color: #8e8e8e; transition: color 0.2s; }
.comment-report-btn:hover { color: #a0453a; }
.comment-pin-btn:hover { color: #da552f; }
.comment-pin-btn.pinned { color: #da552f; }
.comment-delete-btn:hover { color: #e53e3e; }
.comment-pin-btn:disabled, .comment-delete-btn:disabled, .comment-report-btn:disabled { opacity: 0.5; cursor: default; }

/* دکمه قلب: مینیمال، بدون پس‌زمینه، فقط آیکون */
.ig-heart-btn.comment-like-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; color: #8e8e8e; cursor: pointer; padding: 2px; margin-top: 2px; flex-shrink: 0; border-radius: 0; }
.ig-heart-btn.comment-like-btn:hover { background: transparent; color: #262626; }
.ig-heart-btn.comment-like-btn.liked { color: #ed4956; }
.ig-heart-btn.comment-like-btn.like-pop svg { animation: commentLikePop 0.4s ease; }
@keyframes commentLikePop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* رشته‌های پاسخ: تورفتگی ظریف با خط اتصال نازک، بدون باکس دور آن */
.comment-list .children { margin-right: 46px !important; margin-top: 4px !important; padding-right: 0 !important; border-right: none !important; border-left: none !important; list-style: none !important; }
.comment-list .children .children { margin-right: 34px !important; }
.comment-list .children .children .children { margin-right: 26px !important; }
.comment-list .children .children .children .children { margin-right: 20px !important; }

/* دکمه «مشاهده پاسخ‌ها» — الگوی جمع‌وجورشدن رشته پاسخ‌ها مثل اینستاگرام */
.ig-view-replies-btn { display: flex; align-items: center; gap: 10px; background: transparent; border: none; cursor: pointer; padding: 6px 0; margin: 2px 0 2px 46px; font-family: inherit; font-size: 12.5px; font-weight: 600; color: #8e8e8e; }
.ig-view-replies-btn:hover { color: #1a202c; }
.ig-view-replies-btn .ig-reply-line { width: 24px; height: 1px; background: #dbdbdb; display: inline-block; }
.ig-view-replies-btn.open .ig-reply-line { background: #c7c7c7; }

/* نوار «در حال پاسخ به ...» — بالای کادر نوشتن نظر */
#cancel-comment-reply-link { display: none !important; }
.qluch-reply-to-bar { display: none; align-items: center; gap: 10px; background: #f8f9fa; border: 1px solid #e2e8f0; border-radius: 12px; padding: 8px 12px; margin-bottom: 14px; }
.qluch-reply-to-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid #fff; box-shadow: 0 0 0 1px #e2e8f0; }
.qluch-reply-to-text { flex: 1; min-width: 0; font-size: 12.5px; color: #718096; }
.qluch-reply-to-text strong { display: block; font-size: 13.5px; color: #1a202c; }
.qluch-cancel-reply-btn { flex-shrink: 0; background: #fff; border: 1.5px solid #e2e8f0; color: #da552f; font-family: inherit; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 20px; cursor: pointer; white-space: nowrap; transition: all 0.2s; }
.qluch-cancel-reply-btn:hover { background: #da552f; border-color: #da552f; color: #fff; }

/* کادر نوشتن نظر — طبق طرح نمونه: متن‌بازِ بزرگ در بالا، و ردیفِ پایینی با
   آواتار سمت راست و دکمه‌های ارسال/ایموجی/منشن در سمت چپ */
#respond { width: 100%; }
#commentform { width: 100%; }

.qluch-comment-textarea-wrap { position: relative; width: 100%; margin-bottom: 0 !important; }
.qluch-comment-textarea { display: block; width: 100%; resize: none !important; border: none !important; background: transparent !important; box-shadow: none !important; padding: 4px 0 !important; margin: 0 !important; min-height: 76px !important; max-height: 220px !important; font-size: 16px !important; line-height: 1.6 !important; font-family: inherit; box-sizing: border-box; border-radius: 0 !important; overflow-y: auto; overflow-x: hidden; word-wrap: break-word; overflow-wrap: break-word; direction: rtl; text-align: right; }

/* اسکرول‌بار داخل کادر نوشتن نظر، مینیمال */
.qluch-comment-textarea { scrollbar-width: thin; scrollbar-color: #d8dee5 transparent; }
.qluch-comment-textarea::-webkit-scrollbar { width: 5px; }
.qluch-comment-textarea::-webkit-scrollbar-track { background: transparent; }
.qluch-comment-textarea::-webkit-scrollbar-thumb { background: #d8dee5; border-radius: 10px; }
.qluch-comment-textarea::-webkit-scrollbar-thumb:hover { background: #c2c9d1; }
.qluch-comment-textarea:focus { outline: none; }
.qluch-comment-textarea::placeholder { color: #8e8e8e; }

/* ردیف پایینیِ کادر نظر: آواتار کاربر سمت راست، دکمه‌های ارسال/ایموجی/منشن سمت چپ */
.qluch-composer-bottom-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; padding-top: 8px; border-top: 1px solid #f2f3f5; }
.qluch-composer-avatar-col { flex-shrink: 0; line-height: 0; }
.qluch-composer-avatar-col img.ig-composer-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: block; }
.qluch-composer-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; direction: rtl; }

/* توسعه: پیام هشدار محدودیت ۶۰۰ کاراکتری — فقط وقتی کاربر به سقف برسد نمایش داده می‌شود */
.qluch-comment-limit-msg { display: none; margin: 10px 4px 0; font-size: 12px; color: #c2410c; text-align: right; }
.qluch-comment-limit-msg.qluch-limit-visible { display: block; }

/* توسعه: پیام خطای ارسال نظر (مثلاً محدودیت سرعت ارسال یا نظر تکراری) — به‌جای ریدایرکت
   به wp-comments-post.php، همین‌جا زیر کادر نوشتن نظر نمایش داده می‌شود */
.qluch-comment-submit-error { display: none; margin: 10px 4px 0; font-size: 12px; color: #e53e3e; text-align: right; }
.qluch-comment-submit-error.qluch-error-visible { display: block; }

/* توسعه: دکمه و پنل ایموجی */
.emoji-trigger-btn { position: static; flex-shrink: 0; background: none; border: none; width: 24px; height: 24px; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
/* توسعه: پنل ایموجی درست بالای ردیفِ پایینیِ کادر (جایی که خودِ دکمه‌ی ایموجی قرار دارد) باز می‌شود */
.emoji-picker-panel { display: none; position: absolute; left: 0; bottom: 58px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 10px 28px rgba(0,0,0,0.14); padding: 12px; z-index: 20; width: 272px; max-height: 216px; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; }
.emoji-picker-panel.open { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; justify-items: center; }
.emoji-picker-panel button { background: none; border: none; font-size: 20px; width: 100%; max-width: 40px; height: 40px; padding: 0; border-radius: 8px; cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.emoji-picker-panel button:hover { background: #f1f5f9; }
.emoji-picker-panel::-webkit-scrollbar { width: 6px; }
.emoji-picker-panel::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 3px; }

/* توسعه: دکمه و پنل منشن کردن کاربر (@) در کادر نظر */
.mention-trigger-btn { position: static; flex-shrink: 0; background: none; border: none; width: 22px; height: 24px; font-size: 16px; font-weight: 700; color: #da552f; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; font-family: inherit; }

/* توسعه: آواتار سازنده‌ی محصول کنار دکمه‌ی @ — هم‌اندازه‌ی دکمه‌ی ایموجی؛ با یک کلیک، سازنده منشن می‌شود */
.qluch-mention-owner-btn { position: static; flex-shrink: 0; background: none; border: none; width: 24px; height: 24px; padding: 0; cursor: pointer; line-height: 0; display: flex; align-items: center; justify-content: center; }
.qluch-mention-owner-btn img.qluch-mention-owner-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; display: block; }
.qluch-mention-suggestions-panel { display: none; position: absolute; top: 0; left: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 10px 28px rgba(0,0,0,0.14); padding: 6px; z-index: 21; width: 280px; max-height: 260px; overflow-y: auto; box-sizing: border-box; }
.qluch-mention-suggestions-panel.open { display: block; }
.qluch-mention-suggestion-item { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; text-align: right; padding: 8px 10px; border-radius: 10px; cursor: pointer; font-family: inherit; }
.qluch-mention-suggestion-item:hover, .qluch-mention-suggestion-item.is-active { background: #f8f9fa; }
.qluch-mention-suggestion-item img { flex-shrink: 0; }
.qluch-mention-suggestion-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.qluch-mention-suggestion-text strong { font-size: 13.5px; color: #1a202c; }
.qluch-mention-suggestion-text small { font-size: 12px; color: #a0aec0; direction: ltr; }
.qluch-mention-no-result, .qluch-mention-loading { padding: 10px; font-size: 13px; color: #a0aec0; text-align: center; }

/* لینک منشن داخل متن نظر ثبت‌شده */
a.qluch-mention { color: #da552f; font-weight: 600; text-decoration: none; unicode-bidi: isolate; direction: ltr; }
a.qluch-mention:hover { text-decoration: underline; }

/* توسعه: کارت پیش‌نمایش پروفایل هنگام هاور روی منشن */
.qluch-mention-preview-card { position: absolute; z-index: 999; width: 260px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,0.16); padding: 14px; display: none; }
.qluch-mention-preview-card.open { display: block; }
.qluch-mention-preview-card .qluch-mention-loading { padding: 4px 0; }
.qluch-mention-preview-inner { display: block; color: inherit; text-decoration: none; }
.qluch-mention-preview-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.qluch-mention-preview-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid #edf2f7; }
.qluch-mention-preview-name { display: block; font-size: 14px; color: #1a202c; }
.qluch-mention-preview-username { display: block; font-size: 12px; color: #a0aec0; direction: ltr; text-align: left; }
.qluch-mention-preview-role { display: inline-block; font-size: 11.5px; font-weight: 600; color: #da552f; background: #fff5f2; padding: 3px 10px; border-radius: 20px; margin-bottom: 8px; }
.qluch-mention-preview-bio { font-size: 13px; color: #4a5568; line-height: 1.6; margin: 0 0 8px 0; }
.qluch-mention-preview-stats { font-size: 12.5px; color: #718096; }
.qluch-mention-preview-stats strong { color: #1a202c; }

@media (max-width: 768px) {
    .qluch-mention-suggestions-panel { width: 100%; max-width: 260px; }
    .qluch-mention-preview-card { width: 220px; }
}

/* دکمه‌ی «بارگذاری نظرات بیشتر» — به‌جای اسکرول‌باکس، هر بار ۳۰ نظر سطح اول دیگر اضافه می‌شود */
.qluch-comments-load-more-wrap { display: flex; justify-content: center; margin-top: 20px; }
.qluch-load-more-comments-btn { background: #fff; border: 1.5px solid #e2e8f0; color: #1a202c; font-family: inherit; font-size: 13.5px; font-weight: 700; padding: 10px 26px; border-radius: 20px; cursor: pointer; transition: all 0.2s; }
.qluch-load-more-comments-btn:hover { background: #f8f9fa; border-color: #da552f; color: #da552f; }
.qluch-load-more-comments-btn:disabled { opacity: 0.6; cursor: default; }
/* دکمه ارسال — دقیقاً مثل دکمه «Post» اینستاگرام: فقط متن، خاکستری تا زمانی که متنی نوشته نشده */
.form-submit { margin: 0 !important; flex-shrink: 0; }
#qluch-comment-submit-btn { background: transparent !important; border: none !important; box-shadow: none !important; color: #b3b3b3 !important; font-family: inherit; font-weight: 700; font-size: 13.5px; padding: 6px 2px !important; cursor: default; pointer-events: none; transition: color 0.15s; }
#qluch-comment-submit-btn.qluch-submit-active { color: #da552f !important; cursor: pointer; pointer-events: auto; }

/* توسعه ۴: دکمه لایک کامنت */
.comment-like-btn { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: none; color: #718096; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: all 0.2s; }
.comment-like-btn:hover { background: #f1f5f9; color: #e53e3e; }
.comment-like-btn.liked { color: #e53e3e; }
.comment-like-btn.like-pop svg { animation: commentLikePop 0.4s ease; }
@keyframes commentLikePop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* Single Product & Galleries */
.single-product-header { display: flex; gap: 24px; align-items: flex-start; width: 100%; margin-bottom: 30px; }
.product-header-info h1 { font-size: 28px; font-weight:700; color: #1a202c; margin-bottom:8px; line-height: 1.4; }
.product-header-info p { color: #4a5568; font-size:18px; margin-bottom:12px; line-height: 1.6; }
.tags-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.product-thumb { width: 100px !important; height: 100px !important; min-width: 100px !important; min-height: 100px !important; flex-shrink: 0 !important; aspect-ratio: 1 / 1 !important; border-radius: 30% !important; overflow: hidden !important; }
.product-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 30% !important; }
.gallery-item-scroll { cursor: grab; }
.gallery-item-scroll:active { cursor: grabbing; }
.product-gallery-scroll::-webkit-scrollbar, .lightbox-scroll::-webkit-scrollbar { display: none !important; }
.gallery-nav-btn { transition: all 0.2s ease; }
.gallery-nav-btn:hover { background: #da552f !important; color: #fff !important; border-color: #da552f !important; }
#galleryLightbox { user-select: none; z-index: 999999 !important; }
.lightbox-nav { transition: background 0.2s; }
.lightbox-nav:hover { background: rgba(255,255,255,0.3) !important; }
.lightbox-scroll { cursor: grab; }
.lightbox-scroll:active { cursor: grabbing; }
.lightbox-close { position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,0.2); color: #fff; width: 44px; height: 44px; border-radius: 50%; font-size: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; z-index: 1000000 !important; transition: background 0.2s; line-height: 1; }
.desktop-team-section { display: block; }
.mobile-team-section { display: none; background: #fff; padding: 25px; border-radius: 16px; border: 1px solid #e2e8f0; margin-bottom: 30px; }
.mobile-social-section { display: none; background: #fff; padding: 20px; border-radius: 16px; border: 1px solid #e2e8f0; margin-bottom: 30px; text-align: center; }
.desktop-meta-section { background: #fff; padding: 18px 20px; border-radius: 12px; border: 1px solid #e2e8f0; margin-bottom: 15px; }
.mobile-meta-section { display: none; background: #fff; padding: 20px; border-radius: 16px; border: 1px solid #e2e8f0; margin-bottom: 30px; }
.qluch-report-section--mobile { display: none; }
.qluch-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f1f5f9; }
.qluch-meta-row:last-child { border-bottom: none; padding-bottom: 0; }
.qluch-meta-row:first-child { padding-top: 0; }
.qluch-meta-label { font-size: 13px; color: #718096; font-weight: 500; }
.qluch-meta-value { font-size: 14px; color: #1a202c; font-weight: 700; }
.action-btn-row { display: flex; justify-content: space-between; align-items: center; width: 100%; background: transparent; border: 1px solid #cbd5e1; color: #4a5568; padding: 14px 16px; border-radius: 12px; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s; margin-bottom: 10px; }
.action-btn-row:hover { background: #f8f9fa; border-color: #a0aec0; color: #1a202c; }
.action-btn-row svg { order: -1; } 
.action-btn-row.saved { background: #fff5f2; border-color: #da552f; color: #da552f; }
.desktop-social-section { background: #fff; padding: 18px 20px; border-radius: 12px; border: 1px solid #e2e8f0; margin-top: 15px; text-align: center; }
.desktop-social-icons { display: flex; align-items: center; justify-content: center; gap: 14px; }
.social-icon-link { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid #e2e8f0; color: #4a5568; transition: 0.2s; text-decoration: none; }
.social-icon-link:hover { background: #fff5f2; border-color: #da552f; color: #da552f; }

/* Form UI Details - Stepper v2: مرحله‌های نام‌دار با آیکون SVG (به‌جای شماره) */
.stepper { display: flex; justify-content: center; align-items: flex-start; gap: 4px; margin-bottom: 45px; position: relative; }
.step-indicator { display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; flex: 1 1 0; max-width: 160px; }
.step-indicator:not(:last-child)::after { content: ''; position: absolute; top: 23px; right: 50%; left: -50%; height: 2px; background: #e2e8f0; z-index: 1; transition: background 0.3s ease; }
.step-icon { width: 48px; height: 48px; border-radius: 50%; background: #edf2f7; color: #a0aec0; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; z-index: 2; border: 2px solid #f7fafc; flex-shrink: 0; }
.step-icon svg { width: 22px; height: 22px; }
.step-label { font-size: 13px; font-weight: 600; color: #a0aec0; text-align: center; line-height: 1.4; transition: color 0.3s ease; }
.step-indicator.active .step-icon { background: #da552f; border-color: #da552f; color: #fff; box-shadow: 0 0 0 5px rgba(218, 85, 47, 0.15); }
.step-indicator.active .step-label { color: #da552f; }
.step-indicator.completed .step-icon { background: #48bb78; border-color: #48bb78; color: #fff; }
.step-indicator.completed .step-label { color: #48bb78; }
.step-indicator.completed:not(:last-child)::after { background: #48bb78; }
.form-step { display: none; animation: fadeInStep 0.4s ease forwards; }
.form-step.active { display: block; }
@keyframes fadeInStep { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.form-actions { display: flex; justify-content: space-between; margin-top: 35px; border-top: 1px solid #e2e8f0; padding-top: 25px; }
.btn-nav { display: inline-flex; align-items: center; gap: 8px; background: #edf2f7; color: #4a5568; padding: 12px 24px; border-radius: 10px; border: none; cursor: pointer; font-weight: 600; font-family: inherit; font-size: 15px; transition: background 0.2s; }
.btn-nav svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-nav:hover { background: #e2e8f0; }
.btn-next { background: #da552f; color: #fff; }
.btn-next:hover { background: #c54825; }
.btn-submit-form { display: inline-flex; align-items: center; gap: 8px; background: #48bb78; color: #fff; padding: 12px 28px; border-radius: 10px; border: none; cursor: pointer; font-weight: 700; font-family: inherit; font-size: 16px; transition: background 0.2s; }
.btn-submit-form svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn-submit-form:hover { background: #38a169; }
@media (max-width: 600px) {
    .stepper { gap: 0; }
    .step-label { font-size: 10px; }
    .step-icon { width: 38px; height: 38px; }
    .step-icon svg { width: 17px; height: 17px; }
    .step-indicator:not(:last-child)::after { top: 18px; }
}
.qluch-topic-search-wrap { position: relative; margin-top: 15px; }
.qluch-topic-search-wrap svg { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #a0aec0; pointer-events: none; }
.qluch-topic-search { width: 100%; box-sizing: border-box; padding: 10px 38px 10px 14px; border-radius: 10px; border: 1px solid #e2e8f0; font-family: inherit; font-size: 14px; outline: none; background: #fff; transition: border-color 0.2s; }
.qluch-topic-search:focus { border-color: #da552f; }
.qluch-topic-noresult { color: #a0aec0; font-size: 13.5px; margin: 10px 2px 0; }

.topics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 15px; margin-top: 15px; text-align: right; }
.topics-grid.is-scrollable { max-height: 300px; overflow-y: auto; padding: 4px 6px 4px 2px; }
.topic-checkbox { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #2d3748; cursor: pointer; background: #f8f9fa; padding: 10px 15px; border-radius: 8px; border: 1px solid #e2e8f0; transition: 0.2s; }
.topic-checkbox:hover { border-color: #cbd5e1; background: #fff; }
.topic-checkbox.is-hidden { display: none !important; }

/* انتخابگر دسته‌بندی محصول: منوی کشویی جستجوپذیر با چیپ (کسکید برای زیردسته‌ها) */
.qluch-catselect-wrap { display: flex; flex-direction: column; gap: 14px; }
.qluch-catselect-hint { font-size: 12.5px; color: #a0aec0; margin: 2px 2px 0; }
.qluch-catselect { position: relative; }
.qluch-catselect-title { display: block; font-size: 12.5px; font-weight: 700; color: #718096; margin-bottom: 6px; }
.qluch-catselect-box { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 8px 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; }
.qluch-catselect-box:hover { border-color: #cbd5e1; }
.qluch-catselect.is-open .qluch-catselect-box { border-color: #da552f; box-shadow: 0 0 0 3px rgba(218,85,47,0.12); }
.qluch-catselect-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1; }
.qluch-catselect-placeholder { color: #a0aec0; font-size: 14px; }
.qluch-catselect-chip { display: inline-flex; align-items: center; gap: 6px; background: #fff5f2; color: #da552f; border: 1px solid #fbd38d; padding: 4px 6px 4px 10px; border-radius: 20px; font-size: 12.5px; font-weight: 600; }
.qluch-catselect-chip button { background: none; border: none; color: #da552f; font-size: 15px; line-height: 1; cursor: pointer; opacity: 0.65; padding: 1px 4px; border-radius: 50%; transition: 0.15s; }
.qluch-catselect-chip button:hover { opacity: 1; background: rgba(218,85,47,0.15); }
.qluch-catselect-chevron { flex-shrink: 0; color: #a0aec0; display: flex; transition: transform 0.2s, color 0.2s; }
.qluch-catselect.is-open .qluch-catselect-chevron { transform: rotate(180deg); color: #da552f; }
.qluch-catselect-panel { display: none; position: absolute; top: calc(100% + 6px); right: 0; left: 0; z-index: 30; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 12px 30px rgba(17,24,39,0.12); overflow: hidden; }
.qluch-catselect.is-open .qluch-catselect-panel { display: block; }
.qluch-catselect-search-wrap { position: relative; padding: 10px; border-bottom: 1px solid #e2e8f0; }
.qluch-catselect-search-wrap svg { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); color: #a0aec0; pointer-events: none; }
.qluch-catselect-search { width: 100%; box-sizing: border-box; padding: 9px 34px 9px 12px; border-radius: 8px; border: 1px solid #e2e8f0; font-family: inherit; font-size: 13.5px; outline: none; }
.qluch-catselect-search:focus { border-color: #da552f; }
.qluch-catselect-options { max-height: 230px; overflow-y: auto; padding: 6px; }
.qluch-catselect-option { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; color: #2d3748; margin: 1px 0; }
.qluch-catselect-option:hover { background: #f8f9fa; }
.qluch-catselect-option.is-checked { background: #fff5f2; color: #da552f; font-weight: 700; }
.qluch-catselect-option input[type="checkbox"] { display: none; }
.qluch-catselect-option .qluch-cat-icon-svg { color: #a0aec0; flex-shrink: 0; }
.qluch-catselect-option.is-checked .qluch-cat-icon-svg { color: #da552f; }
.qluch-catselect-option.is-checked::after { content: '✓'; margin-inline-start: auto; color: #da552f; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.qluch-catselect-empty { padding: 16px; text-align: center; color: #a0aec0; font-size: 13px; }
.url-input-wrapper { display: flex; align-items: center; border: 1px solid #cbd5e1; border-radius: 10px; background: #f8f9fa; direction: ltr; transition: 0.2s; overflow: hidden; }
.url-prefix { padding: 14px 0 14px 14px; color: #718096; font-weight: 600; font-family: inherit; background: transparent; border-right: none; user-select: none; }
.url-input-wrapper input { border: none !important; box-shadow: none !important; background: transparent !important; padding: 14px 14px 14px 4px; flex: 1; outline: none; border-radius: 0; }
.url-input-wrapper:focus-within { border-color: #da552f; box-shadow: 0 0 0 3px rgba(218, 85, 47, 0.1); background: #fff; }
.social-input-wrapper { display: flex; align-items: center; border: 1px solid #cbd5e1; border-radius: 10px; background: #f8f9fa; direction: ltr; transition: 0.2s; overflow: hidden; }
.social-input-wrapper .social-icon-prefix { display: flex; align-items: center; justify-content: center; padding: 0 0 0 12px; color: #718096; flex-shrink: 0; }
.social-input-wrapper .url-prefix { padding: 14px 0 14px 6px; }
.social-input-wrapper input { border: none !important; box-shadow: none !important; background: transparent !important; padding: 14px 14px 14px 4px; flex: 1; outline: none; border-radius: 0; }
.social-input-wrapper:focus-within { border-color: #da552f; box-shadow: 0 0 0 3px rgba(218, 85, 47, 0.1); background: #fff; }
.social-input-wrapper:focus-within .social-icon-prefix { color: #da552f; }
.custom-file-upload { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; border: 2px dashed #cbd5e1; border-radius: 12px; background: #f8f9fa; cursor: pointer; transition: 0.3s; text-align: center; position: relative; overflow: hidden; min-height: 160px; }
.custom-file-upload:hover { border-color: #da552f; background: #fff5f2; }
.custom-file-upload .upload-icon { color: #a0aec0; margin-bottom: 12px; transition: color 0.3s; }
.custom-file-upload:hover .upload-icon { color: #da552f; }
.custom-file-upload .upload-text { font-size: 16px; font-weight: 600; color: #2d3748; }
.custom-file-upload .upload-subtext { font-size: 13px; color: #718096; margin-top: 8px; }
.logo-preview-wrapper { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 70px; height: 70px; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); z-index: 2; background: #edf2f7; }
.logo-preview-wrapper img { width: 100%; height: 100%; object-fit: cover; }

/* توسعه (template-submit): تصویر لوگوی آپلودشده به جای آیکون همان قسمت نمایش داده می‌شود */
.custom-file-upload .upload-icon.has-logo-preview { color: transparent; display: flex; align-items: center; justify-content: center; width: 100%; }
.custom-file-upload .logo-preview-img { display: block; width: 72px; height: 72px; margin: 0 auto; border-radius: 12px; object-fit: cover; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }

/* توسعه (template-submit): شمارنده کاراکتر باقی‌مانده برای فیلدهای اطلاعات اصلی */
.qluch-char-counter { direction: ltr; text-align: left; font-size: 12px; color: #a0aec0; margin-top: 6px; }
.qluch-char-counter.is-near-limit { color: #c53030; font-weight: 600; }
.gallery-preview-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 15px; }
.gallery-preview-wrapper { position: relative; display: inline-block; }
.gallery-preview-item { width: 70px; height: 70px; border-radius: 8px; object-fit: cover; border: 1px solid #cbd5e1; box-shadow: 0 2px 5px rgba(0,0,0,0.05); animation: scaleIn 0.3s ease forwards; }
.remove-gallery-item { position: absolute; top: -6px; right: -6px; background: #e53e3e; color: #fff; border: none; border-radius: 50%; width: 22px; height: 22px; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: 0.2s; z-index: 5; }
.remove-gallery-item:hover { background: #c53030; transform: scale(1.1); }
@keyframes scaleIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.share-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 10000; justify-content: center; align-items: center; }
.share-modal-box { background: #fff; padding: 30px; border-radius: 16px; width: 90%; max-width: 400px; text-align: center; position: relative; box-shadow: 0 10px 40px rgba(0,0,0,0.2); animation: scaleIn 0.3s ease; }
.close-share-modal { position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 28px; color: #a0aec0; cursor: pointer; line-height: 1; transition: 0.2s; }
.close-share-modal:hover { color: #1a202c; }
.share-social-icon { display: flex; align-items: center; justify-content: center; width: auto; padding: 10px 20px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 14px; transition: 0.2s; }
.share-social-icon:hover { opacity: 0.85; transform: translateY(-2px); }

/* Mobile Actions Bottom */
.mobile-action-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; padding: 15px 20px; box-shadow: 0 -4px 15px rgba(0,0,0,0.08); z-index: 1000; gap: 10px; align-items: center; border-top: 1px solid #e2e8f0; }
.mobile-action-bar .btn-turbo { flex-direction: row; justify-content: center; gap: 6px; padding: 12px; font-size: 15px; }
.mobile-action-bar .btn-turbo .turbo-icon { margin: 0; }
.mobile-action-bar .btn-submit { padding: 12px; font-size: 15px; border-radius: 10px; }
.btn-mobile-icon { background: #f8f9fa; border: 1px solid #e2e8f0; border-radius: 10px; width: 44px; height: 44px; display: flex; justify-content: center; align-items: center; cursor: pointer; color: #4a5568; transition: all 0.2s; }
.btn-mobile-icon:hover { border-color: #cbd5e1; background: #edf2f7; color: #1a202c; }
.btn-mobile-icon.saved { color: #da552f; border-color: #da552f; background: #fff5f2; }

footer { background: #fff; border-top: 1px solid #e2e8f0; padding: 30px 0; text-align: center; font-size: 14px; color: #718096; }

/* Responsive Overrides */
@media (max-width: 900px) {
    .container { padding: 5px 14px !important; }
    .auth-container { margin: 5px auto 30px auto !important; }
    .profile-header-card { margin-top: 0 !important; }
    .header-m-flex { padding: 0 10px !important; }
    .hidden-mobile { display: none !important; }
    .hidden-desktop { display: flex !important; }
    .main-layout { flex-direction: column; margin-top: 20px; }
    .content-area { max-width: 100%; width: 100%; }
    .sidebar { position: static; width: 100%; margin-bottom: 20px; }
    .desktop-sidebar-actions, .desktop-extra-actions, .desktop-social-section, .desktop-meta-section { display: none; }
    .qluch-report-section--desktop { display: none; }
    .single-product-header { flex-direction: column; align-items: center; text-align: center; gap: 18px; }
    .product-thumb { width: 80px !important; height: 80px !important; min-width: 80px !important; min-height: 80px !important; }
    .product-header-info { display: flex; flex-direction: column; align-items: center; }
    .product-header-info h1 { font-size: 22px; }
    .product-header-info p { font-size: 15px; line-height: 1.7; }
    .tags-wrap { justify-content: center; }
    .product-main-container { padding: 20px !important; }
    .qluch-composer-card { border-radius: 18px; padding: 16px 16px 14px; }
    .qluch-composer-bottom-row { gap: 8px; margin-top: 4px; padding-top: 6px; }
    .qluch-composer-actions { gap: 12px; }
    .qluch-composer-avatar-col img.ig-composer-avatar { width: 28px; height: 28px; }
    .qluch-comment-textarea { font-size: 14.5px; min-height: 64px !important; }
    .emoji-trigger-btn { width: 22px; height: 22px; font-size: 16px; }
    .mention-trigger-btn { width: 20px; height: 22px; font-size: 14px; }
    .qluch-mention-owner-btn { width: 22px; height: 22px; }
    .qluch-mention-owner-btn img.qluch-mention-owner-avatar { width: 22px; height: 22px; }
    #qluch-comment-submit-btn { font-size: 13px; padding: 6px 0 !important; }
    .comment-body-qluch.ig-comment { padding: 0 !important; }
    .ig-comment-textline, .ig-comment-meta-row, .ig-comment-header-line { font-size: 13.5px; }
    /* توسعه: زمان ارسال نظر در موبایل کمی کوچکتر از حالت دسکتاپ (۱۲px) نمایش داده شود */
    .ig-comment-time { font-size: 11px; }
    .comment-list .children { margin-right: 14px !important; }
    .comment-list .children .children { margin-right: 12px !important; }
    .ig-view-replies-btn { margin-right: 14px; }
    .qluch-reply-to-bar { padding: 8px 10px; }
    .qluch-reply-to-avatar { width: 32px; height: 32px; }
    .qluch-cancel-reply-btn { padding: 7px 11px; font-size: 12px; }
    /* توسعه: در موبایل پدینگ کادر و اندازه‌ی دکمه ایموجی کوچکتر است، پس فاصله‌ی ثابتِ پنل تا کف کادر هم متناسب تنظیم می‌شود */
    .emoji-picker-panel { width: 100%; max-width: 260px; left: 0; bottom: 52px; }
    .desktop-team-section { display: none; }
    .mobile-team-section { display: block; }
    .mobile-social-section { display: block; }
    .mobile-meta-section { display: block; }
    .qluch-report-section--mobile { display: block; }
    .lightbox-nav.prev { left: 10px; width: 40px; height: 40px; font-size: 18px; }
    .lightbox-nav.next { right: 10px; width: 40px; height: 40px; font-size: 18px; }
    .lightbox-close { top: 15px; right: 15px; width: 36px; height: 36px; font-size: 26px; }
    .mobile-action-bar { display: flex; }
    body.single-product { padding-bottom: 80px; }
    /* ===== بازطراحی کارت محصول صفحه اصلی برای موبایل (تمیز، منظم، بدون بهم‌ریختگی) ===== */
    .qluch-row {
        padding: 12px;
        gap: 10px;
        border-radius: 16px;
        align-items: center;
    }
    .qluch-row-thumb {
        width: 54px;
        height: 54px;
        border-radius: 16px;
        margin-top: 0;
        align-self: flex-start;
    }
    .qluch-row-thumb-placeholder { font-size: 17px; }

    .qluch-row-main { padding-top: 1px; }

    /* اسم محصول: کامل و خوانا نمایش داده شود، بدون شکستن وسط کلمه */
    .qluch-row-title {
        font-size: 14.5px;
        line-height: 1.4;
        margin-bottom: 4px;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    .qluch-row-num { margin-left: 4px; }
    .qluch-row-launch { font-size: 11px; margin-bottom: 4px; }

    /* توضیح محصول: دو خط کامل، تا مفهوم بهتر منتقل بشه (نه یک خط بریده) */
    .qluch-row-desc {
        font-size: 12.5px;
        line-height: 1.55;
        -webkit-line-clamp: 2;
        margin-bottom: 6px;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    .qluch-row-tags { font-size: 11.5px; gap: 4px; margin-top: 2px; }
    .qluch-row-tags .qluch-row-tag { font-size: 11px; padding: 4px 9px; }

    /* ستون دکمه‌ها: سمت چپ کارت، کوچک و عمودی زیر هم (نه کنار هم) */
    .qluch-row .turbo-container {
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 6px;
        margin-right: 0;
        flex-shrink: 0;
    }
    .qluch-row .btn-turbo,
    .qluch-row .btn-comments {
        flex-direction: row;
        justify-content: center;
        gap: 5px;
        min-width: 44px;
        padding: 12px 14px;
        border-radius: 15px;
    }
    /* دکمه توربو (رأی) بالا، دکمه نظرات پایین */
    .qluch-row .btn-turbo { order: 1; }
    .qluch-row .btn-comments { order: 2; }

    .qluch-row .btn-turbo .turbo-icon,
    .qluch-row .btn-comments .comment-icon {
        margin-bottom: 0;
        width: 13px;
        height: 13px;
    }
    .qluch-row .btn-turbo .count,
    .qluch-row .btn-comments .count { font-size: 11.5px; }
}
#wpadminbar { z-index: 999999 !important; }

/* ==========================================================================
   صفحه پروفایل کاربر (author.php) - توسعه‌های ۱ تا ۸
   ========================================================================== */

/* --- کارت اصلی هدر پروفایل --- */
.profile-header-card { background: #fff; padding: 35px 40px; border-radius: 20px; border: 1px solid #e2e8f0; width: 100%; margin-bottom: 25px; position: relative; }
.profile-header-topbar { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 20px; }

/* گروه راست: آواتار و بلوک نام/نقش/آمار کنار هم، راست‌چین (مطابق وایرفریم) */
.profile-right-group { display: flex; align-items: center; gap: 22px; }
.profile-header-action { flex-shrink: 0; }

/* --- آواتار و آپلود عکس (توسعه ۴) --- */
.profile-avatar-wrap { position: relative; width: 100px; height: 100px; flex-shrink: 0; order: 1; }
.profile-avatar-img { width: 100px; height: 100px; border-radius: 42% !important; object-fit: cover; border: none; display: block; transition: opacity 0.2s ease; background: #edf2f7; }
.avatar-edit-overlay { position: absolute; bottom: 2px; left: 2px; width: 30px; height: 30px; background: #da552f; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.15); transition: 0.2s; }
.avatar-edit-overlay:hover { background: #b33e1c; transform: scale(1.08); }

/* --- اطلاعات کاربر (نام، شغل، آمار) - راست‌چین، کنار آواتار --- */
.profile-name-block { text-align: right; order: 2; padding-top: 2px; }
.profile-name { font-size: 26px; font-weight: 700; color: #1a202c; margin-bottom: 8px; }
.profile-role-badge { display: inline-block; background: #fff5f2; color: #da552f; padding: 4px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.profile-role-badge + .profile-stats { margin-top: 0; }
.profile-stats { display: flex; justify-content: flex-start; gap: 22px; font-size: 14px; color: #718096; }
.profile-stats strong { color: #1a202c; font-size: 15px; }
.profile-stat-link { cursor: pointer; border-radius: 6px; padding: 2px 4px; margin: -2px -4px; transition: color 0.15s; }
.profile-stat-link:hover { color: #da552f; }
.profile-stat-link:hover strong { color: #da552f; }
.profile-stat-link.active { color: #da552f; }
.profile-stat-link.active strong { color: #da552f; }

/* --- دکمه دنبال کردن / ویرایش پروفایل (توسعه ۱ و ۳) --- */
.btn-follow-toggle { background: #fff; color: #1a202c; border: 1.5px solid #cbd5e1; padding: 11px 28px; border-radius: 12px; font-weight: 700; font-size: 14px; font-family: inherit; cursor: pointer; transition: all 0.2s; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.btn-follow-toggle:hover { background: #da552f; color: #fff; border-color: #da552f; }
.btn-follow-toggle.is-following { background: #f0fff4; color: #2f855a; border-color: #c6f6d5; }
.btn-follow-toggle.is-following:hover { background: #fff5f5; color: #e53e3e; border-color: #feb2b2; }
.btn-follow-toggle.btn-edit-profile { background: #edf2f7; color: #2d3748; border-color: #cbd5e1; }
.btn-follow-toggle.btn-edit-profile:hover { background: #e2e8f0; color: #1a202c; border-color: #cbd5e1; }
.profile-follow-mobile { width: 100%; margin-top: 20px; padding: 14px; }

/* --- تب‌های پروفایل (درباره / توربوها / محصولات / نظرات) --- */
.profile-tabs { display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin-top: 30px; padding-top: 22px; border-top: 1px solid #edf2f7; }
.tab-btn { background: transparent; border: none; padding: 10px 18px; border-radius: 20px; font-family: inherit; font-size: 14.5px; font-weight: 600; color: #4a5568; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.tab-btn:hover { color: #da552f; }
.tab-btn.active { background: #f5f5f5; color: #000000; border: 1px solid #dfdfdf; border-radius: 12px; }

/* --- محتوای تب‌ها --- */
.profile-tabs-content { width: 100%; min-height: 80px; position: relative; transition: opacity 0.15s; }
.profile-tabs-content.is-loading { opacity: 0.45; pointer-events: none; }

/* لیست دنبال‌کنندگان / دنبال‌شوندگان (بارگذاری آجاکس) */
.profile-user-list { display: flex; flex-direction: column; gap: 12px; }
.profile-user-list-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 16px; }
.profile-user-list-link { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.profile-user-list-avatar { width: 44px; height: 44px; border-radius: 42%; object-fit: cover; flex-shrink: 0; background: #edf2f7; }
.profile-user-list-name { font-size: 14.5px; font-weight: 600; color: #1a202c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-follow-toggle-sm { padding: 7px 16px; font-size: 13px; flex-shrink: 0; }
.profile-tab-panel { display: none; animation: fadeInStep 0.35s ease; }
.profile-tab-panel.active { display: block; }

.about-bio-box { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 28px; }
.about-bio-box p { color: #4a5568; font-size: 15px; line-height: 1.9; white-space: pre-line; }

.profile-tab-actionbar { display: flex; justify-content: flex-end; margin-bottom: 18px; }
.btn-manage-products { display: inline-flex; align-items: center; gap: 8px; background: #fff5f5; color: #e53e3e; border: 1px solid #feb2b2; padding: 10px 18px; border-radius: 10px; font-size: 13.5px; font-weight: 600; text-decoration: none; transition: 0.2s; }
.btn-manage-products:hover { background: #e53e3e; color: #fff; border-color: #e53e3e; }

.my-products-list { display: flex; flex-direction: column; gap: 15px; }
.product-item-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); transition: 0.2s; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.product-item-card:hover { border-color: #cbd5e1; }
.product-item-card-main { display: flex; align-items: center; gap: 15px; text-decoration: none; flex: 1; min-width: 0; }
.product-item-card h3 { margin: 0 0 5px 0; font-size: 16px; font-weight: 600; color: #1a202c; }
.product-item-card p { margin: 0; font-size: 13px; color: #718096; }
.product-logo-sm { width: 60px; height: 60px; border-radius: 10px; overflow: hidden; border: 1px solid #edf2f7; background: #f7fafc; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.product-logo-sm img { width: 100%; height: 100%; object-fit: cover; }

.profile-comments-list { display: flex; flex-direction: column; gap: 14px; }
.profile-comment-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 18px 20px; }
.profile-comment-product-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #718096; font-size: 13px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed #edf2f7; }
.profile-comment-product-link strong { color: #da552f; font-weight: 600; }
.profile-comment-thumb { width: 30px; height: 30px; border-radius: 8px; overflow: hidden; border: 1px solid #edf2f7; display: flex; align-items: center; justify-content: center; background: #f7fafc; flex-shrink: 0; font-size: 14px; }
.profile-comment-thumb img { width: 100%; height: 100%; object-fit: cover; }
.profile-comment-text { color: #2d3748; font-size: 14.5px; line-height: 1.8; margin-bottom: 10px; }
.profile-comment-time { font-size: 12px; color: #a0aec0; }

.profile-empty-state { text-align: center; padding: 50px 20px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; }
.profile-empty-state p { color: #718096; font-size: 14px; margin-top: 12px; }

/* --- پاپ آپ ویرایش پروفایل (مودال) --- */
.modal-overlay-edit { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 100010; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.25s ease; padding: 20px; }
.modal-overlay-edit.active { opacity: 1; visibility: visible; }
.modal-box-edit { background: #fff; width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; border-radius: 20px; padding: 32px; position: relative; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.2); transform: translateY(-15px); transition: transform 0.25s ease; }
.modal-overlay-edit.active .modal-box-edit { transform: translateY(0); }
.modal-close-btn { position: absolute; top: 16px; left: 16px; background: #f1f5f9; border: none; width: 34px; height: 34px; border-radius: 50%; font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #64748b; transition: 0.2s; }
.modal-close-btn:hover { background: #e2e8f0; color: #1a202c; }
.modal-edit-title { font-size: 18px; font-weight: 700; margin-bottom: 22px; color: #1a202c; }
.modal-edit-tabs { display: flex; align-items: center; gap: 22px; margin: 6px 0 24px 0; border-bottom: 1px solid #e2e8f0; padding-left: 30px; }
.modal-edit-tab { background: transparent; border: none; border-bottom: 2px solid transparent; padding: 0 0 12px 0; font-family: inherit; font-size: 14.5px; font-weight: 600; color: #718096; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.modal-edit-tab:hover { color: #da552f; }
.modal-edit-tab.active { color: #da552f; border-bottom-color: #da552f; }
.modal-edit-panel { }
.profile-edit-section { background: #fafbfc; border: 1px solid #e2e8f0; border-radius: 16px; padding: 24px; margin-bottom: 20px; }
.profile-edit-section:last-child { margin-bottom: 0; }
.edit-form-row { display: flex; gap: 15px; }
.modal-save-btn { width: 100%; padding: 13px; font-size: 15px; }

/* --- ریسپانسیو موبایل صفحه پروفایل --- */
@media (max-width: 900px) {
    .profile-header-card { padding: 22px 18px; border-radius: 18px; }

    /* آواتار سمت راست، پشت (کنار) نام کاربر - بلوک نام/نقش/آمار سمت راست، هم‌راستا با آواتار */
    .profile-header-topbar { flex-direction: column; }
    .profile-right-group { flex-direction: row; align-items: center; justify-content: flex-start; width: 100%; gap: 14px; }
    .profile-avatar-wrap, .profile-avatar-img { width: 84px; height: 84px; }
    .profile-name-block { width: auto; text-align: right; }
    .profile-stats { justify-content: flex-start; }
    .profile-name { font-size: 21px; }

    .profile-tabs { gap: 6px; margin-top: 20px; padding-top: 18px; justify-content: flex-start; flex-wrap: nowrap; }
    .tab-btn { flex: 1; padding: 9px 8px; font-size: 13px; text-align: center; }
    .edit-form-row { flex-direction: column; gap: 0; }

    /* توسعه ۳: باز شدن تمام‌عرض پاپ‌آپ ویرایش پروفایل در موبایل */
    .modal-overlay-edit { padding: 0; align-items: flex-end; }
    .modal-box-edit { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; padding: 20px 16px 28px 16px; }
    .modal-edit-tabs { gap: 14px; padding-left: 0; overflow-x: auto; }
    .modal-edit-tab { font-size: 13.5px; padding-bottom: 10px; }
}

/* توسعه: دکمه مشاهده وب‌سایت در صفحه محصول - رنگ خنثی به‌جای نارنجی */
.product-view-btn { background: #e3e3e3; color: #141414; }
.product-view-btn:hover { background: #d9d9d9; color: #141414; }
.product-view-btn svg { color: #141414; flex-shrink: 0; }

/* توسعه: توضیح کوچک زیر دکمه توربو در دسکتاپ */
.turbo-hint-text { display: block; text-align: center; font-size: 12px; color: #94a3b8; margin-top: 8px; line-height: 1.6; }

/* ==========================================================================
   دسته‌بندی محصولات (Product Category) - نشان، فرم انتخاب سلسله‌مراتبی، صفحه آرشیو
   ========================================================================== */

/* نشان دسته‌بندی روی صفحه محصول */
.category-tag { display: inline-flex; align-items: center; gap: 5px; background: #fff5f2; color: #da552f; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 20px; text-decoration: none; margin-left: 6px; border: 1px solid #fbd38d; transition: 0.2s; }
.category-tag svg { flex-shrink: 0; }
.category-tag:hover { background: #da552f; color: #fff; border-color: #da552f; }

/* ردیف افقی دسته‌بندی/موضوع با یک آیکون در ابتدا (صفحه تک‌محصول) */
.qluch-term-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qluch-term-row-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #a0aec0; }
.qluch-term-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.qluch-term-pill { background: #f1f5f9; color: #4a5568; font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 20px; text-decoration: none; display: inline-block; transition: background 0.2s, color 0.2s; }
.qluch-term-pill:hover { background: #e2e8f0; color: #1a202c; }
.qluch-term-pill-with-icon { display: inline-flex; align-items: center; gap: 6px; }
.qluch-term-pill-icon { display: inline-flex; color: #da552f; flex-shrink: 0; }

/* پوشش یکسان برای هر SVG سفارشی که مدیر برای یک دسته‌بندی وارد می‌کند؛
   صرف‌نظر از ابعاد اصلی فایل SVG، اندازه‌ی نهایی همیشه توسط این پوشش کنترل می‌شود
   تا آیکون در همه‌جای سایت (فهرست‌ها، صفحه دسته‌بندی، فرم ثبت محصول و ...) یکدست باشد. */
.qluch-cat-icon-svg { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qluch-cat-icon-svg svg { width: 100%; height: 100%; display: block; }
.qluch-topic-row { margin-top: 20px; padding-top: 20px; border-top: 1px solid #e2e8f0; }

/* چک‌لیست سلسله‌مراتبی انتخاب دسته‌بندی در فرم‌های ثبت/ویرایش محصول */
.qluch-cat-picker { background: #f8f9fa; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px 16px; }

/* چیپ‌های دسته‌بندی انتخاب‌شده */
.qluch-cat-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 30px; margin-bottom: 12px; }
.qluch-cat-chips-empty { color: #a0aec0; font-size: 13px; }
.qluch-cat-chip { display: inline-flex; align-items: center; gap: 6px; background: #fff5f2; color: #da552f; border: 1px solid #fbd38d; padding: 5px 6px 5px 12px; border-radius: 20px; font-size: 13px; font-weight: 600; }
.qluch-cat-chip button { background: none; border: none; color: #da552f; font-size: 16px; line-height: 1; cursor: pointer; opacity: 0.65; padding: 2px 5px; border-radius: 50%; transition: 0.15s; }
.qluch-cat-chip button:hover { opacity: 1; background: rgba(218,85,47,0.15); }

/* جعبه جستجوی دسته‌بندی */
.qluch-cat-search-wrap { position: relative; margin-bottom: 10px; }
.qluch-cat-search-wrap svg { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #a0aec0; pointer-events: none; }
.qluch-cat-search { width: 100%; padding: 9px 38px 9px 12px; border-radius: 10px; border: 1px solid #e2e8f0; font-family: inherit; font-size: 14px; outline: none; background: #fff; transition: border-color 0.2s; box-sizing: border-box; }
.qluch-cat-search:focus { border-color: #da552f; }

/* درخت دسته‌بندی با اسکرول داخلی */
.qluch-cat-tree-scroll { max-height: 260px; overflow-y: auto; padding: 2px; }
.qluch-cat-tree { list-style: none; margin: 0; padding: 0; }
.qluch-cat-node > .qluch-cat-tree { display: none; margin-right: 21px; padding-right: 10px; border-right: 1px dashed #e2e8f0; }
.qluch-cat-node.is-open > .qluch-cat-tree { display: block; }
.qluch-cat-node { margin: 1px 0; }
.qluch-cat-row { display: flex; align-items: center; gap: 4px; border-radius: 8px; padding: 6px 6px; transition: background 0.15s; }
.qluch-cat-row:hover { background: #fff; }
.qluch-cat-row.is-checked { background: #fff5f2; }
.qluch-cat-toggle-btn { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; border: none; background: transparent; color: #a0aec0; cursor: pointer; border-radius: 6px; padding: 0; transition: transform 0.2s, color 0.2s, background 0.15s; }
.qluch-cat-toggle-btn:hover { background: #edf2f7; color: #4a5568; }
.qluch-cat-node.is-open > .qluch-cat-row .qluch-cat-toggle-btn { transform: rotate(90deg); color: #da552f; }
.qluch-cat-toggle-spacer { width: 22px; height: 22px; flex-shrink: 0; }
.qluch-cat-checkbox { display: flex; align-items: center; gap: 8px; flex: 1; font-size: 14px; color: #2d3748; cursor: pointer; padding: 4px 4px; min-height: 24px; }
.qluch-cat-checkbox input[type="checkbox"] { accent-color: #da552f; width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
.qluch-cat-icon { display: inline-flex; color: #a0aec0; flex-shrink: 0; }
.qluch-cat-row.is-checked .qluch-cat-icon { color: #da552f; }
.qluch-cat-row.is-checked .qluch-cat-label { color: #da552f; font-weight: 700; }
.qluch-cat-label { flex: 1; }

/* هدر صفحه آرشیو دسته‌بندی */
.qluch-cat-hero { background: #fff; padding: 20px 30px; border-radius: 16px; border: 1px solid #e2e8f0; margin-bottom: 20px; }
.qluch-cat-hero-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; }
.qluch-cat-hero-title { display: flex; align-items: center; gap: 14px; }
.qluch-cat-hero-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: #fff5f2; color: #da552f; flex-shrink: 0; }
.qluch-cat-back-link { font-size: 13px; color: #718096; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.qluch-cat-back-link:hover { color: #da552f; }

/* مسیر (breadcrumb) دسته > زیردسته > زیرزیردسته */
.qluch-cat-breadcrumb { font-size: 13px; color: #a0aec0; margin-bottom: 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.qluch-cat-breadcrumb a { color: #718096; text-decoration: none; }
.qluch-cat-breadcrumb a:hover { color: #da552f; }
.qluch-cat-breadcrumb-sep { color: #cbd5e1; }
.qluch-cat-breadcrumb-current { color: #2d3748; font-weight: 600; }

/* ردیف کارت‌های زیردسته در صفحه آرشیو - جمع‌وجور و اسکرول افقیِ نرم برای هر تعداد آیتم */
.qluch-cat-subgrid-wrap { position: relative; margin-bottom: 22px; }
.qluch-cat-subgrid {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2px 2px 6px;
    margin: -2px -2px 0;
}
.qluch-cat-subgrid::-webkit-scrollbar { display: none; height: 0; }
.qluch-cat-subcard {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 8px 14px 8px 10px;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.qluch-cat-subcard:hover { border-color: #da552f; box-shadow: 0 4px 14px rgba(218,85,47,0.08); transform: translateY(-2px); }
.qluch-cat-subcard-icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: #fff5f2; color: #da552f; flex-shrink: 0; }
.qluch-cat-subcard-icon svg { width: 16px; height: 16px; }
.qluch-cat-subcard-name { font-size: 13px; font-weight: 700; color: #1a202c; line-height: 1.3; }
.qluch-cat-subcard-count { font-size: 11px; color: #a0aec0; margin-inline-start: 2px; }
.qluch-cat-subgrid-wrap::before,
.qluch-cat-subgrid-wrap::after {
    content: '';
    position: absolute;
    top: 2px; bottom: 6px;
    width: 22px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 1;
}
.qluch-cat-subgrid-wrap::before { right: 0; background: linear-gradient(to left, #f7f8fa, transparent); }
.qluch-cat-subgrid-wrap::after { left: 0; background: linear-gradient(to right, #f7f8fa, transparent); }
.qluch-cat-subgrid-wrap.is-scrollable-start::after { opacity: 1; }
.qluch-cat-subgrid-wrap.is-scrollable-end::before { opacity: 1; }

/* لیست دسته‌های هم‌سطح در سایدبار */
.qluch-cat-sidebar-list { display: flex; flex-direction: column; gap: 4px; }
.qluch-cat-sidebar-link { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: #4a5568; font-size: 13.5px; transition: 0.2s; }
.qluch-cat-sidebar-link svg { color: #a0aec0; flex-shrink: 0; }
.qluch-cat-sidebar-link:hover { background: #fff5f2; color: #da552f; }
.qluch-cat-sidebar-link:hover svg { color: #da552f; }

@media (max-width: 700px) {
    .qluch-cat-hero-row { flex-direction: column; align-items: stretch; }
    .qluch-cat-hero-row form { max-width: 100%; }
    .qluch-cat-subgrid { gap: 6px; padding: 2px 2px 8px; }
    .qluch-cat-subcard { padding: 7px 11px 7px 8px; border-radius: 10px; gap: 6px; }
    .qluch-cat-subcard-icon { width: 26px; height: 26px; border-radius: 8px; }
    .qluch-cat-subcard-icon svg { width: 14px; height: 14px; }
    .qluch-cat-subcard-name { font-size: 12px; }
    .qluch-cat-subcard-count { font-size: 10px; }
}

/* ==========================================================================
   آرشیو Leaderboard: تب‌های روز/هفته/ماه/سال + ناوبری بازه قبلی/بعدی
   ========================================================================== */
.qluch-lb-tabs { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 1px solid #edf2f7; padding-bottom: 0; }
.qluch-lb-tab { padding: 10px 18px; font-size: 14px; font-weight: 600; color: #718096; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: 0.2s; }
.qluch-lb-tab:hover { color: #da552f; }
.qluch-lb-tab.active { color: #da552f; border-bottom-color: #da552f; }

.qluch-lb-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 22px 0 26px; }
.qluch-lb-nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #e2e8f0; color: #4a5568; background: #fff; text-decoration: none; transition: 0.2s; }
.qluch-lb-nav-btn:hover { border-color: #da552f; color: #da552f; }
.qluch-lb-nav-btn.disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.qluch-lb-label { font-size: 16px; font-weight: 700; color: #1a202c; min-width: 220px; text-align: center; }
.qluch-lb-empty { color: #718096; font-size: 14px; padding: 30px 0; text-align: center; }
.qluch-archive-link { display: block; margin: 18px auto 0; background: #fff; border: 1px solid #e2e8f0; color: #4a5568; font-family: inherit; font-size: 13.5px; font-weight: 600; padding: 10px 22px; border-radius: 10px; text-decoration: none; text-align: center; width: fit-content; transition: all 0.2s; }
.qluch-archive-link:hover { border-color: #da552f; color: #da552f; }

@media (max-width: 700px) {
    .qluch-lb-tabs { overflow-x: auto; }
    .qluch-lb-label { min-width: 0; font-size: 14px; }
}

/* ==========================================================================
   توسعه: مدیریت بروزرسانی‌های محصول (صفحه «محصولات من» + صفحه محصول)
   ========================================================================== */

/* دکمه کوچک حذف محصول - گوشه بالا سمت چپ کارت در صفحه «محصولات من» */
.qluch-mp-delete-btn { position: absolute; top: 10px; left: 10px; background: #fff5f5; color: #e53e3e; border: 1px solid #feb2b2; border-radius: 8px; padding: 4px 12px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.2s; z-index: 2; }
.qluch-mp-delete-btn:hover { background: #fed7d7; }

/* برچسب نسخه کنار عنوان محصول در صفحه محصول */
.qluch-product-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.qluch-version-badge { background: #d2dae1; color: #2a3039; font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 20px; text-decoration: none; display: inline-block; transition: background 0.2s, color 0.2s; border: none; cursor: pointer; font-family: inherit; }
.qluch-version-badge:hover { background: #c3ccd6; }

/* پاپ‌آپ مشترک بروزرسانی‌ها (مدیریت در «محصولات من» + نمایش خواندنی در صفحه محصول) */
.qluch-updates-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 100010; align-items: center; justify-content: center; padding: 20px; }
.qluch-updates-modal-overlay.active { display: flex; }
.qluch-updates-modal-box { background: #fff; width: 100%; max-width: 520px; max-height: 85vh; overflow-y: auto; border-radius: 20px; padding: 28px; position: relative; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }
.qluch-um-close { position: absolute; top: 16px; left: 16px; background: #f1f5f9; border: none; width: 34px; height: 34px; border-radius: 50%; font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #64748b; transition: 0.2s; }
.qluch-um-close:hover { background: #e2e8f0; color: #1a202c; }
.qluch-um-title { font-size: 18px; font-weight: 700; margin-bottom: 20px; color: #1a202c; padding-left: 40px; }

.qluch-um-form-row { margin-bottom: 14px; }
.qluch-um-form-row label { display: block; font-size: 13px; font-weight: 600; color: #4a5568; margin-bottom: 6px; }
.qluch-um-version-input, .qluch-um-features-input { width: 100%; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 14px; font-family: inherit; font-size: 14px; color: #1a202c; background: #fafbfc; resize: vertical; }
.qluch-um-version-input:focus, .qluch-um-features-input:focus { outline: none; border-color: #da552f; background: #fff; }
.qluch-um-form-actions { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; flex-wrap: wrap; }
.qluch-um-submit-btn { padding: 10px 22px; font-size: 13.5px; border-radius: 10px; }
.qluch-um-cancel-edit-btn { background: none; border: none; color: #718096; font-size: 13px; cursor: pointer; font-family: inherit; text-decoration: underline; padding: 0; }

.qluch-um-list-title { font-size: 13px; font-weight: 700; color: #718096; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.3px; }
.qluch-um-list { display: flex; flex-direction: column; }
.qluch-um-empty { text-align: center; color: #a0aec0; font-size: 13.5px; padding: 24px 0; }

.qluch-um-item { border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 10px; overflow: hidden; transition: border-color 0.2s; }
.qluch-um-item:last-child { margin-bottom: 0; }
.qluch-um-item.open { border-color: #cbd5e1; }
.qluch-um-item-head { width: 100%; display: flex; align-items: center; gap: 10px; background: #fafbfc; border: none; padding: 14px 16px; cursor: pointer; font-family: inherit; text-align: right; }
.qluch-um-item-version { font-weight: 700; font-size: 14px; color: #1a202c; white-space: nowrap; }
.qluch-um-item-date { font-size: 12px; color: #a0aec0; margin-right: auto; white-space: nowrap; }
.qluch-um-item-chevron { color: #a0aec0; transition: transform 0.2s; flex-shrink: 0; }
.qluch-um-item.open .qluch-um-item-chevron { transform: rotate(180deg); }
.qluch-um-item-body { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.qluch-um-item.open .qluch-um-item-body { max-height: 800px; }
.qluch-um-item-features { padding: 14px 16px 0; font-size: 13.5px; color: #4a5568; line-height: 1.9; white-space: pre-line; }
.qluch-um-item-actions { display: flex; gap: 8px; padding: 12px 16px 16px; }
.qluch-um-edit-btn, .qluch-um-delete-btn { border: none; border-radius: 8px; padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.qluch-um-edit-btn { background: #edf2f7; color: #2d3748; }
.qluch-um-edit-btn:hover { background: #e2e8f0; }
.qluch-um-delete-btn { background: #fff5f5; color: #e53e3e; }
.qluch-um-delete-btn:hover { background: #fed7d7; }

/* حالت موبایل: پاپ‌آپ به شکل شیت پایین‌صفحه و تمام عرض */
@media (max-width: 700px) {
    .qluch-updates-modal-overlay { padding: 0; align-items: flex-end; }
    .qluch-updates-modal-box { max-width: 100%; width: 100%; max-height: 92vh; border-radius: 20px 20px 0 0; padding: 22px 16px 24px; }
    .qluch-um-title { font-size: 16.5px; }
}

@media (max-width: 900px) {
    .qluch-product-title-row { justify-content: center; }
}

/* صفحهٔ «محصولات من»: سه دکمهٔ بروزرسانی‌ها/آمار محصول/ویرایش در موبایل کنار هم و افقی،
   و بخش آواتار/اسم محصول/وضعیت انتشار در ردیف خودش و سمت راست */
@media (max-width: 900px) {
    .qluch-mp-info { width: 100%; flex-basis: 100%; }
    .qluch-mp-info-text { min-width: 0; }

    .product-item-actions { flex-wrap: nowrap !important; width: 100%; flex-basis: 100%; gap: 6px !important; margin-right: 0 !important; }
    .product-item-actions .btn-submit { flex: 1 1 0; min-width: 0; padding: 8px 6px !important; font-size: 12px !important; white-space: nowrap; }
    .product-item-actions .btn-submit svg { flex-shrink: 0; width: 13px; height: 13px; }
}