/* FAQ Widget - استایل پایه (رنگ‌ها و فاصله‌ها از پنل استایل المنتور کنترل می‌شوند) */

.faqw-wrapper,
.faqw-wrapper *,
.faqw-wrapper *::before,
.faqw-wrapper *::after {
	box-sizing: border-box;
}

.faqw-wrapper {
	direction: rtl;
	text-align: right;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

/* لایه‌ی محافظتی: برخی کانتینرهای grid/flex المنتور در این سایت به‌طور پیش‌فرض
   عرض کمینه‌ی (min-width) خودکار دارند و اگر محتوای این ویجت رشته‌ی بدون‌فاصله‌ی
   بلندی داشته باشد، خود کانتینر المنتور از عرض صفحه بیرون می‌زند. با صفر کردن
   min-width روی خود المان ویجت، به آن اجازه می‌دهیم هر اندازه‌ای که والدش بدهد
   جمع شود، نه اندازه‌ی محتوایش. */
.elementor-widget-faq-widget {
	min-width: 0;
	max-width: 100%;
}

.faqw-item {
	border: 1px solid #e5e5e5;
	background: #fff;
	max-width: 100%;
}

.faqw-heading {
	margin: 0;
}

.faqw-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	max-width: 100%;
	background: #f7f7f9;
	border: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.6;
	padding: 16px 20px;
	text-align: right;
	transition: background-color 0.2s ease;
	/* ریشه‌ی اصلی مشکل ریسپانسیو: reset.css پوسته (Hello Elementor) روی همه‌ی
	   دکمه‌های سایت به‌صورت پیش‌فرض white-space:nowrap می‌گذارد. این مقدار ارث‌بری
	   می‌شود و به متن سوال هم می‌رسد و مانع شکستن خط می‌شود؛ حتی اگر overflow-wrap
	   یا word-break هم تنظیم شده باشد. اینجا صریحاً آن را خنثی می‌کنیم. */
	white-space: normal;
}

.faqw-question:focus-visible {
	outline: 2px solid #4a90e2;
	outline-offset: -2px;
}

.faqw-question-text {
	flex: 1 1 auto;
	/* بدون min-width:0 آیتم فلکس عریض‌تر از فضای موجود می‌ماند و باعث سرریز افقی در موبایل می‌شود */
	min-width: 0;
	/* نکته‌ی مهم: overflow-wrap:break-word به‌تنهایی در محاسبه‌ی "حداقل اندازه‌ی خودکار"
	   والدهای flex/grid در نظر گرفته نمی‌شود (طبق مشخصات CSS). اگر این ویجت داخل یک
	   کانتینر grid/flex باشد که خودش عرض ثابتی ندارد (مثل کانتینرهای Elementor)، آن والد
	   می‌تواند بر اساس طولانی‌ترین رشته‌ی بدون‌فاصله (مثلاً یک مدل انگلیسی مانند GPZ7000)
	   عریض‌تر از صفحه شود؛ چون این عرض برای کل بلوک محاسبه می‌شود، حتی سوال‌های کاملاً
	   فارسی هم داخل همان باکس بزرگ‌شده قرار می‌گیرند و سرریز پیدا می‌کنند.
	   overflow-wrap:anywhere دقیقاً همین محاسبه را هم اصلاح می‌کند. */
	overflow-wrap: anywhere;
	word-break: break-word;
	/* لایه‌ی دوم اطمینان: صراحتاً white-space را هم اینجا خنثی می‌کنیم، مستقل از اینکه
	   والد (button.faqw-question) درست override شده باشد یا نه. */
	white-space: normal;
}

.faqw-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform 0.25s ease;
}

.faqw-icon svg {
	display: block;
	max-width: 100%;
	height: auto;
}

.faqw-item.is-open .faqw-icon {
	transform: rotate(180deg);
}

.faqw-answer {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.3s ease;
}

.faqw-item.is-open .faqw-answer {
	max-height: none;
}

.faqw-answer-inner {
	padding: 16px 20px;
	color: #4a4a4a;
	line-height: 1.9;
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.faqw-answer-inner p:first-child {
	margin-top: 0;
}

.faqw-answer-inner p:last-child {
	margin-bottom: 0;
}

.faqw-answer-inner img,
.faqw-answer-inner video,
.faqw-answer-inner iframe,
.faqw-answer-inner table {
	max-width: 100%;
	height: auto;
}

.faqw-answer-inner table {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* توجه: fallback بدون‌جاوااسکریپت دیگر از طریق این فایل کنترل نمی‌شود، چون هیچ‌جا
   کلاس no-js روی تگ html تنظیم نمی‌شد (این قانون قبلاً هرگز واقعاً اجرا نمی‌شد).
   حالا این حالت با یک تگ <noscript> که مستقیماً در faq-widget.php چاپ می‌شود
   هندل می‌شود که مستقل از پوسته و همیشه قابل‌اعتماد است. */

/* موبایل: فاصله و اندازه فونت کمی جمع‌تر شود تا با صفحه‌های باریک هم‌خوانی بهتری داشته باشد */
@media (max-width: 480px) {
	.faqw-question {
		gap: 8px;
		padding: 14px 16px;
		font-size: 15px;
	}

	.faqw-answer-inner {
		padding: 14px 16px;
	}

	.faqw-icon svg {
		width: 16px;
		height: 16px;
	}
}