/* =============================================
   НОВАЯ ВЕРСИЯ CSS для видеослайдера
   Усиленная защита от исчезновения карточек ниже 1200px
   ============================================= */

#phonestar-video-slider {
  overflow: visible !important;
}

#sliderWrapper {
  overflow: hidden !important;
  width: 100% !important;
  position: relative !important;
}

/* Основной flex-контейнер */
#slider {
  display: flex !important;
  gap: 24px !important;
  transition: transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
  will-change: transform !important;
  min-width: 0 !important;           /* критично */
}

/* Каждая карточка */
#slider > div {
  flex: 0 0 248px !important;
  width: 248px !important;
  max-width: 248px !important;
  flex-shrink: 0 !important;
  min-width: 0 !important;           /* важнейшая строка для flex */
  box-sizing: border-box !important;
}

/* Адаптивное уменьшение ширины карточек */
@media (max-width: 1280px) {
  #slider {
    gap: 20px !important;
  }
}

@media (max-width: 1024px) {
  #slider > div {
    flex: 0 0 240px !important;
    width: 240px !important;
    max-width: 240px !important;
  }
}

@media (max-width: 768px) {
  #slider {
    gap: 16px !important;
  }
  #slider > div {
    flex: 0 0 220px !important;
    width: 220px !important;
    max-width: 220px !important;
  }
}

@media (max-width: 480px) {
  #slider {
    gap: 12px !important;
  }
  #slider > div {
    flex: 0 0 calc(100vw - 40px) !important;
    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
  }
}

/* Кнопки навигации */
#prevBtn, #nextBtn {
  display: none !important;
}

@media (min-width: 768px) {
  #prevBtn, #nextBtn {
    display: flex !important;
  }
}

/* Дополнительная защита от конфликтов с сайтом */
#phonestar-video-slider * {
  box-sizing: border-box !important;
}

#sliderWrapper::before,
#sliderWrapper::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  z-index: 10;
  pointer-events: none;
}

#sliderWrapper::before {
  left: 0;
  background: linear-gradient(to right, rgba(255,255,255,0.9), transparent);
}

#sliderWrapper::after {
  right: 0;
  background: linear-gradient(to left, rgba(255,255,255,0.9), transparent);
}