/**
 * PlayRox — Currency exchange ticker.
 *
 * A single-line marquee that sits between the header and the popular reel.
 * Motion is left-to-right: the track starts shifted one full run to the left
 * and animates to zero, so items enter from the left edge and exit right.
 */

.plxfx {
	--plxfx-speed: 40s;
	--plxfx-bg: #0f1720;
	--plxfx-fg: #ffffff;
	--plxfx-accent: var(--color-primary, #1f8f4e);

	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--plxfx-bg);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/*
 * Matches the theme's .wrapper (94% / max-width 1020px, centred) so the strip
 * lines up with the menu above it. The nav links carry no horizontal padding,
 * so "Home" sits exactly on the wrapper's left edge — the label has to start
 * there too.
 */
/*
 * Full width; the left inset is measured from the menu at runtime by
 * playrox-fx-align.js. The CSS fallback keeps it sane before that runs, and
 * on templates with no visible menu.
 */
.plxfx__inner {
	display: flex;
	align-items: stretch;
	width: 100%;
	margin: 0;
	padding-left: var( --plxfx-inset, 0px );
}

/* Static label, sits outside the moving area. */
.plxfx__label {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	/* The block starts at the very left edge of the screen; only its text is
	   inset, so it lines up with the first menu item with no empty gap. */
	margin-left: calc( 0px - var( --plxfx-inset, 0px ) );
	padding: 0 16px 0 var( --plxfx-inset, 16px );
	background: var(--plxfx-label-bg, var(--plxfx-accent));
	color: var(--plxfx-label-fg, #fff);
	font-family: var( --plxfx-font, inherit );
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	white-space: nowrap;
}

.plxfx__viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	padding: 9px 0;
}

.plxfx__track {
	display: flex;
	width: max-content;
	will-change: transform;
	animation: plxfx-scroll var(--plxfx-speed) linear infinite;
}

.plxfx__run {
	display: inline-flex;
	align-items: center;
	flex: none;
}

/* Direction is a setting: rtl is the classic marquee (content travels
   leftwards), ltr reverses it. */
@keyframes plxfx-scroll {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

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

.plxfx[data-dir="rtl"] .plxfx__track {
	animation-name: plxfx-scroll-rtl;
}

.plxfx:hover .plxfx__track,
.plxfx:focus-within .plxfx__track {
	animation-play-state: paused;
}

/* ---- Items ---- */

.plxfx__item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0 20px;
	color: var(--plxfx-fg);
	font-family: var( --plxfx-font, inherit );
	font-size: 14px;
	line-height: 1.2;
	white-space: nowrap;
	border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.plxfx__ico {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
}

.plxfx__ico--fa {
	font-size: 13px;
	color: #0e1116;
	background: #ffc93c;
	border-radius: 50%;
}

.plxfx__ico--txt {
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: #0e1116;
	background: #ffc93c;
	border-radius: 50%;
}

/* Uploaded icons keep their own shape. */
img.plxfx__ico {
	width: 22px;
	height: 22px;
	object-fit: contain;
	border-radius: 50%;
}

.plxfx__code {
	font-weight: 800;
	letter-spacing: 0.04em;
	color: var(--plxfx-code, #ffffff);
}

.plxfx__val {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--plxfx-val, #7ee6a4);
}

.plxfx__unit {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--plxfx-unit, rgba(255, 255, 255, 0.55));
}

/* ---- Small screens ---- */

@media (max-width: 767px) {
	.plxfx__label {
		margin-left: calc( 0px - var( --plxfx-inset, 0px ) );
		padding: 0 11px 0 var( --plxfx-inset, 11px );
		font-size: 10px;
		letter-spacing: 0.06em;
	}
	.plxfx__viewport { padding: 7px 0; }
	.plxfx__item { padding: 0 14px; font-size: 13px; gap: 6px; }
	.plxfx__ico,
	img.plxfx__ico { width: 19px; height: 19px; }
	.plxfx__ico--fa { font-size: 11px; }
	.plxfx__unit { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.plxfx__track { animation: none; }
	.plxfx__viewport { overflow-x: auto; }
}


/* Direction arrows, matching the Header Green strip. */
.plxfx__dir { font-size: 10px; margin-left: 1px; }
.plxfx__dir.is-up { color: var(--plxfx-up, #4ade80); }
.plxfx__dir.is-down { color: var(--plxfx-down, #ff6b6b); }