/* ==========================================================
   دکمه تماس شناور - IRDGTL
   همه انیمیشن‌ها فقط CSS هستن (transform/opacity) برای پرفورمنس
   ========================================================== */

.irdgtl-fc {
	position: fixed;
	bottom: var(--irdgtl-fc-bottom, 20px);
	z-index: 99990;
	width: var(--irdgtl-fc-size, 60px);
	height: var(--irdgtl-fc-size, 60px);
	font-family: inherit;
	line-height: 1;
}

.irdgtl-fc--side-right { right: var(--irdgtl-fc-edge, 20px); }
.irdgtl-fc--side-left  { left: var(--irdgtl-fc-edge, 20px); }

/* ---------- دکمه اصلی ---------- */
.irdgtl-fc__toggle {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	margin: 0;
	border-radius: 50%;
	cursor: pointer;
	background: linear-gradient(145deg, var(--irdgtl-fc-main-color-light), var(--irdgtl-fc-main-color));
	box-shadow: 0 6px 18px rgba(0, 0, 0, .22), 0 2px 6px rgba(0, 0, 0, .12);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease;
	-webkit-tap-highlight-color: transparent;
	z-index: 2;
}

.irdgtl-fc__toggle:hover { transform: scale(1.06); }
.irdgtl-fc__toggle:active { transform: scale(.95); }

.irdgtl-fc__toggle-icon {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity .2s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

.irdgtl-fc__toggle-icon img,
.irdgtl-fc__toggle-icon svg {
	/* !important لازم است: قالب‌ها «img { height: auto !important }» می‌گذارند و
	   بدونِ آن، اگر تصویر لود نشود، جای‌گزینِ شکسته‌ی مرورگر با اندازه‌ی طبیعیِ
	   خودش رندر می‌شود و از کادرِ گردِ دکمه بیرون می‌زند. */
	width: calc(var(--irdgtl-fc-size, 60px) * .42) !important;
	height: calc(var(--irdgtl-fc-size, 60px) * .42) !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	display: block;
	pointer-events: none;
}

.irdgtl-fc__toggle-icon--open {
	opacity: 0;
	transform: rotate(-90deg) scale(.5);
}

.irdgtl-fc.is-open .irdgtl-fc__toggle-icon--closed {
	opacity: 0;
	transform: rotate(90deg) scale(.5);
}

.irdgtl-fc.is-open .irdgtl-fc__toggle-icon--open {
	opacity: 1;
	transform: rotate(0) scale(1);
}

/* ---------- بابل کوچیک کنار دکمه ---------- */
.irdgtl-fc__bubble {
	position: absolute;
	bottom: 50%;
	transform: translateY(50%) scale(.85);
	white-space: nowrap;
	background: #ffffff;
	color: #1f2330;
	font-size: 13px;
	padding: 8px 14px;
	border-radius: 20px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .3s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1), visibility .3s;
	z-index: 1;
}

.irdgtl-fc--side-right .irdgtl-fc__bubble { right: calc(100% + 12px); }
.irdgtl-fc--side-left  .irdgtl-fc__bubble { left: calc(100% + 12px); }

.irdgtl-fc.bubble-visible .irdgtl-fc__bubble {
	opacity: 1;
	visibility: visible;
	transform: translateY(50%) scale(1);
}

/* ---------- زیردکمه‌ها ---------- */
.irdgtl-fc__items {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.irdgtl-fc__item {
	position: absolute;
	width: var(--irdgtl-fc-sub-size, 46px);
	height: var(--irdgtl-fc-sub-size, 46px);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	background: linear-gradient(145deg, var(--btn-color-light), var(--btn-color));
	box-shadow: 0 4px 12px rgba(0, 0, 0, .18);

	/* موقعیت پایه: دقیقا وسط دکمه اصلی (حالت بسته) */
	left: 50%;
	top: 50%;
	margin-left: calc(var(--irdgtl-fc-sub-size, 46px) / -2);
	margin-top: calc(var(--irdgtl-fc-sub-size, 46px) / -2);

	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, 0, 0) scale(.3);
	transition:
		transform .38s cubic-bezier(.34, 1.4, .64, 1),
		opacity .25s ease,
		visibility .38s;
	transition-delay: 0ms;
}

.irdgtl-fc__item img {
	width: calc(var(--irdgtl-fc-sub-size, 46px) * .46);
	height: calc(var(--irdgtl-fc-sub-size, 46px) * .46);
	object-fit: contain;
	display: block;
	pointer-events: none;
}

/* حالت باز: هر دکمه به مختصات خودش می‌ره */
.irdgtl-fc.is-open .irdgtl-fc__item {
	opacity: 1;
	visibility: visible;
	transition-delay: var(--delay, 0ms);
}

.irdgtl-fc--side-right.is-open .irdgtl-fc__item {
	transform: translate3d(calc(var(--x) * -1), calc(var(--y) * -1), 0) scale(1);
}

.irdgtl-fc--side-left.is-open .irdgtl-fc__item {
	transform: translate3d(var(--x), calc(var(--y) * -1), 0) scale(1);
}

/* حالت گرد: چرخش هنگام باز شدن */
.irdgtl-fc--round .irdgtl-fc__item {
	transform: translate3d(0, 0, 0) scale(.3) rotate(-120deg);
}
.irdgtl-fc--round.irdgtl-fc--side-right.is-open .irdgtl-fc__item {
	transform: translate3d(calc(var(--x) * -1), calc(var(--y) * -1), 0) scale(1) rotate(0);
}
.irdgtl-fc--round.irdgtl-fc--side-left.is-open .irdgtl-fc__item {
	transform: translate3d(var(--x), calc(var(--y) * -1), 0) scale(1) rotate(0);
}

/* ---------- برچسب متن هر دکمه ---------- */
.irdgtl-fc__label {
	position: absolute;
	white-space: nowrap;
	background: rgba(28, 30, 38, .92);
	color: #fff;
	font-size: 11px;
	padding: 3px 8px;
	border-radius: 12px;
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s ease .1s;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

.irdgtl-fc.is-open .irdgtl-fc__label { opacity: 1; }

/* عمودی: برچسب کنار دکمه */
.irdgtl-fc__item--vertical .irdgtl-fc__label,
.irdgtl-fc__item--both .irdgtl-fc__label {
	top: 50%;
	transform: translateY(-50%);
}
.irdgtl-fc--side-right .irdgtl-fc__item--vertical .irdgtl-fc__label,
.irdgtl-fc--side-right .irdgtl-fc__item--both .irdgtl-fc__label {
	right: calc(100% + 5px);
}
.irdgtl-fc--side-left .irdgtl-fc__item--vertical .irdgtl-fc__label,
.irdgtl-fc--side-left .irdgtl-fc__item--both .irdgtl-fc__label {
	left: calc(100% + 5px);
}

/* ---------- برچسبِ حالت افقی ----------
   همه در یک ارتفاع. برای اینکه با برچسبِ دکمه‌ی بغلی برخورد نکنند، فاصله‌ی
   دکمه‌ها ۷۲ پیکسل شده و خودِ برچسب هم سقفِ عرض دارد؛ اگر متنی بلندتر بود با
   «…» کوتاه می‌شود و متنِ کاملش در title و aria-label هست. این خیلی بهتر از
   جابه‌جا کردنِ ارتفاعِ یکی‌درمیان است که قبلا داشتیم. */
.irdgtl-fc__item--horizontal .irdgtl-fc__label {
	bottom: calc(100% + var(--label-lift, 4px));
	left: 50%;
	transform: translateX(-50%);
	font-size: 10px;
	padding: 2px 6px;
	max-width: 76px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
}

/* ---------- برچسبِ حالت گرد ----------
   قبلاً برچسب دقیقاً وسطِ بالای هر دکمه بود؛ روی کمانِ گرد دکمه‌ها به هم نزدیک‌اند
   و برچسب‌های وسط‌چین از دو طرف بیرون می‌زدند و توی هم می‌رفتند.

   حالا برچسب از یک گوشه لنگر می‌گیرد و به سمتِ فضای خالیِ صفحه باز می‌شود:
   وقتی دکمه سمتِ راست است برچسب به سمتِ چپ کشیده می‌شود و برعکس. اینطوری
   برچسب‌ها هم‌جهت‌اند، در یک راستا رشد می‌کنند و همپوشانی ندارند. */
/* 🐞 روی کمانِ گرد، دو دکمه‌ی بالای کمان فقط ~۱۰ پیکسل اختلافِ ارتفاع دارند و
   جدایی‌شان تقریبا تمامش افقی است. برچسب‌ها هر دو به یک سمت رشد می‌کنند، پس
   همان جداییِ افقی را می‌خورند و در سقفِ ۵ دکمه نوکشان به هم می‌سابید.
   یک پله فونتِ ریزتر همان چند پیکسل را آزاد می‌کند، و سقفِ عرض هم مواظب است
   که برچسب‌های خیلی بلند دوباره همین را نسازند (متنِ کامل در title هست). */
.irdgtl-fc__item--round .irdgtl-fc__label {
	font-size: 10px;
	padding: 3px 7px;
	max-width: min(46vw, 92px);
	overflow: hidden;
	text-overflow: ellipsis;
}
/* برچسب روی همان کمانِ دکمه‌ها می‌چرخد: اولی کنارِ دکمه، آخری بالای دکمه.
   مقادیرِ --label-x و --label-y را PHP برای هر دکمه حساب می‌کند. */
.irdgtl-fc__item--round .irdgtl-fc__label {
	bottom: calc(50% + var(--label-y, 0px));
}
.irdgtl-fc--side-right .irdgtl-fc__item--round .irdgtl-fc__label {
	right: calc(50% + var(--label-x, 0px));
	left: auto;
	transform: none;
}
.irdgtl-fc--side-left .irdgtl-fc__item--round .irdgtl-fc__label {
	left: calc(50% + var(--label-x, 0px));
	right: auto;
	transform: none;
}

/* ==========================================================
   استایل «باکس تماس» (panel)
   یک کارتِ جمع‌وجور که از بالای دکمه باز می‌شود.
   عمداً کلِ صفحه را نمی‌گیرد: عرض حداکثر ۳۲۰px و ارتفاع حداکثر ۵۸vh.
   ========================================================== */
.irdgtl-fc__overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 18, 28, .28);
	backdrop-filter: blur(1.5px);
	-webkit-backdrop-filter: blur(1.5px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .28s ease, visibility .28s;
	z-index: 0;
}
.irdgtl-fc--panel.is-open .irdgtl-fc__overlay {
	opacity: 1;
	visibility: visible;
}

.irdgtl-fc__panel {
	position: absolute;
	bottom: calc(100% + 12px);
	width: min(300px, calc(100vw - 32px));
	/* 🐞 «همیشه اسکرول داشت»: سقفِ ۵۸vh با آیتم‌های بلند یعنی از ۴ دکمه به
	   بعد حتما اسکرول. حالا هم سقف بازتر است و هم خودِ آیتم‌ها کوتاه‌ترند، پس
	   تا ۸ دکمه بدونِ اسکرول جا می‌شود. calc دوم فقط مواظب است که کارت از
	   بالای صفحه بیرون نزند. */
	max-height: min(76vh, calc(100vh - 130px));
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 18px 50px rgba(15, 18, 28, .22), 0 4px 12px rgba(15, 18, 28, .1);
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px) scale(.94);
	transform-origin: bottom var(--irdgtl-fc-origin, right);
	transition: opacity .26s ease, transform .34s cubic-bezier(.34, 1.4, .64, 1), visibility .34s;
	z-index: 1;
}
.irdgtl-fc--side-right .irdgtl-fc__panel { right: 0; --irdgtl-fc-origin: right; }
.irdgtl-fc--side-left  .irdgtl-fc__panel { left: 0;  --irdgtl-fc-origin: left; }

.irdgtl-fc--panel.is-open .irdgtl-fc__panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.irdgtl-fc__panel-head {
	padding: 12px 16px 9px;
	text-align: center;
	border-bottom: 1px solid #f0f1f4;
	flex: 0 0 auto;
}
.irdgtl-fc__panel-title {
	font-size: 13.5px;
	font-weight: 800;
	color: #1c1e26;
	margin-bottom: 3px;
}
.irdgtl-fc__panel-sub {
	font-size: 11px;
	color: #7a8090;
	line-height: 1.7;
}

.irdgtl-fc__panel-list {
	padding: 8px;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 auto;
}

.irdgtl-fc__panel-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 9px;
	border-radius: 12px;
	background: #f6f7f9;
	text-decoration: none;
	color: #21242e;
	font-size: 12.5px;
	font-weight: 600;
	transition: background .18s ease, transform .18s ease;
	opacity: 0;
	transform: translateY(8px);
}
.irdgtl-fc--panel.is-open .irdgtl-fc__panel-item {
	opacity: 1;
	transform: translateY(0);
	transition: background .18s ease, transform .3s cubic-bezier(.34, 1.4, .64, 1) var(--delay, 0ms), opacity .25s ease var(--delay, 0ms);
}
.irdgtl-fc__panel-item:hover { background: #eceef2; }
.irdgtl-fc__panel-item:active { transform: scale(.985); }

.irdgtl-fc__panel-ico {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	/* 🐞 پدینگ اینجاست، نه اندازه‌ی ثابت روی خودِ آیکن.
	   قبلا آیکن عرضِ ثابت داشت و اگر قانونی از قالب آن را بزرگ‌تر می‌کرد،
	   گلیف تا لبه‌ی کادرِ رنگی می‌آمد و برخلافِ بقیه‌ی استایل‌ها هیچ حاشیه‌ای
	   نداشت. حالا فاصله را ظرف تضمین می‌کند و آیکن هرچقدر هم بزرگ شود از
	   ناحیه‌ی داخلی بیرون نمی‌زند. */
	padding: 9px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(145deg, var(--btn-color-light), var(--btn-color));
	box-shadow: 0 2px 7px rgba(0, 0, 0, .14);
}
.irdgtl-fc__panel-ico img,
.irdgtl-fc__panel-ico svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	pointer-events: none;
}

.irdgtl-fc__panel-text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.irdgtl-fc__panel-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* توضیحِ اختیاریِ زیرِ عنوان — فقط در استایلِ «باکس تماس» معنا دارد. */
.irdgtl-fc__panel-desc {
	font-size: 10px;
	font-weight: 500;
	color: #8a90a0;
	line-height: 1.55;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 480px) {
	/* روی موبایل هم کارت نباید تمامِ عرض را بگیرد؛ قبلا 100vw-28px بود که
	   عملا ۹۳٪ عرضِ صفحه می‌شد و «تمامِ صفحه» به‌نظر می‌رسید. */
	.irdgtl-fc__panel { width: min(276px, calc(100vw - 72px)); max-height: min(72vh, calc(100vh - 120px)); }
	/* روی موبایل سرِ کارت هم جمع‌تر می‌شود؛ همان ۲۰ پیکسلی که این‌جا آزاد
	   می‌شود، فرقِ «۸ دکمه بدونِ اسکرول» و «۸ دکمه با اسکرول» است. */
	.irdgtl-fc__panel-head { padding: 9px 12px 7px; }
	.irdgtl-fc__panel-title { font-size: 12.5px; margin-bottom: 2px; }
	.irdgtl-fc__panel-sub { font-size: 10px; line-height: 1.5; }
	.irdgtl-fc__panel-list { padding: 6px; gap: 5px; }
	.irdgtl-fc__panel-item { font-size: 12px; padding: 5px 8px; gap: 9px; }
	.irdgtl-fc__panel-ico { flex-basis: 31px; width: 31px; height: 31px; border-radius: 9px; padding: 8px; }
	.irdgtl-fc__panel-desc { font-size: 9.5px; }
}

/* ---------- مخفی‌سازی بر اساس دستگاه ---------- */
@media (max-width: 767px) {
	.irdgtl-fc--hide-mobile { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.irdgtl-fc--hide-tablet { display: none !important; }
}
@media (min-width: 1025px) {
	.irdgtl-fc--hide-desktop { display: none !important; }
}

/* روی موبایل برچسب‌های حالت گرد ممکنه شلوغ بشن، کوچیک‌ترشون می‌کنیم */
@media (max-width: 480px) {
	.irdgtl-fc__item--round .irdgtl-fc__label {
		font-size: 10px;
		padding: 2px 6px;
	}
	.irdgtl-fc__bubble { font-size: 12px; padding: 6px 12px; }
}

/* ---------- احترام به کاهش انیمیشن ---------- */
@media (prefers-reduced-motion: reduce) {
	.irdgtl-fc__item,
	.irdgtl-fc__toggle,
	.irdgtl-fc__toggle-icon,
	.irdgtl-fc__bubble,
	.irdgtl-fc__panel,
	.irdgtl-fc__overlay,
	.irdgtl-fc__panel-item {
		transition-duration: .01ms !important;
	}
}

/* ==========================================================
   ⚠️ سختی‌سازی در برابر استایلِ قالب — این بخش را حذف نکنید.
   دکمه روی سایتِ واقعی «بدشکل» دیده می‌شد: مربع، با یک کادرِ صورتی.
   دلیلش این بود که قالب‌ها (و المنتور) قوانینِ عمومیِ سنگینی روی button و a
   می‌گذارند — border، border-radius، padding، min-height، text-transform و
   حتی background. CSSِ ما بدونِ !important در آن نبرد می‌بازد.
   پس فقط همان چند خصیصه‌ای که *شکل* را می‌سازند قفل می‌شوند، نه بیشتر.
   ========================================================== */
.irdgtl-fc,
.irdgtl-fc *,
.irdgtl-fc *::before,
.irdgtl-fc *::after {
	box-sizing: border-box !important;
}

.irdgtl-fc__toggle {
	border: 0 !important;
	border-radius: 50% !important;
	padding: 0 !important;
	margin: 0 !important;
	outline: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;
	width: 100% !important;
	height: 100% !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: 1 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transform-origin: center center;
}
.irdgtl-fc__toggle:focus,
.irdgtl-fc__toggle:focus-visible {
	outline: 0 !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .22), 0 0 0 3px rgba(255, 255, 255, .55) !important;
}

/* دکمه‌های فرعی هم دقیقا همین مشکل را دارند. */
.irdgtl-fc__item {
	border: 0 !important;
	border-radius: 50% !important;
	padding: 0 !important;
	margin: 0 !important;
	text-decoration: none !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .18) !important;
}

/* ردیف‌های «باکس تماس»: قالب‌ها روی a رنگ، خط‌زیر و کادر می‌گذارند. */
.irdgtl-fc__panel-item {
	border: 0 !important;
	text-decoration: none !important;
	box-shadow: none !important;
	min-height: 0 !important;
	text-transform: none !important;
}
.irdgtl-fc__panel-item:hover,
.irdgtl-fc__panel-item:focus {
	text-decoration: none !important;
	outline: 0 !important;
}
/* 🐞 در ۹٫۲۶٫۱ این‌جا max-width: none گذاشته بودم تا قانونِ «img{max-width:100%}»
   قالب را خنثی کنم. نتیجه‌ی ناخواسته: وقتی تصویری لود نمی‌شد، جای‌گزینِ شکسته‌ی
   مرورگر هیچ سقفی نداشت و از دکمه بیرون می‌زد — همان چیزی که در سایت دیدی.
   حالا سقف روی ۱۰۰٪ برمی‌گردد، که هم قالب را مهار می‌کند هم بیرون‌زدگی را. */
.irdgtl-fc__panel-ico img,
.irdgtl-fc__item img,
.irdgtl-fc__toggle-icon img,
.irdgtl-fc__panel-ico svg,
.irdgtl-fc__item svg {
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	max-width: 100% !important;
	max-height: 100% !important;
	vertical-align: middle !important;
}
.irdgtl-fc__item img,
.irdgtl-fc__item svg {
	width: calc(var(--irdgtl-fc-sub-size, 46px) * .44) !important;
	height: calc(var(--irdgtl-fc-sub-size, 46px) * .44) !important;
	object-fit: contain !important;
}
/* اندازه‌ی آیکنِ باکس از پدینگِ ظرف می‌آید (بالاتر توضیح داده شد)؛ اینجا فقط
   مطمئن می‌شویم قالب نتواند بزرگ‌ترش کند. */
.irdgtl-fc__panel-ico img,
.irdgtl-fc__panel-ico svg {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
}
/* آیکنِ درون‌خطیِ SVG رنگش را از خودِ دکمه می‌گیرد. */
.irdgtl-fc__toggle-icon svg *[fill]:not([fill="none"]),
.irdgtl-fc__item svg *[fill]:not([fill="none"]),
.irdgtl-fc__panel-ico svg *[fill]:not([fill="none"]) {
	fill: #fff;
}
.irdgtl-fc__panel {
	box-sizing: border-box !important;
	max-width: none !important;
}