/* Gold & Silver Live Rate — marquee + box */

.gsr-marquee {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	box-sizing: border-box;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	border-top: 1px solid rgba(0, 0, 0, 0.15);
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	--gsr-gap: 0px;
}

/* Full-bleed: span the entire viewport width regardless of theme container. */
.gsr-marquee--full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.gsr-marquee__track {
	will-change: transform;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.gsr-marquee:hover .gsr-marquee__track {
	animation-play-state: paused;
}

.gsr-marquee__item {
	display: inline-block;
	/* Vertical padding only — no horizontal padding so there is no space
	   inserted next to the separator dot. */
	padding: 2px 0;
}

/* ---------------------------------------------------------------------
   SINGLE mode (default): a single copy. It enters from the right edge,
   scrolls all the way across, leaves on the left, then starts again
   from the end. No duplicate, no gap.
   ------------------------------------------------------------------- */
.gsr-marquee--single .gsr-marquee__track {
	display: inline-block;
	padding-left: 100%; /* start just past the right edge (uses full width) */
	animation-name: gsr-scroll-single;
}

@keyframes gsr-scroll-single {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

/* ---------------------------------------------------------------------
   LOOP mode (optional): two copies for a continuous seamless scroll.
   The gap between repeats is controlled by --gsr-gap (0 = no space).
   Putting the gap on every item keeps the loop perfectly seamless.
   ------------------------------------------------------------------- */
.gsr-marquee--loop .gsr-marquee__track {
	display: inline-flex;
	animation-name: gsr-scroll-loop;
}

.gsr-marquee--loop .gsr-marquee__item {
	margin-right: var(--gsr-gap, 0px);
}

@keyframes gsr-scroll-loop {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Reduced motion: don't scroll, just show static text. */
@media (prefers-reduced-motion: reduce) {
	.gsr-marquee__track {
		animation: none;
	}
	.gsr-marquee--single .gsr-marquee__track {
		padding-left: 0;
	}
	.gsr-marquee__item:nth-child(2) {
		display: none;
	}
}

/* Small rates box (like the reference snippet) */
.gsr-box {
	background: #edca54;
	padding: 12px 16px;
	border-radius: 8px;
	max-width: 280px;
	border: 1px solid #000;
	font-family: Arial, Helvetica, sans-serif;
	color: #00000e;
	font-weight: 700;
}

.gsr-box p {
	margin: 4px 0;
}

@media (max-width: 480px) {
	.gsr-marquee__item {
		padding: 2px 0;
		font-size: 14px;
	}
	.gsr-box {
		max-width: 100%;
	}
}