/* The bar is a link to the Premium page. :not([hidden]) keeps the display rule
   from overriding the hidden attribute the script uses before purchases load —
   and the block box is what lets the script measure clientWidth. */
.premium-purchase-ticker:not([hidden]) {
  display: block;
}

.premium-purchase-ticker {
  position: relative;
  z-index: 3;
  overflow: hidden;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
  color: inherit;
  text-decoration: none;
  transition: background 160ms ease;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.premium-purchase-ticker:hover {
  background: var(--panel-2);
}

.premium-purchase-ticker:hover .premium-purchase-ticker-item {
  color: var(--text-3);
}

.premium-purchase-ticker:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.premium-purchase-ticker-track {
  display: flex;
  width: max-content;
  animation: premium-purchase-marquee var(--premium-ticker-duration, 42s) linear infinite;
  will-change: transform;
}

.premium-purchase-ticker-group {
  display: flex;
  flex: 0 0 auto;
  gap: 34px;
  padding-right: 34px;
}

.premium-purchase-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.76rem;
  white-space: nowrap;
}

.premium-purchase-ticker-item b {
  color: var(--text);
  font-weight: 700;
}

.premium-purchase-ticker-item::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--ok);
}

@keyframes premium-purchase-marquee {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .premium-purchase-ticker-track {
    animation: none;
    will-change: auto;
  }
}