/* ============================================================
   MST Social Buttons — دکمه‌های اجتماعی
   ============================================================ */

.mstsb {
	--mstsb-size: 44px;
	--mstsb-icon: 20px;
	--mstsb-radius: 12px;
	--brand: #6b7280;
	--mstsb-bg: #6b7280;
	--mstsb-fg: #ffffff;
	--mstsb-bg-h: #4b5563;
	--mstsb-fg-h: #ffffff;
	--mstsb-lift: -3px;
	--mstsb-x: 0px;
	--mstsb-y: 0px;
	--mstsb-card-bg: transparent;
	--mstsb-card-bg-h: transparent;
	--mstsb-card-fg: inherit;
	--mstsb-desc-c: inherit;
	--mstsb-card-pad: 18px 22px;
	--mstsb-cols: 2;
	--mstsb-iscale: 1;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	direction: inherit;
	position: relative;
	transform: translate(var(--mstsb-x), var(--mstsb-y));
}

/* ---------- خنثی‌سازی استایل قالب (ترتیب را به‌هم نزنید) ---------- */
.mstsb .mstsb__btn,
.mstsb a.mstsb__btn {
	all: unset;
	box-sizing: border-box !important;
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	flex: 0 0 auto !important;
	width: var(--mstsb-size) !important;
	height: var(--mstsb-size) !important;
	min-width: var(--mstsb-size) !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: var(--mstsb-radius) !important;
	background-color: var(--brand, #6b7280) !important;
	background-image: none !important;
	color: #ffffff !important;
	font: inherit !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	cursor: pointer !important;
	outline: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: background-color 0.25s ease, color 0.25s ease,
		transform 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.mstsb .mstsb__btn::before,
.mstsb .mstsb__btn::after {
	background: none;
}

.mstsb .mstsb__btn:hover {
	background-color: var(--brand, #6b7280) !important;
	color: #ffffff !important;
	transform: translateY(var(--mstsb-lift)) !important;
}

.mstsb .mstsb__btn:focus-visible {
	outline: 2px solid var(--brand, #6b7280) !important;
	outline-offset: 3px !important;
}

/* ---------- آیکون ---------- */
.mstsb .mstsb__icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: var(--mstsb-icon) !important;
	height: var(--mstsb-icon) !important;
	flex: 0 0 auto !important;
	pointer-events: none;
}

.mstsb .mstsb__icon svg,
.mstsb .mstsb__icon img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	display: block !important;
	object-fit: contain !important;
}

/* رنگ‌دهی اجباری فقط در حالت‌های تک‌رنگ */
.mstsb-scheme-brand .mstsb__icon svg,
.mstsb-scheme-brand-soft .mstsb__icon svg,
.mstsb-scheme-brand-flat .mstsb__icon svg,
.mstsb-scheme-custom .mstsb__icon svg {
	fill: currentColor !important;
}

.mstsb .mstsb__icon.is-img img {
	filter: none !important;
	background: none !important;
	border-radius: 0 !important;
}

/* بزرگ‌نمایی آیکون — برای تصویرهایی که دور تا دورشان فضای خالی دارند */
.mstsb .mstsb__icon > svg,
.mstsb .mstsb__icon > img,
.mstsb .mstsb__icon > i {
	transform: scale(var(--mstsb-iscale, 1));
	transform-origin: center center;
}

.mstsb .mstsb__icon i {
	font-size: var(--mstsb-icon) !important;
	line-height: 1 !important;
	color: currentColor !important;
}

/* ---------- فرم دکمه ---------- */
.mstsb-shape-circle .mstsb__btn {
	border-radius: 50% !important;
}

.mstsb-shape-square .mstsb__btn {
	border-radius: 4px !important;
}

/* ---------- حالت آیکون + متن ---------- */
.mstsb-mode-label .mstsb__btn {
	width: auto !important;
	min-width: 0 !important;
	padding: 0 16px !important;
	border-radius: var(--mstsb-radius) !important;
}

.mstsb .mstsb__label {
	display: inline-block !important;
	line-height: 1.7;
	white-space: nowrap;
	color: inherit !important;
}

/* ---------- نام هنگام هاور ---------- */
.mstsb .mstsb__btn[data-mstsb-tip]::after {
	content: attr(data-mstsb-tip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	padding: 4px 10px;
	border-radius: 8px;
	background: rgba(23, 25, 35, 0.92);
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.7;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.22s ease, transform 0.22s ease;
	z-index: 5;
}

.mstsb .mstsb__btn[data-mstsb-tip]:hover::after {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ============================================================
   رنگ رسمی هر شبکه (رنگ از خود دکمه می‌آید) + انیمیشن‌ها
   ============================================================ */

/* ---------- پُر: زمینه رنگ برند، نشان سفید ---------- */
.mstsb-scheme-brand .mstsb a.mstsb__btn {
	background-color: var(--brand, #6b7280) !important;
	color: #ffffff !important;
	box-shadow: 0 6px 18px -8px var(--brand, #6b7280) !important;
}

.mstsb-scheme-brand .mstsb a.mstsb__btn:hover {
	background-color: var(--brand, #6b7280) !important;
	color: #ffffff !important;
	box-shadow: 0 14px 26px -10px var(--brand, #6b7280) !important;
}

/* اینستاگرام: گرادیانت رسمی روی زمینه، نشان سفید — به‌صورت پیش‌فرض */
.mstsb .mstsb__btn.is-gradient {
	background-image: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%) !important;
}

.mstsb .mstsb__btn.is-gradient svg path,
.mstsb .mstsb__btn.is-gradient svg circle {
	fill: #ffffff !important;
}

.mstsb-scheme-brand .mstsb a.mstsb__btn.is-gradient {
	background-image: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%) !important;
}

.mstsb-scheme-brand .mstsb a.mstsb__btn.is-gradient svg path,
.mstsb-scheme-brand .mstsb a.mstsb__btn.is-gradient svg circle {
	fill: #ffffff !important;
}

/* در حالت‌های ملایم و بدون زمینه، اینستاگرام گرادیانت روی خود نشان است */
.mstsb-scheme-brand-soft .mstsb a.mstsb__btn.is-gradient,
.mstsb-scheme-brand-flat .mstsb a.mstsb__btn.is-gradient {
	background-image: none !important;
}

.mstsb-scheme-brand-soft .mstsb a.mstsb__btn.is-gradient svg path,
.mstsb-scheme-brand-soft .mstsb a.mstsb__btn.is-gradient svg circle,
.mstsb-scheme-brand-flat .mstsb a.mstsb__btn.is-gradient svg path,
.mstsb-scheme-brand-flat .mstsb a.mstsb__btn.is-gradient svg circle {
	fill: url(#mstsbIg) !important;
}

/* ---------- ملایم: زمینه کم‌رنگ، نشان رنگی ---------- */
.mstsb-scheme-brand-soft .mstsb a.mstsb__btn {
	background-color: color-mix(in srgb, var(--brand, #6b7280) 11%, #ffffff) !important;
	color: var(--brand, #6b7280) !important;
}

.mstsb-scheme-brand-soft .mstsb a.mstsb__btn:hover {
	background-color: color-mix(in srgb, var(--brand, #6b7280) 20%, #ffffff) !important;
	color: var(--brand, #6b7280) !important;
}

/* ---------- فقط نشان رنگی، بدون زمینه ---------- */
.mstsb-scheme-brand-flat .mstsb a.mstsb__btn {
	background-color: transparent !important;
	color: var(--brand, #6b7280) !important;
	box-shadow: none !important;
}

.mstsb-scheme-brand-flat .mstsb a.mstsb__btn:hover {
	background-color: transparent !important;
	color: var(--brand, #6b7280) !important;
	box-shadow: none !important;
}

/* ---------- دستی: رنگ‌های انتخابی کاربر ---------- */
.mstsb-scheme-custom .mstsb a.mstsb__btn {
	background-color: var(--mstsb-bg) !important;
	background-image: none !important;
	color: var(--mstsb-fg) !important;
}

.mstsb-scheme-custom .mstsb a.mstsb__btn:hover {
	background-color: var(--mstsb-bg-h) !important;
	color: var(--mstsb-fg-h) !important;
}

.mstsb-scheme-custom .mstsb a.mstsb__btn.is-gradient svg path,
.mstsb-scheme-custom .mstsb a.mstsb__btn.is-gradient svg circle {
	fill: currentColor !important;
}

@supports not (background-color: color-mix(in srgb, red 50%, blue)) {
	.mstsb-scheme-brand-soft .mstsb a.mstsb__btn {
		background-color: rgba(0, 0, 0, 0.05) !important;
	}
}

/* ============================================================
   آیکون کامل و رنگی — بدون هیچ زمینه و رنگ‌دهی از سمت افزونه
   ============================================================ */
.mstsb-scheme-original .mstsb a.mstsb__btn,
.mstsb-scheme-original .mstsb .mstsb__btn {
	background-color: var(--mstsb-card-bg, transparent) !important;
	background-image: none !important;
	color: var(--mstsb-card-fg, inherit) !important;
	box-shadow: none !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
}

.mstsb-scheme-original .mstsb a.mstsb__btn:hover,
.mstsb-scheme-original .mstsb .mstsb__btn:hover {
	background-color: var(--mstsb-card-bg, transparent) !important;
	color: var(--mstsb-card-fg, inherit) !important;
	box-shadow: none !important;
}

.mstsb-scheme-original .mstsb a.mstsb__btn.is-gradient {
	background-image: none !important;
}

/* اندازه آیکون در این حالت با اسلایدر «اندازه دکمه» کنترل می‌شود */
.mstsb-scheme-original .mstsb .mstsb__icon {
	width: var(--mstsb-size) !important;
	height: var(--mstsb-size) !important;
}

.mstsb-mode-label .mstsb a.mstsb__btn {
	padding: var(--mstsb-card-pad) !important;
	height: auto !important;
	min-height: var(--mstsb-size) !important;
}

.mstsb-scheme-original.mstsb-mode-label .mstsb a.mstsb__btn {
	border-radius: var(--mstsb-radius) !important;
}

/* درخشش عبوری روی آیکون خام معنا ندارد */
.mstsb-scheme-original.mstsb-anim-shine .mstsb .mstsb__btn::before {
	display: none !important;
}

/* ============================================================
   حالت کارت باکسی — عنوان + توضیح + آیکون کامل
   ============================================================ */
.mstsb-mode-card .mstsb {
	display: grid !important;
	grid-template-columns: repeat(var(--mstsb-cols, 2), minmax(0, 1fr));
	align-items: stretch;
}

.mstsb-mode-card .mstsb a.mstsb__btn,
.mstsb-mode-card .mstsb .mstsb__btn {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 14px !important;
	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	padding: var(--mstsb-card-pad) !important;
	border-radius: var(--mstsb-radius) !important;
	background-color: var(--mstsb-card-bg, transparent) !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--mstsb-card-fg, #29317c) !important;
	overflow: hidden !important;
	text-align: start !important;
}

.mstsb-mode-card .mstsb a.mstsb__btn:hover,
.mstsb-mode-card .mstsb .mstsb__btn:hover {
	background-color: var(--mstsb-card-bg-h, var(--mstsb-card-bg, transparent)) !important;
	color: var(--mstsb-card-fg, #29317c) !important;
	background-image: none !important;
}

/* آیکون در کارت: دقیقاً به اندازه‌ای که تعیین شده، بدون هیچ زمینه‌ای */
.mstsb-mode-card .mstsb .mstsb__icon {
	width: var(--mstsb-size) !important;
	height: var(--mstsb-size) !important;
	flex: 0 0 var(--mstsb-size) !important;
	order: 2;
}

.mstsb-mode-card .mstsb .mstsb__text {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
	min-width: 0 !important;
	flex: 1 1 auto !important;
	order: 1;
	overflow: hidden;
}

.mstsb-mode-card .mstsb .mstsb__label {
	display: block !important;
	color: var(--mstsb-card-fg, #29317c) !important;
	white-space: normal !important;
	overflow-wrap: anywhere;
}

.mstsb-mode-card .mstsb .mstsb__desc {
	display: block !important;
	color: var(--mstsb-desc-c, #3b4a6b) !important;
	overflow-wrap: anywhere;
}

/* آیکون کنار متن به‌جای گوشه مقابل */
.mstsb-ipos-start.mstsb-mode-card .mstsb a.mstsb__btn,
.mstsb-ipos-start.mstsb-mode-card .mstsb .mstsb__btn {
	justify-content: flex-start !important;
}

.mstsb-ipos-start.mstsb-mode-card .mstsb .mstsb__icon {
	order: 1;
}

.mstsb-ipos-start.mstsb-mode-card .mstsb .mstsb__text {
	order: 2;
	flex: 0 1 auto !important;
}

/* در حالت کارت، تولتیپ و انیمیشن درخشش لازم نیست */
.mstsb-mode-card .mstsb .mstsb__btn[data-mstsb-tip]::after {
	display: none !important;
}

.mstsb-mode-card.mstsb-anim-shine .mstsb .mstsb__btn::before {
	display: none !important;
}

@media (max-width: 767px) {
	.mstsb-mode-card .mstsb a.mstsb__btn,
	.mstsb-mode-card .mstsb .mstsb__btn {
		gap: 10px !important;
	}
}

/* ============================================================
   بدون هیچ باکسی پشت آیکون — همیشه ترنسپرنت
   ============================================================ */
.mstsb .mstsb__icon,
.mstsb .mstsb__icon.is-img,
.mstsb .mstsb__icon > img,
.mstsb .mstsb__icon > svg {
	background: none !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* حالت «فقط آیکون» با نشان کامل: هیچ زمینه‌ای، حتی اگر رنگ کارت تنظیم شده باشد */
.mstsb-mode-icon.mstsb-scheme-original .mstsb a.mstsb__btn,
.mstsb-mode-icon.mstsb-scheme-original .mstsb .mstsb__btn,
.mstsb-mode-icon.mstsb-scheme-original .mstsb a.mstsb__btn:hover {
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

/* ============================================================
   انیمیشن ورود — دکمه‌ها یکی‌یکی و نرم ظاهر می‌شوند
   ============================================================ */
.mstsb .mstsb__btn {
	animation: mstsb-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mstsb .mstsb__btn:nth-child(1) { animation-delay: 0.05s; }
.mstsb .mstsb__btn:nth-child(2) { animation-delay: 0.12s; }
.mstsb .mstsb__btn:nth-child(3) { animation-delay: 0.19s; }
.mstsb .mstsb__btn:nth-child(4) { animation-delay: 0.26s; }
.mstsb .mstsb__btn:nth-child(5) { animation-delay: 0.33s; }
.mstsb .mstsb__btn:nth-child(6) { animation-delay: 0.40s; }
.mstsb .mstsb__btn:nth-child(7) { animation-delay: 0.47s; }
.mstsb .mstsb__btn:nth-child(8) { animation-delay: 0.54s; }

@keyframes mstsb-in {
	from { opacity: 0; transform: translateY(10px) scale(0.9); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   انیمیشن هاور
   ============================================================ */

/* بالا پریدن نرم (پیش‌فرض) */
.mstsb-anim-pop .mstsb__btn:hover {
	transform: translateY(var(--mstsb-lift)) scale(1.08) !important;
}

.mstsb-anim-pop .mstsb__icon {
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mstsb-anim-pop .mstsb__btn:hover .mstsb__icon {
	transform: scale(1.12);
}

/* چرخش ظریف */
.mstsb-anim-tilt .mstsb__btn:hover {
	transform: translateY(var(--mstsb-lift)) rotate(-6deg) scale(1.06) !important;
}

/* تپش ملایم */
.mstsb-anim-beat .mstsb__btn:hover {
	animation: mstsb-beat 0.7s ease infinite;
}

@keyframes mstsb-beat {
	0%, 100% { transform: translateY(var(--mstsb-lift)) scale(1.04); }
	50%      { transform: translateY(var(--mstsb-lift)) scale(1.12); }
}

/* درخشش عبوری */
.mstsb-anim-shine .mstsb__btn {
	overflow: hidden !important;
}

.mstsb-anim-shine .mstsb__btn::before {
	content: "";
	position: absolute;
	top: -60%;
	inset-inline-start: -120%;
	width: 60%;
	height: 220%;
	background: linear-gradient(
		100deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.55) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: rotate(18deg);
	transition: inset-inline-start 0.55s ease;
	pointer-events: none;
}

.mstsb-anim-shine .mstsb__btn:hover::before {
	inset-inline-start: 140%;
}

.mstsb-anim-shine .mstsb__btn:hover {
	transform: translateY(var(--mstsb-lift)) !important;
}

/* بدون انیمیشن */
.mstsb-anim-none .mstsb__btn:hover {
	transform: none !important;
}

/* ============================================================
   موبایل
   ============================================================ */
@media (max-width: 767px) {
	.mstsb {
		gap: 8px;
	}

	.mstsb-mode-label .mstsb__btn {
		padding: 0 12px !important;
	}

	.mstsb .mstsb__btn[data-mstsb-tip]::after {
		display: none;
	}
}

@media (max-width: 380px) {
	.mstsb-mode-label .mstsb__btn {
		padding: 0 10px !important;
		gap: 6px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mstsb .mstsb__btn {
		animation: none !important;
	}

	.mstsb-anim-beat .mstsb__btn:hover,
	.mstsb-anim-shine .mstsb__btn::before {
		animation: none !important;
		transition: none !important;
	}

	.mstsb .mstsb__btn,
	.mstsb .mstsb__btn[data-mstsb-tip]::after {
		transition: none !important;
	}

	.mstsb .mstsb__btn:hover {
		transform: none !important;
	}
}

/* ============================================================
   جلوگیری از فضای اضافه و اسکرول افقی هنگام جابه‌جایی
   ============================================================ */
.mstsb {
	max-width: 100%;
}

/* جابه‌جایی نباید ناحیه اسکرول صفحه را بزرگ کند */
@supports (overflow: clip) {
	body:has(.mstsb[data-mstsb-fix="yes"]) {
		overflow-x: clip;
	}
}

@supports not (overflow: clip) {
	body:has(.mstsb[data-mstsb-fix="yes"]) {
		overflow-x: hidden;
	}
}

/* مرورگرهای بدون پشتیبانی :has — ویجت خودش فضای اضافه نسازد */
.mstsb[data-mstsb-fix="yes"] {
	will-change: transform;
}