/**
 * Frontend Styles for Video Media Player Edu Almuwasholah
 */

.vmp-edu-player-wrapper {
    margin: 20px auto;
    max-width: 100%;
    position: relative;
}

.vmp-edu-video-title {
    margin-bottom: 15px;
}

.vmp-edu-video-title h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #333;
}

.vmp-edu-video-description {
    margin-bottom: 15px;
}

.vmp-edu-video-description p {
    margin: 0;
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

.vmp-player-container {
    position: relative;
    width: 100%;
}

.vmp-edu-player {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
}

/* Ensure native controls are visible */
.vmp-edu-player::-webkit-media-controls {
    display: flex !important;
}

.vmp-edu-player::-webkit-media-controls-panel {
    display: flex !important;
}

/* Plyr customization */
.plyr {
    border-radius: 8px;
    width: 100%;
}

.plyr--video {
    background: #000;
}

.plyr__control--overlaid {
    background: rgba(0, 123, 255, 0.9);
    display: block !important;
}

.plyr__control--overlaid:hover {
    background: rgba(0, 123, 255, 1);
}

.plyr__controls {
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.plyr__controls:not(.plyr__controls--hidden) {
    display: flex !important;
}

/* Force controls to be visible */
.plyr--video .plyr__controls {
    transform: translateY(0) !important;
}

.plyr--hide-controls .plyr__controls {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Responsive */
@media (max-width: 768px) {
    .vmp-edu-video-title h3 {
        font-size: 20px;
    }
    
    .vmp-edu-video-description p {
        font-size: 13px;
    }
}