/* Infobar Ticker Styles */
.infobar-container {
  overflow: hidden;
  max-width: 700px;
  min-width: 200px;
}

.infobar-ticker {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 0;
}

.infobar-text {
  font-size: 1rem;
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.infobar-text.fade-out {
  opacity: 0;
}

/* Currency styling */
.infobar-currency {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.infobar-date {
  color: var(--bs-body-color);
  font-weight: 500;
}

.infobar-rate {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.infobar-rate-usd {
  color: #28a745;
}

.infobar-rate-eur {
  color: #007bff;
}

.infobar-rate-cny {
  color: #dc3545;
}

/* Compliment styling */
.infobar-compliment {
  color: var(--bs-body-color);
  font-style: italic;
}

/* Weather styling */
.infobar-weather {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.infobar-weather-city {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.infobar-weather-city img {
  width: 24px;
  height: 24px;
}

.infobar-weather-temp {
  font-weight: 500;
}

.infobar-weather-temp.temp-cold {
  color: #17a2b8;
}

.infobar-weather-temp.temp-warm {
  color: #ffc107;
}

.infobar-weather-temp.temp-hot {
  color: #dc3545;
}

/* Dark mode adjustments */
[data-bs-theme="dark"] .infobar-date,
[data-bs-theme="dark"] .infobar-compliment {
  color: var(--bs-body-color);
}