/* GG Precious Metals Ticker
   --------------------------------------------------------------- */

.gg-metals-ticker {
	width: 100%;
	background: #0c2a1d;                 /* deep forest green from screenshot */
	background: linear-gradient(180deg, #0e2e20 0%, #0a2419 100%);
	color: #e7d9b4;                       /* warm parchment text */
	font-family: Georgia, "Times New Roman", "Source Serif Pro", serif;
	border-top: 1px solid rgba(255, 255, 255, 0.04);
	border-bottom: 1px solid rgba(0, 0, 0, 0.35);
	box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.35);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.gg-metals-ticker::-webkit-scrollbar { display: none; }

.gg-metals-ticker.is-sticky {
	position: sticky;
	top: 0;
	z-index: 9999;
}

.gg-metals-ticker__inner {
	display: flex;
	align-items: stretch;
	justify-content: center;
	min-width: max-content;       /* let it scroll on small screens */
	margin: 0 auto;
	padding: 0;
}

/* Scrolling marquee --------------------------------------------- */
.gg-metals-ticker.is-scrolling {
	overflow: hidden;             /* clip the off-screen half */
}

.gg-metals-ticker.is-scrolling .gg-metals-ticker__track {
	display: flex;
	width: max-content;            /* track holds 2x the items */
	animation: gg-marquee var(--gg-metals-duration, 60s) linear infinite;
	will-change: transform;
}

.gg-metals-ticker.is-scrolling .gg-metals-ticker__inner {
	justify-content: flex-start;
	flex-shrink: 0;
}

/* Pause when the user hovers so they can read a price */
.gg-metals-ticker.is-scrolling:hover .gg-metals-ticker__track,
.gg-metals-ticker.is-scrolling:focus-within .gg-metals-ticker__track {
	animation-play-state: paused;
}

@keyframes gg-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* Respect users who've asked the OS for reduced motion */
@media (prefers-reduced-motion: reduce) {
	.gg-metals-ticker.is-scrolling .gg-metals-ticker__track {
		animation: none;
		transform: none;
	}
	.gg-metals-ticker.is-scrolling {
		overflow-x: auto;          /* fall back to manual scroll */
	}
}

.gg-metals-ticker__item {
	display: flex;
	align-items: center;
	gap: 0.65em;
	padding: 14px 28px;
	border-right: 1px solid rgba(231, 217, 180, 0.12);
	white-space: nowrap;
	font-size: 15px;
	line-height: 1;
}

.gg-metals-ticker__item:last-child {
	border-right: 0;
}

/* Color dot ------------------------------------------------------- */
.gg-metals-ticker__dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.35),
		0 0 6px rgba(255, 255, 255, 0.08) inset;
	flex-shrink: 0;
}

/* Metal label (GOLD, SILVER, ...) -------------------------------- */
.gg-metals-ticker__label {
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 400;
	letter-spacing: 0.32em;       /* the tracked-out look in the mock */
	font-size: 13px;
	color: #e7d9b4;
	margin-right: 0.4em;
}

/* Price ----------------------------------------------------------- */
.gg-metals-ticker__price {
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 700;
	font-size: 17px;
	color: #f5ecd2;
	letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
}

.gg-metals-ticker__price-value {
	font-variant-numeric: tabular-nums;
}

/* Delta block ----------------------------------------------------- */
.gg-metals-ticker__delta {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-family: "SFMono-Regular", Menlo, Consolas, "Courier New", monospace;
	font-size: 12px;
	font-weight: 500;
	margin-left: 0.2em;
}

.gg-metals-ticker__delta--up {
	color: #6fcf6a;               /* bright green to match screenshot */
}

.gg-metals-ticker__delta--down {
	color: #e26a6a;
}

.gg-metals-ticker__arrow {
	font-size: 10px;
	transform: translateY(-1px);
}

.gg-metals-ticker__change,
.gg-metals-ticker__pct {
	font-variant-numeric: tabular-nums;
}

/* Update flash ---------------------------------------------------- */
.gg-metals-ticker__price-value.is-flash-up {
	animation: gg-flash-up 1.2s ease;
}
.gg-metals-ticker__price-value.is-flash-down {
	animation: gg-flash-down 1.2s ease;
}
@keyframes gg-flash-up {
	0%   { color: #6fcf6a; text-shadow: 0 0 12px rgba(111, 207, 106, 0.6); }
	100% { color: #f5ecd2; text-shadow: none; }
}
@keyframes gg-flash-down {
	0%   { color: #e26a6a; text-shadow: 0 0 12px rgba(226, 106, 106, 0.6); }
	100% { color: #f5ecd2; text-shadow: none; }
}

/* Responsive ------------------------------------------------------ */
@media (max-width: 900px) {
	.gg-metals-ticker__item { padding: 12px 18px; }
	.gg-metals-ticker__label { letter-spacing: 0.24em; font-size: 12px; }
	.gg-metals-ticker__price { font-size: 15px; }
}

@media (max-width: 600px) {
	.gg-metals-ticker__inner { justify-content: flex-start; }
	.gg-metals-ticker__item { padding: 10px 14px; gap: 0.5em; }
}