/**
 * MyPlug Social FAB — استایل سمت کاربر.
 *
 * تمام مقادیر وابسته به تنظیمات از طریق CSS Variable تزریق می‌شوند،
 * بنابراین این فایل ثابت و قابل کش شدن است.
 */

.mpsf-root {
	position: fixed;
	z-index: var( --mpsf-z, 99990 );
	font-family: inherit;
	line-height: 1;
	-webkit-tap-highlight-color: transparent;
}

.mpsf-root *,
.mpsf-root *::before,
.mpsf-root *::after {
	box-sizing: border-box;
}

.mpsf-wrap {
	position: relative;
	width: var( --mpsf-size );
	height: var( --mpsf-size );
}

/* ---------------------------------------------------------------
 * دکمهٔ شناور اصلی
 * --------------------------------------------------------------- */

.mpsf-toggle {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var( --mpsf-size );
	height: var( --mpsf-size );
	padding: 0;
	margin: 0;
	cursor: pointer;
	color: var( --mpsf-toggle-fg );
	background: var( --mpsf-toggle-bg );
	border: var( --mpsf-border ) solid var( --mpsf-border-color );
	border-radius: var( --mpsf-radius );
	box-shadow: var( --mpsf-toggle-shadow );
	transition: transform var( --mpsf-dur ) cubic-bezier( .34, 1.4, .64, 1 ), box-shadow .3s ease;
	appearance: none;
	-webkit-appearance: none;
}

.mpsf-toggle:hover {
	transform: scale( 1.06 );
}

.mpsf-toggle:active {
	transform: scale( .95 );
}

.mpsf-toggle:focus-visible {
	outline: 3px solid var( --mpsf-toggle-fg );
	outline-offset: 3px;
}

.mpsf-toggle-icon {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var( --mpsf-icon );
	height: var( --mpsf-icon );
	transition: transform var( --mpsf-dur ) cubic-bezier( .34, 1.4, .64, 1 ), opacity .24s ease;
}

.mpsf-toggle-icon svg,
.mpsf-toggle-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.mpsf-toggle-close {
	opacity: 0;
	transform: rotate( -90deg ) scale( .4 );
}

.mpsf-root.is-open .mpsf-toggle-open {
	opacity: 0;
	transform: rotate( 90deg ) scale( .4 );
}

.mpsf-root.is-open .mpsf-toggle-close {
	opacity: 1;
	transform: none;
}

/* حلقهٔ تپش برای جلب توجه.
   خواهرِ دکمه است نه فرزند آن؛ چون دکمه zـایندکس دارد و یک بافت انباشت
   می‌سازد، عنصر فرزند پشت پس‌زمینهٔ دکمه پنهان می‌شد. */
.mpsf-ping {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: var( --mpsf-size );
	height: var( --mpsf-size );
	pointer-events: none;
	background: var( --mpsf-toggle-bg );
	border-radius: var( --mpsf-radius );
	opacity: .55;
}

.mpsf-has-pulse .mpsf-ping {
	animation: mpsf-ping 2.4s cubic-bezier( 0, 0, .2, 1 ) infinite;
}

.mpsf-root.is-open .mpsf-ping,
.mpsf-root.is-hovered .mpsf-ping {
	animation: none;
	opacity: 0;
}

@keyframes mpsf-ping {
	0%   { transform: scale( 1 );   opacity: .5; }
	70%  { transform: scale( 1.7 ); opacity: 0; }
	100% { transform: scale( 1.7 ); opacity: 0; }
}

/* ---------------------------------------------------------------
 * آیتم‌ها — پایه
 * --------------------------------------------------------------- */

.mpsf-items {
	position: absolute;
	padding: 0;
	margin: 0;
	list-style: none;
}

.mpsf-link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var( --mpsf-item );
	height: var( --mpsf-item );
	color: var( --mpsf-item-fg );
	text-decoration: none;
	border: var( --mpsf-border ) solid var( --mpsf-border-color );
	border-radius: var( --mpsf-radius );
	box-shadow: var( --mpsf-shadow );
	direction: ltr;
	transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.mpsf-link:focus-visible {
	outline: 3px solid var( --mpsf-brand );
	outline-offset: 3px;
}

.mpsf-icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var( --mpsf-icon );
	height: var( --mpsf-icon );
}

.mpsf-icon svg,
.mpsf-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* حالت‌های رنگ آیتم */
.mpsf-mode-brand .mpsf-link {
	background: var( --mpsf-brand );
}

.mpsf-mode-custom .mpsf-link {
	background: var( --mpsf-item-bg );
}

.mpsf-mode-glass .mpsf-link {
	color: var( --mpsf-brand );
	background: rgba( 255, 255, 255, .88 );
	border-color: rgba( 255, 255, 255, .6 );
}

@supports ( backdrop-filter: blur( 2px ) ) or ( -webkit-backdrop-filter: blur( 2px ) ) {
	.mpsf-mode-glass .mpsf-link {
		background: rgba( 255, 255, 255, .34 );
		-webkit-backdrop-filter: blur( 14px ) saturate( 170% );
		backdrop-filter: blur( 14px ) saturate( 170% );
	}
}

/* افکت‌های هاور */
.mpsf-hover-lift .mpsf-link:hover  { transform: translateY( -4px ); box-shadow: 0 12px 26px var( --mpsf-glow ); }
.mpsf-hover-grow .mpsf-link:hover  { transform: scale( 1.14 ); box-shadow: 0 12px 26px var( --mpsf-glow ); }
.mpsf-hover-tilt .mpsf-link:hover  { transform: rotate( -8deg ) scale( 1.08 ); }
.mpsf-hover-pulse .mpsf-link:hover { animation: mpsf-bounce .5s ease; }

@keyframes mpsf-bounce {
	0%, 100% { transform: translateY( 0 ); }
	40%      { transform: translateY( -7px ); }
	70%      { transform: translateY( -2px ); }
}

/* ---------------------------------------------------------------
 * برچسب‌ها
 * --------------------------------------------------------------- */

.mpsf-label {
	font-size: var( --mpsf-label-size );
	font-weight: 600;
	line-height: 1.2;
	color: var( --mpsf-label-fg );
	white-space: nowrap;
	unicode-bidi: plaintext;
}

.mpsf-no-labels .mpsf-label {
	display: none;
}

/* ---------------------------------------------------------------
 * استایل ۱ — کمان نئونی (Neon Arc)
 * --------------------------------------------------------------- */

.mpsf-style-arc .mpsf-items {
	top: 0;
	left: 0;
	right: auto;
	width: var( --mpsf-size );
	height: var( --mpsf-size );
}

.mpsf-style-arc .mpsf-item {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var( --mpsf-item );
	height: var( --mpsf-item );
	margin: calc( var( --mpsf-item ) / -2 ) 0 0 calc( var( --mpsf-item ) / -2 );
	visibility: hidden;
	opacity: 0;
	transform: translate( 0, 0 ) scale( .3 );
	/* تأخیر خروج: از آخرین آیتم به اولی، تا بسته شدن هم پلکانی باشد. */
	--mpsf-out: calc( ( var( --mpsf-count ) - 1 - var( --mpsf-i ) ) * var( --mpsf-stagger ) * .45 );
	--mpsf-in: calc( var( --mpsf-i ) * var( --mpsf-stagger ) );
	transition-property: transform, opacity, visibility;
	transition-timing-function: cubic-bezier( .34, 1.5, .64, 1 ), ease, linear;
	transition-duration: var( --mpsf-dur ), calc( var( --mpsf-dur ) * .55 ), 0s;
	/* visibility باید پس از پایان انیمیشن پنهان شود، نه هم‌زمان با تأخیر پلکانی. */
	transition-delay: var( --mpsf-out ), var( --mpsf-out ), calc( var( --mpsf-dur ) + var( --mpsf-out ) );
}

.mpsf-style-arc.is-open .mpsf-item {
	visibility: visible;
	opacity: 1;
	transform: translate(
			calc( var( --mpsf-cx ) * var( --mpsf-r ) ),
			calc( var( --mpsf-cy ) * var( --mpsf-r ) * -1 )
		)
		scale( 1 );
	transition-delay: var( --mpsf-in ), var( --mpsf-in ), 0s;
}

.mpsf-style-arc .mpsf-label {
	position: absolute;
	top: 50%;
	padding: 6px 10px;
	pointer-events: none;
	background: var( --mpsf-label-bg );
	border-radius: 8px;
	box-shadow: 0 6px 16px rgba( 15, 23, 42, .22 );
	opacity: 0;
	transition: opacity .18s ease, transform .18s ease;
	margin-top: calc( var( --mpsf-label-size ) * -.75 );
}

.mpsf-style-arc .mpsf-link:hover .mpsf-label,
.mpsf-style-arc .mpsf-link:focus-visible .mpsf-label {
	opacity: 1;
}

/* ---------------------------------------------------------------
 * استایل ۲ — ریل شیشه‌ای (Glass Rail)
 * --------------------------------------------------------------- */

.mpsf-style-rail .mpsf-items {
	display: flex;
	gap: var( --mpsf-gap );
	padding: 5px;
	/* در صفحهٔ راست‌به‌چپ، محور عرضیِ ستون هم وارونه می‌شود و align-items
	   برعکس عمل می‌کند؛ با ltr کردنِ ظرف، ترازبندی قطعی و مستقل از قالب است. */
	direction: ltr;
	visibility: hidden;
	opacity: 0;
	transform: scale( .82 );
	transition:
		transform var( --mpsf-dur ) cubic-bezier( .34, 1.4, .64, 1 ),
		opacity calc( var( --mpsf-dur ) * .6 ) ease,
		visibility 0s linear var( --mpsf-dur );
}

.mpsf-style-rail.mpsf-has-glass .mpsf-items {
	padding: calc( var( --mpsf-gap ) * .8 );
	background: rgba( 255, 255, 255, .78 );
	border: 1px solid rgba( 255, 255, 255, .55 );
	border-radius: calc( var( --mpsf-item ) * .55 );
	box-shadow: 0 16px 40px rgba( 15, 23, 42, .18 );
}

@supports ( backdrop-filter: blur( 2px ) ) or ( -webkit-backdrop-filter: blur( 2px ) ) {
	.mpsf-style-rail.mpsf-has-glass .mpsf-items {
		background: rgba( 255, 255, 255, .38 );
		-webkit-backdrop-filter: blur( 18px ) saturate( 180% );
		backdrop-filter: blur( 18px ) saturate( 180% );
	}
}

.mpsf-style-rail.is-open .mpsf-items {
	visibility: visible;
	opacity: 1;
	transform: scale( 1 );
	transition-delay: 0s;
}

.mpsf-style-rail .mpsf-item {
	opacity: 0;
	transform: translateY( 10px ) scale( .8 );
	transition:
		transform var( --mpsf-dur ) cubic-bezier( .34, 1.5, .64, 1 ),
		opacity calc( var( --mpsf-dur ) * .5 ) ease;
	transition-delay: calc( ( var( --mpsf-count ) - 1 - var( --mpsf-i ) ) * var( --mpsf-stagger ) * .35 );
}

.mpsf-style-rail.is-open .mpsf-item {
	opacity: 1;
	transform: none;
	transition-delay: calc( var( --mpsf-i ) * var( --mpsf-stagger ) );
}

.mpsf-style-rail .mpsf-link {
	width: auto;
	min-width: var( --mpsf-item );
	gap: 10px;
	padding: 0 calc( var( --mpsf-item ) * .26 );
}

/* برچسب فضای باقی‌مانده را پر می‌کند تا در حالت هم‌عرض،
   آیکون‌ها و متن‌ها هر کدام در یک ستون منظم بنشینند. */
.mpsf-style-rail .mpsf-label {
	flex: 1 1 auto;
	min-width: 0;
	color: var( --mpsf-item-fg );
}

.mpsf-style-rail.mpsf-no-labels .mpsf-link {
	width: var( --mpsf-item );
	padding: 0;
}

.mpsf-style-rail.mpsf-mode-glass .mpsf-label {
	color: var( --mpsf-brand );
}

/* ---------------------------------------------------------------
 * پوشش پس‌زمینه
 * --------------------------------------------------------------- */

.mpsf-overlay {
	position: fixed;
	inset: 0;
	z-index: -1;
	visibility: hidden;
	background: rgba( 15, 23, 42, .45 );
	opacity: 0;
	transition: opacity .3s ease, visibility 0s linear .3s;
}

.mpsf-root.is-open .mpsf-overlay {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

@supports ( backdrop-filter: blur( 2px ) ) {
	.mpsf-overlay-blur {
		-webkit-backdrop-filter: blur( 4px );
		backdrop-filter: blur( 4px );
	}
}

/* ---------------------------------------------------------------
 * دسترس‌پذیری و چاپ
 * --------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	.mpsf-root *,
	.mpsf-root *::before,
	.mpsf-root *::after {
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
		animation: none !important;
	}

	.mpsf-style-arc .mpsf-item,
	.mpsf-style-rail .mpsf-item,
	.mpsf-style-rail .mpsf-items {
		transform: none;
	}

	.mpsf-style-arc.is-open .mpsf-item {
		transform: translate(
			calc( var( --mpsf-cx ) * var( --mpsf-r ) ),
			calc( var( --mpsf-cy ) * var( --mpsf-r ) * -1 )
		);
	}
}

@media print {
	.mpsf-root {
		display: none !important;
	}
}