/**
 * Interactive globe widget — MedLab Psychology
 */

.mpsy-globe {
	--globe-blue: #1a4b84;
	--globe-color: #1a4b84;
	--globe-color-light: color-mix(in srgb, var(--globe-color) 58%, #ffffff);
	--globe-color-mid: color-mix(in srgb, var(--globe-color) 82%, #ffffff);
	--globe-color-dark: color-mix(in srgb, var(--globe-color) 55%, #000000);
	--globe-pattern-color: #ffffff;
	--globe-pattern-opacity: 0.75;
	--globe-teal: #00a8b5;
	--globe-ink: #12324f;
	--globe-muted: #5a7388;
	--globe-line: #d5e3ef;
	--globe-size: 260px;
	/* حلقه نقطه‌چین — محل دکمه‌های رادیو */
	--globe-ring: calc(var(--globe-size) * 1.34);
	/* محدوده عناوین بیرون از حلقه */
	--globe-orbit: calc(var(--globe-ring) + 5.5rem);
	--globe-label-out: 2.75rem;
	direction: rtl;
	text-align: right;
	box-sizing: border-box;
	margin: 1.25rem auto;
	padding: 1.35rem 1.1rem 1.5rem;
	max-width: 1100px;
	border-radius: 18px;
	border: 1px solid var(--globe-line);
	background:
		radial-gradient(620px 220px at 85% 10%, color-mix(in srgb, var(--globe-teal) 14%, transparent), transparent 55%),
		radial-gradient(520px 200px at 10% 90%, color-mix(in srgb, var(--globe-color) 12%, transparent), transparent 50%),
		linear-gradient(165deg, #f3f7fb 0%, #fff 48%, #f6fafc 100%);
	font-family: Tahoma, "Vazirmatn", "IRANSansX", sans-serif;
	color: var(--globe-ink);
	overflow: hidden;
	position: relative;
}

.mpsy-globe *,
.mpsy-globe *::before,
.mpsy-globe *::after {
	box-sizing: border-box;
}

.mpsy-globe-hero {
	text-align: center;
	max-width: 34rem;
	margin: 0 auto 1.15rem;
}

.mpsy-globe-brand {
	margin: 0 0 0.3rem;
	font-size: clamp(1.05rem, 2vw, 1.35rem);
	font-weight: 800;
	color: var(--globe-blue);
}

.mpsy-globe-heading {
	margin: 0 0 0.35rem;
	font-size: clamp(0.98rem, 1.8vw, 1.2rem);
	font-weight: 700;
	color: var(--globe-ink);
}

.mpsy-globe-lead {
	margin: 0;
	font-size: 0.86rem;
	line-height: 1.7;
	color: var(--globe-muted);
}

.mpsy-globe-layout {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 1.1rem;
	align-items: center;
}

.mpsy-globe--panel-right .mpsy-globe-layout {
	grid-template-columns: 0.85fr 1.15fr;
}

.mpsy-globe--panel-right .mpsy-globe-panel {
	order: -1;
}

@media (max-width: 900px) {
	.mpsy-globe-layout,
	.mpsy-globe--panel-right .mpsy-globe-layout {
		grid-template-columns: 1fr;
	}

	.mpsy-globe--panel-right .mpsy-globe-panel {
		order: 0;
	}

	.mpsy-globe {
		--globe-size: min(240px, calc(100vw - 10rem)) !important;
		--globe-ring: calc(var(--globe-size) * 1.14);
		--globe-label-out: 1.25rem;
		--globe-orbit: calc(var(--globe-ring) + 3.5rem);
	}
}

.mpsy-globe-stage {
	position: relative;
	min-height: calc(var(--globe-orbit) + 2.5rem);
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 900px;
}

.mpsy-globe-sphere-wrap {
	position: relative;
	width: var(--globe-size);
	height: var(--globe-size);
	z-index: 1;
}

.mpsy-globe-sphere {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	transform-style: preserve-3d;
	will-change: transform;
}

.mpsy-globe-sphere-core {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	overflow: hidden;
	isolation: isolate;
	background: var(--globe-color);
	box-shadow:
		0 22px 48px color-mix(in srgb, var(--globe-color) 42%, transparent),
		0 4px 12px rgba(0, 0, 0, 0.18);
}

/* Viewport for scrolling continents/patterns — always 100% of sphere */
.mpsy-globe-map {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 50%;
	z-index: 1;
	pointer-events: none;
}

/* 3 identical tiles → seamless loop; JS keeps offset in [0, 33.333%) */
.mpsy-globe-map-track {
	display: flex;
	flex-direction: row;
	height: 100%;
	width: 300%;
	transform: translate3d(0, 0, 0);
	will-change: transform;
	backface-visibility: hidden;
}

.mpsy-globe-map-strip {
	position: relative;
	flex: 0 0 33.333333%;
	width: 33.333333%;
	height: 100%;
	overflow: hidden;
	background: transparent;
}

/* Continents layer — rotates with track */
.mpsy-globe-map-strip::before {
	content: none;
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: url("../img/world-map-white.svg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
	opacity: 0.92;
}

.mpsy-globe--continents .mpsy-globe-map-strip::before {
	content: "";
}

/*
 * Seamless pattern field — covers the whole sphere and scrolls via --pat-x.
 * Never blanks out (unlike patterns painted on the finite map strips).
 */
.mpsy-globe-patternfield {
	display: none;
	position: absolute;
	inset: 0;
	border-radius: 50%;
	overflow: hidden;
	z-index: 2;
	pointer-events: none;
	opacity: var(--globe-pattern-opacity, 0.9);
}

.mpsy-globe--pat-stars .mpsy-globe-patternfield,
.mpsy-globe--pat-diagonal .mpsy-globe-patternfield,
.mpsy-globe--pat-grid .mpsy-globe-patternfield,
.mpsy-globe--pat-dots .mpsy-globe-patternfield,
.mpsy-globe--pat-hex .mpsy-globe-patternfield,
.mpsy-globe--pat-mixed .mpsy-globe-patternfield {
	display: block;
}

.mpsy-globe-patternfield-layer {
	position: absolute;
	inset: 0;
	background-repeat: repeat;
	background-position: var(--pat-x, 0px) 0;
	will-change: background-position, opacity;
}

.mpsy-globe-patternfield-b {
	display: none;
}

/* —— Dots (dense, bright, infinite) —— */
.mpsy-globe--pat-dots .mpsy-globe-patternfield-a {
	background-image: radial-gradient(
		circle closest-side,
		var(--globe-pattern-color) 55%,
		transparent 56%
	);
	background-size: 11px 11px;
	filter: drop-shadow(0 0 1px color-mix(in srgb, var(--globe-pattern-color) 80%, transparent));
}

.mpsy-globe--pat-dots .mpsy-globe-patternfield-b {
	display: block;
	background-image: radial-gradient(
		circle closest-side,
		var(--globe-pattern-color) 45%,
		transparent 46%
	);
	background-size: 17px 17px;
	background-position: calc(var(--pat-x, 0px) + 6px) 5px;
	opacity: 0.55;
	animation: mpsy-star-twinkle-b 3.2s ease-in-out infinite;
}

/* —— Stars (pure CSS — no SVG dependency; varied sizes + twinkle) —— */
.mpsy-globe--pat-stars .mpsy-globe-patternfield-a {
	background-color: transparent;
	background-image:
		radial-gradient(1.2px 1.2px at 8px 14px, var(--globe-pattern-color), transparent),
		radial-gradient(2.1px 2.1px at 28px 40px, var(--globe-pattern-color), transparent),
		radial-gradient(0.8px 0.8px at 48px 10px, var(--globe-pattern-color), transparent),
		radial-gradient(1.7px 1.7px at 68px 52px, var(--globe-pattern-color), transparent),
		radial-gradient(1px 1px at 88px 22px, var(--globe-pattern-color), transparent),
		radial-gradient(2.4px 2.4px at 18px 68px, var(--globe-pattern-color), transparent),
		radial-gradient(0.7px 0.7px at 42px 78px, var(--globe-pattern-color), transparent),
		radial-gradient(1.5px 1.5px at 62px 30px, var(--globe-pattern-color), transparent),
		radial-gradient(1.9px 1.9px at 82px 72px, var(--globe-pattern-color), transparent),
		radial-gradient(1.1px 1.1px at 12px 48px, var(--globe-pattern-color), transparent),
		radial-gradient(0.9px 0.9px at 52px 58px, var(--globe-pattern-color), transparent),
		radial-gradient(2px 2px at 74px 8px, var(--globe-pattern-color), transparent),
		radial-gradient(1.3px 1.3px at 94px 44px, var(--globe-pattern-color), transparent),
		radial-gradient(0.6px 0.6px at 34px 24px, var(--globe-pattern-color), transparent),
		radial-gradient(1.6px 1.6px at 6px 86px, var(--globe-pattern-color), transparent);
	background-size: 100px 96px;
	background-repeat: repeat;
	filter: drop-shadow(0 0 1.5px color-mix(in srgb, var(--globe-pattern-color) 75%, transparent));
	animation: mpsy-star-twinkle-a 2.6s ease-in-out infinite;
}

.mpsy-globe--pat-stars .mpsy-globe-patternfield-b {
	display: block;
	background-image:
		radial-gradient(1.8px 1.8px at 16px 20px, var(--globe-pattern-color), transparent),
		radial-gradient(0.9px 0.9px at 36px 56px, var(--globe-pattern-color), transparent),
		radial-gradient(2.3px 2.3px at 58px 12px, var(--globe-pattern-color), transparent),
		radial-gradient(1.1px 1.1px at 78px 48px, var(--globe-pattern-color), transparent),
		radial-gradient(1.4px 1.4px at 22px 76px, var(--globe-pattern-color), transparent),
		radial-gradient(0.7px 0.7px at 46px 34px, var(--globe-pattern-color), transparent),
		radial-gradient(2px 2px at 70px 80px, var(--globe-pattern-color), transparent),
		radial-gradient(1.2px 1.2px at 90px 28px, var(--globe-pattern-color), transparent),
		radial-gradient(0.85px 0.85px at 10px 60px, var(--globe-pattern-color), transparent),
		radial-gradient(1.6px 1.6px at 50px 70px, var(--globe-pattern-color), transparent);
	background-size: 112px 100px;
	background-repeat: repeat;
	mix-blend-mode: screen;
	animation: mpsy-star-twinkle-b 3.4s ease-in-out infinite;
}

@keyframes mpsy-star-twinkle-a {
	0%, 100% { opacity: 0.55; }
	25% { opacity: 1; }
	50% { opacity: 0.7; }
	75% { opacity: 0.95; }
}

@keyframes mpsy-star-twinkle-b {
	0%, 100% { opacity: 0.9; }
	30% { opacity: 0.4; }
	55% { opacity: 1; }
	80% { opacity: 0.55; }
}

/* —— Diagonal —— */
.mpsy-globe--pat-diagonal .mpsy-globe-patternfield-a {
	background-image: repeating-linear-gradient(
		-38deg,
		transparent 0,
		transparent 8px,
		color-mix(in srgb, var(--globe-pattern-color) 55%, transparent) 8px,
		color-mix(in srgb, var(--globe-pattern-color) 55%, transparent) 9.5px
	);
}

/* —— Grid —— */
.mpsy-globe--pat-grid .mpsy-globe-patternfield-a {
	background-image:
		repeating-linear-gradient(
			90deg,
			transparent 0,
			transparent 14px,
			color-mix(in srgb, var(--globe-pattern-color) 50%, transparent) 14px,
			color-mix(in srgb, var(--globe-pattern-color) 50%, transparent) 15px
		),
		repeating-linear-gradient(
			0deg,
			transparent 0,
			transparent 16px,
			color-mix(in srgb, var(--globe-pattern-color) 42%, transparent) 16px,
			color-mix(in srgb, var(--globe-pattern-color) 42%, transparent) 17px
		);
}

/* —— Hex —— */
.mpsy-globe--pat-hex .mpsy-globe-patternfield-a {
	background-image:
		repeating-linear-gradient(
			0deg,
			transparent 0,
			transparent 10px,
			color-mix(in srgb, var(--globe-pattern-color) 35%, transparent) 10px,
			color-mix(in srgb, var(--globe-pattern-color) 35%, transparent) 11px
		),
		repeating-linear-gradient(
			60deg,
			transparent 0,
			transparent 10px,
			color-mix(in srgb, var(--globe-pattern-color) 35%, transparent) 10px,
			color-mix(in srgb, var(--globe-pattern-color) 35%, transparent) 11px
		),
		repeating-linear-gradient(
			-60deg,
			transparent 0,
			transparent 10px,
			color-mix(in srgb, var(--globe-pattern-color) 35%, transparent) 10px,
			color-mix(in srgb, var(--globe-pattern-color) 35%, transparent) 11px
		);
}

/* —— Mixed: diagonal + grid + CSS stars —— */
.mpsy-globe--pat-mixed .mpsy-globe-patternfield-a {
	background-image:
		radial-gradient(1.4px 1.4px at 12px 18px, var(--globe-pattern-color), transparent),
		radial-gradient(2px 2px at 44px 52px, var(--globe-pattern-color), transparent),
		radial-gradient(0.9px 0.9px at 72px 14px, var(--globe-pattern-color), transparent),
		radial-gradient(1.6px 1.6px at 88px 68px, var(--globe-pattern-color), transparent),
		repeating-linear-gradient(
			-38deg,
			transparent 0,
			transparent 14px,
			color-mix(in srgb, var(--globe-pattern-color) 28%, transparent) 14px,
			color-mix(in srgb, var(--globe-pattern-color) 28%, transparent) 15px
		),
		repeating-linear-gradient(
			90deg,
			transparent 0,
			transparent 18px,
			color-mix(in srgb, var(--globe-pattern-color) 22%, transparent) 18px,
			color-mix(in srgb, var(--globe-pattern-color) 22%, transparent) 19px
		);
	background-size: 100px 90px, 100px 90px, 100px 90px, 100px 90px, auto, auto;
	animation: mpsy-star-twinkle-a 2.8s ease-in-out infinite;
}

.mpsy-globe--pat-mixed .mpsy-globe-patternfield-b {
	display: block;
	background-image:
		radial-gradient(1.8px 1.8px at 20px 24px, var(--globe-pattern-color), transparent),
		radial-gradient(1px 1px at 56px 60px, var(--globe-pattern-color), transparent),
		radial-gradient(2.2px 2.2px at 80px 16px, var(--globe-pattern-color), transparent);
	background-size: 110px 98px;
	mix-blend-mode: screen;
	animation: mpsy-star-twinkle-b 3.4s ease-in-out infinite;
}

/*
 * Spherical lighting (full-disk gradients — not a detached oval highlight).
 * Layers: soft key light → night side → limb darkening → rim.
 */
.mpsy-globe-shade {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	z-index: 3;
	pointer-events: none;
	background:
		/* Soft key light across the lit hemisphere */
		radial-gradient(
			circle at 32% 28%,
			rgba(255, 255, 255, 0.28) 0%,
			rgba(255, 255, 255, 0.1) 28%,
			transparent 58%
		),
		/* Cool fill on mid tones */
		radial-gradient(
			circle at 40% 40%,
			color-mix(in srgb, var(--globe-color-light) 35%, transparent) 0%,
			transparent 52%
		),
		/* Night / shadowed hemisphere */
		radial-gradient(
			circle at 78% 72%,
			transparent 18%,
			rgba(0, 8, 22, 0.28) 48%,
			rgba(0, 4, 14, 0.72) 78%,
			rgba(0, 2, 10, 0.88) 100%
		),
		/* Limb darkening — follows the circle edge for roundness */
		radial-gradient(
			circle at 50% 50%,
			transparent 42%,
			rgba(0, 6, 18, 0.18) 68%,
			rgba(0, 4, 14, 0.55) 86%,
			rgba(0, 2, 10, 0.78) 100%
		);
	box-shadow:
		inset -28px -18px 42px rgba(0, 6, 18, 0.45),
		inset 16px 12px 28px rgba(255, 255, 255, 0.08),
		inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.mpsy-globe-atmosphere {
	position: absolute;
	inset: -5%;
	border-radius: 50%;
	z-index: 5;
	pointer-events: none;
	background: radial-gradient(
		circle at 50% 50%,
		transparent 58%,
		color-mix(in srgb, var(--globe-color-light) 28%, transparent) 76%,
		color-mix(in srgb, var(--globe-color) 45%, transparent) 90%,
		transparent 100%
	);
	box-shadow:
		0 0 30px color-mix(in srgb, var(--globe-color-light) 35%, transparent),
		inset 0 0 20px color-mix(in srgb, var(--globe-color-light) 18%, transparent);
}

.mpsy-globe-ring {
	position: absolute;
	width: var(--globe-ring);
	height: var(--globe-ring);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 1.75px dashed color-mix(in srgb, var(--globe-blue) 55%, #9ab8d4);
	box-sizing: border-box;
	pointer-events: none;
	z-index: 2;
}

.mpsy-globe-shadow {
	position: absolute;
	left: 10%;
	right: 10%;
	bottom: -16%;
	height: 20%;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(8, 24, 48, 0.42), transparent 72%);
	filter: blur(3px);
	pointer-events: none;
	transform: translateZ(-20px) scale(1.02);
}

/* مدار دکمه‌های رادیو = همان حلقه نقطه‌چین */
.mpsy-globe-orbit {
	position: absolute;
	width: var(--globe-ring);
	height: var(--globe-ring);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 4;
	pointer-events: none;
}

.mpsy-globe-marker {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	outline: none !important;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	color: inherit;
	cursor: pointer;
	pointer-events: auto;
	/* نقطه روی حلقه نقطه‌چین */
	transform:
		rotate(var(--marker-angle))
		translateY(calc(var(--globe-ring) / -2));
	transform-origin: center center;
	font-family: inherit;
	text-align: center;
}

.mpsy-globe-marker:hover,
.mpsy-globe-marker:focus,
.mpsy-globe-marker:focus-visible,
.mpsy-globe-marker:active,
.mpsy-globe-marker.is-active,
.mpsy-globe-marker[aria-pressed="true"] {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	outline: none !important;
	border-color: transparent !important;
	color: inherit !important;
}

/* دکمه رادیو — دقیقاً روی حلقه نقطه‌چین (نه روی سطح کره) */
.mpsy-globe-marker-dot {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 14px;
	height: 14px;
	margin: 0;
	border-radius: 50%;
	box-sizing: border-box;
	background: #fff;
	border: 2.5px solid var(--globe-teal);
	box-shadow: 0 1px 5px rgba(26, 75, 132, 0.28);
	transform: translate(-50%, -50%);
	transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
	z-index: 2;
}

/* عنوان — بیرون از حلقه */
.mpsy-globe-marker-label {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	width: max-content;
	max-width: 9.5rem;
	padding: 0.35rem 0.55rem;
	border-radius: 10px;
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--globe-blue) 14%, var(--globe-line));
	box-shadow: 0 6px 16px rgba(26, 75, 132, 0.1);
	backdrop-filter: blur(6px);
	transform:
		translate(-50%, -50%)
		translateY(calc(-1 * var(--globe-label-out)))
		rotate(calc(var(--marker-angle) * -1));
	transform-origin: center center;
	transition:
		border-color 0.3s ease,
		box-shadow 0.3s ease,
		transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 1;
	pointer-events: auto;
}

.mpsy-globe-marker-label small {
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: var(--globe-muted);
	background: transparent !important;
	padding: 0;
	border: 0;
	border-radius: 0;
	direction: ltr;
}

.mpsy-globe-marker-label strong {
	font-size: 0.78rem;
	font-weight: 800;
	color: var(--globe-ink);
	line-height: 1.35;
	background: transparent !important;
}

.mpsy-globe-marker.is-active .mpsy-globe-marker-label {
	background: #fff !important;
	border-color: color-mix(in srgb, var(--globe-blue) 28%, var(--globe-line));
	box-shadow: 0 8px 18px rgba(26, 75, 132, 0.14);
	transform:
		translate(-50%, -50%)
		translateY(calc(-1 * var(--globe-label-out)))
		rotate(calc(var(--marker-angle) * -1));
}

/* هاور بعد از is-active تا آیتم انتخاب‌شده هم انیمیشن داشته باشد */
.mpsy-globe-marker:hover .mpsy-globe-marker-label,
.mpsy-globe-marker.is-active:hover .mpsy-globe-marker-label {
	background: #fff !important;
	border-color: color-mix(in srgb, var(--globe-blue) 28%, var(--globe-line));
	box-shadow: 0 8px 18px rgba(26, 75, 132, 0.14);
	transform:
		translate(-50%, -50%)
		translateY(calc(-1 * var(--globe-label-out) - 8px))
		rotate(calc(var(--marker-angle) * -1));
}

.mpsy-globe-marker:hover .mpsy-globe-marker-label small,
.mpsy-globe-marker.is-active .mpsy-globe-marker-label small {
	background: transparent !important;
	color: var(--globe-muted);
}

.mpsy-globe-marker:hover .mpsy-globe-marker-label strong,
.mpsy-globe-marker.is-active .mpsy-globe-marker-label strong {
	background: transparent !important;
	color: var(--globe-ink);
}

.mpsy-globe-marker:hover .mpsy-globe-marker-dot {
	transform: translate(-50%, -50%) scale(1.12);
	border-color: var(--globe-blue);
	box-shadow: 0 2px 8px rgba(26, 75, 132, 0.35);
}

.mpsy-globe-marker.is-active .mpsy-globe-marker-dot {
	transform: translate(-50%, -50%) scale(1.2);
	background: var(--globe-teal);
	border-color: var(--globe-blue);
	box-shadow:
		0 0 0 3px #fff,
		0 2px 10px color-mix(in srgb, var(--globe-teal) 45%, transparent);
}

.mpsy-globe-marker:focus-visible .mpsy-globe-marker-label {
	outline: 2px solid var(--globe-teal);
	outline-offset: 2px;
	pointer-events: auto;
}

.mpsy-globe-panel {
	min-height: 220px;
}

.mpsy-globe-panel-inner {
	height: 100%;
	padding: 1.15rem 1.1rem 1.2rem;
	border-radius: 16px;
	border: 1px solid color-mix(in srgb, var(--globe-blue) 16%, var(--globe-line));
	background:
		linear-gradient(160deg, color-mix(in srgb, var(--globe-teal) 8%, #fff) 0%, #fff 55%);
	box-shadow: 0 10px 28px rgba(26, 75, 132, 0.08);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.mpsy-globe.is-ready .mpsy-globe-panel-inner,
.mpsy-globe-panel-inner.is-in {
	opacity: 1;
	transform: none;
}

.mpsy-globe-panel-inner.is-swap {
	opacity: 0;
	transform: translateY(8px);
}

.mpsy-globe-panel-kicker {
	display: inline-block;
	margin-bottom: 0.45rem;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--globe-teal) 14%, #fff);
	color: var(--globe-teal);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.03em;
}

.mpsy-globe-panel-title {
	margin: 0 0 0.55rem;
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--globe-blue);
	line-height: 1.4;
}

.mpsy-globe-panel-desc {
	margin: 0 0 1rem;
	font-size: 0.9rem;
	line-height: 1.75;
	color: var(--globe-muted);
	min-height: 4.5em;
}

.mpsy-globe-panel-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.7rem 1.05rem;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--globe-blue) 0%, var(--globe-teal) 100%);
	color: #fff !important;
	text-decoration: none !important;
	font-size: 0.88rem;
	font-weight: 800;
	box-shadow: 0 8px 18px color-mix(in srgb, var(--globe-teal) 28%, transparent);
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.mpsy-globe-panel-btn svg {
	transform: scaleX(-1);
	transition: transform 0.2s ease;
}

.mpsy-globe-panel-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 24px color-mix(in srgb, var(--globe-teal) 36%, transparent);
	filter: brightness(1.03);
}

.mpsy-globe-panel-btn:hover svg {
	transform: scaleX(-1) translateX(-3px);
}

.mpsy-globe-panel-btn.is-disabled {
	opacity: 0.45;
	pointer-events: none;
	box-shadow: none;
}

@media (max-width: 560px) {
	.elementor-widget-mpsy_globe .mpsy-globe,
	.mpsy-globe {
		width: 100%;
		max-width: 100%;
		margin-inline: 0;
		padding: 1rem 0.3rem 1.15rem;
		--globe-label-max: 4.5rem;
		/* فاصله مرکز عنوان تا دکمه: نصف عرض عنوان + فاصله امن تا روی دکمه نیفتد */
		--globe-label-out: calc((var(--globe-label-max) * 0.5) + 0.7rem);
		/* حلقه = عرض صفحه منهای دو عنوان و فاصله‌شان تا دکمه */
		--globe-ring: min(290px, calc(100vw - (2 * var(--globe-label-max)) - 1.6rem));
		--globe-size: calc(var(--globe-ring) / 1.14) !important;
		--globe-orbit: calc(var(--globe-ring) + (2 * var(--globe-label-out)) + 0.5rem);
		overflow: visible;
	}

	.mpsy-globe-stage {
		min-height: calc(var(--globe-orbit) + 0.5rem);
		width: 100%;
		max-width: 100%;
		padding: 0.35rem 0;
		overflow: visible;
	}

	.mpsy-globe-orbit,
	.mpsy-globe-ring {
		overflow: visible;
	}

	.mpsy-globe-marker-dot {
		width: 12px;
		height: 12px;
		border-width: 2px;
		z-index: 3;
	}

	.mpsy-globe-marker-label {
		max-width: var(--globe-label-max);
		padding: 0.28rem 0.4rem;
		border-radius: 8px;
		box-shadow: 0 4px 12px rgba(26, 75, 132, 0.14);
		background: rgba(255, 255, 255, 0.97);
		z-index: 1;
		pointer-events: auto;
	}

	.mpsy-globe-marker-label small {
		font-size: 0.56rem;
		letter-spacing: 0.02em;
	}

	.mpsy-globe-marker-label strong {
		font-size: 0.66rem;
		line-height: 1.35;
	}

	.mpsy-globe-marker:hover .mpsy-globe-marker-label,
	.mpsy-globe-marker.is-active:hover .mpsy-globe-marker-label {
		transform:
			translate(-50%, -50%)
			translateY(calc(-1 * var(--globe-label-out) - 4px))
			rotate(calc(var(--marker-angle) * -1));
	}
}

@media (max-width: 380px) {
	.elementor-widget-mpsy_globe .mpsy-globe,
	.mpsy-globe {
		--globe-label-max: 4.1rem;
		--globe-label-out: calc((var(--globe-label-max) * 0.5) + 0.6rem);
		padding-left: 0.2rem;
		padding-right: 0.2rem;
	}

	.mpsy-globe-marker-label strong {
		font-size: 0.62rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mpsy-globe-sphere,
	.mpsy-globe-patternfield-layer {
		animation: none !important;
		transition: none !important;
	}

	.mpsy-globe--pat-stars .mpsy-globe-patternfield-a,
	.mpsy-globe--pat-stars .mpsy-globe-patternfield-b,
	.mpsy-globe--pat-dots .mpsy-globe-patternfield-b,
	.mpsy-globe--pat-mixed .mpsy-globe-patternfield-a,
	.mpsy-globe--pat-mixed .mpsy-globe-patternfield-b {
		opacity: 0.85;
	}
}