/* --------------------------------------------- */
/* Общие стили страницы                        */
/* --------------------------------------------- */
*{
    box-sizing: border-box;
}
body {
    background-color: #141414;
    color: #fff;
    margin: 0;
    padding: 0;
}

/* Глобальные ссылки – белые */
a {
    color: #fff;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* Контейнер главной страницы */
.main-container {
    width: 100%;
    max-width: 900px;
    min-height: 400px;
    margin: 200px auto;
    padding: 20px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.1);
}

/* Логотип */
.logo {
    display: flex;
    justify-content: center;
}
.logo img {
    width: 150px;
    height: 60px;
    object-fit: contain;
}

/* Заголовки */
h2{
    text-align: center;
    margin-bottom: 20px;
}

/* Сетка фильмов */
.movie-list {
    display: grid;
    gap: 20px;
    padding: 0;
    list-style: none;
    justify-content: center;
    /* по умолчанию 5 колонок, если не задано иначе классом */
    grid-template-columns: repeat(5, 1fr);
}

/* модификаторы для 5,4 или 3 колонок */
.movie-list.cols-5 { grid-template-columns: repeat(5, 1fr); }
.movie-list.cols-4 { grid-template-columns: repeat(4, 1fr); }
.movie-list.cols-3 { grid-template-columns: repeat(3, 1fr); }
.movie-list.cols-2 { grid-template-columns: repeat(2, 1fr); }
.movie-list.cols-1 { grid-template-columns: repeat(1, 1fr); }


/* ------------------------------------- */
/* Панель выбора кол-ва колонок          */
/* ------------------------------------- */
.grid-controls {
  text-align: right;
  margin-bottom: 16px;
}
.grid-controls button {
  background-color: #1e1e1e;
  color: #fff;
  border: 1px solid #444;
  padding: 6px 12px;
  margin-left: 8px;
  border-radius: 4px;
  cursor: url('/assets/images/pointer.cur'), pointer;
  font-size: 14px;
  transition: background 0.2s, border-color 0.2s;
}
.grid-controls button.active {
  background-color: #e50914;
  border-color: #e50914;
}
/* По умолчанию показываем только десктоп-контролы */
.grid-controls--mobile { display: none; }

/* Карточка фильма в сетке */
.movie-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    transition: transform 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
}
.movie-item:hover .poster-wrapper::before {
    background: rgba(255, 255, 255, 0.3);
}
.movie-item a {
    display: block;
    margin-top: 10px;
    font-weight: bold;
    font-size: 18px;
    color: #fff;
    transition: color 0.3s, text-shadow 0.3s;
}
.movie-item a:hover {
    text-decoration: underline;
}

/* Обёртка для постера */
.poster-wrapper {
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}
.poster-wrapper img {
    width: 100%;
    display: block;
    border-radius: 8px;
    transition: 0.3s;
}
.poster-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;
    transition: background 0.3s;
    pointer-events: none;
}

/* --------------------------------------------- */
/* Горизонтальные слайдеры                      */
/* --------------------------------------------- */
.slider-wrapper {
    position: relative;
}
.slider {
    display: flex;
    overflow-x: auto;
    gap: 14px;
    padding: 10px 0;
    scroll-behavior: smooth;
    margin-bottom: 25px;
}

.slider-nav.left  { left: 8px; }
.slider-nav.right { right: 8px; }
.slider-nav img   { width: 20px; height: 20px; }

/* Кастомный скроллбар для всех .slider и body */
body, .slider {
    scrollbar-width: thin;
    scrollbar-color: #555 #333;
}
body::-webkit-scrollbar,
.slider::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}
body::-webkit-scrollbar-track,
.slider::-webkit-scrollbar-track {
    background: #333;
    border-radius: 4px;
}
body::-webkit-scrollbar-thumb,
.slider::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}
body::-webkit-scrollbar-thumb:hover,
.slider::-webkit-scrollbar-thumb:hover {
    background: #777;
}

/* --------------------------------------------- */
/* Карточка фильма в слайдере                   */
/* --------------------------------------------- */
.movie-card {
    flex: 0 0 160px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    perspective: 1000px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    will-change: transform;
}

.movie-card:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.movie-card a {
    display: block;
}

/* Метка NEW */
.new-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    background: #e50914;
    color: #fff;
    padding: 2px 5px;
    font-size: 10px;
    border-radius: 3px;
}

/* --------------------------------------------- */
/* Вкладки жанров                               */
/* --------------------------------------------- */
.genre-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}
.genre-tab {
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: url('/assets/images/pointer.cur'), pointer;
    transition: background 0.3s;
}
.genre-tab.active,
.genre-tab:hover {
    background: #e50914;
}

/* Заглушки для пустых слайдеров */
.placeholder {
    padding: 10px;
    color: #aaa;
    font-style: italic;
}

/* --------------------------------------------- */
/* Кнопка "Случайный фильм"                     */
/* --------------------------------------------- */
#randomBtn {
    display: block;
    margin: 20px 0;
    padding: 10px 20px;
    background: #e50914;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: url('/assets/images/pointer.cur'), pointer;
    font-size: 16px;
}

/* --------------------------------------------- */
/* Стили киностудий                             */
/* --------------------------------------------- */
.studio-btn {
    display: flex;
    width: 100px;
    min-width: 80px;
    height: 100px;
    padding: 5px;
    background: transparent;
    border: none;
    cursor: url('/assets/images/pointer.cur'), pointer;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.studio-btn:hover {
    transform: scale(1.05);
}
.studio-btn img {
    max-width: 100%;
    object-fit: contain;
    margin-bottom: 5px;
}
.studio-btn span {
    font-size: 13px;
    color: #fff;
    line-height: 1.2;
    word-break: break-word;
}
/* --------------------------------------------- */
/* Минималистичные стили для .sort-form          */
/* --------------------------------------------- */
.sort-form {
  position: relative;
  text-align: right;
  margin: 15px 0 25px;
  font-family: 'Montserrat', sans-serif;
}

.sort-form label {
  font-size: 14px;
  color: #aaa;
  margin-right: 8px;
}

.sort-form select {
  appearance: none;            /* Скрываем стандартную стрелку */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #1e1e1e;   /* Тёмный фон */
  color: #fff;                 /* Белый текст */
  border: 1px solid #444;      /* Тёмно-серая рамка */
  padding: 6px 32px 6px 10px;  /* Левый текст, справа — место для стрелки */
  font-size: 14px;
  border-radius: 4px;
  outline: none;
  transition: border-color 0.2s ease;
  cursor: url('/assets/images/pointer.cur'), pointer;
  min-width: 10px;
  width: 100%;
  max-width: 232px;
}

.sort-form select:focus {
  border-color: #e50914;       /* Подчёркиваем красным при фокусе */
}

/* Псевдоэлемент-стрелка: вправо (белая) */
.sort-form::after {
  content: "▸";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%) rotate(0deg);
  pointer-events: none;
  color: #fff;                 /* Белая стрелка изначально */
  font-size: 20px;
  transition: transform 0.2s ease, color 0.2s ease;
}

/* При фокусе внутри .sort-form: стрелка поворачивается вниз и становится красной */
.sort-form:focus-within::after {
  transform: translateY(-50%) rotate(90deg);
  color: #e50914;
}

/* Опции с тёмным фоном, белым текстом */
.sort-form select option {
  background: #1e1e1e;
  color: #fff;
}

/* Если селект отключён */
.sort-form select:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Стили для выделенной студии */
.studio-btn.active {
  outline: 2px solid #e50914;      /* яркий красный бордер */
  border-radius: 8px;              /* скруглённые углы */
  background: rgba(229, 9, 20, 0.1);/* лёгкий полупрозрачный фон */
}
.studio-btn.active img {
  transform: scale(1.05);          /* чуть увеличиваем иконку */
  transition: transform 0.2s;
}

/* -------------------- АДАПТИВНАЯ ВЕРСИЯ -------------------- */
@media screen and (max-width: 1200px) {
  body {
    margin: 0;
    padding: 0;
    font-size: 16px;
  }

  .main-container {
    margin: 120px auto 50px auto;
    padding: 16px;
    border-radius: 15px;
  }

  .logo img {
    width: 120px;
    height: auto;
  }

  .slider {
    gap: 10px;
    padding: 10px 0;
  }

  /* подписи под постерами */
  .movie-card span:not(.more-arrow) {
    font-size: 14px;
    display: block;
    margin-top: 5px;
    line-height: 1.2;
  }

  .poster-wrapper img {
    height: auto;
    width: 100%;
  }

  .slider-nav {
    width: 30px;
    height: 30px;
  }

  .genre-tabs {
    gap: 6px;
    flex-wrap: wrap;
  }

  .genre-tab {
    font-size: 14px;
    padding: 5px 10px;
  }

  #randomBtn {
    font-size: 14px;
    padding: 10px 16px;
  }

  .studio-btn {
    width: 80px;
    height: 80px;
  }

  .studio-btn img {
    max-height: 60px;
  }

  .modal-telegram-box {
    padding: 20px;
  }

  .modal-telegram-link {
    padding: 10px 16px;
    font-size: 14px;
  }

  .sort-form {
    text-align: left;
    padding: 0 10px;
  }

  .movie-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
      
  }
  .logo{
    display: none;
  }
  .sort-form::after{
    right: 20px;
  }
/* Поиск: только внутри #results-search */
#results-search.search-form-res {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Общие стили для полей */
#results-search.search-form-res input[type="text"] {
  padding: 0.75rem 1rem;
  background-color: #1e1e1e;
  border: 1px solid #444;
  border-radius: 8px;
  color: #f0f0f0;
  font-size: 1rem;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Поле q — занимает ≈2 доли пространства, но не уже 150px */
#results-search.search-form-res input[name="q"] {
  flex: 2 1 200px;
  min-width: 150px;
}

/* Поле year — занимает ≈1 долю, но не уже 100px */
#results-search.search-form-res input[name="year"] {
  flex: 1 1 120px;
  min-width: 100px;
}

/* Плейсхолдер */
#results-search.search-form-res input[type="text"]::placeholder {
  color: #777;
}

/* Фокус */
#results-search.search-form-res input[type="text"]:focus {
  border-color: #cc4444;
  background-color: #2a2a2a;
  outline: none;
  box-shadow: 0 0 0 3px rgba(204, 68, 68, 0.3);
}

/* Кнопка */
#results-search.search-form-res button {
  flex: 0 1 auto;
  white-space: nowrap;
  padding: 0.75rem 1.5rem;
  background-color: #cc4444;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  cursor: url('/assets/images/pointer.cur'), pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

#results-search.search-form-res button:hover {
  background-color: #cc4444;
}

#results-search.search-form-res button:active {
  transform: scale(0.98);
}
.grid-controls--desktop { 
    display: none; 
}
.grid-controls--mobile  { 
    display: block; 
}
}

@media screen and (max-width: 520px) {
    .movie-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}
@media screen and (max-width: 387px) {
    .sort-form::after{
        top: 35px;
    }
}
/* 2) На десктопе (от 991px) показываем только у прокручиваемых слайдеров */
@media screen and (min-width: 991px) {
  .slider-wrapper.scrollable:hover .slider-nav {
    display: flex;
    opacity: 1;
  }
}

/* 3) На мобильных (990px и уже) стрелки ни в каком случае не показываем */
@media screen and (max-width: 768px) {
  .slider-nav {
    display: none;
  }
}

.slider.studio-scroll-container {
  display: flex;             /* flex-контейнер */
  align-items: center;       /* центр по высоте */
  justify-content: flex-start;/* выравниваем слева */
  gap: 10px;                 /* отступы между карточками */
  overflow-x: auto;          /* горизонтальный скролл */
  flex-wrap: nowrap;         /* единственная строка */
}
.random-box {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

/* одинаковая высота для всех контролов */
.random-box select,
.random-box button {
  height: 44px;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
}

/* стили для селекта */
.random-box select {
  cursor: url('/assets/images/pointer.cur'), pointer;
  min-width: 160px;
  padding: 0 16px;
  background: #1f1f1f url('data:image/svg+xml;utf8,<svg fill="%23fff" height="24" viewBox="0 0 24 24" width="24"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 12px center;
  background-size: 16px;
  color: #fff;
  border: 1px solid #333;
  appearance: none;
  transition: border-color 0.3s, background-color 0.3s;
}

.random-box select:focus {
  border-color: var(--accent-color);
}


.random-box button:hover {
  background-color: #c40811;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* адаптив */
@media (max-width: 600px) {
  .random-box {
    flex-direction: column;
    align-items: stretch;
  }
  .random-box select,
  .random-box button {
    width: 100%;
  }
}

.slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: rgba(0,0,0,0.5);
  color: white;
  font-size: 24px;
  text-align: center;
  line-height: 36px;
  border-radius: 50%;
  cursor: url('/assets/images/pointer.cur'), pointer;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s;
  user-select: none;
  align-items: center;
  justify-content: center;
}
.slider-wrapper:hover .slider-nav {
  opacity: 1;
}
/* --------------------------------------------- */
/* Минималистичная карточка «Больше»             */
/* --------------------------------------------- */
.more-card {
  /* Убираем лишние отступы внутри и делаем flex-контейнер, */
  /* чтобы центрировать содержимое по горизонтали и вертикали */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  background: transparent;
}

.more-poster-wrapper {
  /* Делаем более вытянутый прямоугольник с тонкой границей */
  width: 120px;
  height: 120px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  cursor: url('/assets/images/pointer.cur'), pointer;
}

.more-poster-wrapper:hover {
  /* При наведении подчёркиваем красным акцентом */
  background: rgba(229, 9, 20, 0.05);
  border-color: rgba(229, 9, 20, 0.5);
  transform: translateY(-2px);
}

.more-arrow {
  /* Сам стрелочный символ делаем чуть тоньше, меньше размера */
  font-size: 32px;
  color: #e0e0e0;
  transition: color 0.25s ease, transform 0.25s ease;
  line-height: 1;
}

.more-poster-wrapper:hover .more-arrow {
  /* При наведении стрелка становится ярче и смещается чуть вправо */
  color: #e50914;
  transform: translateX(10px);
}

/* Если нужно увеличить область клика по всей карточке, */
.more-card a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.more-card a,
.more-card a:hover {
  text-decoration: none;
}

/* Для адаптивности: под мобильные экраны чуть уменьшаем */
@media screen and (max-width: 520px) {
  .more-poster-wrapper {
    width: 100px;
    height: 100px;
  }
  .more-arrow {
    font-size: 28px;
  }
}
/* стрелка «Больше» */
.more-card{
 background:transparent; 
 display:flex; 
 align-items:center;
   
}
.more-poster-wrapper{
 display:flex;
 align-items:center;
 justify-content:center;
 width:150px;
 height:100px;
 border-radius:12px;
 background:#2a2a2a;
}
.more-arrow{
   font-size:48px;
   color:#fff;
   line-height:1;
}
.more-poster-wrapper:hover{
   background:#444;
}
.more-card-studio{
   background:transparent;
}