/*
 * Crypto Ticker Styles - For HybridMag Theme
 * File: crypto-ticker.css - v1.5 (Corrected Layout)
 * -------------------------------------------------- */

.crypto-ticker-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 45px;
  background-color: #111;
  overflow: hidden;
  z-index: 10000;
  border-bottom: 1px solid #333;
  display: flex;
  align-items: center;

  /* Initially hide the ticker to prevent FOUC */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.crypto-ticker-track {
  display: flex;
  animation: crypto-scroll-left 33s linear infinite;
}

.crypto-ticker-bar:hover .crypto-ticker-track {
  animation-play-state: paused;
}

.crypto-ticker-item {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 45px;
  font-size: 14px;
  color: #fff;
  border-right: 1px solid #333;
  white-space: nowrap;
  font-family: 'Segoe UI', 'Roboto', sans-serif;
}

.crypto-ticker-symbol { font-weight: bold; color: #00e676; margin-right: 8px; }
.crypto-ticker-price { margin-right: 8px; }
.crypto-ticker-change.up { color: #00c853; }
.crypto-ticker-change.down { color: #ff5252; }

@keyframes crypto-scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/*
 * Layout Adjustments - Corrected Version
 * This section pushes down the #page container instead of the body tag
 * to avoid conflicts with the theme's sticky header logic.
 * -------------------------------------------------- */

#page {
    margin-top: 45px;
}

/* This rule correctly handles the position of the ticker when the admin bar is visible */
body.admin-bar .crypto-ticker-bar {
    top: 32px;
}