/**
 * BankPro WP — Currency ticker marquee.
 * Isolated stylesheet: every selector is scoped under `.bankpro-ticker`, so
 * nothing here can leak onto (or be restyled by) portal.css, Elementor, or
 * the Hello Elementor theme's reset/theme stylesheets.
 *
 * Transparent surface, no solid fill of its own — it sits directly on
 * `.bankpro-portal`'s own background and reads every color it uses straight
 * off the existing design tokens (`--bankpro-text`, `--bankpro-text-muted`,
 * `--bankpro-border`, `--bankpro-accent`, `--bankpro-danger`) rather than
 * defining any new palette, so it blends into the portal instead of reading
 * as a separate dark strip bolted onto it. A single `border-bottom` hairline
 * is the only visual separator, and every property here is a plain color or
 * a `transform`/`opacity` already used elsewhere in this file — nothing
 * that costs extra paint/composite work (no blur, no backdrop-filter, no
 * added shadows) versus the previous version.
 */

.bankpro-ticker {
	position: relative;
	overflow: hidden;
	background: transparent;
	border-bottom: 1px solid var(--bankpro-border, #dde3ea);
	/* Fixed height so the ticker never shifts surrounding layout, whether or
	   not it ends up rendering any items. */
	height: 36px;
	line-height: 36px;
}

.bankpro-ticker:focus-visible {
	outline: 2px solid var(--bankpro-accent, #0f9d6a);
	outline-offset: -2px;
}

.bankpro-ticker__track {
	display: flex;
	width: max-content;
	will-change: transform;
	animation: bankpro-ticker-scroll 32s linear infinite;
}

/* Pause on hover or keyboard focus so a reader can actually read a value
   instead of chasing it — required behavior, not a nicety. */
.bankpro-ticker:hover .bankpro-ticker__track,
.bankpro-ticker:focus-within .bankpro-ticker__track {
	animation-play-state: paused;
}

.bankpro-ticker__list {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-shrink: 0;
}

.bankpro-ticker__item {
	display: flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
	padding: 0 22px;
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
}

.bankpro-ticker__item:not(:last-child) {
	border-right: 1px solid var(--bankpro-border, #dde3ea);
}

.bankpro-ticker__pair {
	color: var(--bankpro-text-muted, #5b6b7c);
	font-weight: 500;
	letter-spacing: 0.03em;
}

.bankpro-ticker__value {
	color: var(--bankpro-text, #1c2733);
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* The same --bankpro-accent/--bankpro-danger tokens portal.css already uses
   for balances/alerts elsewhere — no lightening needed here (that was only
   ever for legibility against the old near-black surface). */
.bankpro-ticker__arrow--up {
	color: var(--bankpro-accent, #0f9d6a);
}

.bankpro-ticker__arrow--down {
	color: var(--bankpro-danger, #c0392b);
}

.bankpro-ticker__arrow--flat {
	color: var(--bankpro-text-muted, #5b6b7c);
}

/* Sparkline — a tiny inline trend line built from the pair's own recent
   cached rate history (see CurrencyTickerService::MAX_HISTORY_POINTS /
   CurrencyTickerRenderer::render_sparkline()). Sized to disappear into the
   row rather than draw attention to itself. */
.bankpro-ticker__spark {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
}

.bankpro-ticker__spark-line {
	fill: none;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bankpro-ticker__spark-line--up {
	stroke: var(--bankpro-accent, #0f9d6a);
}

.bankpro-ticker__spark-line--down {
	stroke: var(--bankpro-danger, #c0392b);
}

.bankpro-ticker__spark-line--flat {
	stroke: color-mix(in srgb, var(--bankpro-text-muted, #5b6b7c) 50%, transparent);
}

@keyframes bankpro-ticker-scroll {
	from {
		transform: translateX(0);
	}
	to {
		/* The renderer duplicates the item list once, so -50% of the track's
		   full (2x) width lands exactly on the start of the duplicate copy —
		   a seamless loop with no visible jump or reset. */
		transform: translateX(-50%);
	}
}

@media (max-width: 600px) {
	.bankpro-ticker__item {
		padding: 0 14px;
		font-size: 0.7rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bankpro-ticker__track {
		animation: none;
	}

	.bankpro-ticker {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}