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

/* Стили для кнопок слайдера */
.trending-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; /* Плавное изменение прозрачности */
}

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

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

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

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

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

/* Контейнер для кнопок лайк и дизлайк */
.Bookmark-Eye-Tick {
    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; /* Плавное появление */
}

/* Общие стили для кнопок */
.Bookmark, .Eye, .Tick {
    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 .Bookmark-Eye-Tick {
    opacity: 1; /* Полная видимость */
    visibility: visible; /* Делаем элементы видимыми */
}

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


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

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

.Eye img {
    width: 24px;
    height: 24px;
    overflow: visible;
}

.Tick img {
    width: 24px;
    height: 24px;
    overflow: visible;
}