/* Add custom CSS styles below */

/* ===== Sensia: moving announcement ticker ===== */
salla-advertisement {
  display: block;
  height: 42px !important;
  overflow: hidden;
}

salla-advertisement .s-advertisement,
salla-advertisement .s-advertisement-content {
  position: relative;
  height: 42px;
  overflow: hidden;
}

salla-advertisement .s-advertisement-content {
  display: flex;
  align-items: center;
}

salla-advertisement .s-advertisement-content-main {
  position: absolute;
  left: auto;
  right: 100%;
  direction: rtl;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: none;
  white-space: nowrap;
  will-change: transform;
  animation: sensia-announcement-ticker 22s linear infinite !important;
}

salla-advertisement .s-advertisement-content-main a {
  white-space: nowrap;
}

salla-advertisement .s-advertisement-action {
  position: absolute;
  left: 10px;
  z-index: 2;
}

salla-advertisement:hover .s-advertisement-content-main,
salla-advertisement:focus-within .s-advertisement-content-main {
  animation-play-state: paused !important;
}

@keyframes sensia-announcement-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100% + 100vw)); }
}

@media (max-width: 768px) {
  salla-advertisement .s-advertisement-content-main {
    animation-duration: 16s !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  salla-advertisement .s-advertisement-content-main {
    position: static;
    margin-inline: auto;
    animation: none !important;
  }
}