/**
 * TV CATALOG - Каталог для Smart TV
 */

/* ============================================
   PAGE LAYOUT
   ============================================ */
body.tv-mode .catalog-public {
  padding: 30px 0 !important;
}

body.tv-mode .catalog-public .container--wide {
  max-width: 100% !important;
  padding: 0 50px !important;
}

/* ============================================
   HEADER
   ============================================ */
body.tv-mode .catalog-public .heading.style-1 {
  padding: 0 !important;
  margin-bottom: 24px !important;
}

body.tv-mode .catalog-public .heading.style-1 h2 {
  font-size: 34px !important;
  font-weight: 700 !important;
}

/* ============================================
   CATEGORY TABS
   ============================================ */
body.tv-mode .catalog-tabs,
body.tv-mode .category-tabs {
  display: flex !important;
  gap: 10px !important;
  padding: 0 !important;
  margin-bottom: 30px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  list-style: none !important;
}

body.tv-mode .catalog-tabs::-webkit-scrollbar {
  display: none !important;
}

body.tv-mode .catalog-tab,
body.tv-mode .category-tab {
  padding: 14px 30px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  background: rgba(255,255,255,0.08) !important;
  border: 2px solid transparent !important;
  border-radius: 10px !important;
  color: #fff !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: var(--tv-transition) !important;
  cursor: pointer !important;
}

body.tv-mode .catalog-tab:hover,
body.tv-mode .catalog-tab:focus,
body.tv-mode .category-tab:hover,
body.tv-mode .category-tab:focus {
  background: var(--tv-focus-color) !important;
  color: #000 !important;
  transform: scale(1.03) !important;
}

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

/* ============================================
   FILTERS
   ============================================ */
body.tv-mode #filterForm {
  display: flex !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-bottom: 30px !important;
  padding: 24px !important;
  background: rgba(255,255,255,0.03) !important;
  border-radius: 14px !important;
}

body.tv-mode .filter-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

body.tv-mode .filter-group label {
  font-size: 12px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.5) !important;
}

body.tv-mode .filter-group select,
body.tv-mode .filter-group input {
  padding: 14px 20px !important;
  font-size: 15px !important;
  background: rgba(255,255,255,0.08) !important;
  border: 2px solid transparent !important;
  border-radius: 10px !important;
  color: #fff !important;
  min-width: 180px !important;
  transition: var(--tv-transition) !important;
}

body.tv-mode .filter-group select:focus,
body.tv-mode .filter-group input:focus {
  border-color: var(--tv-focus-color) !important;
  box-shadow: var(--tv-focus-glow) !important;
}

body.tv-mode .filter-submit,
body.tv-mode .btn-filter {
  padding: 14px 32px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  background: var(--tv-focus-color) !important;
  color: #000 !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: var(--tv-transition) !important;
}

body.tv-mode .filter-submit:hover,
body.tv-mode .filter-submit:focus {
  transform: scale(1.03) !important;
  box-shadow: var(--tv-focus-glow) !important;
}

/* ============================================
   CONTENT GRID - БОЛЬШИЕ КАРТОЧКИ
   ============================================ */
body.tv-mode .catalog-public .content-grid-adaptive,
body.tv-mode .catalog-public .row:has(.content-card) {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 30px !important;
  padding: 0 !important;
}

body.tv-mode .catalog-public .row > [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

/* Cards in grid */
body.tv-mode .catalog-public .content-card {
  width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
}

body.tv-mode .catalog-public .content-card__poster-wrapper {
  aspect-ratio: 2/3 !important;
  height: auto !important;
  min-height: 420px !important;
}

/* Контрастные названия для каталога */
body.tv-mode .catalog-public .content-card__title {
  color: #ffffff !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,1), 0 4px 20px rgba(0,0,0,0.8) !important;
}

body.tv-mode .catalog-public .content-card__body {
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.5)) !important;
  padding: 18px 10px 14px !important;
}

/* ============================================
   LIST VIEW
   ============================================ */
body.tv-mode .anime-list-card {
  display: flex !important;
  gap: 20px !important;
  padding: 20px !important;
  background: rgba(255,255,255,0.04) !important;
  border-radius: 12px !important;
  margin-bottom: 16px !important;
  transition: var(--tv-transition) !important;
  cursor: pointer !important;
  border: 2px solid transparent !important;
}

body.tv-mode .anime-list-card:hover,
body.tv-mode .anime-list-card:focus {
  background: rgba(0,212,255,0.1) !important;
  border-color: var(--tv-focus-color) !important;
}

body.tv-mode .list-poster-wrap {
  flex: 0 0 120px !important;
  width: 120px !important;
}

body.tv-mode .list-poster-wrap img {
  width: 100% !important;
  height: 180px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}

body.tv-mode .list-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
}

body.tv-mode .list-desc {
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: rgba(255,255,255,0.7) !important;
}

body.tv-mode .btn-list-watch {
  padding: 14px 28px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
}

/* ============================================
   PAGINATION
   ============================================ */
body.tv-mode .pagination-wrape {
  margin-top: 40px !important;
}

body.tv-mode .pagination {
  display: none !important;
}

/* TV: "↓ Ещё" instead of paging */
body.tv-mode .tv-load-more {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 26px auto 0;
  padding: 18px 34px;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(255,255,255,0.18);
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--tv-transition) !important;
}
body.tv-mode .tv-load-more:hover,
body.tv-mode .tv-load-more:focus {
  background: var(--tv-focus-color) !important;
  border-color: var(--tv-focus-color) !important;
  color: #000 !important;
  transform: scale(1.03) !important;
  box-shadow: var(--tv-focus-glow) !important;
}

/* Not TV: hide the extra link */
body:not(.tv-mode) .tv-load-more {
  display: none !important;
}

/* ============================================
   2K SCALING
   ============================================ */
@media (min-width: 2560px) {
  body.tv-mode .catalog-public .content-grid-adaptive {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important;
    gap: 40px !important;
  }
  
  body.tv-mode .catalog-public .content-card__poster-wrapper {
    min-height: 520px !important;
  }
  
  body.tv-mode .catalog-public .content-card__title {
    font-size: 24px !important;
  }
  
  body.tv-mode .catalog-public .heading.style-1 h2 {
    font-size: 48px !important;
  }
  
  body.tv-mode .catalog-tab {
    padding: 20px 44px !important;
    font-size: 22px !important;
  }
}

/* ============================================
   4K SCALING
   ============================================ */
@media (min-width: 3840px) {
  body.tv-mode .catalog-public .content-grid-adaptive {
    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)) !important;
    gap: 50px !important;
  }
  
  body.tv-mode .catalog-public .content-card__poster-wrapper {
    min-height: 660px !important;
  }
  
  body.tv-mode .catalog-public .content-card__title {
    font-size: 30px !important;
  }
  
  body.tv-mode .catalog-tab {
    padding: 24px 52px !important;
    font-size: 26px !important;
  }
}