/* ============================================
   CSS VARIABLES - Modern Design System
   ============================================ */
:root {
	/* Gradient Palettes */
	--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	--secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
	--accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
	--success-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);

	/* Glassmorphism */
	--glass-bg: rgba(255, 255, 255, 0.1);
	--glass-bg-dark: rgba(0, 0, 0, 0.3);
	--glass-border: rgba(255, 255, 255, 0.2);
	--glass-blur: 10px;

	/* Shadows */
	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
	--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
	--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
	--shadow-glow-primary: 0 0 20px rgba(102, 126, 234, 0.6);
	--shadow-glow-secondary: 0 0 20px rgba(245, 87, 108, 0.6);
	--shadow-glow-accent: 0 0 20px rgba(79, 172, 254, 0.6);

	/* Transitions */
	--transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

	/* Border Radius */
	--border-radius-sm: 10px;
	--border-radius-md: 15px;
	--border-radius-lg: 20px;
	--border-radius-xl: 25px;

	/* Fallback Colors (for older browsers) */
	--fallback-primary: #667eea;
	--fallback-secondary: #f5576c;
	--fallback-accent: #4facfe;
	--fallback-dark: rgba(0, 0, 0, 0.85);
}

/* ============================================
   BASE STYLES
   ============================================ */
html,
body,
#map {
	width: 100%;
	height: 100%;
}

body {
	margin: 0;
	position: absolute;
	color: #333;
	font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ============================================
   CONTROL BUTTONS - Map Controls
   ============================================ */
.mapboxgl-ctrl-group {
	border-radius: var(--border-radius-md);
	background: var(--glass-bg-dark);
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	border: 1px solid var(--glass-border);
	box-shadow: var(--shadow-md);
	overflow: hidden;
}

/* Fallback for browsers without backdrop-filter */
@supports not (backdrop-filter: blur(10px)) {
	.mapboxgl-ctrl-group {
		background: rgba(0, 0, 0, 0.8);
	}
}

.mapboxgl-ctrl-group button {
	width: 45px;
	height: 45px;
	background-color: transparent;
	transition: all var(--transition-normal);
	position: relative;
	overflow: hidden;
}

.mapboxgl-ctrl-group button::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--primary-gradient);
	opacity: 0;
	transition: opacity var(--transition-normal);
	z-index: 0;
}

.mapboxgl-ctrl-group button:hover::before {
	opacity: 1;
}

.mapboxgl-ctrl-group button:hover {
	transform: scale(1.1);
	box-shadow: var(--shadow-glow-primary);
	z-index: 1;
}

.mapboxgl-ctrl-group button:focus {
	outline: 2px solid rgba(102, 126, 234, 0.8);
	outline-offset: 2px;
}

.mapboxgl-ctrl-group button:focus:first-child,
.mapboxgl-ctrl-group button:hover:first-child {
	border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
}

.mapboxgl-ctrl-group button:focus:last-child,
.mapboxgl-ctrl-group button:hover:last-child {
	border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
}

.mapboxgl-ctrl-group button:focus:only-child,
.mapboxgl-ctrl-group button:hover:only-child {
	border-radius: var(--border-radius-md);
}

.mapboxgl-ctrl-group button .mapboxgl-ctrl-icon {
	position: relative;
	z-index: 1;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
	transition: all var(--transition-fast);
}

.mapboxgl-ctrl-group button:hover .mapboxgl-ctrl-icon {
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)) brightness(1.2);
}

.mapboxgl-ctrl button.mapboxgl-ctrl-recent-list .mapboxgl-ctrl-icon {
	background: no-repeat center/21px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23333'%3E%3Cpath d='M256 512C114.6 512 0 397.4 0 256S114.6 0 256 0S512 114.6 512 256s-114.6 256-256 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z'/%3E%3C/svg%3E");
}

.mapboxgl-ctrl button.mapboxgl-ctrl-twitter .mapboxgl-ctrl-icon {
	background: no-repeat center/21px url("data:image/svg+xml,%3Csvg width='1200pt' height='1200pt' version='1.1' viewBox='0 0 1200 1200' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3ClinearGradient id='linearGradient896' x1='894.9' x2='894.9' y1='1496' y2='833.1' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23530e15' offset='0'/%3E%3Cstop stop-color='%23af184f' offset='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='linearGradient912' x1='953.2' x2='953.2' y1='298.5' y2='738.6' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23ad7e1f' offset='0'/%3E%3Cstop stop-color='%23e8e87d' offset='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='translate(-300,-300)'%3E%3Cpath d='m1419 844.3h-430.7l-84.29 210 94.92 13.59-128.8 268-53.88-1.656 66.98-191.4-107.9-15.48 66.91-283-460.8-4e-3v655.8h1038z' fill='url(%23linearGradient896)' fill-rule='evenodd'/%3E%3Cpath d='m900 300c-167.5 6e-3 -335.1 47.46-481.1 142.3l36.94 56.83c269.3-175 619-175 888.3 0l36.91-56.83c-146-94.91-313.5-142.4-481.1-142.3zm0.0308 160c-126.3 0-252.7 33.19-365.1 99.58l34.49 58.42c203.5-120.1 457.8-120.1 661.2 0l34.51-58.42c-112.4-66.38-238.8-99.58-365.1-99.58zm-8e-3 160.1c-84.64 0-169.3 19.31-246.8 57.92l30.29 60.82c135.9-67.7 297.2-67.68 433.1 0l30.26-60.82c-77.54-38.62-162.2-57.92-246.8-57.92z' fill='url(%23linearGradient912)'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.mapboxgl-ctrl button.mapboxgl-ctrl-info .mapboxgl-ctrl-icon {
	background: no-repeat center/21px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23333'%3E%3Cpath d='M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-144c-17.7 0-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32s-14.3 32-32 32z'%3E%3C/path%3E%3C/svg%3E");
}

.bg {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	;
	display: none;
	z-index: 99;
}

/* ============================================
   MENU - Recent Earthquakes List
   ============================================ */
.menu {
	position: absolute;
	top: 10px;
	right: 60px;
	height: calc(100% - 20px);
	max-width: 450px;
	width: calc(100% - 69px);

	/* Glassmorphism Effect */
	background: var(--glass-bg);
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));

	border: 1px solid var(--glass-border);
	border-radius: var(--border-radius-lg);
	box-shadow: var(--shadow-lg);

	animation: slideInMenu var(--transition-slow) ease-out;
}

/* Fallback for browsers without backdrop-filter */
@supports not (backdrop-filter: blur(10px)) {
	.menu {
		background-color: rgba(255, 255, 255, 0.95);
	}
}

.menu>div {
	font-size: 15px;
	line-height: 50px;
}

.menu>div:first-child {
	height: 50px;
	border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
	background: var(--primary-gradient);
	color: #fff;
	text-align: center;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	pointer-events: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.menu>div:last-child {
	max-height: calc(100% - 50px);
	border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
	overflow-x: hidden;
	overflow-y: auto;
	padding: 5px;
}

/* Custom Scrollbar */
.menu>div:last-child::-webkit-scrollbar {
	width: 8px;
}

.menu>div:last-child::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.1);
	border-radius: 10px;
}

.menu>div:last-child::-webkit-scrollbar-thumb {
	background: var(--primary-gradient);
	border-radius: 10px;
}

.menu>div:last-child::-webkit-scrollbar-thumb:hover {
	background: var(--accent-gradient);
}

@keyframes slideInMenu {
	from {
		opacity: 0;
		transform: translateX(30px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Menu Items */
.menu-item {
	padding: 12px 15px;
	margin: 5px;
	background-color: transparent;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: var(--border-radius-sm);
	white-space: nowrap;
	transition: all var(--transition-normal);
	position: relative;
	overflow: hidden;
}

.menu-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: var(--accent-gradient);
	opacity: 0;
	transition: all var(--transition-normal);
	z-index: -1;
}

.menu-item:hover {
	background-color: rgba(102, 126, 234, 0.1);
	transform: translateX(5px);
	box-shadow: var(--shadow-sm);
	border-color: rgba(102, 126, 234, 0.3);
}

.menu-item:hover::before {
	left: 0;
	opacity: 0.1;
}

.menu-item.active {
	background: var(--accent-gradient);
	color: #fff;
	font-weight: 600;
	box-shadow: 0 4px 16px rgba(79, 172, 254, 0.4);
	transform: translateX(8px);
	border-color: transparent;
}

.menu-item.active .menu-text {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.menu-item>div {
	display: inline-block;
	vertical-align: top;
}

.menu-item .menu-check {
	width: 22px;
	margin-right: 12px;
	transition: all var(--transition-normal);
}

.menu-item.active .menu-check {
	background: no-repeat center/22px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23fff'%3E%3Cpath d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E");
	animation: checkPop 0.3s ease-out;
}

@keyframes checkPop {
	0% {
		transform: scale(0);
	}

	50% {
		transform: scale(1.2);
	}

	100% {
		transform: scale(1);
	}
}

.menu-item .menu-text {
	line-height: 22px;
	font-weight: 500;
}

#recent-list .menu-item>div {
	height: 44px;
}

/* Significance Labels */
.significance-label-0 {
	color: inherit;
}

.significance-label-1 {
	font-weight: 700;
	background: var(--success-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Fallback for browsers without background-clip */
@supports not (background-clip: text) {
	.significance-label-1 {
		color: #43e97b;
	}
}

.significance-label-2 {
	font-weight: 700;
	background: var(--secondary-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: gradientPulse 2s ease-in-out infinite;
	filter: drop-shadow(0 0 8px rgba(245, 87, 108, 0.6));
}

/* Fallback for browsers without background-clip */
@supports not (background-clip: text) {
	.significance-label-2 {
		color: rgb(245, 87, 108);
		text-shadow: 0 0 8px rgba(245, 87, 108, 0.6);
	}
}

@keyframes gradientPulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.8;
	}
}

/* ============================================
   INFO PANEL - About Information
   ============================================ */
.info {
	position: absolute;
	top: 10px;
	right: 60px;
	width: 280px;

	/* Glassmorphism Effect */
	background: var(--glass-bg);
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));

	border: 1px solid var(--glass-border);
	border-radius: var(--border-radius-lg);
	box-shadow: var(--shadow-lg);

	animation: slideInMenu var(--transition-slow) ease-out;
}

/* Fallback for browsers without backdrop-filter */
@supports not (backdrop-filter: blur(10px)) {
	.info {
		background-color: rgba(255, 255, 255, 0.95);
	}
}

.info div:first-child {
	height: 50px;
	border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
	background: var(--primary-gradient);
	color: #fff;
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	line-height: 50px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	pointer-events: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.info div:last-child {
	padding: 20px;
	border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
	font-size: 15px;
	line-height: 1.8;
	color: #333;
	max-height: 500px;
	overflow-y: auto;
}

.info div:last-child p {
	margin: 12px 0;
}

.info div:last-child a {
	color: #667eea;
	text-decoration: none;
	font-weight: 600;
	transition: all var(--transition-fast);
	position: relative;
}

.info div:last-child a::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--accent-gradient);
	transition: width var(--transition-normal);
}

.info div:last-child a:hover {
	background: var(--accent-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.info div:last-child a:hover::after {
	width: 100%;
}

/* Fallback for browsers without background-clip */
@supports not (background-clip: text) {
	.info div:last-child a:hover {
		color: #4facfe;
	}
}

.info div:last-child hr {
	border: none;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.3), transparent);
	margin: 15px 0;
}

.svg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.wave {
	stroke: rgba(255, 255, 255, 0.3);
	fill: rgba(255, 255, 255, 0.15);
}

.wave-bright {
	stroke: rgba(255, 255, 255, 0.4);
	fill: rgba(255, 255, 255, 0.2);
}

.hypocenter {
	stroke: none;
}

.leader {
	stroke: #fff;
}

.epicenter {
	stroke: none;
	fill: #fff;
}

/* ============================================
   TOOLTIP - Hover Information
   ============================================ */
.tooltip {
	color: rgb(255, 255, 255);
	position: absolute;
	padding: 10px 15px;
	pointer-events: none;

	/* Glassmorphism Effect */
	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));

	border: 1px solid var(--glass-border);
	border-radius: 12px;
	box-shadow: var(--shadow-md);

	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.5px;

	/* Animation */
	animation: tooltipFadeIn var(--transition-fast) ease-out;
	transform-origin: bottom center;
}

@keyframes tooltipFadeIn {
	from {
		opacity: 0;
		transform: translateY(5px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.tooltip.hidden {
	display: none;
}

/* ============================================
   LEGEND - Depth Indicator
   ============================================ */
.legend-depth {
	position: absolute;
	right: 15px; /* Moved from left to right */
	bottom: 15px;
	width: 240px;
	height: 60px;
	padding: 15px;

	/* Glassmorphism Effect */
	background: var(--glass-bg-dark);
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));

	border: 2px solid transparent;
	border-radius: var(--border-radius-md);
	box-shadow: var(--shadow-md);

	/* Animated Gradient Border */
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
		var(--accent-gradient);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	background: no-repeat center/200px url("data:image/svg+xml,%3Csvg width='200' height='17' fill-rule='evenodd' version='1.1' viewBox='0 0 200 17' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath id='text-left' d='m5.834 3c-1.238 0-2.205 0.4998-2.898 1.498-0.6239 0.9084-0.9355 2.373-0.9355 4.395 0 1.447 0.1591 2.562 0.4785 3.346 0.3194 0.7836 0.7622 1.368 1.326 1.752 0.564 0.3843 1.259 0.5781 2.088 0.5781 0.8286 0 1.515-0.191 2.059-0.5703 0.5441-0.3843 0.9774-0.9833 1.297-1.797 0.3244-0.8136 0.4863-1.952 0.4863-3.414 0-1.447-0.161-2.574-0.4805-3.383-0.3145-0.8136-0.7637-1.418-1.348-1.812-0.579-0.3943-1.269-0.5918-2.072-0.5918zm5.383 0v11.29h2.043v-3.752l3.459 3.752h2.539l-3.932-4.238 3.504-3.908h-2.561l-3.01 3.361v-6.506h-2.043zm-5.332 1.992c0.5191 0 0.9412 0.2732 1.266 0.8223 0.3294 0.549 0.4941 1.549 0.4941 2.996 0 1.428-0.1825 2.446-0.5469 3.055-0.2995 0.5041-0.7038 0.7559-1.213 0.7559-0.5291 0-0.9605-0.2639-1.295-0.793-0.3294-0.5341-0.4941-1.498-0.4941-2.891 0-1.068 0.07205-1.88 0.2168-2.434 0.1447-0.554 0.3544-0.9434 0.6289-1.168 0.2745-0.2296 0.589-0.3438 0.9434-0.3438zm18.81 0.9434c-0.5041 0-0.9711 0.09353-1.4 0.2832-0.4243 0.1897-0.8108 0.477-1.16 0.8613v-0.9355h-2.053v8.146h2.053v-3.625c1e-6 -0.7836 0.06641-1.356 0.2012-1.721 0.1398-0.3644 0.3466-0.6461 0.6211-0.8457 0.2795-0.2046 0.5903-0.3086 0.9297-0.3086 0.3045 0 0.5627 0.08051 0.7773 0.2402s0.3757 0.4049 0.4805 0.7344c0.1098 0.3244 0.1641 0.8513 0.1641 1.58v3.945h2.059v-3.676c0-0.7786 0.06836-1.344 0.2031-1.693 0.1348-0.3544 0.3388-0.6304 0.6133-0.8301 0.2795-0.1997 0.594-0.3008 0.9434-0.3008 0.4592 0 0.8036 0.1647 1.033 0.4941 0.2296 0.3244 0.3438 0.9497 0.3438 1.873v4.133h2.061v-4.777c0-0.9783-0.09831-1.685-0.293-2.119-0.1897-0.4342-0.5041-0.7852-0.9434-1.055-0.4392-0.2695-0.9484-0.4043-1.527-0.4043-0.559 0-1.075 0.1235-1.549 0.373-0.4692 0.2496-0.867 0.6146-1.191 1.094-0.2496-0.4792-0.579-0.8442-0.9883-1.094-0.4093-0.2496-0.8678-0.373-1.377-0.373z'/%3E%3Cpath id='text-right' d='m162.7 3c-1.238 0-2.203 0.4998-2.896 1.498-0.6239 0.9084-0.9375 2.373-0.9375 4.395 0 1.447 0.161 2.562 0.4805 3.346 0.3194 0.7836 0.7602 1.368 1.324 1.752 0.564 0.3843 1.261 0.5781 2.09 0.5781 0.8286 0 1.515-0.191 2.059-0.5703 0.544-0.3843 0.9755-0.9833 1.295-1.797 0.3244-0.8136 0.4863-1.952 0.4863-3.414 0-1.447-0.1591-2.574-0.4785-3.383-0.3144-0.8136-0.7637-1.418-1.348-1.812-0.579-0.3943-1.271-0.5918-2.074-0.5918zm8.596 0c-1.238 0-2.205 0.4998-2.898 1.498-0.6239 0.9084-0.9356 2.373-0.9356 4.395 0 1.447 0.1591 2.562 0.4785 3.346 0.3194 0.7836 0.7622 1.368 1.326 1.752 0.564 0.3843 1.259 0.5781 2.088 0.5781 0.8286 0 1.516-0.191 2.061-0.5703 0.544-0.3843 0.9755-0.9833 1.295-1.797 0.3244-0.8136 0.4863-1.952 0.4863-3.414 0-1.447-0.1591-2.574-0.4785-3.383-0.3144-0.8136-0.7637-1.418-1.348-1.812-0.579-0.3943-1.271-0.5918-2.074-0.5918zm5.383 0v11.29h2.043v-3.752l3.459 3.752h2.539l-3.932-4.238 3.504-3.908h-2.561l-3.01 3.361v-6.506h-2.043zm-24.27 0.2773-1.332 6.117 1.707 0.3809c0.2146-0.2296 0.4308-0.4008 0.6504-0.5156 0.2246-0.1148 0.452-0.1719 0.6816-0.1719 0.4292 0 0.7943 0.1647 1.094 0.4941 0.3045 0.3244 0.457 0.7409 0.457 1.25 1e-5 0.5241-0.1619 0.9527-0.4863 1.287s-0.7194 0.502-1.184 0.502c-0.3344 0-0.6424-0.08702-0.9219-0.2617-0.2745-0.1797-0.4963-0.4427-0.666-0.7871h-2.201c0.2096 0.9284 0.6524 1.659 1.326 2.193 0.6738 0.5341 1.48 0.8027 2.418 0.8027 1.048 0 1.937-0.3678 2.666-1.102 0.7337-0.7387 1.1-1.644 1.1-2.717 0-1.063-0.3322-1.934-0.9961-2.613-0.6588-0.6838-1.486-1.025-2.484-1.025-0.1098 0-0.2259 0.009332-0.3457 0.0293-0.1198 0.01497-0.2424 0.03928-0.3672 0.07422l0.4492-2.006h3.594v-1.932h-5.158zm10.35 1.715c0.5191 0 0.9412 0.2732 1.266 0.8223 0.3294 0.549 0.4941 1.549 0.4941 2.996 0 1.428-0.1825 2.446-0.5469 3.055-0.2995 0.5041-0.7038 0.7559-1.213 0.7559-0.5291 0-0.9605-0.2639-1.295-0.793-0.3294-0.5341-0.4941-1.498-0.4941-2.891 0-1.068 0.07205-1.88 0.2168-2.434 0.1448-0.554 0.3544-0.9434 0.6289-1.168 0.2745-0.2296 0.589-0.3438 0.9434-0.3438zm8.596 0c0.5191 0 0.9392 0.2732 1.264 0.8223 0.3294 0.549 0.4941 1.549 0.4941 2.996 0 1.428-0.1806 2.446-0.5449 3.055-0.2995 0.5041-0.7038 0.7559-1.213 0.7559-0.5291 0-0.9624-0.2639-1.297-0.793-0.3294-0.5341-0.4941-1.498-0.4941-2.891 0-1.068 0.074-1.88 0.2188-2.434 0.1447-0.554 0.3544-0.9434 0.6289-1.168 0.2745-0.2296 0.589-0.3438 0.9434-0.3438zm18.81 0.9434c-0.5041 0-0.9711 0.09353-1.4 0.2832-0.4243 0.1897-0.8108 0.477-1.16 0.8613v-0.9355h-2.051v8.146h2.051v-3.625c0-0.7836 0.0664-1.356 0.2012-1.721 0.1398-0.3644 0.3485-0.6461 0.623-0.8457 0.2795-0.2046 0.5883-0.3086 0.9277-0.3086 0.3045 0 0.5647 0.08051 0.7793 0.2402 0.2146 0.1597 0.3737 0.4049 0.4785 0.7344 0.1098 0.3244 0.1641 0.8513 0.1641 1.58v3.945h2.059v-3.676c0-0.7786 0.06836-1.344 0.2031-1.693 0.1348-0.3544 0.3388-0.6304 0.6133-0.8301 0.2795-0.1997 0.594-0.3008 0.9434-0.3008 0.4592 0 0.8036 0.1647 1.033 0.4941 0.2296 0.3244 0.3457 0.9497 0.3457 1.873v4.133h2.059v-4.777c0-0.9783-0.09831-1.685-0.293-2.119-0.1897-0.4342-0.5041-0.7852-0.9434-1.055-0.4392-0.2695-0.9484-0.4043-1.527-0.4043-0.559 0-1.075 0.1235-1.549 0.373-0.4692 0.2496-0.867 0.6146-1.191 1.094-0.2496-0.4792-0.579-0.8442-0.9883-1.094-0.4093-0.2496-0.8678-0.373-1.377-0.373z'/%3E%3Cpath id='bar' d='m41 2h100v13h-100z'/%3E%3ClinearGradient id='linearGradient891' x1='41' x2='141' y1='8.5' y2='8.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%239e0142' offset='0'/%3E%3Cstop stop-color='%23d53e4f' offset='.1'/%3E%3Cstop stop-color='%23f46d43' offset='.2'/%3E%3Cstop stop-color='%23fdae61' offset='.3'/%3E%3Cstop stop-color='%23fee08b' offset='.4'/%3E%3Cstop stop-color='%23ffffbf' offset='.5'/%3E%3Cstop stop-color='%23e6f598' offset='.6'/%3E%3Cstop stop-color='%23abdda4' offset='.7'/%3E%3Cstop stop-color='%2366c2a5' offset='.8'/%3E%3Cstop stop-color='%233288bd' offset='.9'/%3E%3Cstop stop-color='%235e4fa2' offset='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cmask id='clip'%3E%3Crect width='100%25' height='100%25' fill='%23fff'/%3E%3Cuse xlink:href='%23text-left'/%3E%3Cuse xlink:href='%23text-right'/%3E%3Cuse xlink:href='%23bar'/%3E%3C/mask%3E%3Cg id='outline' opacity='.3' stroke='%23000' stroke-linejoin='round' stroke-width='3'%3E%3Cuse mask='url(%23clip)' xlink:href='%23text-left'/%3E%3Cuse mask='url(%23clip)' xlink:href='%23text-right'/%3E%3Cuse mask='url(%23clip)' xlink:href='%23bar'/%3E%3C/g%3E%3Cg id='fill' fill='%23fff' opacity='.9'%3E%3Cuse xlink:href='%23text-left'/%3E%3Cuse xlink:href='%23text-right'/%3E%3C/g%3E%3Cuse fill='url(%23linearGradient891)' xlink:href='%23bar'/%3E%3C/svg%3E%0A");
	pointer-events: none;
}

/* ============================================
   PANEL - Earthquake Details (Left Panel)
   ============================================ */
.panel {
	color: rgb(255, 255, 255);
	position: absolute;
	left: 0;
	top: 0;
	width: calc(100% - 59px);
	height: 220px;
	max-height: calc(100% - 47px);
	overflow: hidden;
	transition: all var(--transition-slow);

	/* Glassmorphism Effect */
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));

	border: 1px solid var(--glass-border);
	border-radius: var(--border-radius-lg);
	box-shadow: var(--shadow-lg);

	/* Animation */
	animation: slideInPanel var(--transition-slow) ease-out;
}

/* Fallback for browsers without backdrop-filter */
@supports not (backdrop-filter: blur(10px)) {
	.panel {
		background: rgba(0, 0, 0, 0.85);
	}
}

.panel.hidden {
	height: 0;
	opacity: 0;
	transform: translateY(-20px);
}

.panel.static {
	transition: none;
	animation: none;
}

@keyframes slideInPanel {
	from {
		opacity: 0;
		transform: translateY(-30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.panel-body {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.panel-column {
	width: calc(55% - 20px);
	margin: 15px 0 15px 15px;
}

.panel-column:last-child {
	width: calc(45% - 20px);
	margin: 15px;
}

.panel-section {
	margin-bottom: 15px;
	padding: 10px;
	border-radius: var(--border-radius-sm);
	background: rgba(255, 255, 255, 0.05);
	transition: all var(--transition-normal);
}

.panel-section:hover {
	background: rgba(255, 255, 255, 0.08);
	transform: translateX(3px);
}

.panel-section:last-child {
	margin-bottom: 0;
}

.panel-section-title {
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: 8px;
	font-size: 16px;
	line-height: 20px;
	white-space: nowrap;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.panel-section-body {
	font-size: 32px;
	font-weight: 700;
	line-height: 36px;
	white-space: nowrap;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
	background: var(--accent-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Fallback for browsers without background-clip */
@supports not (background-clip: text) {
	.panel-section-body {
		color: #4facfe;
		text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
	}
}

.panel-date-text {
	font-size: 15px;
	line-height: 20px;
	white-space: nowrap;
	font-weight: 500;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.panel-time-text {
	line-height: 32px;
	font-size: 28px;
	font-weight: 700;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
	white-space: nowrap;
}

.panel-location-text {
	font-size: 19px;
	line-height: 22px;
	white-space: normal;
	font-weight: 600;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* ============================================
   CLOSE BUTTON - Panel Close
   ============================================ */
.close-button {
	position: absolute;
	top: 0;
	right: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	cursor: pointer;
	transition: all var(--transition-normal);

	/* Glassmorphism with Gradient */
	background: linear-gradient(135deg, rgba(245, 87, 108, 0.8) 0%, rgba(240, 147, 251, 0.8) 100%);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);

	border: 2px solid rgba(255, 255, 255, 0.3);
	box-shadow: var(--shadow-md);

	/* Icon */
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23fff'%3E%3Cpath d='M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z' stroke='%23fff' stroke-width='2'%3E%3C/path%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px;
}

.close-button:hover {
	transform: rotate(90deg) scale(1.15);
	box-shadow: var(--shadow-glow-secondary);
	background: var(--secondary-gradient);
}

.close-button:focus {
	outline: 2px solid rgba(245, 87, 108, 0.8);
	outline-offset: 3px;
}

/* ============================================
   LOADER - Loading Animation
   ============================================ */
#loader {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;

	/* Background Overlay */
	padding: 40px;
	border-radius: var(--border-radius-lg);
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: var(--shadow-lg);
}

/* Loader Dots */
#loader>div {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	margin: 0 8px;
	animation: loaderPulse 1.2s infinite ease-in-out;
}

#loader>div:nth-child(1) {
	background: #667eea;
	animation-delay: -0.32s;
}

#loader>div:nth-child(2) {
	background: #764ba2;
	animation-delay: -0.16s;
}

#loader>div:nth-child(3) {
	background: #f5576c;
	animation-delay: 0s;
}

@keyframes loaderPulse {

	0%,
	80%,
	100% {
		transform: scale(0.8);
		opacity: 0.4;
	}

	40% {
		transform: scale(1.2);
		opacity: 1;
	}
}

/* ============================================
   RESPONSIVE - Desktop Layout (≥640px)
   ============================================ */
@media screen and (min-width: 640px) {
	.panel {
		left: 10px;
		top: 10px;
		width: 320px;
		height: calc(100% - 47px);
		border-radius: var(--border-radius-xl);
	}

	.panel-column {
		width: calc(100% - 50px);
		margin: 25px 25px 0 25px;
	}

	.panel-column:last-child {
		margin: 25px;
	}

	.panel-section {
		margin-bottom: 25px;
		padding: 15px;
	}

	.panel-section-title {
		margin-bottom: 12px;
		font-size: 22px;
		line-height: 26px;
	}

	.panel-section-body {
		font-size: 52px;
		line-height: 56px;
	}

	.panel-date-text {
		font-size: 22px;
		line-height: 26px;
	}

	.panel-time-text {
		line-height: 52px;
		font-size: 48px;
	}

	.panel-location-text {
		font-size: 26px;
		line-height: 30px;
	}

	.close-button {
		top: 15px;
		right: 15px;
	}
}


/* ============================================
   ACCESSIBILITY - Reduced Motion Support
   ============================================ */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.panel,
	.menu,
	.info,
	.tooltip {
		animation: none !important;
	}
}

/* ============================================
   BACKGROUND OVERLAY - For Menus
   ============================================ */
.bg {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 100%);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	display: none;
	z-index: 99;
	animation: fadeIn var(--transition-fast) ease-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* ============================================
   SVG ELEMENTS - Earthquake Markers
   ============================================ */
.svg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.wave {
	stroke: rgba(255, 255, 255, 0.4);
	fill: rgba(79, 172, 254, 0.2);
	filter: drop-shadow(0 0 10px rgba(79, 172, 254, 0.4));
}

.wave-bright {
	stroke: rgba(255, 255, 255, 0.5);
	fill: rgba(79, 172, 254, 0.3);
	filter: drop-shadow(0 0 15px rgba(79, 172, 254, 0.6));
}

.hypocenter {
	stroke: none;
	filter: drop-shadow(0 0 8px currentColor);
}

.leader {
	stroke: rgba(255, 255, 255, 0.8);
	stroke-width: 2px;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.epicenter {
	stroke: none;
	fill: rgba(255, 255, 255, 0.9);
	filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.6));
}

/* ============================================
   PANEL BODY - Layout
   ============================================ */
.panel-body {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {

	.mapboxgl-ctrl-group,
	.close-button,
	.bg,
	#loader {
		display: none !important;
	}

	.panel,
	.menu,
	.info {
		background: white !important;
		color: black !important;
		box-shadow: none !important;
		border: 1px solid #ccc !important;
	}
}

/* ============================================
   HIGH CONTRAST MODE
   ============================================ */
@media (prefers-contrast: high) {

	.panel,
	.menu,
	.info {
		border: 2px solid white;
		background: rgba(0, 0, 0, 0.95) !important;
	}

	.menu-item:hover,
	.menu-item.active {
		border: 2px solid white;
	}

	.close-button {
		border: 3px solid white;
	}
}


/* ============================================
   COUNTRY FLAGS & SOURCE BADGES
   ============================================ */
.country-flag {
	width: 24px;
	height: 16px;
	border-radius: 3px;
	margin-right: 8px;
	vertical-align: middle;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	display: inline-block;
	object-fit: cover;
}

.source-badge {
	display: inline-block;
	padding: 3px 7px;
	border-radius: 5px;
	font-size: 11px;
	font-weight: 700;
	margin-left: 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	transition: all var(--transition-fast);
}

.source-badge:hover {
	transform: scale(1.1);
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.source-kandilli {
	background: #4facfe;
	color: #fff;
}

.source-afad {
	background: #f5576c;
	color: #fff;
}

.source-usgs {
	background: #43e97b;
	color: #fff;
}

.earthquake-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 6px;
	gap: 4px;
}

.earthquake-time {
	font-size: 13px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.9);
	flex: 1;
}

.earthquake-info {
	margin: 4px 0;
}

.earthquake-meta {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.7);
	margin-top: 6px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.depth-info {
	font-weight: 500;
}

.timezone-label {
	font-style: italic;
	font-size: 11px;
	opacity: 0.8;
}

/* Turkish earthquake highlight */
.menu-item.turkish-earthquake {
	border-left: 3px solid #f5576c;
	background: linear-gradient(90deg, rgba(245, 87, 108, 0.1) 0%, transparent 100%);
}

.menu-item.turkish-earthquake:hover {
	border-left-color: #f5576c;
	background: linear-gradient(90deg, rgba(245, 87, 108, 0.15) 0%, rgba(102, 126, 234, 0.1) 100%);
}

/* Source status indicators */
.source-status-container {
	position: absolute;
	bottom: 80px;
	left: 110px;
	background: var(--glass-bg-dark);
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	border: 1px solid var(--glass-border);
	border-radius: var(--border-radius-md);
	padding: 10px 15px;
	box-shadow: var(--shadow-md);
	display: none;
}

.source-status-container.visible {
	display: block;
}

.source-status-item {
	display: flex;
	align-items: center;
	margin: 5px 0;
	font-size: 12px;
	color: #fff;
}

.source-status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 8px;
	display: inline-block;
}

.source-status-dot.active {
	background: #43e97b;
	box-shadow: 0 0 8px rgba(67, 233, 123, 0.6);
}

.source-status-dot.delayed {
	background: #fdae61;
	box-shadow: 0 0 8px rgba(253, 174, 97, 0.6);
}

.source-status-dot.offline {
	background: #f5576c;
	box-shadow: 0 0 8px rgba(245, 87, 108, 0.6);
}

.source-status-name {
	font-weight: 600;
	margin-right: 8px;
}

.source-status-time {
	font-size: 10px;
	opacity: 0.7;
}

/* Loading indicator */
.loading-indicator {
	position: fixed;
	top: 20px;
	right: 20px;
	background: var(--glass-bg-dark);
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	border: 1px solid var(--glass-border);
	border-radius: var(--border-radius-md);
	padding: 10px 20px;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	box-shadow: var(--shadow-md);
	display: none;
	align-items: center;
	gap: 10px;
	z-index: 1000;
	animation: slideInFromTop 0.3s ease-out;
}

.loading-indicator.visible {
	display: flex;
}

.loading-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes slideInFromTop {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Mobile optimizations */
@media screen and (max-width: 640px) {
	.country-flag {
		width: 20px;
		height: 13px;
		margin-right: 6px;
	}

	.source-badge {
		padding: 2px 5px;
		font-size: 10px;
		margin-left: 6px;
	}

	.earthquake-time {
		font-size: 12px;
	}

	.earthquake-meta {
		font-size: 11px;
	}

	.source-status-container {
		left: 10px;
		bottom: 70px;
		font-size: 11px;
	}

	.loading-indicator {
		top: 10px;
		right: 10px;
		font-size: 12px;
		padding: 8px 15px;
	}
}


/* ============================================
   SYSTEM STATUS PANEL
   ============================================ */
.system-status-panel {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	animation: fadeIn var(--transition-fast) ease-out;
}

.system-status-panel.visible {
	display: flex;
}

.system-status-panel>div:first-child {
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.95) 0%, rgba(118, 75, 162, 0.95) 100%);
	border-radius: var(--border-radius-xl);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	max-width: 800px;
	width: 90%;
	max-height: 90vh;
	overflow: hidden;
	animation: slideInFromTop var(--transition-slow) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.system-status-header {
	padding: 25px 30px;
	border-bottom: 2px solid rgba(255, 255, 255, 0.2);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.system-status-header h2 {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.system-status-close {
	background: rgba(255, 255, 255, 0.2);
	border: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-size: 28px;
	color: #fff;
	cursor: pointer;
	transition: all var(--transition-normal);
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.system-status-close:hover {
	background: rgba(255, 255, 255, 0.3);
	transform: rotate(90deg) scale(1.1);
}

.system-status-content {
	padding: 30px;
	max-height: calc(90vh - 100px);
	overflow-y: auto;
}

.status-section {
	margin-bottom: 30px;
}

.status-section:last-child {
	margin-bottom: 0;
}

.status-section h3 {
	margin: 0 0 15px 0;
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.status-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 15px;
}

.status-item {
	background: rgba(255, 255, 255, 0.1);
	padding: 15px;
	border-radius: var(--border-radius-md);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.status-label {
	display: block;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: 5px;
	font-weight: 600;
}

.status-value {
	display: block;
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.source-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.source-item {
	background: rgba(255, 255, 255, 0.1);
	padding: 15px;
	border-radius: var(--border-radius-md);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.source-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.source-name {
	font-size: 16px;
	font-weight: 700;
	color: #fff;
}

.source-status {
	padding: 4px 12px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

.source-status.status-active {
	background: #43e97b;
	color: #000;
}

.source-status.status-delayed {
	background: #fdae61;
	color: #000;
}

.source-status.status-offline {
	background: #f5576c;
	color: #fff;
}

.source-status.status-unknown {
	background: #999;
	color: #fff;
}

.source-details {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.8);
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 15px;
}

.stat-card {
	background: rgba(255, 255, 255, 0.15);
	padding: 20px;
	border-radius: var(--border-radius-md);
	border: 1px solid rgba(255, 255, 255, 0.2);
	text-align: center;
	transition: all var(--transition-normal);
}

.stat-card:hover {
	background: rgba(255, 255, 255, 0.2);
	transform: translateY(-3px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.stat-value {
	font-size: 32px;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	margin-bottom: 8px;
}

.stat-label {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.9);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* System status button icon */
.mapboxgl-ctrl button.mapboxgl-ctrl-system-status .mapboxgl-ctrl-icon {
	background: no-repeat center/21px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23333'%3E%3Cpath d='M256 0c17.7 0 32 14.3 32 32V64c0 17.7-14.3 32-32 32s-32-14.3-32-32V32c0-17.7 14.3-32 32-32zM169.4 105.4c12.5-12.5 32.8-12.5 45.3 0l22.6 22.6c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0l-22.6-22.6c-12.5-12.5-12.5-32.8 0-45.3zM32 256c0-17.7 14.3-32 32-32H96c17.7 0 32 14.3 32 32s-14.3 32-32 32H64c-17.7 0-32-14.3-32-32zm352-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32H384c-17.7 0-32-14.3-32-32s14.3-32 32-32zM342.6 361.4c12.5 12.5 12.5 32.8 0 45.3l-22.6 22.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l22.6-22.6c12.5-12.5 32.8-12.5 45.3 0zM256 416c17.7 0 32 14.3 32 32v32c0 17.7-14.3 32-32 32s-32-14.3-32-32V448c0-17.7 14.3-32 32-32zM169.4 406.6c-12.5-12.5-12.5-32.8 0-45.3l22.6-22.6c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-22.6 22.6c-12.5 12.5-32.8 12.5-45.3 0z'/%3E%3C/svg%3E");
}

/* Mobile responsive */
@media screen and (max-width: 640px) {
	.system-status-panel>div:first-child {
		width: 95%;
		max-height: 95vh;
	}

	.system-status-header {
		padding: 20px;
	}

	.system-status-header h2 {
		font-size: 20px;
	}

	.system-status-content {
		padding: 20px;
	}

	.status-grid {
		grid-template-columns: 1fr;
	}

	.stats-grid {
		grid-template-columns: 1fr;
	}
}

/* Scrollbar styling */
.system-status-content::-webkit-scrollbar {
	width: 8px;
}

.system-status-content::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.2);
	border-radius: 10px;
}

.system-status-content::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.3);
	border-radius: 10px;
}

.system-status-content::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.5);
}

/* ==
==========================================
   SYSTEM STATUS WIDGET - Always Visible
   ============================================ */
.system-widget {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 280px;
	background: var(--glass-bg-dark);
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	border: 1px solid var(--glass-border);
	border-radius: var(--border-radius-lg);
	box-shadow: var(--shadow-lg);
	z-index: 1000;
	transition: all var(--transition-normal);
	animation: slideInFromBottom 0.5s ease-out;
}

@keyframes slideInFromBottom {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.system-widget.collapsed {
	width: 200px;
}

.widget-header {
	background: var(--primary-gradient);
	padding: 12px 15px;
	border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	user-select: none;
	transition: all var(--transition-normal);
}

.widget-header:hover {
	background: linear-gradient(135deg, #7a8ef5 0%, #8a5fb8 100%);
	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
	transform: translateY(-2px);
}

.widget-title {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	letter-spacing: 0.5px;
}

.widget-toggle {
	background: rgba(255, 255, 255, 0.2);
	border: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	color: #fff;
	font-size: 12px;
	cursor: pointer;
	transition: all var(--transition-fast);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	line-height: 1;
}

.widget-toggle:hover {
	background: rgba(255, 255, 255, 0.3);
	transform: scale(1.1);
}

.widget-body {
	padding: 15px;
	color: #fff;
	max-height: 400px;
	overflow-y: auto;
}

.widget-section {
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.widget-section:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.widget-label {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.7);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 8px;
	font-weight: 600;
}

.widget-value {
	font-size: 24px;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.widget-value.small {
	font-size: 14px;
	font-weight: 600;
}

.source-indicators {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.source-indicators .source-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 8px;
	transition: all var(--transition-fast);
}

.source-indicators .source-item:hover {
	background: rgba(255, 255, 255, 0.1);
	transform: translateX(3px);
}

.source-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #999;
	flex-shrink: 0;
	transition: all var(--transition-fast);
}

.source-dot.active {
	background: #43e97b;
	box-shadow: 0 0 10px rgba(67, 233, 123, 0.6);
	animation: pulse 2s ease-in-out infinite;
}

.source-dot.offline {
	background: #f5576c;
	box-shadow: 0 0 10px rgba(245, 87, 108, 0.6);
}

.source-dot.unknown {
	background: #fdae61;
	box-shadow: 0 0 10px rgba(253, 174, 97, 0.6);
}

@keyframes pulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.6;
	}
}

.source-indicators .source-name {
	font-size: 12px;
	font-weight: 600;
	flex: 1;
}

.source-indicators .source-count {
	font-size: 12px;
	font-weight: 700;
	background: rgba(255, 255, 255, 0.2);
	padding: 2px 8px;
	border-radius: 10px;
	min-width: 30px;
	text-align: center;
}

/* Widget scrollbar */
.widget-body::-webkit-scrollbar {
	width: 6px;
}

.widget-body::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.2);
	border-radius: 10px;
}

.widget-body::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.3);
	border-radius: 10px;
}

.widget-body::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.5);
}

/* Mobile responsive */
@media screen and (max-width: 640px) {
	.system-widget {
		bottom: 10px;
		right: 10px;
		width: calc(100% - 20px);
		max-width: 300px;
	}

	.system-widget.collapsed {
		width: 180px;
	}
}

/* =====
=======================================
   SYSTEM STATUS PANEL - Content Styles
   ============================================ */
.status-content {
	padding: 10px;
}

.status-section {
	margin-bottom: 20px;
}

.status-section:last-child {
	margin-bottom: 0;
}

.status-section h3 {
	margin: 0 0 12px 0;
	font-size: 16px;
	font-weight: 700;
	color: #333;
	padding: 8px 12px;
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
	border-radius: 8px;
}

.status-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 10px;
}

.status-item {
	background: rgba(102, 126, 234, 0.05);
	padding: 12px;
	border-radius: 8px;
	border: 1px solid rgba(102, 126, 234, 0.1);
}

.status-label {
	display: block;
	font-size: 12px;
	color: #666;
	margin-bottom: 5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.status-value {
	display: block;
	font-size: 18px;
	font-weight: 700;
	color: #333;
}

.source-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.source-list .source-item {
	background: rgba(102, 126, 234, 0.05);
	padding: 12px;
	border-radius: 8px;
	border: 1px solid rgba(102, 126, 234, 0.1);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

.source-list .source-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin-bottom: 5px;
}

.source-list .source-name {
	font-size: 14px;
	font-weight: 600;
	color: #333;
}

.source-list .source-status {
	padding: 4px 12px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
}

.source-list .source-status.status-active {
	background: #43e97b;
	color: #000;
}

.source-list .source-status.status-delayed {
	background: #fdae61;
	color: #000;
}

.source-list .source-status.status-offline {
	background: #f5576c;
	color: #fff;
}

.source-list .source-details {
	font-size: 12px;
	color: #666;
	width: 100%;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
}

.stat-card {
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
	padding: 15px;
	border-radius: 10px;
	border: 1px solid rgba(102, 126, 234, 0.2);
	text-align: center;
	transition: all var(--transition-normal);
}

.stat-card:hover {
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.stat-value {
	font-size: 28px;
	font-weight: 700;
	color: #667eea;
	margin-bottom: 5px;
}

.stat-label {
	font-size: 12px;
	color: #666;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
/* =
===========================================
   DASHBOARD LINK BUTTON
   ============================================ */
#dashboard-link a:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

#dashboard-link a:active {
	transform: translateY(0);
}