﻿.globe-section {
			position: relative;
			width: 100%;
			height: 612px;
			overflow: hidden;
			
		}

		#globeCanvas {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			display: block;
			z-index: 1;
		}

		.marker-label {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 9;
			transform: translate(-50%, -120%);
			padding: 6px 12px;
			border-radius: 999px;
			background: rgba(6, 28, 58, .78);
			backdrop-filter: blur(8px);
			color: #fff;
			font-size: 13px;
			line-height: 1.2;
			white-space: nowrap;
			box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
			pointer-events: none;
			opacity: 0;
			visibility: hidden;
			transition: opacity .22s ease, visibility .22s ease;
			display: none;
		}

			.marker-label.show {
				opacity: 1;
				visibility: visible;
			}

		.globe-popup {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	width: 260px;
	max-width: calc(100vw - 32px);
	transform: translate(-50%, calc(-100% - 28px));
	padding: 18px 18px 16px;
	border-radius: 18px;
	background: linear-gradient(135deg, rgba(0,104,191,.96), rgba(0,134,224,.72) 55%, rgba(120,200,255,.35));
	box-shadow: 0 20px 50px rgba(0, 62, 128, .30);
	backdrop-filter: blur(12px);
	color: #fff;
	opacity: 0;
	visibility: hidden;
	transition: opacity .28s ease, visibility .28s ease, transform .28s ease;
	display: none;
}


			.globe-popup.show {
				opacity: 1;
				visibility: visible;
			}

			.globe-popup::after {
				content: "";
				position: absolute;
				left: 50%;
				bottom: -36px;
				width: 2px;
				height: 30px;
				transform: translateX(-50%);
				background: linear-gradient(to bottom, rgba(255,255,255,.75), rgba(255,255,255,0));
			}

		.popup-close {
			position: absolute;
			right: 12px;
			top: 10px;
			width: 28px;
			height: 28px;
			border: 0;
			border-radius: 50%;
			background: rgba(255,255,255,.16);
			color: #fff;
			font-size: 20px;
			line-height: 28px;
			cursor: pointer;
		}

			.popup-close:hover {
				background: rgba(255,255,255,.24);
			}

		#popupTitle {
			margin: 0 34px 6px 0;
			font-size: 16px;
			line-height: 1.3;
			font-weight: 700; color:#ffffff;
		}

		.popup-location,
		#popupLocation {
			margin-bottom: 10px;
			font-size: 13px;
			line-height: 1.2;
			opacity: .92;
		}

		#popupContent {
			margin: 0 0 14px;
			font-size: 12px;
			line-height: 1.2;
			opacity: .98;
		}

		#popupLink {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-width: 98px;
			height: 38px;
			padding: 0 16px;
			border-radius: 999px;
			background: rgba(255,255,255,.18);
			color: #fff;
			text-decoration: none;
			font-size: 14px;
			transition: background .2s ease, transform .2s ease;
		}

			#popupLink:hover {
				background: rgba(255,255,255,.26);
				transform: translateY(-1px);
			}

		.loading-tip {
			position: absolute;
			left: 20px;
			bottom: 20px;
			z-index: 8;
			padding: 8px 12px;
			border-radius: 999px;
			background: rgba(5, 20, 42, .56);
			color: #fff;
			font-size: 12px;
			line-height: 1.2;
			backdrop-filter: blur(6px);
			box-shadow: 0 8px 24px rgba(0,0,0,.16);
		}

		@media (max-width: 1024px) {
			.globe-section {
				height: 560px;
			}
		}

		@media (max-width: 767px) {
			.globe-section {
				height: 520px;
			}

			.globe-popup {
				width: min(320px, calc(100vw - 24px));
				padding: 16px 16px 14px;
				border-radius: 16px;
			}

			#popupTitle {
				font-size: 18px;
			}

			#popupContent {
				font-size: 13px;
				line-height: 1.65;
			}

			.loading-tip {
				left: 12px;
				bottom: 12px;
				font-size: 11px;
			}
		}
