/*
 * متغیرهای زیر مقدار پیش‌فرض (fallback) دارند؛ مقدار واقعی از پیشخوان («ظاهر فرم»)
 * به‌صورت متغیر CSS روی .qa-cf-wrap تزریق می‌شود (به class-qa-cf-shortcode.php نگاه کن).
 *
 * نکته نسخه 1.2: یکی از علت‌های اسکرول افقی، نبود box-sizing: border-box روی
 * ورودی‌ها بود که در این نسخه رفع شد.
 *
 * نکته نسخه 1.3: اگر بعد از 1.2 باز هم اسکرول افقی دیده می‌شد، علت محتمل‌تر این بود
 * که ردیف نیم‌عرض‌ها (flex + min-width) داخل یک کانتینر باریک‌تر از قالب سایت (مثلاً
 * یک ستون محتوای باریک یا یک والد flex/grid بدون min-width:0) به اندازه واقعی خودش
 * جمع نمی‌شد. راه‌حل قطعی‌تر: تبدیل ردیف فیلدها به CSS Grid با الگوی
 * minmax(min(x, 100%), 1fr) که بر اساس عرض واقعیِ کانتینر (نه عرض viewport مرورگر)
 * تصمیم می‌گیرد، به‌علاوه min-width:0 روی تمام لایه‌های تودرتو (wrap/form/row/field)
 * تا هیچ‌کدام مجبور به گرفتن حداقل عرض بر اساس محتوا نشوند.
 */
.qa-cf-wrap,
.qa-cf-wrap *,
.qa-cf-wrap *::before,
.qa-cf-wrap *::after {
	box-sizing: border-box;
}

/* شبکه ایمنی نهایی: هیچ عنصری داخل فرم، حتی اگر یک قانون دیگر از قلم افتاده باشد،
 * نمی‌تواند از عرض واقعی کانتینر خودش بیشتر شود. این خط دقیقاً همان چیزی است که
 * از سرریز افقی کل صفحه (که چیدمان سایت را به‌هم می‌ریزد) جلوگیری می‌کند.
 */
.qa-cf-wrap * {
	max-width: 100%;
}

.qa-cf-wrap {
	direction: rtl;
	font-family: var(--qa-cf-font, 'Vazirmatn', Tahoma, sans-serif);
	width: 100%;
	max-width: var(--qa-cf-maxwidth, 100%);
	min-width: 0; /* اگر خود .qa-cf-wrap داخل یک والد فلکس/گرید از قالب سایت باشد، اجازه می‌دهد کوچک‌تر از عرض محتوایش هم جمع شود */
	color: var(--qa-cf-text, #0d1117);
	overflow-wrap: break-word;
	word-break: break-word;
}

/* شبکه ضدسرریز: با محدود کردن حداقل هر ستون به min(<عرض دلخواه>, 100%) تضمین می‌شود
 * که حتی اگر کانتینر میزبان (والد در قالب سایت) خیلی باریک‌تر از حد انتظار باشد،
 * فیلدها هرگز از عرض واقعی کانتینر خودشان بیشتر نمی‌شوند — بدون نیاز به مدیا کوئری،
 * چون تصمیم بر اساس عرض واقعی کانتینر گرفته می‌شود نه عرض viewport مرورگر.
 */
.qa-cf-form {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.qa-cf-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 18px;
	margin-bottom: 20px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.qa-cf-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0; /* اجازه می‌دهد فیلد در فضای گرید کوچک‌تر از محتوای داخلی‌اش هم جمع شود، نه اینکه سرریز کند */
	max-width: 100%;
}

.qa-cf-w-full {
	grid-column: 1 / -1;
}

.qa-cf-w-half {
	/* عرض توسط auto-fit/minmax در .qa-cf-row تعیین می‌شود؛ کلاس فقط برای سازگاری/شخصی‌سازی نگه داشته شده */
}

.qa-cf-field label {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--qa-cf-label, #1a2332);
}

.qa-cf-req {
	color: #ef4444;
	margin-right: 3px;
}

.qa-cf-field input[type="text"],
.qa-cf-field input[type="email"],
.qa-cf-field input[type="tel"],
.qa-cf-field select,
.qa-cf-field textarea {
	font-family: inherit;
	font-size: 14.5px;
	color: var(--qa-cf-text, #0d1117);
	background: var(--qa-cf-field-bg, #f8fafc);
	border: 1.5px solid var(--qa-cf-border, #e2e8f0);
	border-radius: var(--qa-cf-radius, 12px);
	padding: 13px 16px;
	outline: none;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.qa-cf-field select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364748b' stroke-width='1.8'%3E%3Cpath d='M5.5 8l4.5 4.5L14.5 8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 14px center;
	background-size: 15px;
	padding-left: 38px;
}

.qa-cf-field textarea {
	min-height: 130px;
	resize: vertical;
}

.qa-cf-field input:hover,
.qa-cf-field select:hover,
.qa-cf-field textarea:hover {
	border-color: color-mix(in srgb, var(--qa-cf-accent, #0ea5a0) 45%, var(--qa-cf-border, #e2e8f0));
}

.qa-cf-field input:focus,
.qa-cf-field select:focus,
.qa-cf-field textarea:focus {
	border-color: var(--qa-cf-accent, #0ea5a0);
	background: #ffffff;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--qa-cf-accent, #0ea5a0) 12%, transparent);
}

.qa-cf-field input::placeholder,
.qa-cf-field textarea::placeholder {
	color: #94a3b8;
}

.qa-cf-checkbox-label {
	flex-direction: row !important;
	align-items: center;
	gap: 9px !important;
	font-weight: 600 !important;
	cursor: pointer;
}

.qa-cf-checkbox-label input[type="checkbox"] {
	width: 19px;
	height: 19px;
	flex-shrink: 0;
	accent-color: var(--qa-cf-accent, #0ea5a0);
	cursor: pointer;
}

.qa-cf-hp {
	position: absolute;
	left: -9999px;
	opacity: 0;
	height: 0;
	width: 0;
}

.qa-cf-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	max-width: 100%;
	background: linear-gradient(135deg, var(--qa-cf-primary, #0c8a85), var(--qa-cf-accent, #0ea5a0));
	color: #fff;
	border: none;
	border-radius: var(--qa-cf-button-radius, 50px);
	padding: 15px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 800;
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s, filter 0.2s;
	box-shadow: var(--qa-cf-btn-shadow, 0 8px 24px rgba(14, 165, 160, 0.28));
}

.qa-cf-submit:hover:not(:disabled) {
	transform: translateY(-2px);
	filter: brightness(1.04);
}

.qa-cf-submit:active:not(:disabled) {
	transform: translateY(0);
}

.qa-cf-submit:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--qa-cf-accent, #0ea5a0) 55%, transparent);
	outline-offset: 2px;
}

.qa-cf-submit:disabled {
	opacity: 0.7;
	cursor: wait;
	transform: none;
}

.qa-cf-spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2.5px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	flex-shrink: 0;
	animation: qa-cf-spin 0.7s linear infinite;
}

.qa-cf-submit.qa-cf-loading .qa-cf-spinner {
	display: inline-block;
}

@keyframes qa-cf-spin {
	to {
		transform: rotate(360deg);
	}
}

.qa-cf-result {
	display: none;
	align-items: flex-start;
	gap: 10px;
	border-radius: var(--qa-cf-radius, 12px);
	padding: 14px 16px;
	margin-bottom: 18px;
	font-size: 13.5px;
	line-height: 1.8;
	width: 100%;
	max-width: 100%;
	word-break: break-word;
	animation: qa-cf-fade-in 0.25s ease;
}

@keyframes qa-cf-fade-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.qa-cf-result.qa-cf-show {
	display: flex;
}

.qa-cf-result::before {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	margin-top: 1px;
}

.qa-cf-result.qa-cf-ok {
	background: #f0fdfc;
	border: 1px solid rgba(14, 165, 160, 0.3);
	color: #0b6b67;
}

.qa-cf-result.qa-cf-ok::before {
	content: '\2713';
	background: #0ea5a0;
	color: #fff;
}

.qa-cf-result.qa-cf-err {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
}

.qa-cf-result.qa-cf-err::before {
	content: '\0021';
	background: #ef4444;
	color: #fff;
}

/* ───────────────────────── واکنش‌گرایی ───────────────────────── */

@media (max-width: 380px) {
	.qa-cf-field input[type="text"],
	.qa-cf-field input[type="email"],
	.qa-cf-field input[type="tel"],
	.qa-cf-field select,
	.qa-cf-field textarea {
		padding: 11px 14px;
		font-size: 14px;
	}

	.qa-cf-submit {
		padding: 14px;
		font-size: 14.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.qa-cf-submit,
	.qa-cf-result,
	.qa-cf-field input,
	.qa-cf-field select,
	.qa-cf-field textarea {
		transition: none;
		animation: none;
	}
}