/* ============================================
   COMPONENTS.CSS - Стили компонентов интерфейса
   Содержит стили для:
   - Шапка сайта и навигация
   - Подвал (футер)
   - Видео плеер
   - Комментарии
   - Трейлеры
   - Рейтинги
   - Блог
   ============================================ */

/* ============================================
   ШАПКА САЙТА И НАВИГАЦИЯ
   ============================================ */
/* ВАЖНО:
   Базовые стили шапки и меню держим в одном месте: static/css/core/header.css.
   Здесь оставляем только стили компонентов (футер/плеер/комментарии и т.д.), чтобы не было дублей. */

/* ============================================
   КНОПКИ И ФОРМЫ
   ============================================ */
/* .anime-btn удалён - не используется в шаблонах */

/* ============================================
   РЕКЛАМНЫЕ СЛОТЫ (бывший css/core/ads.css)
   ============================================ */
.ad-slot {
  margin: 20px 0;
  padding: 15px;
  background: var(--color-black-light, rgba(0, 0, 0, 0.3));
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  text-align: center;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ad-slot-sidebar-top {
  margin-bottom: 30px;
}

.ad-slot-sidebar-bottom {
  margin-top: 30px;
}

.ad-slot-under-player {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* В шаблонах используется .ad-header-banner, в старом css был .ad-slot-header-banner.
   Оставляем оба селектора для совместимости. */
.ad-header-banner,
.ad-slot-header-banner {
  width: 100%;
  margin: 0;
  padding: 10px;
  background: transparent;
  border: none;
  border-radius: 0;
}

.ad-slot-content-between {
  margin: 40px 0;
}

@media (max-width: 768px) {
  .ad-slot {
    margin: 15px 0;
    padding: 10px;
    min-height: 80px;
  }

  .ad-header-banner,
  .ad-slot-header-banner {
    padding: 5px;
  }
}

/* ============================================
   ХЛЕБНЫЕ КРОШКИ (BREADCRUMB) из layout.css
   ============================================ */
.breadcrumb {
  margin: 0;
}

.breadcrumb-content {
  display: block;
}

.breadcrumb .breadcrumb-content ul {
  margin: 30px 0 0;
  padding: 0;
}

.breadcrumb .breadcrumb-content li {
  display: inline-block;
  position: relative;
  font-weight: 400;
  font-size: 20px;
  margin-right: 30px;
}

.breadcrumb .breadcrumb-content li:after {
  content: "/";
  color: var(--color-dark-grey, #616161);
  font-size: 20px;
  position: absolute;
  top: 1px;
  right: -20px;
}

.breadcrumb .breadcrumb-content li:last-child:after {
  display: none;
}

.breadcrumb .breadcrumb-content li a {
  color: var(--color-grey-light, #d4d4d4);
  font-size: 20px;
}

.breadcrumb .breadcrumb-content li a:hover,
.breadcrumb .breadcrumb-content li a.active {
  color: var(--color-primary, #F5CF49);
}

@media only screen and (max-width: 991px) {
  .breadcrumb .breadcrumb-content li {
    font-size: 16px;
    margin-right: 20px;
  }
  
  .breadcrumb .breadcrumb-content li:after {
    right: -15px;
  }
}

/* ============================================
   ПАГИНАЦИЯ из layout.css
   ============================================ */
.pagination-wrape {
  padding: 30px 0 0 0;
  text-align: center;
}

ul.pagination {
  display: block;
}

ul.pagination li {
  display: inline-block;
  margin: 0 15px;
}

ul.pagination li a {
  line-height: 42px;
  width: 42px;
  text-align: center;
  color: var(--color-grey-light, #d4d4d4);
  transition: all 0.5s;
  display: block;
  padding: 0 10px;
  font-size: 32px;
  border: 1px solid var(--color-medium-grey, #b4b4b4);
  border-radius: 4px;
  background: var(--color-dark-grey, #616161);
}

ul.pagination li a:focus {
  outline: 0;
  box-shadow: none;
  color: var(--color-grey-light, #d4d4d4);
}

ul.pagination li a:hover {
  color: var(--color-primary, #F5CF49);
  border-color: var(--color-primary, #F5CF49);
}

ul.pagination li a.active {
  color: var(--color-black, #111111);
  background: var(--color-primary, #F5CF49);
  border-color: var(--color-primary, #F5CF49);
}

/* Fix: шаблоны используют .page-link и активный класс .current (а не .active).
   Плюс Bootstrap может перетирать фон у .page-link — поэтому даём более специфичные правила. */
.pagination-wrape .pagination .page-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  line-height: 1;
  font-size: 18px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.22);
}

.pagination-wrape .pagination .page-link:hover{
  border-color: var(--color-primary, #F5CF49);
  color: var(--color-primary, #F5CF49);
}

.pagination-wrape .pagination .page-link.current,
.pagination-wrape .pagination .page-link.active,
.pagination-wrape .pagination .page-item.active .page-link{
  background: var(--color-primary, #F5CF49);
  border-color: var(--color-primary, #F5CF49);
  color: #000;
}

.pagination-wrape .pagination .page-link.arrow{
  font-size: 16px;
}

/* "..." — это span.page-link, делаем читабельным */
.pagination-wrape .pagination span.page-link{
  cursor: default;
  opacity: 0.85;
}

/* Light theme: фон и текст должны быть контрастными */
html[data-theme="light"] .pagination-wrape .pagination .page-link,
html[data-theme="light_japan"] .pagination-wrape .pagination .page-link{
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.16);
  color: rgba(0,0,0,0.78);
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}

html[data-theme="light"] .pagination-wrape .pagination .page-link:hover,
html[data-theme="light_japan"] .pagination-wrape .pagination .page-link:hover{
  color: var(--color-primary, #F5CF49);
  border-color: var(--color-primary, #F5CF49);
}

/* Light themes: ensure current page remains highlighted (was being overridden by the light base rule above) */
html[data-theme="light"] .pagination-wrape .pagination .page-link.current,
html[data-theme="light_japan"] .pagination-wrape .pagination .page-link.current,
html[data-theme="light"] .pagination-wrape .pagination .page-link.active,
html[data-theme="light_japan"] .pagination-wrape .pagination .page-link.active,
html[data-theme="light"] .pagination-wrape .pagination .page-item.active .page-link,
html[data-theme="light_japan"] .pagination-wrape .pagination .page-item.active .page-link{
  background: var(--color-primary, #F5CF49) !important;
  border-color: var(--color-primary, #F5CF49) !important;
  color: #ffffff !important;
}

/* ============================================
   РАСПИСАНИЕ из layout.css
   ============================================ */
.schedule {
  position: relative;
}

.schedule-box {
  position: relative;
}

/* ============================================
   DROPDOWN (Bootstrap) из layout.css
   ============================================ */
.dropdown-toggle::after {
  display: none;
}

.dropdown-menu {
  animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.dropdown-menu.show {
  background: var(--color-black-light, #242424);
  color: var(--color-dark-grey, #616161);
  padding: 10px;
  border-radius: 15px;
  border: 1px solid var(--color-medium-grey, #b4b4b4);
}

.dropdown-menu.show li {
  list-style: none;
  font-weight: 400;
  font-size: 16px;
  color: var(--color-grey-light, #d4d4d4);
}

/* ============================================
   ПОДВАЛ (ФУТЕР)
   ============================================ */
/* .footer-widget удалён - не используется в шаблонах */

/* ============================================
   ВИДЕО ПЛЕЕР
   ============================================ */
.video {
  position: relative;
}

.video .video-box {
  display: none;
}

.video .img-box {
  display: block;
}

/* Кнопка воспроизведения видео */
.video .play-btn {
  cursor: pointer;
  font-size: 40px;
  width: 80px;
  height: 80px;
  padding: 12px 24px;
  border-radius: 50%;
  background: var(--color-primary, #F5CF49);
  color: var(--color-black, #111111);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.video .play-btn:hover {
  transform: scale(1.1);
  background: var(--color-purple, #A958A5);
  color: var(--color-white, #ffffff);
}

/* Боковая панель видео */
.video-sidebar {
  position: relative;
  height: 600px;
}

.video .video-box video,
.video .img-box {
  height: 600px;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* Контент видео */
.video-content {
  margin: 20px 0;
}

.video-content p {
  font-size: 20px;
  color: var(--color-white, #ffffff);
}

.video-content .text {
  font-size: 18px;
  color: var(--color-grey-light, #d4d4d4);
}

/* Блок серверов озвучки */
.server-blok {
  border: 1px solid var(--color-medium-grey, #b4b4b4);
  border-radius: 10px;
  padding: 20px;
  margin: 20px 0;
}

.server-blok p {
  font-size: 16px;
  color: var(--color-grey-light, #d4d4d4);
  padding: 0 10px;
}

.btn-block {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}

.server-blok .btn-block a {
  padding: 5px 15px;
  font-size: 16px;
  border: 2px solid var(--color-primary, #F5CF49);
  border-radius: 5px;
  color: var(--color-white, #ffffff);
  text-decoration: none;
  transition: all 0.3s ease;
}

.server-blok .btn-block a:hover {
  background: var(--color-primary, #F5CF49);
  color: var(--color-black, #111111);
}

/* ============================================
   КОММЕНТАРИИ
   ============================================ */
.comment {
  position: relative;
}

.comment .heading.style-1 h2 {
  font-size: 40px;
  color: var(--color-white, #ffffff);
  margin-bottom: 30px;
}

.comment-block {
  padding: 20px;
  background: var(--color-black-light, #242424);
  border-radius: 10px;
  margin-bottom: 20px;
}

.comment-block p {
  font-size: 16px;
  color: var(--color-grey-light, #d4d4d4);
}

/* Форма комментария */
.comment-form {
  margin-top: 30px;
}

.comment-form textarea {
  width: 100%;
  padding: 15px;
  background: var(--color-black-light, #242424);
  border: 1px solid var(--color-medium-grey, #b4b4b4);
  border-radius: 10px;
  color: var(--color-white, #ffffff);
  font-size: 16px;
  resize: vertical;
  min-height: 120px;
}

.comment-form textarea:focus {
  outline: none;
  border-color: var(--color-primary, #F5CF49);
}

.comment-form button {
  margin-top: 15px;
  padding: 12px 30px;
  background: var(--color-primary, #F5CF49);
  color: var(--color-black, #111111);
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.comment-form button:hover {
  background: var(--color-purple, #A958A5);
  color: var(--color-white, #ffffff);
}

/* ============================================
   ТРЕЙЛЕРЫ
   ============================================ */
.trailer-content {
  margin: 20px 0;
}

.trailer-content h2 {
  font-size: 28px;
  color: var(--color-white, #ffffff);
  margin-bottom: 10px;
}

.trailer-content p {
  font-weight: 400;
  font-size: 16px;
  display: block;
  color: var(--color-grey-light, #d4d4d4);
  margin-bottom: 5px;
}

.trailer-content p span {
  color: var(--color-white, #ffffff);
}

.trailer-content p b,
.trailer-content p a {
  color: var(--color-primary, #F5CF49);
}

.trailer-content a {
  font-size: 22px;
}

.trailer-content a:hover {
  color: var(--color-purple, #A958A5);
}

/* ============================================
   РЕЙТИНГИ
   ============================================ */
.rating-content {
  padding: 30px 0 0 0px;
}

.rating-content h4 {
  font-family: var(--font-Noir-Pro-Bold, "Noir Pro Bold");
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 18px;
  color: var(--color-white, #ffffff);
  margin-bottom: 15px;
}

.rating-content p {
  font-weight: 400;
  font-size: 20px;
  color: var(--color-medium-grey, #b4b4b4);
}

.rating-content b {
  color: var(--color-dark-grey, #616161);
}

.rating-content span {
  color: var(--color-grey-light, #d4d4d4);
}

/* ============================================
   БЛОГ
   ============================================ */
.blog.style-1 .inner-box {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 15px;
}

.blog.style-1 .inner-box .image-box {
  overflow: hidden;
}

.blog.style-1 .inner-box .image-box img {
  transition: all 0.35s linear 0s;
}

/* Увеличение изображения при наведении */
.blog.style-1 .inner-box:hover .image-box img {
  transform: scale(1.1);
  transition: all 0.35s linear 0s;
}

.blog.style-2 {
  margin: 80px 0 50px 0;
}

.blog.style-2 .inner-box {
  width: 100%;
  height: 550px;
  position: relative;
  border-radius: 15px;
}

/* ============================================
   АДАПТИВНЫЕ СТИЛИ (MEDIA QUERIES)
   ============================================ */
/* .footer-widget media queries удалены - основной блок не используется */


.blog.style-1 .inner-box .image-box img {
  transition: all 0.35s linear 0s;
}

/* Увеличение изображения при наведении */
.blog.style-1 .inner-box:hover .image-box img {
  transform: scale(1.1);
  transition: all 0.35s linear 0s;
}

.blog.style-2 {
  margin: 80px 0 50px 0;
}

.blog.style-2 .inner-box {
  width: 100%;
  height: 550px;
  position: relative;
  border-radius: 15px;
}

/* ============================================
   АДАПТИВНЫЕ СТИЛИ (MEDIA QUERIES)
   ============================================ */
/* .footer-widget media queries удалены - основной блок не используется */