/* ============================================
   PLYR VIDEO PLAYER CUSTOM STYLING
   Matches Clínica Tech blue theme
   ============================================ */

/* ================================================
   CRITICAL: Override plyr--hide-controls
   This class is added by Plyr and hides controls
   ================================================ */
.plyr--hide-controls .plyr__controls,
.plyr.plyr--hide-controls .plyr__controls,
div.plyr--hide-controls .plyr__controls {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    pointer-events: auto !important;
    transform: none !important;
}

/* ================================================
   HIDE: Center play button (play-large)
   We use click-to-play and bottom controls only
   ================================================ */
.plyr__control--overlaid {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Bottom control bar - FORCE VISIBLE */
.plyr__controls {
    background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 60%, transparent 100%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 15 !important;
    padding: 10px !important;
    pointer-events: auto !important;
    height: auto !important;
    min-height: 50px !important;
}

/* CRITICAL: Show controls even when not hovering */
.plyr--video .plyr__controls {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    pointer-events: auto !important;
}

.plyr--playing .plyr__controls {
    opacity: 1 !important;
    display: flex !important;
}

.plyr--paused .plyr__controls {
    opacity: 1 !important;
    display: flex !important;
}

.plyr--stopped .plyr__controls {
    opacity: 1 !important;
    display: flex !important;
}

/* Individual control buttons - FORCE VISIBLE */
.plyr__control {
    color: white !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
}

.plyr__control svg {
    fill: white !important;
    color: white !important;
    width: 18px !important;
    height: 18px !important;
}

.plyr__control:hover {
    background: rgba(59, 130, 246, 0.8) !important;
}

/* Progress bar */
.plyr--video .plyr__progress__buffer {
    background: rgba(255, 255, 255, 0.25);
}

.plyr__progress input[type=range] {
    color: #3b82f6;
}

.plyr--full-ui input[type=range]::-webkit-slider-thumb {
    background: #3b82f6;
    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.5);
}

.plyr--full-ui input[type=range]::-moz-range-thumb {
    background: #3b82f6;
    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.5);
}

.plyr--full-ui input[type=range]::-ms-thumb {
    background: #3b82f6;
    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.5);
}

/* Time display */
.plyr__time {
    color: white !important;
    font-weight: 500;
    opacity: 1 !important;
}

/* ================================================
   FULLSCREEN - MAINTAIN ASPECT RATIO
   CRITICAL FIX for video stretching
   ================================================ */

/* Plyr wrapper in fullscreen - CRITICAL: Highest specificity */
.plyr.plyr--fullscreen,
.plyr:-webkit-full-screen,
.plyr:-moz-full-screen,
.plyr:-ms-fullscreen,
.plyr:fullscreen,
div.plyr:fullscreen,
div.plyr:-webkit-full-screen,
div.plyr:-moz-full-screen,
div.plyr:-ms-fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    background: #000 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Video wrapper in fullscreen - center the video */
.plyr.plyr--fullscreen .plyr__video-wrapper,
.plyr:-webkit-full-screen .plyr__video-wrapper,
.plyr:-moz-full-screen .plyr__video-wrapper,
.plyr:-ms-fullscreen .plyr__video-wrapper,
.plyr:fullscreen .plyr__video-wrapper,
div.plyr:fullscreen .plyr__video-wrapper,
div.plyr:-webkit-full-screen .plyr__video-wrapper,
div.plyr:-moz-full-screen .plyr__video-wrapper,
div.plyr:-ms-fullscreen .plyr__video-wrapper {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Video element in fullscreen - CONTAIN not cover or fill */
/* CRITICAL: Let video maintain its natural aspect ratio */
.plyr.plyr--fullscreen video,
.plyr:-webkit-full-screen video,
.plyr:-moz-full-screen video,
.plyr:-ms-fullscreen video,
.plyr:fullscreen video,
.plyr video:fullscreen,
.plyr video:-webkit-full-screen,
.plyr video:-moz-full-screen,
.plyr video:-ms-fullscreen,
div.plyr:fullscreen video,
div.plyr:-webkit-full-screen video,
div.plyr:-moz-full-screen video,
div.plyr:-ms-fullscreen video,
.plyr.plyr--fullscreen video.plyr-video,
.plyr:-webkit-full-screen video.plyr-video,
.plyr:-moz-full-screen video.plyr-video,
.plyr:-ms-fullscreen video.plyr-video,
.plyr:fullscreen video.plyr-video,
video.plyr-video:fullscreen,
video.plyr-video:-webkit-full-screen,
video.plyr-video:-moz-full-screen,
video.plyr-video:-ms-fullscreen {
    width: 100% !important;
    height: 100% !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    object-fit: contain !important;
    background: transparent !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
}

/* Ensure controls stay at bottom and don't affect video layout */
.plyr.plyr--fullscreen .plyr__controls,
.plyr:-webkit-full-screen .plyr__controls,
.plyr:-moz-full-screen .plyr__controls,
.plyr:-ms-fullscreen .plyr__controls,
.plyr:fullscreen .plyr__controls,
div.plyr:fullscreen .plyr__controls,
div.plyr:-webkit-full-screen .plyr__controls,
div.plyr:-moz-full-screen .plyr__controls,
div.plyr:-ms-fullscreen .plyr__controls {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
}


/* Poster image - use cover to fill the space */
.plyr__poster {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #f3f4f6 !important;
}

/* Loading spinner */
.plyr--loading .plyr__controls {
    opacity: 0.5;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .plyr__control--overlaid {
        padding: 15px !important;
    }

    .plyr__volume {
        display: none; /* Hide volume on mobile - use device controls */
    }
}