/* Общие стили для слайдера */
.slider {
    padding: 0 77px;
    position: relative;
    display: flex;
    align-items: center;
    z-index: 4;
    margin-top: -223px;
    overflow: hidden;
}

/* Стили для кнопок слайдера */
.slider-btn {
    position: absolute;
    top: 60%; /* Центрирование по вертикали */
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(255, 255, 255);
    border-radius: 50%;
    box-sizing: border-box;
    cursor: pointer;
    opacity: 0; /* Кнопки изначально невидимы */
    transition: opacity 0.3s; /* Плавное изменение прозрачности */
}
.posters-wrapper {
    display: flex;
    overflow: hidden;
    width: 100%;
    gap: 24px;
  }

/* Положение кнопок */
.slider-btn.left {
    left: calc(-1.2% + 77px);
    z-index: 3;
}

.slider-btn.right {
    right: calc(-1.2% + 77px); 
    z-index: 3;
}

/* Стили для кнопок при наведении */
.slider:hover .slider-btn {
    opacity: 1; /* При наведении на слайдер кнопки становятся видимыми */
}

.slider-btn:hover {
    background: rgb(230, 230, 230);
}

/* Позиционирование кнопок и стрелок внутри них */
.slider-btn img {
    position: absolute;
    width: 14px;
    height: 13px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Позиционирование и стилизация заголовка слайдера */
.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: 20px;
}

/* Стили для контейнера постеров */
.posters {
    position: static;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0px;
}

/* Стили для постеров */
.poster {
    position: relative;
    width: 192px;
}

.trending-slider-content {
    overflow: hidden;
}

.trending-slider-content .poster {
    margin-right: 24px;
}

.no-gap {
    margin-right: 0 !important; /* Убираем отступ у постеров на краях */
}



/* Стили для изображений постеров */
.poster img {
    width: 100%;
    height: 272px;
    border-radius: 12px;
    overflow: hidden;
}

.poster-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;
}

.poster-info {
    position: absolute;
    height: 43px;
    bottom: 4px;
    left: 8.33%;
    right: 8.33%;
    color: #fff;
    width: 164px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0px 0px 16px;
    overflow: hidden;
}

.anime-title {
    position: static;
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    flex: none;
    order: 0;
    flex-grow: 0;
    margin: 0px 0px;
    padding: 0px;
    max-width: 160px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.anime-details {
    position: static;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: rgb(192, 192, 199);
    flex: none;
    order: 1;
    flex-grow: 0;
    margin: 4px 0px;
    padding: 0px;
}

.poster-video {
    position: absolute;
    border-radius: 12px;
    top: 0;
    left: 0;
    width: 192px;
    height: 272px;
    object-fit: cover;
    z-index: 2;
    background-color: transparent;
    opacity: 0; 
    transition: opacity 0.3s ease;
}

.poster:hover .poster-video {
    opacity: 1; /* При наведении видео становится полностью непрозрачным */
}

.rating {
    display: flex;
    bottom: 232px;
    align-items: center;
    position: absolute;
    left: 57px;
    top: 0;
    background: rgb(41, 41, 41);
    border-radius: 0px 0px 12px 12px;
    padding: 8px 12px 12px 12px;
    z-index: 3;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    opacity: 0; /* Начальная прозрачность, делаем кнопки невидимыми */
    visibility: hidden; /* Скрываем элементы */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Плавное появление */
}

.rating-value-contein {
    width: 78px;
    height: 40px;
}

.rating img {
    margin-right: 4px; /* Отступ между звездой и текстом */
    position: relative;
    width: 16.67px;
    height: 15.83px;
    left: 8.35%;
    right: 8.35%;
    top: 8.35%;
    bottom: 12.5%;
}

.rating-value {
    color: rgb(255, 255, 255);
    position: static;
    width: 30px;
    height: 20px;
    flex: none;
    order: 1;
    flex-grow: 0;
    margin: 0px 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
}

/* Контейнер для кнопок лайк и дизлайк */
.like-dislike {
    position: absolute;
    bottom: 16px; /* Отступ от нижнего края постера */
    left: 50%; /* Центрирование контейнера по горизонтали */
    transform: translateX(-50%); /* Смещение контейнера на половину его ширины влево */
    display: flex;
    z-index: 3;
    gap: 8px; /* Расстояние между кнопками */
    opacity: 0; /* Начальная прозрачность, делаем кнопки невидимыми */
    visibility: hidden; /* Скрываем элементы */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Плавное появление */
}

/* Общие стили для кнопок */
.like, .dislike {
    width: 48px;
    height: 48px;
    background: rgb(18, 18, 18); /* Прозрачный черный фон */
    border: none;
    border-radius: 50%; /* Круглая форма кнопки */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.poster:hover .like-dislike {
    opacity: 1; /* Полная видимость */
    visibility: visible; /* Делаем элементы видимыми */
}

.poster:hover .rating  {
    opacity: 1; /* Полная видимость */
    visibility: visible; /* Делаем элементы видимыми */
}

/* Стили для изменения фона кнопок при наведении */
.like:hover, .dislike:hover {
    background: rgb(41, 41, 41); /* Светлый фон при наведении */
    transition: all 0.3s ease;
}

/* Стили для иконок внутри кнопок */
.like img, .dislike img {
    width: 20px;
    height: 19px;
    overflow: visible;
}

/* Стили для изменения иконок кнопок при наведении */
.like:hover img {
    content: url('/templates/kurosaw/img/slider/like_white.svg'); /* Путь к белой иконке лайк */
    transition: all 0.3s ease;
}

.dislike:hover img {
    content: url('/templates/kurosaw/img/slider/dislike_white.svg'); /* Путь к белой иконке дизлайк */
    transition: all 0.3s ease;
}