/* =========================================================
   Biznes Ticker GPW – Sticky  |  ticker.css  v1.6.0
   Kolory i wymiary nadpisywane są przez inline CSS (PHP).
   ========================================================= */

:root {
	--bgt-bg:     #1a1a1a;
	--bgt-text:   #ffffff;
	--bgt-accent: #f5c518;
	--bgt-up:     #2ecc71;
	--bgt-down:   #e74c3c;
	--bgt-height: 40px;
	--bgt-speed:  40s;
}

/* ── Kontener ────────────────────────────────────────────── */
.bgt-ticker {
	width: 100%;
	height: var(--bgt-height);
	background-color: var(--bgt-bg);
	color: var(--bgt-text);
	overflow: hidden;
	position: relative;
	z-index: 1;
	box-shadow: 0 2px 6px rgba(0,0,0,.18);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-sizing: border-box;
}

/* Sticky – top ustawiany dynamicznie przez JS */
.bgt-ticker.bgt-sticky {
	position: sticky;
	top: 0;
}

/* ── Track (wrapper obu kopii) ──────────────────────────── */
.bgt-ticker-track {
	display: flex;          /* obie kopie obok siebie w jednym rzędzie */
	align-items: center;
	height: 100%;
	width: max-content;     /* kurczy się do sumarycznej szerokości treści */
	white-space: nowrap;
}

/* ── Kopie treści ───────────────────────────────────────── */
.bgt-ticker-content,
.bgt-ticker-content-clone {
	display: inline-flex;
	align-items: center;
	height: 100%;
	flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   TRYB PŁYNNY (bgt-seamless) – animowany TRACK
   Animujemy wrapper od 0 do -50% jego własnej szerokości.
   Ponieważ track = kopia1 + kopia2, to -50% = -1× szerokość
   jednej kopii → kopia2 wchodzi dokładnie tam gdzie była kopia1.
   ═══════════════════════════════════════════════════════════ */
.bgt-ticker.bgt-seamless .bgt-ticker-track {
	animation: bgt-scroll-seamless var(--bgt-speed) linear infinite;
	will-change: transform;
}

/* Poszczególne kopie NIE mają własnej animacji w trybie seamless */
.bgt-ticker.bgt-seamless .bgt-ticker-content,
.bgt-ticker.bgt-seamless .bgt-ticker-content-clone {
	animation: none;
}

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

/* ═══════════════════════════════════════════════════════════
   TRYB KLASYCZNY (bez bgt-seamless) – animowane dwie kopie
   Stare zachowanie: każda kopia przesuwa się osobno.
   Przerwa jest widoczna gdy treść jest krótsza niż viewport.
   ═══════════════════════════════════════════════════════════ */
.bgt-ticker:not(.bgt-seamless) .bgt-ticker-content {
	animation: bgt-scroll-classic var(--bgt-speed) linear infinite;
	will-change: transform;
}
.bgt-ticker:not(.bgt-seamless) .bgt-ticker-content-clone {
	animation: bgt-scroll-classic var(--bgt-speed) linear infinite;
	animation-delay: calc(var(--bgt-speed) / -2);
	will-change: transform;
}

@keyframes bgt-scroll-classic {
	from { transform: translateX(100vw); }
	to   { transform: translateX(-100%); }
}

/* ── Pauza ──────────────────────────────────────────────── */
/* Seamless – pauzujemy track */
.bgt-ticker.bgt-seamless:hover .bgt-ticker-track,
.bgt-ticker.bgt-seamless.bgt-paused .bgt-ticker-track {
	animation-play-state: paused;
}

/* Klasyczny – pauzujemy kopie */
.bgt-ticker:not(.bgt-seamless):hover .bgt-ticker-content,
.bgt-ticker:not(.bgt-seamless):hover .bgt-ticker-content-clone,
.bgt-ticker:not(.bgt-seamless).bgt-paused .bgt-ticker-content,
.bgt-ticker:not(.bgt-seamless).bgt-paused .bgt-ticker-content-clone {
	animation-play-state: paused;
}

/* ── Pozycje ────────────────────────────────────────────── */
.bgt-ticker-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 24px;
	font-size: 14px;
	line-height: 1;
}

.bgt-ticker-symbol {
	font-weight: 700;
	color: var(--bgt-accent);
	letter-spacing: .02em;
}

.bgt-ticker-price {
	font-weight: 600;
}

.bgt-ticker-change {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-weight: 600;
	font-size: 13px;
}
.bgt-ticker-change.bgt-up   { color: var(--bgt-up); }
.bgt-ticker-change.bgt-down { color: var(--bgt-down); }

.bgt-ticker-arrow    { font-size: 11px; line-height: 1; }
.bgt-ticker-loading  { padding: 0 24px; font-size: 13px; opacity: .7; }
.bgt-ticker-separator{ opacity: .25; padding: 0 4px; }

/* ── Responsywność ──────────────────────────────────────── */
@media (max-width: 768px) {
	.bgt-ticker-item   { font-size: 12px; padding: 0 14px; }
	.bgt-ticker-change { font-size: 11px; }
}

@media (max-width: 480px) {
	.bgt-ticker-item { font-size: 11px; padding: 0 10px; }
}

/* Szanujemy preferencje "reduced motion" */
@media (prefers-reduced-motion: reduce) {
	.bgt-ticker-track,
	.bgt-ticker-content,
	.bgt-ticker-content-clone {
		animation: none !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}