/* HTML5 Player Container */
.html5-player-container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    min-height: 450px; /* Возвращаем стабильную высоту */
    margin: 0 auto;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 85vh;
    overflow: hidden;
}

.html5-player-container video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 90vh;
    object-fit: contain;
}

/* Для вертикальных видео убираем принудительную ширину 100%, чтобы высота могла расти */
.html5-player-container video.is-vertical {
    width: auto !important;
    max-width: 100%;
    height: auto !important;
    max-height: 90vh !important;
}

/* ПОЛНОЭКРАННЫЙ РЕЖИМ */
.html5-player-container:fullscreen {
    max-width: none !important;
    max-height: none !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #000;
}

.html5-player-container:fullscreen video {
    width: 100% !important;
    height: auto !important;
    max-height: 100vh !important;
}

.html5-player-container:fullscreen video.is-vertical {
    width: auto !important;
    height: 100vh !important; /* В фуллскрине — на всю высоту экрана */
}

/* YouTube Player Wrapper */
.youtube-wrapper {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.youtube-iframe-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    background-color: #000;
    overflow: hidden;
}

.youtube-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.player-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center; gap: 15px; opacity: 1; transition: opacity 0.3s; font-family: sans-serif; color: #fff; z-index: 2147483647;
}

.player-controls button { background: none; border: none; color: #fff; font-size: 18px; cursor: pointer; }
.progress-bar { flex-grow: 1; height: 12px; background: rgba(255, 255, 255, 0.4); cursor: pointer; border-radius: 6px; position: relative; overflow: visible !important; }
.progress { height: 100%; width: 0; background: #5582d4; border-radius: 6px; position: relative; overflow: visible !important; }
.progress-handle { position: absolute; right: -9px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; background: #fff; border-radius: 50% !important; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); pointer-events: none; z-index: 10; display: block; }
.time-display { font-size: 14px; white-space: nowrap; }
.volume-container { display: flex; align-items: center; gap: 10px; padding: 0 5px; }
.mute-btn { background: none; border: none; color: #fff; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; width: 30px; }
.volume-bar { width: 80px; height: 8px; background: rgba(255, 255, 255, 0.3); cursor: pointer; border-radius: 4px; position: relative; overflow: visible !important; }
.volume-level { height: 100%; width: 100%; background: #fff; border-radius: 4px; position: relative; overflow: visible !important; transition: width 0.1s linear; }
.volume-bar .progress-handle { width: 14px; height: 14px; background: #fff; border-radius: 50%; position: absolute; right: -7px; top: 50%; transform: translateY(-50%); box-shadow: 0 0 4px rgba(0, 0, 0, 0.5); z-index: 10; display: block; }

/* ПОЛНАЯ ПРОЗРАЧНОСТЬ МОДАЛЬНОГО ОКНА */
#video-player-modal .modal-content {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
#video-player-modal .modal-body {
    padding: 0 !important;
}

/* Удаление белого бордюра вокруг плеера во время паузы/фокуса */
#video-player-modal .modal-content,
#video-player-modal .modal-body,
.html5-player-container,
.html5-player-container video {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

#video-player-modal .modal-content:focus {
    outline: none !important;
    box-shadow: none !important;
}

@media (max-width: 767px) {
    #video-player-modal .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        height: 100%;
        display: flex;
        align-items: center;
    }
    #video-player-modal .modal-content {
        height: auto;
        border-radius: 0;
        background: #000 !important; /* На мобилках лучше черный фон для видео */
    }
}