/**
 * trendingTicker.css
 * Sleek, high-performance running ticker for Trending Groups & Sectors in IDX footer
 */

.footer-trending-bar {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  margin: 0 16px;
  overflow: hidden;
  position: relative;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

/* Fixed Trending Label on the left of ticker */
.trending-ticker-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  margin-right: 10px;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.15);
  z-index: 2;
}

.trending-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 6px #38bdf8;
  animation: pulseNeon 1.5s infinite ease-in-out;
}

@keyframes pulseNeon {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.trending-badge-title {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #38bdf8;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Scrolling Container with soft fade mask on edges */
.trending-ticker-scroll {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
}

/* Continuous infinite marquee track */
.trending-ticker-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: 8px;
  animation: tickerMarquee 50s linear infinite;
  will-change: transform;
}

.trending-ticker-scroll:hover .trending-ticker-track {
  animation-play-state: paused !important;
}

@keyframes tickerMarquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Individual Trending Entity (Group or Sector) */
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ticker-entity-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.group-pill {
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(129, 140, 248, 0.4);
  color: #c7d2fe;
}

.sector-pill {
  background: rgba(13, 148, 136, 0.18);
  border: 1px solid rgba(45, 212, 191, 0.4);
  color: #99f6e4;
}

.pill-type {
  font-size: 8px;
  font-weight: 800;
  opacity: 0.75;
  text-transform: uppercase;
}

.pill-name {
  font-weight: 700;
}

.pill-owner {
  font-size: 8px;
  font-weight: 500;
  opacity: 0.65;
  font-style: italic;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pill-pct {
  font-size: 9px;
  font-weight: 800;
  padding: 0 4px;
  border-radius: 2px;
}

.pill-pct.pct-up {
  color: #10b981;
  background: rgba(16, 185, 129, 0.2);
}

.pill-pct.pct-dn {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.2);
}

.pill-pct.pct-flat {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.15);
}

.ticker-stocks {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Clickable Stock Pill */
.ticker-stock-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.ticker-stock-pill:hover {
  filter: brightness(1.25);
  text-decoration: underline;
}

.ticker-stock-pill.pct-up {
  color: #10b981;
}

.ticker-stock-pill.pct-dn {
  color: #ef4444;
}

.ticker-stock-pill.pct-flat {
  color: #fbbf24;
}

.ticker-divider {
  color: rgba(71, 85, 105, 0.6);
  font-size: 7px;
  padding: 0 4px;
}

/* Clean Trending Individual Stock (Tanpa Box / Border / Kolom) */
.ticker-hot-stock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: opacity 0.15s ease;
  white-space: nowrap;
}

.ticker-hot-stock:hover {
  opacity: 0.75;
}

.hot-sym {
  font-weight: 800;
  letter-spacing: 0.4px;
}

.hot-price {
  font-size: 9.5px;
  font-weight: 600;
  color: #cbd5e1;
  font-family: var(--font-mono);
}

.hot-pct {
  font-size: 9.5px;
  font-weight: 800;
  padding: 0;
  background: transparent !important;
}

.hot-pct.pct-up {
  color: #10b981 !important; /* Naik Hijau */
}

.hot-pct.pct-dn {
  color: #ef4444 !important; /* Turun Merah */
}

.hot-pct.pct-flat {
  color: #fbbf24 !important; /* Netral Kuning */
}

.ticker-section-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  background: rgba(99, 102, 241, 0.2);
  border: 1px dashed rgba(129, 140, 248, 0.5);
  color: #a5b4fc;
}