/**
 * F10 header message banner: continuous horizontal marquee under the
 * price ticker. Two copies of the content translate by -50% for a
 * seamless loop; direction reversible; pauses on hover; honors
 * prefers-reduced-motion with a static centered line.
 */
.ng-header-banner {
	background: linear-gradient(90deg, #4d0404 0%, #630606 50%, #4d0404 100%);
	border-bottom: 1px solid rgba(211, 169, 79, 0.35);
	color: #f5efe4;
	font-size: 16px;
	letter-spacing: 0.015em;
	line-height: 1;
	overflow: hidden;
	padding: 13px 0;
	white-space: nowrap;
}

.ng-hb-track {
	display: inline-flex;
	gap: 48px;
	animation: ng-hb-scroll var(--ng-hb-duration, 30s) linear infinite;
	padding-right: 48px;
	will-change: transform;
}

.ng-header-banner.is-right .ng-hb-track {
	animation-direction: reverse;
}

.ng-header-banner:hover .ng-hb-track {
	animation-play-state: paused;
}

.ng-hb-content a {
	color: #f3c576;
	text-decoration: underline;
}

.ng-hb-content a:hover {
	color: #fff;
}

.ng-hb-sep {
	color: #f3c576;
	margin: 0 6px;
}

@keyframes ng-hb-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ng-hb-track {
		animation: none;
		display: block;
		overflow: hidden;
		text-align: center;
		text-overflow: ellipsis;
	}

	.ng-hb-content[aria-hidden="true"] {
		display: none;
	}
}

@media (max-width: 640px) {
	.ng-header-banner {
		font-size: 14px;
		padding: 10px 0;
	}
}