/**
 * TV CONTENT DETAIL - Страница сериала для Smart TV
 */

/* ============================================
   PAGE LAYOUT
   ============================================ */
body.tv-mode .content-detail-page {
  padding: 0 !important;
  background: var(--tv-bg, #0a0a0a) !important;
}

body.tv-mode .content-detail-page .container {
  max-width: 100% !important;
  padding: 0 !important;
}

/* ============================================
   PLAYER SECTION
   ============================================ */
body.tv-mode .content-detail-page .col-lg-9.col-sm-8 {
  width: 100% !important;
  max-width: 100% !important;
  padding: 20px 60px !important;
}

body.tv-mode .player-wrapper,
body.tv-mode .video-box {
  border-radius: 16px !important;
  overflow: hidden !important;
  aspect-ratio: 16/9 !important;
  background: #000 !important;
  box-shadow: 0 10px 50px rgba(0,0,0,0.5) !important;
}

body.tv-mode .player-wrapper iframe,
body.tv-mode .video-box iframe {
  width: 100% !important;
  height: 100% !important;
}

/* ============================================
   TV EPISODES TOGGLE BUTTON
   ============================================ */
.tv-episodes-toggle {
  display: none;
}

body.tv-mode .tv-episodes-toggle {
  display: flex !important;
  position: fixed !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 60px !important;
  height: 120px !important;
  background: linear-gradient(135deg, var(--tv-focus-color, #00d4ff) 0%, #00ff88 100%) !important;
  border: none !important;
  border-radius: 12px 0 0 12px !important;
  color: #000 !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  z-index: 1001 !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: -5px 0 30px rgba(0,212,255,0.4) !important;
  transition: all 0.3s ease !important;
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
}

body.tv-mode .tv-episodes-toggle:hover,
body.tv-mode .tv-episodes-toggle:focus {
  width: 80px !important;
  box-shadow: -8px 0 40px rgba(0,212,255,0.6) !important;
}

body.tv-mode .tv-episodes-toggle i {
  font-size: 20px !important;
}

body.tv-mode .tv-episodes-toggle span {
  font-size: 14px !important;
  letter-spacing: 1px !important;
}

/* ============================================
   EPISODES PANEL - Right sidebar
   ============================================ */
body.tv-mode .content-detail-page .col-lg-3.col-sm-4,
body.tv-mode .tv-episodes-panel {
  position: fixed !important;
  top: 0 !important;
  right: -400px !important;
  bottom: 0 !important;
  width: 380px !important;
  max-width: 380px !important;
  background: var(--tv-bg-secondary, rgba(20,20,24,0.98)) !important;
  backdrop-filter: blur(20px) !important;
  z-index: 1002 !important;
  padding: 30px !important;
  overflow-y: auto !important;
  transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-left: 1px solid var(--tv-border, rgba(255,255,255,0.1)) !important;
}

body.tv-mode .content-detail-page .col-lg-3.col-sm-4.is-open,
body.tv-mode .content-detail-page .col-lg-3.col-sm-4:focus-within,
body.tv-mode .tv-episodes-panel.is-open {
  right: 0 !important;
}

/* Episodes panel header */
.tv-episodes-header {
  display: none;
}

body.tv-mode .tv-episodes-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 24px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--tv-border) !important;
}

body.tv-mode .tv-episodes-header h3 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--tv-text) !important;
  margin: 0 !important;
}

body.tv-mode .tv-episodes-close {
  width: 44px !important;
  height: 44px !important;
  background: rgba(255,255,255,0.1) !important;
  border: none !important;
  border-radius: 10px !important;
  color: var(--tv-text) !important;
  font-size: 18px !important;
  cursor: pointer !important;
  transition: var(--tv-transition) !important;
}

body.tv-mode .tv-episodes-close:hover,
body.tv-mode .tv-episodes-close:focus {
  background: var(--tv-focus-color) !important;
  color: #000 !important;
}

body.tv-mode .sidebar,
body.tv-mode .episodes-sidebar {
  background: transparent !important;
  padding: 0 !important;
}

/* Episode tabs */
body.tv-mode .nav-tabs,
body.tv-mode .episode-tabs {
  display: flex !important;
  gap: 0 !important;
  border-bottom: 1px solid var(--tv-border) !important;
  margin-bottom: 20px !important;
}

body.tv-mode .nav-tabs .nav-link,
body.tv-mode .episode-tabs .tab-btn {
  flex: 1 !important;
  padding: 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  color: var(--tv-text-muted) !important;
  transition: all 0.2s ease !important;
}

body.tv-mode .nav-tabs .nav-link:hover,
body.tv-mode .episode-tabs .tab-btn:hover {
  color: var(--tv-text) !important;
  background: var(--tv-bg-card) !important;
}

body.tv-mode .nav-tabs .nav-link.active,
body.tv-mode .episode-tabs .tab-btn.active {
  color: var(--tv-focus-color) !important;
  border-bottom-color: var(--tv-focus-color) !important;
  background: transparent !important;
}

/* Episode list */
body.tv-mode .episodes-list,
body.tv-mode .episodes-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

body.tv-mode .episode-item,
body.tv-mode .ep-btn {
  display: flex !important;
  align-items: center !important;
  padding: 16px 18px !important;
  background: var(--tv-bg-card) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: var(--tv-transition) !important;
  outline: none !important;
  border: 2px solid var(--tv-border) !important;
  color: var(--tv-text) !important;
}

body.tv-mode .episode-item:hover,
body.tv-mode .episode-item:focus,
body.tv-mode .ep-btn:hover,
body.tv-mode .ep-btn:focus {
  background: var(--tv-focus-color) !important;
  color: #000 !important;
  border-color: var(--tv-focus-color) !important;
}

body.tv-mode .episode-item.active {
  background: rgba(0,212,255,0.2) !important;
  border-color: var(--tv-focus-color) !important;
}

body.tv-mode .episode-item .episode-number {
  font-size: 18px !important;
  font-weight: 700 !important;
  min-width: 40px !important;
  color: var(--tv-text) !important;
}

body.tv-mode .episode-item .episode-title {
  color: var(--tv-text) !important;
}

/* ============================================
   UNDERPLAYER - Players & Voiceovers
   ============================================ */
body.tv-mode .underplayer-panel,
body.tv-mode .server-blok-wrap {
  padding: 24px 50px !important;
}

body.tv-mode .server-blok {
  display: flex !important;
  gap: 30px !important;
  flex-wrap: wrap !important;
}

body.tv-mode .server-blok .primery {
  font-size: 12px !important;
  text-transform: uppercase !important;
  color: var(--tv-text-muted) !important;
  margin-bottom: 10px !important;
}

body.tv-mode .server-blok .btn-block {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

body.tv-mode .server-blok .btn-tag,
body.tv-mode .player-btn {
  padding: 14px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  background: var(--tv-bg-card) !important;
  border: 2px solid var(--tv-border) !important;
  border-radius: 8px !important;
  color: var(--tv-text) !important;
  cursor: pointer !important;
  transition: var(--tv-transition) !important;
}

body.tv-mode .server-blok .btn-tag:hover,
body.tv-mode .server-blok .btn-tag:focus,
body.tv-mode .player-btn:hover,
body.tv-mode .player-btn:focus {
  background: var(--tv-focus-color) !important;
  color: #000 !important;
  border-color: var(--tv-focus-color) !important;
}

body.tv-mode .server-blok .btn-tag.active,
body.tv-mode .player-btn.active {
  background: rgba(0,212,255,0.2) !important;
  border-color: var(--tv-focus-color) !important;
}

/* ============================================
   CONTENT INFO
   ============================================ */
body.tv-mode .content-detail-page .row.mt-4 {
  padding: 30px 50px !important;
  display: flex !important;
  gap: 30px !important;
}

/* Poster */
body.tv-mode .trailer-box {
  flex: 0 0 220px !important;
  width: 220px !important;
  height: 330px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

body.tv-mode .trailer-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Info */
body.tv-mode .trailer-content {
  flex: 1 !important;
}

body.tv-mode .hero-title {
  font-size: 32px !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
  color: var(--tv-text) !important;
}

body.tv-mode .content-meta-tags {
  display: flex !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}

body.tv-mode .content-meta-tags .badge-tag {
  font-size: 12px !important;
  padding: 8px 16px !important;
  color: var(--tv-text) !important;
}

body.tv-mode .trailer-content p,
body.tv-mode .trailer-content {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--tv-text) !important;
}

body.tv-mode .content-detail-page h2,
body.tv-mode .content-detail-page h3,
body.tv-mode .content-detail-page h4 {
  color: var(--tv-text) !important;
}

body.tv-mode .content-detail-page p,
body.tv-mode .content-detail-page span,
body.tv-mode .content-detail-page a:not(.btn) {
  color: var(--tv-text-muted) !important;
}

/* Favorite button */
body.tv-mode .favorite-btn {
  padding: 14px 28px !important;
  font-size: 15px !important;
  border-radius: 10px !important;
  transition: var(--tv-transition) !important;
}

body.tv-mode .favorite-btn:hover,
body.tv-mode .favorite-btn:focus {
  transform: scale(1.05) !important;
  box-shadow: var(--tv-focus-glow) !important;
}

/* ============================================
   RATING
   ============================================ */
body.tv-mode .rating-block,
body.tv-mode .content-rating-block {
  padding: 24px !important;
  background: rgba(255,255,255,0.04) !important;
  border-radius: 12px !important;
}

body.tv-mode .rating-value {
  font-size: 40px !important;
  font-weight: 800 !important;
  color: var(--tv-focus-color) !important;
}

body.tv-mode .star-btn {
  width: 44px !important;
  height: 44px !important;
  font-size: 16px !important;
  border-radius: 8px !important;
  transition: var(--tv-transition) !important;
}

body.tv-mode .star-btn:hover,
body.tv-mode .star-btn:focus {
  background: var(--tv-focus-color) !important;
  color: #000 !important;
  transform: scale(1.1) !important;
}

/* ============================================
   SIMILAR CONTENT
   ============================================ */
body.tv-mode .similar-grid {
  display: flex !important;
  gap: 18px !important;
  overflow-x: auto !important;
  padding-bottom: 16px !important;
}

body.tv-mode .similar-card-v2 {
  flex: 0 0 200px !important;
  width: 200px !important;
  cursor: pointer !important;
  transition: var(--tv-transition) !important;
}

body.tv-mode .similar-card-v2:hover,
body.tv-mode .similar-card-v2:focus {
  transform: scale(1.05) !important;
  box-shadow: var(--tv-focus-glow) !important;
}

/* ============================================
   4K SCALING
   ============================================ */
@media (min-width: 2560px) {
  body.tv-mode .content-detail-page .col-lg-3.col-sm-4 {
    width: 450px !important;
  }
  
  body.tv-mode .hero-title {
    font-size: 44px !important;
  }
  
  body.tv-mode .trailer-box {
    flex: 0 0 280px !important;
    width: 280px !important;
    height: 420px !important;
  }
  
  body.tv-mode .rating-value {
    font-size: 52px !important;
  }
}