/* Live spot price strip — gold / silver / platinum / palladium */

.btllc-spot-strip {
	width: 100%;
	background: #0e0e10;
	color: #f5f5f5;
	padding: 12px 20px;
	font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.btllc-spot-strip__title {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #c5a76b;
	margin-bottom: 8px;
}

.btllc-spot-strip__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 24px 36px;
	justify-content: center;
	align-items: baseline;
}

.btllc-spot-strip__item {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	min-height: 28px;
}

.btllc-spot-strip__metal {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #d4d4d4;
}

.btllc-spot-strip__item--gold .btllc-spot-strip__metal { color: #d4af37; }
.btllc-spot-strip__item--silver .btllc-spot-strip__metal { color: #c0c0c5; }
.btllc-spot-strip__item--platinum .btllc-spot-strip__metal { color: #b8d7e8; }
.btllc-spot-strip__item--palladium .btllc-spot-strip__metal { color: #cbb1d5; }

.btllc-spot-strip__price {
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	font-variant-numeric: tabular-nums;
	transition: color 200ms ease;
}

/* Brief background flash when a fresh poll lands a different price.
 * Green = up, red = down. ~1.2s and fades out. */
.btllc-spot-strip__price--flash-up,
.btllc-spot-strip__price--flash-down {
	border-radius: 3px;
	padding: 0 4px;
	margin: 0 -4px;
	animation: btllc-spot-flash 1.2s ease-out;
}

@keyframes btllc-spot-flash {
	0%   { background: rgba(74, 210, 122, 0.0); }
	15%  { background: rgba(74, 210, 122, 0.45); }
	100% { background: rgba(74, 210, 122, 0.0); }
}

.btllc-spot-strip__price--flash-down {
	animation-name: btllc-spot-flash-down;
}

@keyframes btllc-spot-flash-down {
	0%   { background: rgba(255, 107, 107, 0.0); }
	15%  { background: rgba(255, 107, 107, 0.45); }
	100% { background: rgba(255, 107, 107, 0.0); }
}

.btllc-spot-strip__delta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.btllc-spot-strip__delta--up { color: #4ad27a; }
.btllc-spot-strip__delta--down { color: #ff6b6b; }

.btllc-spot-strip__delta-arrow {
	font-size: 10px;
	transform: translateY(-1px);
}

.btllc-spot-strip__delta-pct {
	opacity: 0.75;
	font-weight: 500;
}

.btllc-spot-strip__meta {
	margin-top: 6px;
	font-size: 11px;
	color: #888;
	text-align: center;
}

.btllc-spot-strip__meta time {
	color: inherit;
}

@media (max-width: 720px) {
	.btllc-spot-strip {
		padding: 10px 12px;
	}
	.btllc-spot-strip__items {
		gap: 14px 20px;
	}
	.btllc-spot-strip__price {
		font-size: 16px;
	}
	.btllc-spot-strip__metal {
		font-size: 11px;
	}
	.btllc-spot-strip__delta {
		font-size: 12px;
	}
	.btllc-spot-strip__delta-pct {
		display: none; /* save space on small screens */
	}
}