/* ===================================================================
   Anima Ticker Pro – Public Styles
   Anima Infotech © 2024
   =================================================================== */

/* ── Base Ticker Wrapper ──────────────────────────────────────────── */
.atp-ticker {
  display: flex;
  align-items: stretch;
  position: relative;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transition: opacity .3s;
  margin: 0 0 0 0;
}
.atp-ticker.atp-hidden { display: none !important; }

/* ── Label Badge ──────────────────────────────────────────────────── */
.atp-label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 18px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
/* Animated live dot */
.atp-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: .9;
  animation: atp-blink 1.2s ease-in-out infinite;
}
@keyframes atp-blink {
  0%,100% { opacity: .9; transform: scale(1); }
  50%      { opacity: .3; transform: scale(.7); }
}

/* ── Divider ──────────────────────────────────────────────────────── */
.atp-divider {
  width: 1px;
  background: rgba(255,255,255,.25);
  flex-shrink: 0;
  margin: 6px 0;
}

/* ── Scrolling track ──────────────────────────────────────────────── */
.atp-track-wrap {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 10px 14px;
}
.atp-track {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0;
}
.atp-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 6px;
}
.atp-item a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.35);
  transition: border-color .2s;
}
.atp-item a:hover { border-bottom-color: currentColor; }
.atp-item-icon { font-size: 13px; flex-shrink: 0; }
.atp-separator {
  margin: 0 10px;
  opacity: .5;
  font-weight: 700;
  font-size: 11px;
}

/* ── Close button ─────────────────────────────────────────────────── */
.atp-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  flex-shrink: 0;
  background: rgba(0,0,0,.12);
  border: none;
  color: inherit;
  font-size: 16px;
  cursor: pointer;
  opacity: .7;
  transition: opacity .2s, background .2s;
  padding: 0;
}
.atp-close:hover { opacity: 1; background: rgba(0,0,0,.2); }

/* ── Global position sticky ────────────────────────────────────────── */
.atp-global-wrap.atp-global-top {
  position: sticky; top: 0; z-index: 9999;
  width: 100%;
}
.atp-global-wrap.atp-global-bottom {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
}

/* ════════════════════════════════════════════════════════════════════
   VARIANT STYLES
   ════════════════════════════════════════════════════════════════════ */

/* ── Breaking News ─ Red hot, urgent ──────────────────────────────── */
.atp-type-breaking_news {
  background: linear-gradient(90deg, #b91c1c 0%, #dc2626 50%, #b91c1c 100%);
  color: #fff;
  min-height: 42px;
}
.atp-type-breaking_news .atp-label {
  background: #7f1d1d;
  color: #fca5a5;
}
.atp-type-breaking_news .atp-label .atp-live-dot { background: #fca5a5; }

/* ── Announcement ─ Clean indigo ─────────────────────────────────── */
.atp-type-announcement {
  background: linear-gradient(90deg, #1d4ed8 0%, #2563eb 100%);
  color: #fff;
  min-height: 42px;
}
.atp-type-announcement .atp-label {
  background: #1e3a8a;
  color: #bfdbfe;
}
.atp-type-announcement .atp-label .atp-live-dot { background: #bfdbfe; }

/* ── Alert / Warning ─ Amber ──────────────────────────────────────── */
.atp-type-alert {
  background: linear-gradient(90deg, #b45309 0%, #d97706 100%);
  color: #fff;
  min-height: 42px;
}
.atp-type-alert .atp-label {
  background: #78350f;
  color: #fde68a;
}
.atp-type-alert .atp-label .atp-live-dot { background: #fde68a; }

/* ── Update ─ Emerald ─────────────────────────────────────────────── */
.atp-type-update {
  background: linear-gradient(90deg, #047857 0%, #059669 100%);
  color: #fff;
  min-height: 42px;
}
.atp-type-update .atp-label {
  background: #064e3b;
  color: #a7f3d0;
}
.atp-type-update .atp-label .atp-live-dot { background: #a7f3d0; }

/* ── Promo ─ Violet gradient ──────────────────────────────────────── */
.atp-type-promo {
  background: linear-gradient(90deg, #5b21b6 0%, #7c3aed 50%, #a21caf 100%);
  color: #fff;
  min-height: 42px;
}
.atp-type-promo .atp-label {
  background: #2e1065;
  color: #e9d5ff;
}
.atp-type-promo .atp-label .atp-live-dot { background: #e9d5ff; }

/* ── Event ─ Cyan blue ────────────────────────────────────────────── */
.atp-type-event {
  background: linear-gradient(90deg, #0e7490 0%, #0891b2 100%);
  color: #fff;
  min-height: 42px;
}
.atp-type-event .atp-label {
  background: #164e63;
  color: #a5f3fc;
}
.atp-type-event .atp-label .atp-live-dot { background: #a5f3fc; }

/* ── Stock / Market ─ Dark terminal ───────────────────────────────── */
.atp-type-stock {
  background: #0f172a;
  color: #22d3ee;
  min-height: 42px;
  font-family: 'Courier New', monospace;
}
.atp-type-stock .atp-label {
  background: #020617;
  color: #67e8f9;
  font-family: 'Courier New', monospace;
}
.atp-type-stock .atp-label .atp-live-dot { background: #67e8f9; }
.atp-type-stock .atp-track-wrap { color: #e2e8f0; }
.atp-type-stock .atp-separator  { color: #22d3ee; }

/* ── Weather ─ Sky blue glassmorphism ─────────────────────────────── */
.atp-type-weather {
  background: linear-gradient(90deg, #0369a1 0%, #0284c7 100%);
  color: #e0f2fe;
  min-height: 42px;
}
.atp-type-weather .atp-label {
  background: #082f49;
  color: #bae6fd;
}
.atp-type-weather .atp-label .atp-live-dot { background: #bae6fd; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .atp-ticker { font-size: 12px; }
  .atp-label  { padding: 0 12px; font-size: 10px; }
}

/* ── Marquee override (jquery.marquee compatibility) ─────────────── */
.atp-ticker .marquee-wrapper { overflow: hidden !important; width: 100% !important; }
.atp-ticker .marquee-container { white-space: nowrap !important; }