/* ============================================
   CUSTOM VIDEO.JS STYLES
   Подключайте этот файл ПОСЛЕ video-js.css
   ============================================ */

/* CSS переменные для быстрой настройки */
:root {
  --vjs-primary: #ff6b6b;        /* Основной цвет (красный) */
  --vjs-secondary: #4ecdc4;      /* Вторичный цвет (бирюзовый) */
  --vjs-dark: rgba(0, 0, 0, 0.8); /* Полупрозрачный черный фон */
  --vjs-light: rgba(255, 255, 255, 0.9); /* Полупрозрачный белый */
  --vjs-text: white;             /* Цвет текста */
  /*--vjs-radius: 10px;            /* Скругление углов */
  --vjs-shadow: 0 10px 30px rgba(0,0,0,0.3); /* Тень */
}

.videojs-wrapper {
  display: flex;
  justify-content: center;
  padding: 0 20px;
}

/* Контейнер для видео */
.videojs-container {  
  width: 100%;
  max-width: 1000px;      /* Максимальная ширина 1000px */
  margin: 40px auto;      /* Отступ сверху-снизу 40px, по центру */
  /*border-radius: var(--vjs-radius); /* Скругление из переменной */
  overflow: hidden;       /* Скрывает выходящее за границы */
  box-shadow: var(--vjs-shadow); /* Тень из переменной */
  /*background: #000;       /* Черный фон на случай зазоров */

  aspect-ratio: 16 / 9;   /* Для пропорций */
}

/* Video.js fluid mode */
.videojs-container .video-js.vjs-fluid {
  padding-top: 0 !important; /* Убираем стандартный padding от fluid */
  height: 100% !important;
}

.videojs-container .vjs-tech {
  width: 100% !important;
  height: 100% !important;
}

/* Основной видео элемент */
.video-js.custom-theme {
  width: 100%;           /* Занимает всю ширину контейнера */
  height: 500px;         /* Высота 500px */
  font-family: 'Segoe UI', Arial, sans-serif; /* Шрифт для текста в плеере */
}

/* ========== КНОПКА ВОСПРОИЗВЕДЕНИЯ ========== */
.video-js.custom-theme .vjs-big-play-button {
  /* Размер и позиционирование */
  width: 120px;           /* Ширина кнопки */
  height: 120px;          /* Высота кнопки */
  border-radius: 50%;    /* Делает кнопку круглой */
  line-height: 80px;     /* Вертикальное выравнивание иконки */
  top: 50%;              /* Позиционирование сверху на 50% */
  left: 50%;             /* Позиционирование слева на 50% */
  margin-left: -40px;    /* Сдвигает назад на половину ширины для центровки */
  margin-top: -40px;     /* Сдвигает назад на половину высоты для центровки */
  
  /* Стили */
  border: none;          /* Убирает стандартную рамку */
  background: var(--vjs-primary); /* Цвет из переменной */
  color: var(--vjs-text); /* Цвет иконки */
  font-size: 30px;       /* Размер иконки */
  text-shadow: none;     /* Убирает тень текста */
  box-shadow: 0 0 20px rgba(255, 107, 107, 0.5); /* Свечение */
  
  /* Анимация */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Плавные переходы */
  transform: scale(1);   /* Начальный масштаб */
}
}

.video-js.custom-theme .vjs-big-play-button:hover {
  background: var(--vjs-primary); /* Тот же цвет при наведении */
  transform: scale(1.1);         /* Увеличивает на 10% при наведении */
  box-shadow: 0 0 30px rgba(255, 107, 107, 0.7); /* Усиливает свечение */
}

/* ========== ПАНЕЛЬ УПРАВЛЕНИЯ ========== */
.video-js.custom-theme .vjs-control-bar {
  /* Фон и размер */
  background: linear-gradient(to top, var(--vjs-dark), transparent);
  /* Градиентный фон: сверху темный, снизу прозрачный */
  height: 60px;          /* Высота панели */
  padding: 0 20px;       /* Отступы слева-справа */
  
  /* Стили */
  color: var(--vjs-text); /* Цвет текста и иконок */
  font-size: 14px;       /* Размер шрифта */
  backdrop-filter: blur(10px); /* Размытие фона под панелью */
  border-top: 1px solid rgba(255, 255, 255, 0.1); /* Верхняя граница */
  
  /* Анимация появления */
  transform: translateY(100%); /* Скрывает панель (сдвигает вниз) */
  transition: transform 0.3s ease; /* Плавное появление */
}

.video-js.custom-theme:hover .vjs-control-bar {
  transform: translateY(0); /* Возвращает панель на место при наведении */
}

/* ========== ПРОГРЕСС-БАР ========== */
.video-js.custom-theme .vjs-progress-control {
  height: 30px;          /* Высота всего элемента прогресс-бара */
}

.video-js.custom-theme .vjs-progress-holder {
  height: 6px;           /* Высота полосы прогресса */
  background: rgba(255, 255, 255, 0.2); /* Полупрозрачный белый фон */
  border-radius: 3px;    /* Скругленные края */
  margin: 0;             /* Убирает отступы */
}

.video-js.custom-theme .vjs-play-progress {
  background: linear-gradient(to right, var(--vjs-primary), var(--vjs-secondary));
  /* Градиент от основного к вторичному цвету */
  border-radius: 3px;    /* Скругленные края */
}

.video-js.custom-theme .vjs-load-progress {
  background: rgba(255, 255, 255, 0.1); /* Фон для загруженной части */
}

.video-js.custom-theme .vjs-load-progress div {
  background: rgba(78, 205, 196, 0.3); /* Цвет загруженных сегментов */
}

/* Ползунок прогресса */
.video-js.custom-theme .vjs-slider {
  background: rgba(255, 255, 255, 0.2); /* Фон ползунка */
}

/* ========== КНОПКИ УПРАВЛЕНИЯ ========== */
.video-js.custom-theme .vjs-button {
  color: var(--vjs-text); /* Цвет иконок */
  background: none;       /* Прозрачный фон */
  border: none;          /* Без рамки */
  padding: 0 15px;       /* Отступы слева-справа */
  transition: all 0.2s ease; /* Плавные анимации */
}

.video-js.custom-theme .vjs-button:hover {
  color: var(--vjs-primary); /* Меняет цвет при наведении */
  transform: scale(1.1);     /* Увеличивает на 10% */
}

.video-js.custom-theme .vjs-button > .vjs-icon-placeholder:before {
  line-height: 60px;     /* Вертикальное выравнивание иконок */
  font-size: 20px;       /* Размер иконок */
}

/* Кнопка Play/Pause */
.video-js.custom-theme .vjs-play-control {
  margin-right: 10px;    /* Отступ справа от других элементов */
}

/* ========== ГРОМКОСТЬ ========== */
.video-js.custom-theme .vjs-volume-panel {
  margin-right: 20px;    /* Отступ от следующих элементов */
}

.video-js.custom-theme .vjs-volume-bar {
  height: 6px;           /* Высота полосы громкости */
  margin-top: 27px;      /* Отступ сверху для выравнивания */
}

.video-js.custom-theme .vjs-volume-level {
  background: linear-gradient(to right, var(--vjs-secondary), #44a08d);
  /* Градиент для уровня громкости */
}

/* ========== ВРЕМЯ ========== */
.video-js.custom-theme .vjs-time-control {
  font-family: 'Courier New', monospace; /* Моноширинный шрифт */
  font-size: 14px;       /* Размер шрифта */
  padding: 0 15px;       /* Отступы */
  color: var(--vjs-text); /* Цвет текста */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* Тень для лучшей читаемости */
}

/* ========== ПОЛНЫЙ ЭКРАН ========== */
.video-js.custom-theme .vjs-fullscreen-control {
  margin-left: auto;     /* Прижимает кнопку к правому краю */
}

/* ========== СКОРОСТЬ ВОСПРОИЗВЕДЕНИЯ ========== */
.video-js.custom-theme .vjs-playback-rate .vjs-playback-rate-value {
  font-size: 14px;       /* Размер текста скорости */
  line-height: 60px;     /* Выравнивание по высоте панели */
}

.video-js.custom-theme .vjs-menu-content {
  background: var(--vjs-dark); /* Фон выпадающего меню */
  border-radius: 5px;    /* Скругленные углы */
  border: 1px solid rgba(255,255,255,0.1); /* Тонкая рамка */
}

.video-js.custom-theme .vjs-menu-item:hover {
  background: var(--vjs-primary); /* Цвет фона при наведении */
  color: white;          /* Цвет текста */
}

/* ========== ЗАГРУЗОЧНЫЙ СПИННЕР ========== */
.video-js.custom-theme .vjs-loading-spinner {
  border-color: var(--vjs-primary); /* Цвет крутящегося кольца */
}

.video-js.custom-theme .vjs-loading-spinner:before,
.video-js.custom-theme .vjs-loading-spinner:after {
  border-color: var(--vjs-primary); /* Цвет внутренних элементов */
}

/* ========== СООБЩЕНИЯ ========== */
.video-js.custom-theme .vjs-modal-dialog {
  background: rgba(0, 0, 0, 0.85); /* Фон для модальных окон */
  backdrop-filter: blur(5px);     /* Размытие фона */
}

.video-js.custom-theme .vjs-modal-dialog-content {
  color: var(--vjs-text); /* Цвет текста в модальных окнах */
  font-size: 16px;       /* Размер шрифта */
}

/* ========== АДАПТИВНОСТЬ ========== */
@media (max-width: 768px) {
  .videojs-container {
    margin: 20px;        /* Уменьшает отступы */
    border-radius: 5px;  /* Уменьшает скругление */
  }
  
  .video-js.custom-theme {
    height: 300px;       /* Уменьшает высоту видео */
  }
  
  .video-js.custom-theme .vjs-control-bar {
    height: 50px;        /* Уменьшает высоту панели */
    font-size: 12px;     /* Уменьшает шрифт */
    padding: 0 10px;     /* Уменьшает отступы */
  }
  
  .video-js.custom-theme .vjs-big-play-button {
    width: 60px;         /* Уменьшает кнопку */
    height: 60px;
    line-height: 60px;
    margin-left: -30px;  /* Корректирует центровку */
    margin-top: -30px;
    font-size: 24px;     /* Уменьшает иконку */
  }
  
  .video-js.custom-theme .vjs-button {
    padding: 0 10px;     /* Уменьшает отступы кнопок */
  }
  
  .video-js.custom-theme .vjs-time-control {
    padding: 0 5px;      /* Уменьшает отступы времени */
    font-size: 12px;     /* Уменьшает шрифт времени */
  }
  
  .video-js.custom-theme .vjs-progress-control {
    height: 25px;        /* Уменьшает высоту прогресс-бара */
  }
}

@media (max-width: 480px) {
  .video-js.custom-theme .vjs-time-divider,
  .video-js.custom-theme .vjs-remaining-time {
    display: none;       /* Скрывает разделитель и оставшееся время */
  }
  
  .video-js.custom-theme .vjs-volume-panel {
    display: none;       /* Скрывает регулировку громкости */
  }
}

/* ========== ДОПОЛНИТЕЛЬНЫЕ ЭФФЕКТЫ ========== */
/* Свечение при воспроизведении */
.video-js.custom-theme.vjs-playing {
  box-shadow: 0 0 30px rgba(255, 107, 107, 0.2);
}

/* Анимация пульсации для большой кнопки */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(255, 107, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0); }
}

.video-js.custom-theme.vjs-paused .vjs-big-play-button {
  animation: pulse 2s infinite; /* Применяет анимацию, когда видео на паузе */
}

/* Эффект наведения на прогресс-бар */
.video-js.custom-theme .vjs-mouse-display {
  background: var(--vjs-primary); /* Цвет подсказки при наведении */
  color: white;          /* Цвет текста */
  padding: 5px;          /* Отступы */
  border-radius: 3px;    /* Скругление */
}

/* Стили для субтитров */
.video-js.custom-theme .vjs-text-track-display {
  bottom: 60px;          /* Поднимает субтитры над панелью управления */
}

.video-js.custom-theme .vjs-text-track-cue {
  background: rgba(0, 0, 0, 0.7); /* Фон субтитров */
  color: white;          /* Цвет текста */
  padding: 10px;         /* Отступы */
  border-radius: 5px;    /* Скругление */
  font-size: 16px;       /* Размер шрифта */
}

/* Стили для кнопки выбора качества */
.video-js.custom_theme .vjs-resolution-button {
  color: var(--vjs-text);
  font-size: 14px;
  cursor: pointer;
}

.video-js.custom_theme .vjs-resolution-button .vjs-resolution-button-label {
  font-size: 14px;
  line-height: 60px;
  padding: 0 10px;
}

.video-js.custom_theme .vjs-resolution-button:hover {
  color: var(--vjs-primary);
}

/* Меню выбора качества */
.video-js.custom_theme .vjs-menu-content {
  background: var(--vjs-dark);
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  min-width: 100px;
}

.video-js.custom_theme .vjs-menu-item {
  color: var(--vjs-text);
  padding: 10px 15px;
  font-size: 14px;
  text-align: center;
  transition: all 0.2s ease;
}

.video-js.custom_theme .vjs-menu-item:hover {
  background: var(--vjs-primary);
  transform: scale(1.05);
}

.video-js.custom_theme .vjs-menu-item.vjs-selected {
  background: var(--vjs-primary);
  color: white;
  font-weight: bold;
}

/* Адаптивность */
@media (max-width: 768px) {
  .video-js.custom_theme .vjs-resolution-button .vjs-resolution-button-label {
    font-size: 12px;
    line-height: 50px;
    padding: 0 5px;
  }
}