/* ================================
   1. Базовий контейнер для фільмів
   ================================ */
.top-movie {
  margin: 20px 0;                    /* відступ зверху/знизу блоку */
}
.top-movie .top-header {
  display: flex;                     /* горизонтально вирівнюємо заголовок і стрілку */
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;               /* відступ під заголовком */
}
.top-movie .top-header h2 {
  font-size: 22px;                   /* розмір тексту заголовка */
  color: #fff;                       /* білий колір заголовка */
  margin: 0;
}
.top-movie .top-header .top-arrow {
  text-decoration: none;             /* без підкреслення посилання */
  margin-left: 8px;                  /* відступ від тексту заголовка */
}

/* ================================
   2. Slider wrapper + приховування overflow
   ================================ */
.top-movie-wrapper {
  position: relative;                /* для абсолютного позиціювання кнопок */
  overflow: hidden;                  /* ховаємо зайві елементи за межами wrapper */
}

/* ================================
   3. Прокрутка (films)
   ================================ */
#top-scroll {
  display: flex;                     /* робимо горизонтальну стрічку */
  gap: 10px;                         /* відстань між постерами */
  overflow-x: auto;                  /* включаємо горизонтальну прокрутку */
  scroll-behavior: smooth;           /* плавна прокрутка */
  padding: 10px 0;                   /* вертикальні відступи всередині стрічки */
  margin: 0 40px;                    /* «зсуваємо» стрічку всередину, щоб стрілки були за постерами */
}
#top-scroll::-webkit-scrollbar {
  display: none;                     /* ховаємо нативний скролбар */
}

/* ================================
   4. Кнопки прокрутки (films)
   ================================ */
.scroll-left,
.scroll-right {
  position: absolute;
  top: 50%;                          /* по вертикалі по центру wrapper */
  transform: translateY(-50%);
  background: transparent;           /* прозорий фон */
  border: none;                      /* без рамки */
  font-size: 30px;                   /* розмір стрілок */
  padding: 4px 8px;                  /* відступи всередині кнопки */
  color: #fff;                       /* білий колір стрілок */
  cursor: pointer;
  z-index: 1;                        /* під постерами */
}
.scroll-left { left: 0; }           
.scroll-right { right: 0; }

/* ================================
   5. Елемент (постер) — загальні стилі для всіх блоків
   ================================ */
.top-movie-item,
.top-movie-item,
#trends-scroll .top-movie-item {
  flex: 0 0 auto;                   /* не стискаємо постери, фіксована ширина */
  width: 150px;                     /* стандартна ширина постера */
  display: flex;
  flex-direction: column;
  position: relative;               
  z-index: 2;                       /* поверх кнопок */
}

/* ================================
   6. Постер: рамка, співвідношення сторін
   ================================ */
.top-poster,
.top-poster,
#trends-scroll .top-poster {
  position: relative;
  width: 100%;
  aspect-ratio: 2/3;                /* 2:3 — стандартне співвідношення постера */
  overflow: hidden;
  border-radius: 8px;               /* округлені кути */
}
.top-poster img,
.top-poster img,
#trends-scroll .top-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;                /* обрізаємо/масштабуємо зображення */
  display: block;
}

/* ================================
   7. Бейджі: тип відео та вік
   ================================ */
.badge-type,
#trends-scroll .badge-type {
  position: absolute;
  top: 6px;
  left: 6px;
  background: #ff5722;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 10px;
  text-transform: uppercase;
  z-index: 2;
}
.badge-age,
#trends-scroll .badge-age {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 11px;
  padding: 2px 5px;
  border-radius: 6px;
  font-weight: bold;
}

/* ================================
   8. Hover-info: деталі при наведенні
   ================================ */
.hover-info,
#trends-scroll .hover-info {
  position: absolute;
  inset: 0;                          /* розтягуємо на весь блок poster */
  background: rgba(0,0,0,0.7);
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-size: 12px;
}
.top-poster:hover .hover-info {
  opacity: 1;                        /* показуємо блок при ховері */
}

/* ================================
   9. Внутрішні елементи hover-info
   ================================ */
.rating {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 6px;
}
.info-block {
  background: rgba(0,0,0,0.5);
  border-radius: 6px;
  padding: 5px;
}
.info-line {
  margin-bottom: 2px;
}

/* ================================
   10. Підпис під постером: назва та мета
   ================================ */
.poster-bottom-info,
#trends-scroll .poster-bottom-info {
  margin-top: 6px;
  text-align: left;
  color: #fff;
  font-size: 13px;
}
.poster-title,
#trends-scroll .poster-title {
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.poster-meta,
#trends-scroll .poster-meta {
  font-size: 12px;
  opacity: 0.7;
}

/* ================================
   Секція: СЕРІАЛИ
   ================================ */
.top-series {
  margin: 20px 0;                    /* відступ блоку */
}
.top-series .top-header {
  display: flex;                     /* заголовок + стрілка в ряд */
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.top-series .top-header h2 {
  font-size: 22px;
  color: #fff;
  margin: 0;
}
.top-series .top-header .top-arrow {
  text-decoration: none;
  margin-left: 8px;
}

/* Обгортка слайдера серіалів */
.top-series-wrapper {
  position: relative;                /* для абсолютних стрілок */
  overflow: hidden;                  /* ховаємо зайве за краями */
}

/* Горизонтальна стрічка */
#series-scroll {
  display: flex;
  gap: 10px;                         /* відстань між постерами */
  overflow-x: auto;                  /* горизонтальний скрол */
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding: 10px 0;
  margin: 0 40px;                    /* підсуньте стрічку, щоб стрілки були “за” постерами */
}
#series-scroll::-webkit-scrollbar {
  display: none;                     /* приховуємо дефолтний скролбар */
}

/* Кнопки прокрутки */
.top-series-wrapper .scroll-left,
.top-series-wrapper .scroll-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  font-size: 30px;                   /* розмір стрілок */
  color: #fff;
  padding: 4px 8px;
  cursor: pointer;
  z-index: 1;                        /* під постерами */
}
.top-series-wrapper .scroll-left { left: 0; }
.top-series-wrapper .scroll-right { right: 0; }

/* стрілки підсвічуються при наведенні */
.scroll-left:hover,
.scroll-right:hover {
  color: #9ab96d;
  /* якщо хочете трохи фонової підсвітки — розкоментуйте наступний рядок: */
  background-color: rgba(154,185,109,0.1);
}


/* Кожен постер поверх кнопок */
#series-scroll .top-movie-item {
  flex: 0 0 auto;                   /* не стискається, фіксована ширина */
  width: 150px;
  display: flex;
  flex-direction: column;
  z-index: 2;                       /* поверх кнопок */
}

/* ================================
   Секція: Что сейчас ищут
   ================================ */

/* обгортка слайдера */
.top-trends-wrapper {
  position: relative;
  overflow: hidden;
}

/* горизонтальна стрічка */
#trends-scroll {
  display: flex;              /* <-- обов’язково flex */
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 12px 0;
  margin: 0 40px;             /* підсуває стрічку, щоб стрілки були за постерами */
}
#trends-scroll::-webkit-scrollbar {
  display: none;
}

/* кнопки прокрутки */
.top-trends-wrapper .scroll-left,
.top-trends-wrapper .scroll-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
  z-index: 1;
  padding: 4px;
}
.top-trends-wrapper .scroll-left { left: 0; }
.top-trends-wrapper .scroll-right { right: 0; }

/* стрілки підсвічуються при наведенні */
.scroll-left:hover,
.scroll-right:hover {
  color: #9ab96d;
  /* якщо хочете трохи фонової підсвітки — розкоментуйте наступний рядок: */
  background-color: rgba(154,185,109,0.1);
}

/* кожен елемент поверх стрілок */
#trends-scroll .top-movie-item {
  flex: 0 0 auto;
  width: 150px;
  display: flex;
  flex-direction: column;
  z-index: 2;
}