.fullstory-banner {
    position: relative;
    width: 100%;
    height: 300px;
}

.fullstory-banner-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

#youtube-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
     background: linear-gradient(180deg, rgba(22, 22, 22, 0.7) 0%, rgba(22, 22, 22, 0) 48.71%),
                radial-gradient(313% 78% at 0% 50%, rgba(22, 22, 22, 0.5) 46.05%, rgba(22, 22, 22, 0) 100%);
}
.banner-overlay-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.watch-full-trailer-btn {
    position: relative;
    border: none;
    cursor: pointer;
    height: 54px;
    right: 150px;
    bottom: 70px;
    display: flex;
    justify-content: center; 
    align-items: center; 
    padding: 0 16px;
    border-radius: 12px;
    background-color:  rgb(18, 18, 18); 
    color: #ffff; 
    box-sizing: border-box;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.trailer-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
}

.trailer-modal-content {
    display: flex;
    background-color: #181818;
    padding: 20px;
    border-radius: 10px;
    position: absolute;
    left: 34%;
    top: 30%;
}

.close-btn {
    position: absolute;
    top: -4px;
    right: 5px;
    font-size: 24px;
    cursor: pointer;
    color: #fff;
}

.fullstory-poster {
    position: absolute;
    width: 301px;
    height: 425px;
    left: 64px;
    top: 174px;
    border-radius: 12px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.fullstory-poster img {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
}

.anime-content {
    position: absolute;
    width: 908px;
    height: 174px;
    left: 428px;
    top: 348px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.anime-title-fullstory {
    font-size: 34px;
    font-weight: 700;
    line-height: 44px;
    letter-spacing: -1.5px;
    color: #ffffff;
    text-align: left;
    text-transform: capitalize;
    margin: 0;
}
.fullstory-container {
    display: flex;
    align-items: flex-start;
    margin-top: 350px;
}
.anime-rating-fullstory {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 16px 0px; 
}

.rating-star-fullstory {
    width: 49px;
    height: 29px;
    margin-right: 10px;
}

.rating-imdb-fullstory {
    width: 40px;
    height: 28px;
    margin-right: 10px;
}

.rating-mal-fullstory {
    width: 40px;
    height: 28px;
    margin-right: 10px;
}

.rating-wa-fullstory {
    width: 100px;
    height: 29px;
    margin-right: 10px;
}

.rating-shikimori-fullstory {
    width: 80px;
    height: 28px;
    margin-right: 10px;
}


.rating-value-fullstory {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    color: rgb(230, 230, 230);
    letter-spacing: 0px;
    margin-right: 10px;
}

/* List Buttons (Блок с кнопками статуса) */
.list-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 16px 0px;
}

/* Button (Кнопки статуса) */
.list-button {
    width: 150px;
    height: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    background-color: rgb(41, 41, 41); /* Цвет по умолчанию */
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    padding: 14px 24px;
}

.list-button-plus {
    width: 60px;
    height: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    background-color: rgb(41, 41, 41);
    cursor: pointer;
    border: none;
    padding: 14px 24px;
}


.list-plus-icon {
    width: 18px;
    height: 24px;
}

.Bookmark-button-icon {
     width: 14px;
    height: 20px;
    margin-right: 8px;
}

.Eye-button-icon {
    width: 24px;
    height: 18px;
    margin-right: 8px;
}

.Tick-button-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

.watch-button-icon {
    width: 15px;
    height: 24px;
    margin-right: 8px;
}

.watch-button {
      width: 210px;
    height: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    background-color: rgb(41, 41, 41); /* Цвет по умолчанию */
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    padding: 14px 24px;
    transition: background-color 0.3s ease;
    margin-left: 375px; 
}


/* Цвета для активных кнопок */
.list-button.selected-watching {
    background-color: rgb(65, 135, 45); /* Зелёный (Смотрю) */
}

.list-button.selected-want_to_watch {
    background-color: rgb(45, 85, 170); /* Синий (Посмотрю) */
}

.list-button.selected-watched {
    background-color: rgb(180, 50, 50); /* Красный (Смотрел) */
}



/* Collection Button (Кнопка "В коллекцию") */
.collection-button {
    width: 210px;
    height: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    background-color: rgb(41, 41, 41); /* Цвет по умолчанию */
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    padding: 14px 24px;
    transition: background-color 0.3s ease;
    margin-left: auto; /* Устанавливаем кнопку "В коллекцию" с правого края */
}

/* Иконка плюса для кнопки "В коллекцию" */
.plus-icon {
    width: 14px;
    height: 24px;
    margin-right: 8px;
}

.tabs-wrapper-full {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-left: 64px;
    padding-right: 88px;
    position: relative;
}
.tab-full {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    cursor: pointer;
    position: relative;
    color: #808080;
    transition: border-bottom 0.3s ease, color 0.3s;
}

.tab-text-full {
    font-size: 20px;
    font-weight: 600;
}

.tab-full.active {
    color: #ffffff;
    border-bottom: 2px solid #808080;
}

.tab-content {
    padding: 20px;
    display: none;
}

.tab-content.active {
    display: block;
}

/* Контейнер для блока "Обзор" */
.overview-container {
    display: flex;
    flex-direction: column;
    padding: 0px 56px; /* Отступы по бокам */
}

/* Контейнер для блоков "Детали" и "Описание" */
.details-description-wrapper {
    display: flex;
    flex-direction: row; /* Разместить блоки "Детали" и "Описание" в строку */
    gap: 64px; /* Отступ между блоками */
}

/* Заголовок "Детали" */
.details-title, .description-title, .slider-title {
    color: rgb(255, 255, 255);
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: 0px;
    text-align: left;
    text-transform: capitalize;
    margin-bottom: 16px; /* Отступ от заголовка к содержимому */
}

/* Блок "Детали" */
.details-block {
    display: flex;
    flex-direction: column;
    gap: 16px; /* Отступ между строками */
    width: 500px; /* Ширина блока "Детали" */
}

/* Каждая строка "Детали" (лейбл и значение) */
.details-item {
    display: flex;
    justify-content: space-between; /* Распределение по двум сторонам */
    gap: 24px; /* Отступ между лейблом и значением */
}

/* Лейблы слева (названия характеристик) */
.details-label {
    flex: 0 0 230px; /* Фиксированная ширина для лейблов */
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: rgb(192, 192, 199);
    text-align: left;
}

/* Значения справа (значения характеристик) */
.details-value {
    flex-grow: 1; /* Занимает оставшееся пространство */
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: rgb(255, 255, 255);
    text-align: left;
}

/* Блок "Описание" */
.description-block {
    height: 600px;
    padding: 0px;
    flex: none;
    order: 1;
    flex-grow: 0;
    margin: 0px 10px;
}
/* Описание аниме */
.description-content {
   color: rgb(192, 192, 199);
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    text-align: left;
    width: 1100px;
    height: 476px;
    padding: 0px;
}

/* Общий контейнер "Детали" и "Описание" */
.details-description-wrapper {
    display: flex;
    flex-direction: row;
    gap: 64px; /* Отступ между блоками "Детали" и "Описание" */
    width: 100%; /* Контейнер на всю ширину */
}


/* Слайдер "Специально для тебя" */
.slider-block {
    margin-top: 64px; /* Отступ от блока "Описание" */
}

.slider-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    color: #ffffff;
    text-transform: capitalize;
    margin-bottom: 16px;
}
/* Стили блока персонажей */
.characters-title {
    color: rgb(255, 255, 255);
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    text-transform: capitalize;
    margin-bottom: 20px;
}

.characters-container {
    gap: 24px;
    overflow: hidden;
    grid-template-columns: repeat(8, 1fr);
    display: grid;
}


@media (max-width: 1200px) {
    .characters-container {
        grid-template-columns: repeat(6, 1fr); /* 6 колонок на экранах до 1200px */
    }
}

@media (max-width: 992px) {
    .characters-container {
        grid-template-columns: repeat(4, 1fr); /* 4 колонки на экранах до 992px */
    }
}

@media (max-width: 768px) {
    .characters-container {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки на экранах до 768px */
    }
}


.character-poster {
    width: 192px;
    height: 272px;
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.character-poster img {
    border-radius: 12px;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.overview-character-poster {
    position: relative;
    width: 192px;
    height: 272px;
}

.overview-staff-poster {
    position: relative;
    width: 192px;
    height: 272px;
}

.staff-poster {
    width: 192px;
    height: 272px;
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.staff-poster img {
    border-radius: 12px;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.character-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 272px;
    background: linear-gradient(180deg, rgba(6, 6, 6, 0) 33.456%, rgba(6, 6, 6, 0.8) 100%);
    border-radius: 12px;
}

.character-name {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: left;
    transition: opacity 0.3s ease; /* Плавный переход */
}

.character-role {
    font-size: 14px;
    color: rgb(192, 192, 199);
    transition: opacity 0.3s ease; /* Плавный переход */
}

.poster-info-ch {
    position: absolute;
    bottom: 4px;
    left: 8.33%;
    right: 8.33%;
    color: #fff;
    width: 160px;
    /*height: 48px;*/
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0px 0px 16px;
}

.actor-info,
.actor-image {
    position: absolute;
    opacity: 0; /* Элемент скрыт по умолчанию */
    transition: opacity 0.3s ease; /* Плавный переход */
}

.character-info,
.character-image {
    position: absolute;
    opacity: 1; /* Элемент видим по умолчанию */
    transition: opacity 0.3s ease; /* Плавный переход */
}

/* Плавно показываем текст и изображение актера при наведении */
.overview-character-poster:hover .actor-info,
.overview-character-poster:hover .actor-image {
    opacity: 1;
}

/* Плавно скрываем текст и изображение персонажа при наведении */
.overview-character-poster:hover .character-info,
.overview-character-poster:hover .character-image {
    opacity: 0;
}

/* Плавные переходы для текста персонажа */
.overview-character-poster:hover .character-name,
.overview-character-poster:hover .character-role {
    opacity: 0;
}

/* Плавные переходы для текста актера */
.overview-character-poster:hover .actor-name,
.overview-character-poster:hover .actor-role {
    opacity: 1;
}


 .watch-full-screen-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #121212;
    display: none;
    z-index: 1000;
    overflow-y: auto;
  }

  .watch-full-screen-modal.active {
    display: block;
  }

  .watch-modal-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
  }

/*страница просмотра*/

.promoter-page {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.navigation-buttons {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 10px 0px;
}

.back-button, .upload-button {
    display: flex;
    align-items: center;
    gap: 4px; /* Расстояние между текстом и иконкой */
    background: none;
    border: none;
    color: rgb(255, 255, 255);
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    cursor: pointer;
    padding: 14px 0px 16px 0px;
    filter: brightness(0) invert(1);
}

.back-button:hover, .upload-button:hover {
    color: #ddd; /* Цвет при наведении */
}

/* Стили для плеера */
.video-player-container {
    position: static;
    width: 1272px;
    max-width: -webkit-fill-available;
    flex: none;
    order: 0;
    flex-grow: 0;
    margin: 10px 0;
}

.video-player-container video {
    width: 100%;
    height: 100%;
}

.screenshots-block {
    position: absolute;
    margin-top: 20px;
}

.screenshots-gallery {
    margin-left: -38px;
}

ul.xfieldimagegallery.anime_screens {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.screenshots-gallery a {
    display: block;
}

.screenshots-gallery img {
    width: 270px;
    height: auto;
    border-radius: 5px;
    transition: transform 0.3s ease;
}

.screenshots-gallery img:hover {
    transform: scale(1.1);
}


.list-bookmark-b {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
}

.list-coll-watch {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
}