/* Views System Styles - Clean Version */

/* View count badge for sidebar items - INLINE with other meta */
.view-count-badge {
  font-size: 0.75rem;
  color: inherit; /* Same color as other meta elements */
  font-weight: 500;
  opacity: 0.9;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.5rem;
}

.view-count-badge i {
  font-size: 0.8rem;
  color: inherit; /* Same color as text */
}

/* Ensure meta elements are inline */
.movie-sidebar .movie-item .info > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

/* Enhanced sidebar item styling */
.movie-sidebar .movie-item {
  position: relative;
}

.movie-sidebar .movie-item .info {
  position: relative;
}

/* View count for different screen sizes */
@media (max-width: 768px) {
  .view-count-badge {
    font-size: 0.7rem;
  }
  
  .view-count-badge i {
    font-size: 0.75rem;
  }
}

/* Most viewed section styling */
.sidebar .section:has(h2:contains("Most Viewed")) .tab-content {
  min-height: 200px;
}

/* Error state styling */
.views-error {
  text-align: center;
  padding: 1rem;
  color: #999;
  font-style: italic;
}

.views-error::before {
  content: "⚠️";
  display: block;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

/* No data state */
.views-no-data {
  text-align: center;
  padding: 1.5rem;
  color: #777;
}

.views-no-data::before {
  content: "📊";
  display: block;
  font-size: 2rem;
  margin-bottom: 0.5rem;
  opacity: 0.5;
}

/* Hover effect for items with view counts - Keep same color */
.movie-sidebar .movie-item:hover .view-count-badge {
  color: inherit; /* Keep same color on hover */
}

/* Content stats display (optional - for movie/tv pages) */
.content-stats {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.content-stats.show {
  display: flex;
}

.stats-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #ccc;
  font-size: 0.9rem;
}

.stats-item i {
  color: #00d4ff;
  font-size: 1.1rem;
}

.view-count-display {
  font-weight: 500;
}

/* Responsive adjustments */
@media (max-width: 576px) {
  .content-stats {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
  }
  
  .view-count-badge {
    font-size: 0.65rem;
  }
  
  .view-count-badge i {
    font-size: 0.7rem;
  }
}



/* Special styling for trending items */
.trending-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: linear-gradient(45deg, #ff6b6b, #ee5a24);
  color: white;
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
  border-radius: 12px;
  font-weight: 600;
  z-index: 2;
}

/* Basic item styling (fallback when TMDB fails) */
.movie-item.basic-item {
  padding: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.movie-item.basic-item:hover {
  background-color: rgba(0, 212, 255, 0.1);
}

.movie-item.basic-item:last-child {
  border-bottom: none;
}

.movie-item.basic-item .name {
  font-size: 0.9rem;
  font-weight: 500;
  color: #fff;
  margin-bottom: 0.25rem;
  line-height: 1.3;
}

.movie-item.basic-item .meta {
  font-size: 0.75rem;
  color: #999;
}

.movie-item.basic-item .view-count-badge {
  margin-top: 0.25rem;
  font-size: 0.7rem;
  color: #999; /* Same as meta color */
}

/* Error state styling */
.views-error-state {
  text-align: center;
  padding: 2rem 1rem;
  color: #999;
}

.views-error-state i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  opacity: 0.5;
}

/* Final responsive adjustments */
@media (max-width: 480px) {
  .view-count-badge {
    font-size: 0.6rem;
  }
  
  .view-count-badge i {
    font-size: 0.65rem;
  }
}