.mcr-live-ride-banner[hidden] { display: none !important; }

.mcr-live-ride-banner-spacer {
	display: block;
	width: 100%;
	height: 0;
	margin: 0;
	padding: 0;
	pointer-events: none;
}

.mcr-live-ride-banner {
	position: fixed !important;
	top: var(--mcr-live-navigation-offset, 0px);
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 900 !important;
	margin: 0;
	background: #d7192d;
	border-top: 1px solid rgba(255, 255, 255, .18);
	border-bottom: 1px solid rgba(255, 255, 255, .25);
	box-shadow: 0 8px 26px rgba(0, 0, 0, .3);
}

.mcr-live-ride-banner__inner {
	display: flex;
	align-items: center;
	gap: 8px;
	width: min(100% - 40px, 1280px);
	min-height: 70px;
	margin: 0 auto;
	padding: 12px 0;
}

.mcr-live-ride-banner__link {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	flex: 1 1 auto;
	color: #fff;
	text-decoration: none;
}

.mcr-live-ride-banner__link:hover,
.mcr-live-ride-banner__link:focus-visible { color: #fff; }
.mcr-live-ride-banner__link:focus-visible { outline: 3px solid #f5c84c; outline-offset: -3px; }

.mcr-live-ride-banner__signal {
	display: grid;
	place-items: center;
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border: 2px solid #fff;
	border-radius: 50%;
}

.mcr-live-ride-banner__signal i {
	width: 11px;
	height: 11px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(255, 255, 255, .7);
	animation: mcr-live-ride-pulse 1.8s infinite;
}

.mcr-live-ride-banner__copy { display: grid; gap: 2px; min-width: 0; }
.mcr-live-ride-banner__copy strong,
.mcr-live-ride-banner__action {
	font-family: var(--mcr-font-heading, Impact, sans-serif);
	font-size: .92rem;
	font-weight: 800;
	letter-spacing: .12em;
	line-height: 1.15;
	text-transform: uppercase;
}
.mcr-live-ride-banner__copy > span { font-size: .92rem; line-height: 1.35; }
.mcr-live-ride-banner__action { margin-left: auto; white-space: nowrap; }

@keyframes mcr-live-ride-pulse {
	70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.mcr-live-ride-banner__signal i { animation: none; }
}

@media (max-width: 600px) {
	.mcr-live-ride-banner__inner {
		width: calc(100% - 30px);
		min-height: 64px;
		gap: 7px;
	}
	.mcr-live-ride-banner__link { gap: 10px; }
	.mcr-live-ride-banner__signal { flex-basis: 28px; width: 28px; height: 28px; }
	.mcr-live-ride-banner__copy strong { font-size: .8rem; }
	.mcr-live-ride-banner__copy > span { font-size: .78rem; }
	.mcr-live-ride-banner__action { font-size: 0; }
	.mcr-live-ride-banner__action span { font-size: 1.25rem; }
}