/* ======================================
   СТРАНИЦА ПРОСМОТРА
====================================== */

.player-wrapper{/* Контейнер для видео-плеера */
    max-width:1200px;/* Максимальная ширина контейнера */
    margin:auto;/* Центрирование контейнера */
    width: 90%;
    margin: 40px auto;
}

.player{/* Контейнер для видео */
    width:100%;/* Ширина видео */
    max-width:450px;/* Максимальная ширина видео */
    height:300px;/* Высота видео */
    border-radius:15px;/* Скругление углов */
    overflow:hidden;/* Скрытие всего, что выходит за пределы контейнера */
    box-shadow:0 0 40px rgba(0,0,0,.8);/* Тень вокруг видео */
}

.episode-title{/* Заголовок эпизода */
    margin-bottom:40px;/* Отступ снизу */
    margin-left:170px;/* Отступ слева */
    color:#fff;/* Цвет текста */
    font-size:20px;/* Размер текста */
    font-weight:bold;/* Жирность текста */
    text-shadow:0 0 20px black;/* Тень текста */
}

/* ======================================
   КНОПКИ ЭПИЗОДОВ
====================================== */

.episode-buttons{/* кнопки под видео */
    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:30px;
}

.episode-btn{/* Стилизация кнопок */
    width:240px;
    height:60px;
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    font-size:20px;
    font-weight:600;
    color:#111;
    background:#ffc107;
    border:none;
    border-radius:18px;
    transition:.3s;
}

.episode-btn:hover{/* Анимация при наведении на кнопки */
    transform:translateY(-3px);
    background:#ffcf40;
    box-shadow:0 0 20px rgba(255,193,7,.45);
    color:#111;
}

.episode-btn-dark{
    background:#232323;
    color:#fff;
}

.episode-btn-dark:hover{
    background:#333;
    color:#fff;
    box-shadow:0 0 20px rgba(255,255,255,.15);
}

.episode-btn:disabled{
    opacity:.45;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
}
/* ======================================
   VIDEO.JS
====================================== */

.video-js{/* Контейнер для видео-плеера */
    width:100%; /* Ширина видео */
    aspect-ratio: 16 / 9;/* Соотношение сторон видео */
    height:450px; /* Высота видео */
    border-radius:20px; /* Скругление углов */
    overflow:hidden;/* Скрытие всего, что выходит за пределы контейнера */
    box-shadow: /* Тень вокруг видео */
        0 0 25px rgba(255,170,0,.35),
        0 0 60px rgba(255,170,0,.15);
}

.vjs-poster{/* Постер видео */
    background-size:cover; /* Масштабирование изображения, чтобы оно полностью покрывало контейнер */
    background-position:center; /* Центрирование изображения */
}

.vjs-control-bar{/* Панель управления видео */
    background:rgba(0,0,0,.75);
}

.vjs-big-play-button{/* Кнопка воспроизведения */
    width:90px !important;/* Ширина кнопки воспроизведения */
    height:90px !important;/* Высота кнопки воспроизведения */
    line-height:90px !important;/* Высота строки для центрирования текста */
    border:none !important;/* Убираем границу */
    border-radius:50% !important;/* Делаем кнопку круглой */
    background:#ff9800 !important;/* Цвет кнопки */
    font-size:40px !important;/* Размер иконки воспроизведения */
    transition: /* Плавный переход для анимации */
        transform .3s,
        background .3s;
}

.vjs-big-play-button:hover{/* Анимация при наведении на кнопку воспроизведения */
    background:#ffb300 !important;/* Изменяем цвет кнопки при наведении */
    transform:scale(1.1);/* Увеличиваем кнопку при наведении */
}