/**
 * تمام استایل‌های افزونه در یک فایل.
 *
 * این فایل هم در فرانت‌اند و هم در ادیتور فرم بارگذاری می‌شود. پیش‌تر استایل‌ها
 * در دو فایل جدا بودند که باعث می‌شد نمایش درست ادیتور به بارگذاری هر دو فایل و
 * به ترتیب آبشار وابسته باشد؛ یک نقطه شکست اضافه که حذف شد.
 *
 * بخش‌ها:
 *   ۱. طرح کارتی گزینه‌ها (فرانت‌اند و پیش‌نمایش ادیتور)
 *   ۲. کنترل انتخاب به شکل کلید تاگل
 *   ۳. محدودسازی اندازه در پیش‌نمایش ادیتور
 *   ۴. کنترل‌های ادیتور: انتخاب تصویر و زیرعنوان در فلایوت Edit Choices
 *   ۵. کنترل‌های ادیتور: تنظیمات چیدمان در پنل تنظیمات فیلد
 *
 * مقادیر جهت‌دار با ویژگی‌های منطقی نوشته شده‌اند تا در راست‌به‌چپ هم درست
 * بنشینند. مثلاً inset-inline-end در چیدمان راست‌به‌چپ به سمت چپ ترجمه می‌شود.
 * تنها استثنا حرکت دستگیره کلید تاگل است که به‌عمد فیزیکی نگه داشته شده.
 *
 * @package GF_Multioption_Pro
 */

/* ============================================================
 * ۱. طرح کارتی گزینه‌ها
 * ============================================================ */

.gfield.gfmc-has-cards .gfield_checkbox {
	display: grid;
	grid-template-columns: repeat( var( --gfmc-cols, 2 ), minmax( 0, 1fr ) );
	gap: 16px;
	margin-block-start: 8px;
}

/* تعداد ستون از تنظیمات فیلد می‌آید و روی کانتینر فیلد کلاس می‌گیرد. */
.gfield.gfmc-cards--cols-1 .gfield_checkbox { --gfmc-cols: 1; }
.gfield.gfmc-cards--cols-2 .gfield_checkbox { --gfmc-cols: 2; }
.gfield.gfmc-cards--cols-3 .gfield_checkbox { --gfmc-cols: 3; }
.gfield.gfmc-cards--cols-4 .gfield_checkbox { --gfmc-cols: 4; }

.gfield.gfmc-has-cards .gfield_checkbox .gchoice {
	margin: 0;
}

/*
 * گزینه «انتخاب همه» کارت نیست، پس تمام عرض گرید را می‌گیرد تا بالای کارت‌ها
 * بنشیند و چیدمان ستونی را به هم نزند.
 */
.gfield.gfmc-has-cards .gfield_checkbox .gchoice_select_all {
	grid-column: 1 / -1;
}

.gfield.gfmc-has-cards .gchoice.gfmc-choice-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid #d7dae0;
	border-radius: 10px;
	padding: 14px;
	background-color: #fff;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gfield.gfmc-has-cards .gchoice.gfmc-choice-card:hover {
	border-color: #a7abb3;
}

.gfield.gfmc-has-cards .gchoice.gfmc-choice-card.gfmc-choice-card--selected {
	border-color: #2271b1;
	box-shadow: 0 0 0 1px #2271b1;
}

/* چک‌باکس اصلی گرویتی فرمز از DOM حذف نمی‌شود؛ فقط در گوشه کارت می‌نشیند. */
.gfield.gfmc-has-cards .gchoice.gfmc-choice-card .gfield-choice-input {
	position: absolute;
	top: 14px;
	inset-inline-end: 14px;
	width: 18px;
	height: 18px;
	margin: 0;
	z-index: 2;
}

.gfield.gfmc-has-cards .gchoice.gfmc-choice-card .gfmc-choice-card__media {
	display: block;
	margin-block-end: 12px;
	border-radius: 6px;
	overflow: hidden;
}

.gfield.gfmc-has-cards .gchoice.gfmc-choice-card .gfmc-choice-card__image {
	display: block;
	width: 100%;
	height: auto;
}

.gfield.gfmc-has-cards .gchoice.gfmc-choice-card .gfmc-choice-card__body {
	display: block;
	/* فضای خالی برای اینکه متن زیر کنترل انتخاب در گوشه کارت نرود. */
	padding-inline-end: calc( var( --gfmc-control-width, 18px ) + 10px );
}

/* عنوان گزینه. بلوکی است تا زیرعنوان به آن نچسبد. */
.gfield.gfmc-has-cards .gchoice.gfmc-choice-card label {
	display: block;
	font-weight: 600;
	margin: 0;
	cursor: pointer;
}

.gfield.gfmc-has-cards .gchoice.gfmc-choice-card .gfmc-choice-card__subtitle {
	display: block;
	margin-block-start: 4px;
	font-weight: 400;
	font-size: 0.875em;
	line-height: 1.6;
	color: #646970;
}

/*
 * چیدمان «تصویر کنار متن».
 *
 * ترتیب عناصر در DOM اول تصویر و بعد متن است، پس در حالت راست‌به‌چپ تصویر سمت
 * راست و متن سمت چپ آن قرار می‌گیرد.
 */
.gfield.gfmc-cards--layout-inline .gchoice.gfmc-choice-card {
	flex-direction: row;
	align-items: center;
	gap: 12px;
}

.gfield.gfmc-cards--layout-inline .gchoice.gfmc-choice-card .gfmc-choice-card__media {
	flex: 0 0 auto;
	width: var( --gfmc-inline-image-width, 64px );
	margin-block-end: 0;
}

.gfield.gfmc-cards--layout-inline .gchoice.gfmc-choice-card .gfmc-choice-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

/* در عرض کم، چیدمان چندستونی به یک ستون تبدیل می‌شود. */
@media (max-width: 640px) {
	.gfield.gfmc-has-cards .gfield_checkbox {
		--gfmc-cols: 1;
	}
}

/* ============================================================
 * ۲. کنترل انتخاب به شکل کلید تاگل
 * ============================================================
 *
 * به‌جای پنهان کردن چک‌باکس و ساختن مارک‌آپ تزئینی، ظاهر خود چک‌باکس با
 * appearance:none بازنویسی می‌شود. با این روش تنها یک عنصر در DOM وجود دارد،
 * پس کار با کیبورد، فوکوس، وضعیت :checked و خوانده شدن توسط صفحه‌خوان همه
 * بومی و بدون کد اضافه درست می‌مانند.
 *
 * جهت حرکت دستگیره به‌عمد فیزیکی است (خاموش سمت چپ، روشن سمت راست) و با
 * راست‌به‌چپ بودن صفحه جابه‌جا نمی‌شود، چون این قرارداد شناخته‌شده کلیدهای
 * تاگل در اپلیکیشن‌هاست.
 */

.gfield.gfmc-cards--control-switch .gchoice.gfmc-choice-card {
	--gfmc-control-width: 44px;
}

.gfield.gfmc-cards--control-switch .gchoice.gfmc-choice-card .gfield-choice-input {
	-webkit-appearance: none;
	appearance: none;
	top: 12px;
	width: var( --gfmc-control-width );
	height: 24px;
	border: none;
	border-radius: 999px;
	background-color: #c3c4c7;
	background-image: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

/* دستگیره کلید. */
.gfield.gfmc-cards--control-switch .gchoice.gfmc-choice-card .gfield-choice-input::before {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	margin: 0;
	border-radius: 50%;
	background-color: #fff;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.25 );
	transition: transform 0.2s ease;
}

/*
 * برخی تم‌های گرویتی فرمز برای چک‌باکس یک نشانه تیک با ::after می‌سازند.
 * خنثی کردن آن باعث می‌شود فقط دستگیره روی کلید دیده شود.
 */
.gfield.gfmc-cards--control-switch .gchoice.gfmc-choice-card .gfield-choice-input::after {
	display: none;
}

.gfield.gfmc-cards--control-switch .gchoice.gfmc-choice-card .gfield-choice-input:checked {
	background-color: #2271b1;
}

.gfield.gfmc-cards--control-switch .gchoice.gfmc-choice-card .gfield-choice-input:checked::before {
	transform: translateX( 20px );
}

.gfield.gfmc-cards--control-switch .gchoice.gfmc-choice-card .gfield-choice-input:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

.gfield.gfmc-cards--control-switch .gchoice.gfmc-choice-card .gfield-choice-input:disabled {
	opacity: 0.6;
	cursor: default;
}

/* ============================================================
 * ۳. محدودسازی اندازه در پیش‌نمایش ادیتور
 * ============================================================
 *
 * ظرف #gform_fields تنها در ادیتور فرم وجود دارد؛ خروجی واقعی فرم از شناسه
 * gform_fields_{شناسه فرم} استفاده می‌کند. پس این قواعد هرگز به فرم نهایی
 * سرریز نمی‌کنند و اندازه تصویر در سایت دست‌نخورده می‌ماند.
 */

#gform_fields .gfield.gfmc-has-cards .gchoice.gfmc-choice-card .gfmc-choice-card__media {
	max-width: 100%;
}

#gform_fields .gfield.gfmc-has-cards .gchoice.gfmc-choice-card .gfmc-choice-card__image {
	width: auto;
	max-width: 100%;
	max-height: 84px;
	margin-inline: auto;
	object-fit: contain;
}

#gform_fields .gfield.gfmc-cards--layout-inline .gchoice.gfmc-choice-card .gfmc-choice-card__media {
	width: 52px;
}

#gform_fields .gfield.gfmc-cards--layout-inline .gchoice.gfmc-choice-card .gfmc-choice-card__image {
	max-height: 60px;
}

/* ============================================================
 * ۴. کنترل‌های ادیتور: انتخاب تصویر و زیرعنوان در فلایوت Edit Choices
 * ============================================================
 *
 * ردیف گزینه در گرویتی فرمز از قبل پر است (دستگیره جابه‌جایی، تیک پیش‌فرض،
 * برچسب، مقدار و قیمت)، پس کنترل‌های ما با flex-basis کامل به سطر بعدی همان
 * ردیف منتقل می‌شوند تا چیدمان بومی به هم نریزد.
 */

.gfmc-choice-option-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-basis: 100%;
	margin-block-start: 6px;
}

.gfmc-choice-image-picker {
	position: relative;
	flex: 0 0 auto;
	line-height: 0;
}

.gfmc-choice-image-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	overflow: hidden;
	border: 1px dashed #a7aaad;
	border-radius: 4px;
	background-color: #fff;
	cursor: pointer;
}

.gfmc-choice-image-button:hover {
	border-color: #2271b1;
}

.gfmc-choice-image-button:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 1px;
}

/* وقتی تصویری انتخاب شده، کادر خط‌چین به کادر توپر تبدیل می‌شود. */
.gfmc-choice-image-button:has( .gfmc-choice-image-preview ) {
	border-style: solid;
	border-color: #dcdcde;
}

.gfmc-choice-image-placeholder {
	font-size: 18px;
	line-height: 1;
	color: #50575e;
}

.gfmc-choice-image-preview {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gfmc-choice-image-remove {
	position: absolute;
	top: -6px;
	inset-inline-end: -6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: #d63638;
	color: #fff;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}

.gfmc-choice-image-remove:hover {
	background-color: #b32d2e;
}

.gfmc-choice-subtitle-input {
	flex: 1 1 auto;
	min-width: 0;
}

/* ============================================================
 * ۵. کنترل‌های ادیتور: تنظیمات چیدمان در پنل تنظیمات فیلد
 * ============================================================ */

.gfmc-card-options {
	margin-block-start: 10px;
	padding-inline-start: 24px;
}

.gfmc-card-options__row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-block-end: 8px;
}

.gfmc-card-options__row label {
	flex: 0 0 auto;
	margin: 0;
}

.gfmc-card-options__row select {
	flex: 1 1 auto;
	min-width: 0;
}