.banner,
.xorbital-maintenance-banner {
	position: relative;
	z-index: 80;
	overflow: hidden;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
	color: #fff8f0;
}

.banner[hidden],
.xorbital-maintenance-banner[hidden] {
	display: none !important;
}

.banner__inner {
	display: flex;
	align-items: stretch;
}

.banner__viewport {
	flex: 1 1 auto;
	overflow: hidden;
	white-space: nowrap;
}

.banner__track {
	display: inline-flex;
	align-items: center;
	gap: 2.75rem;
	min-width: max-content;
	animation: xorbital-maintenance-ticker 24s linear infinite;
	will-change: transform;
}

.banner__item {
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	font-family: "Source Sans 3", sans-serif;
	font-size: 0.98rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.banner__label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.7rem;
	padding: 0.22rem 0.72rem;
	border-radius: 999px;
	background: rgba(17, 12, 10, 0.28);
	border: 1px solid rgba(255, 240, 214, 0.26);
	font-size: 0.76rem;
	letter-spacing: 0.12em;
}

.banner__message {
	opacity: 0.98;
}

.banner__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	border: 0;
	border-left: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(10, 8, 14, 0.18);
	color: inherit;
	font-size: 1.35rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease, opacity 0.2s ease;
}

.banner__close:hover,
.banner__close:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	outline: none;
}

.banner__close[hidden] {
	display: none !important;
}

.banner.banner-alert,
.xorbital-maintenance-banner.banner-alert {
	background:
		linear-gradient(90deg, rgba(255, 120, 39, 0.92), rgba(163, 33, 22, 0.95) 55%, rgba(255, 120, 39, 0.92)),
		radial-gradient(circle at top left, rgba(255, 201, 117, 0.35), transparent 42%);
}

.banner.banner-info,
.xorbital-maintenance-banner.banner-info {
	background:
		linear-gradient(90deg, rgba(255, 162, 68, 0.92), rgba(191, 96, 24, 0.94) 52%, rgba(255, 173, 74, 0.92)),
		radial-gradient(circle at top left, rgba(255, 224, 173, 0.28), transparent 45%);
}

.banner.banner-evolution,
.xorbital-maintenance-banner.banner-evolution {
	background:
		linear-gradient(90deg, rgba(109, 76, 233, 0.94), rgba(70, 39, 173, 0.96) 54%, rgba(148, 102, 255, 0.92)),
		radial-gradient(circle at top left, rgba(214, 188, 255, 0.26), transparent 46%);
}

.banner.banner-success,
.xorbital-maintenance-banner.banner-success {
	background:
		linear-gradient(90deg, rgba(45, 183, 111, 0.94), rgba(16, 121, 91, 0.95) 50%, rgba(58, 207, 137, 0.92)),
		radial-gradient(circle at top left, rgba(185, 255, 215, 0.26), transparent 46%);
}

@keyframes xorbital-maintenance-ticker {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-50%, 0, 0);
	}
}

@media (max-width: 720px) {
	.banner__track {
		gap: 1.6rem;
	}

	.banner__item {
		font-size: 0.88rem;
		gap: 0.7rem;
	}

	.banner__label {
		min-width: 2rem;
		padding: 0.18rem 0.5rem;
		font-size: 0.7rem;
	}

	.banner__close {
		width: 2.8rem;
		font-size: 1.15rem;
	}
}