.mq-ticker {
  --mq-bg: #d0202b;
  --mq-text: #ffffff;
  --mq-speed: 65s;
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--mq-bg);
  padding: 14px 0;
  box-sizing: border-box;

  /* Kripton per bug-un e njohur ne WebKit/mobile ku elementet me animacion
     CSS te vazhdueshem "zhduken" gjate scroll-it: e detyrojme elementin
     te kete layer-in e vet te kompozimit (GPU) dhe s'e lejojme te trajtohet
     si "jashte ekranit" nga plugin-e te optimizimit (WP Rocket, LiteSpeed,
     Autoptimize, etj.) qe perdorin content-visibility:auto per lazy-render. */
  isolation: isolate;
  contain: layout paint;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
}
.mq-ticker *, .mq-ticker *::before, .mq-ticker *::after {
  box-sizing: border-box;
}
.mq-track {
  display: flex;
  width: max-content;
  animation: mq-scroll var(--mq-speed) linear infinite;

  /* Mban layer-in e animuar "gjalle" ne kompozitor gjate gjithe kohes,
     ne vend qe browser-i mobil ta rikrijoje/humbase gjate scroll-it. */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* Pauzo animacionin me :hover VETEM ne pajisje qe kane hover te vertete
   (mouse). Ne touch/mobile, :hover mund te "ngecë" pas nje prekjeje dhe
   ta le animacionin te ndalur ose te dukat sikur "zhduket". */
@media (hover: hover) and (pointer: fine) {
  .mq-ticker:hover .mq-track {
    animation-play-state: paused;
  }
}
.mq-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.mq-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--mq-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0 28px;
}
.mq-item::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 28px;
  background: var(--mq-text);
  border-radius: 50%;
  opacity: 0.6;
}
.mq-tick {
  opacity: 0.9;
}
.mq-value {
  font-weight: 800;
}
.mq-change {
  font-weight: 700;
}
.mq-change.mq-up {
  color: #baffc9;
}
.mq-change.mq-down {
  color: #ffd1d1;
}
.mq-change.mq-flat {
  color: var(--mq-text);
  opacity: 0.7;
}
.mq-date {
  font-weight: 500;
  font-size: 0.8em;
  text-transform: none;
  letter-spacing: normal;
  opacity: 0.65;
}
@media (max-width: 560px) {
  .mq-item { font-size: 12px; padding: 0 18px; }
  .mq-item::after { margin-left: 18px; }
}
@keyframes mq-scroll {
  /* translate3d ne vend te translateX: e mban elementin ne GPU layer
     gjate gjithe animacionit (jo vetem ne gjendjen fillestare). */
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}