/* ==========================================================================
   پرسش و پاسخ محصولات — هماهنگ با پوسته Smartic WP (پالت سبز لیمویی)
   رنگ‌ها از متغیرهای پوسته می‌آیند و با تم روشن/تیره خودکار عوض می‌شوند.
   اگر پوسته دیگری فعال باشد، مقادیر پیش‌فرض (fallback) استفاده می‌شود.
   ========================================================================== */
.wcpqa-wrap,
.wcpqa-modal{
	--q-card:var(--bg2,#fff);
	--q-bg:var(--bg,#f5f8ec);
	--q-tx:var(--tx,#14170e);
	--q-mut:var(--mut,#5f6455);
	--q-line:var(--line,#dde3cf);
	--q-c1:var(--c1,#4d7c0f);
	--q-c2:var(--c2,#65a30d);
	--q-on:var(--on,#fff);
	--q-glow:var(--glow,rgba(77,124,15,.14));
	--q-sh:var(--sh,0 10px 30px rgba(30,40,0,.08));
	font-family:inherit;
	color:var(--q-tx);
	direction:rtl;
	text-align:right;
}

/* ---------- بالای تب ---------- */
.wcpqa-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.wcpqa-top h2{margin:0;font-size:24px;font-weight:800;line-height:1.5;color:var(--q-tx)}

.wcpqa-btn,
.wcpqa-btn:visited{
	display:inline-flex;align-items:center;justify-content:center;gap:8px;
	min-height:46px;padding:0 26px;border:0;border-radius:12px;
	background:linear-gradient(90deg,var(--q-c1),var(--q-c2));
	color:var(--q-on)!important;font:700 15px/1 inherit;font-family:inherit;
	cursor:pointer;text-decoration:none;
	box-shadow:0 0 24px var(--q-glow);
	transition:filter .2s,transform .15s,box-shadow .2s;
}
.wcpqa-btn:hover{filter:brightness(1.07);transform:translateY(-1px);color:var(--q-on)!important}
.wcpqa-btn:active{transform:scale(.985)}
.wcpqa-btn:focus-visible{outline:2px solid var(--q-c1);outline-offset:3px}

/* ---------- حالت خالی ---------- */
.wcpqa-empty{
	margin:0;padding:34px 20px;text-align:center;
	border:1px dashed var(--q-line);border-radius:16px;
	color:var(--q-mut);font-size:15px;
}

/* ---------- کارت پرسش/پاسخ ---------- */
.wcpqa-item{
	background:var(--q-card);
	border:1px solid var(--q-line);
	border-radius:20px;
	margin:0 0 18px;
	overflow:hidden;
	box-shadow:var(--q-sh);
	transition:border-color .25s,box-shadow .25s;
}
.wcpqa-item:hover{border-color:var(--q-c1);box-shadow:0 12px 40px var(--q-glow)}

.wcpqa-q{padding:18px 20px 22px}

.wcpqa-head{
	display:flex;align-items:center;gap:12px;
	padding:8px 12px;border-radius:12px;
	background:var(--q-bg);
}
.wcpqa-av{position:relative;flex:none;width:44px;height:44px;border-radius:12px;overflow:hidden;display:block}
.wcpqa-ini{
	position:absolute;inset:0;display:grid;place-items:center;
	background:linear-gradient(135deg,var(--q-c1),var(--q-c2));
	color:var(--q-on);font-weight:800;font-size:18px;line-height:1;
}
.wcpqa-av-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;display:block}

.wcpqa-name{font-weight:700;font-size:14.5px;line-height:1.8;color:var(--q-tx)}
.wcpqa-sep{color:var(--q-mut);margin-inline:2px;font-weight:400}
.wcpqa-role{color:var(--q-c1);font-weight:700}
.wcpqa-name small{display:inline-block;margin-inline-start:8px;font-size:12.5px;font-weight:400;color:var(--q-mut)}
.wcpqa-date{margin-inline-start:auto;font-size:12.5px;color:var(--q-mut);white-space:nowrap}

.wcpqa-text{margin:16px 6px 0;font-size:14.5px;line-height:2.05;color:var(--q-tx);word-break:break-word}

/* ---------- ناحیه پاسخ (پس‌زمینه ملایم + کارت داخلی) ---------- */
.wcpqa-a{padding:18px 20px 20px;background:var(--q-bg);border-top:1px solid var(--q-line)}
.wcpqa-a + .wcpqa-a{border-top:0;padding-top:0}
.wcpqa-a-box{
	padding:12px 14px 18px;
	background:var(--q-card);
	border:1px solid var(--q-line);
	border-inline-start:3px solid var(--q-c1);
	border-radius:14px;
}
.wcpqa-a-box .wcpqa-head{background:transparent;padding:4px 2px}
.wcpqa-a-box .wcpqa-text{margin-top:8px}

/* ---------- مودال ---------- */
.wcpqa-modal{
	position:fixed;inset:0;z-index:99999;
	display:flex;align-items:center;justify-content:center;padding:16px;
	background:rgba(8,10,4,.58);
	-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.wcpqa-modal[hidden]{display:none}
.wcpqa-modal-box{
	position:relative;width:100%;max-width:520px;max-height:92vh;overflow:auto;
	padding:30px 28px 26px;
	background:var(--q-card);
	background-image:linear-gradient(160deg,var(--q-glow),transparent 45%);
	border:1px solid var(--q-line);border-radius:24px;
	box-shadow:0 28px 90px var(--q-glow),0 10px 40px rgba(0,0,0,.28);
	animation:wcpqaIn .22s cubic-bezier(.2,.7,.2,1);
}
@keyframes wcpqaIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}

.wcpqa-modal-box h3{margin:0 0 4px;font-size:21px;font-weight:800;line-height:1.6;color:var(--q-tx);padding-inline-end:44px}
.wcpqa-sub{margin:0 0 22px;font-size:13.5px;color:var(--q-mut);line-height:1.8}

.wcpqa-close{
	position:absolute;top:18px;inset-inline-end:18px;
	width:38px;height:38px;display:grid;place-items:center;padding:0;
	border:1px solid var(--q-line);border-radius:12px;
	background:var(--q-bg);color:var(--q-tx);
	font:400 24px/1 inherit;font-family:inherit;cursor:pointer;
	transition:border-color .2s,color .2s;
}
.wcpqa-close:hover{border-color:var(--q-c1);color:var(--q-c1)}

.wcpqa-modal label{display:block;margin:0 0 16px;font-size:13.5px;font-weight:600;color:var(--q-tx)}
.wcpqa-modal input[type=text],
.wcpqa-modal input[type=email],
.wcpqa-modal textarea{
	display:block;width:100%;margin-top:7px;padding:11px 14px;
	border:1px solid var(--q-line)!important;border-radius:12px;
	background:var(--q-bg)!important;color:var(--q-tx)!important;
	font:400 14.5px/1.9 inherit;font-family:inherit;box-sizing:border-box;
	transition:border-color .2s,box-shadow .2s;
}
.wcpqa-modal textarea{resize:vertical;min-height:120px}
.wcpqa-modal input:focus,
.wcpqa-modal textarea:focus{
	outline:0;border-color:var(--q-c1)!important;box-shadow:0 0 0 4px var(--q-glow);
}
.wcpqa-hp{position:absolute;inset-inline-start:-9999px;height:0;overflow:hidden}
.wcpqa-as{margin:0 0 16px;font-size:13.5px;color:var(--q-mut)}
.wcpqa-as strong{color:var(--q-tx)}

.wcpqa-msg:empty{display:none}
.wcpqa-msg{
	margin:0 0 14px;padding:10px 14px;border-radius:12px;font-size:13.5px;line-height:1.8;
	background:var(--q-bg);border:1px solid var(--q-line);border-top:3px solid var(--q-c1);color:var(--q-tx);
}
.wcpqa-msg.err{border-top-color:#dc2626;color:#dc2626}

.wcpqa-submit{width:100%;min-height:50px;font-size:16px}
.wcpqa-submit[disabled]{opacity:.6;cursor:wait;transform:none}
body.wcpqa-lock{overflow:hidden}

/* ---------- موبایل ---------- */
@media (max-width:600px){
	.wcpqa-top h2{font-size:21px}
	.wcpqa-q{padding:14px 14px 18px}
	.wcpqa-a{padding:14px}
	.wcpqa-head{flex-wrap:wrap;row-gap:4px}
	.wcpqa-name{flex:1 1 calc(100% - 60px)}
	.wcpqa-name small{display:block;margin:0}
	.wcpqa-date{margin-inline-start:0;width:100%;padding-inline-start:56px}
	.wcpqa-modal{align-items:flex-end;padding:0}
	.wcpqa-modal-box{max-width:none;border-radius:24px 24px 0 0;padding:26px 20px calc(22px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){
	.wcpqa-modal-box{animation:none}
	.wcpqa-btn,.wcpqa-item{transition:none}
}

/* ==========================================================================
   نوار تب‌های محصول: کادر تمام‌عرض، تب‌های هم‌اندازه، تب فعال با پس‌زمینه ملایم
   (بدون وابستگی به کلاس‌های والد؛ با !important تا استایل قالب را بازنویسی کند)
   ========================================================================== */
.woocommerce-tabs{
	grid-column:1/-1!important;float:none!important;
	width:100%!important;max-width:none!important;margin:28px 0 0!important;
}
.woocommerce-tabs ul.tabs.wc-tabs{
	display:flex!important;flex-wrap:nowrap!important;align-items:stretch!important;gap:6px!important;
	width:100%!important;max-width:none!important;
	margin:0 0 22px!important;padding:10px!important;
	list-style:none!important;overflow-x:auto;scrollbar-width:none;
	background:var(--bg2,#fff)!important;
	border:1px solid var(--line,#dde3cf)!important;border-radius:14px!important;box-shadow:none!important;
}
.woocommerce-tabs ul.tabs.wc-tabs::-webkit-scrollbar{display:none}
.woocommerce-tabs ul.tabs.wc-tabs::before,
.woocommerce-tabs ul.tabs.wc-tabs::after{display:none!important;content:none!important}

.woocommerce-tabs ul.tabs.wc-tabs li{
	flex:1 1 0!important;min-width:max-content;
	margin:0!important;padding:0!important;
	border:0!important;border-radius:10px!important;
	background:transparent!important;box-shadow:none!important;
	text-align:center;transition:background-color .2s;
}
.woocommerce-tabs ul.tabs.wc-tabs li::before,
.woocommerce-tabs ul.tabs.wc-tabs li::after{display:none!important;content:none!important}

.woocommerce-tabs ul.tabs.wc-tabs li a{
	display:flex!important;align-items:center;justify-content:center;gap:8px;height:100%;
	padding:13px 20px!important;
	color:var(--mut,#5f6455)!important;
	font-size:15px!important;font-weight:600!important;line-height:1.6;white-space:nowrap;
	background:transparent!important;border:0!important;
	transition:color .2s;
}
.woocommerce-tabs ul.tabs.wc-tabs li:hover a{color:var(--tx,#14170e)!important}
.woocommerce-tabs ul.tabs.wc-tabs li.active{background:var(--tile,#e9efd8)!important}
.woocommerce-tabs ul.tabs.wc-tabs li.active a{color:var(--tx,#14170e)!important;font-weight:700!important}

/* نشان تعداد کنار عنوان تب */
.wcpqa-count{
	display:inline-block;min-width:26px;padding:1px 7px;border-radius:6px;
	background:color-mix(in srgb,var(--mut,#5f6455) 55%,var(--bg2,#fff));
	color:var(--bg2,#fff);
	font-size:13px;font-weight:600;line-height:1.7;text-align:center;
}

/* پنل‌ها تمام‌عرض */
.woocommerce-tabs .woocommerce-Tabs-panel{width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
.wcpqa-wrap{width:100%;max-width:none}

@media (max-width:600px){
	.woocommerce-tabs ul.tabs.wc-tabs{padding:8px!important;gap:4px!important}
	.woocommerce-tabs ul.tabs.wc-tabs li a{padding:11px 16px!important;font-size:14px!important}
}

/* ==========================================================================
   گرید صفحه محصول: قالب ستون‌ها را تعریف نکرده (ستون دوم ضمنی است) و
   «grid-column:1/-1» فقط یک ستون را می‌گیرد. با span 2 تمام‌عرض می‌شود.
   روی موبایل قالب تک‌ستونه است و همان 1/-1 کافی است.
   ========================================================================== */
@media (min-width:851px){
	.woocommerce-tabs,
	div.product > .related,
	div.product > .upsells,
	div.product > .up-sells{
		grid-column:1 / span 2!important;
	}
}
