/* SLD announcement bar. Ported from Convert experience 1004212383.
 *
 * Key difference: the bar is in the server HTML at its final height, so it cannot push the page
 * down when it appears. The Convert version built it in JS above the header, which shifted
 * everything below it on every page load.
 */

#top-bar { overflow: hidden; position: relative; }
.nasa-topbar-wrap #top-bar { display: block !important; }

.sld-tb { position: relative; }

.sld-tb__track {
	display: flex;
	align-items: stretch;
	flex-wrap: nowrap;
	position: relative;
	right: 0;
	transition: right .5s ease-out;
}

.sld-tb__track.is-returning { transition: none; }

.sld-tb__msg {
	width: 100vw;
	min-width: 100vw;
	max-width: 100vw;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sld-tb__msg p { margin: 0; }

.top-bar-custom-countdown {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	display: flex;
	background-color: #a4d680;
	padding-right: 10px;
}

.top-bar-custom-countdown .countdown-clock {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 4px;
}

.top-bar-custom-countdown .countdown-clock .offer-ending-title { font-weight: 700; }

/* Hidden by JS when the sale has more than 72h left, matching the original behaviour. */
.top-bar-custom-countdown .days.is-hidden { display: none; }

@media (max-width: 991px) {
	.top-bar-custom-countdown {
		margin-top: 10px;
		position: relative;
		top: unset;
		right: unset;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 5px;
		padding-right: 0;
	}

	#top-bar .green_bar_content p {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sld-tb__track { transition: none; }
}