/**
 * Video Player Mobile Optimizations
 * Enhanced progress bar for better touch responsiveness on mobile devices
 */

/* ========================================
   PHASE 1: ENLARGED PROGRESS BAR
   ======================================== */

/* Mobile and touch device optimizations */
@media (max-width: 768px), (pointer: coarse) {
    
    /* Increase progress bar height for better touch targets */
    .video-js .vjs-progress-holder {
        height: 8px !important;  /* 2.67x larger than default 3px */
        margin: 0 10px;
        border-radius: 4px;  /* Rounded edges for better aesthetics */
    }
    
    /* Add vertical padding to expand clickable area */
    .video-js .vjs-progress-control {
        padding: 12px 0 !important;  /* 24px total vertical hit area */
        min-height: 44px;  /* Apple HIG minimum touch target */
        touch-action: none;  /* Prevent scroll while seeking */
    }
    
    /* Enlarge the progress indicator circle (scrubber) */
    .video-js .vjs-play-progress:before {
        font-size: 1.4em !important;  /* Larger grab handle */
        top: -0.45em !important;
        right: -0.6em !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);  /* Better visibility */
    }
    
    /* Increase slider background for better visibility */
    .video-js .vjs-slider {
        background-color: rgba(115, 133, 159, 0.7) !important;
        border-radius: 4px;
    }
    
    /* Make the played portion more visible */
    .video-js .vjs-play-progress {
        background-color: #fff !important;
        border-radius: 4px;
    }
    
    /* Enhance load progress visibility */
    .video-js .vjs-load-progress {
        background: rgba(115, 133, 159, 0.6) !important;
        border-radius: 4px;
    }
}

/* ========================================
   PHASE 2: VISUAL FEEDBACK ENHANCEMENTS
   ======================================== */

@media (max-width: 768px), (pointer: coarse) {
    
    /* Expand progress bar when actively seeking */
    .video-js .vjs-progress-control:active .vjs-progress-holder,
    .video-js .vjs-progress-control.vjs-seeking .vjs-progress-holder {
        height: 10px !important;  /* Expand when touched */
        transition: height 0.15s ease;
    }
    
    /* Highlight the scrubber circle when touched */
    .video-js .vjs-progress-control:active .vjs-play-progress:before {
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.9);
        transform: scale(1.1);
        transition: all 0.15s ease;
    }
    
    /* Add subtle glow to progress bar on touch */
    .video-js .vjs-progress-control:active .vjs-progress-holder {
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
    }
    
    /* Enlarge time tooltip on mobile */
    .video-js .vjs-time-tooltip {
        font-size: 1.3em !important;
        padding: 8px 12px !important;
        border-radius: 6px !important;
        font-weight: 600;
        background-color: rgba(0, 0, 0, 0.9) !important;
        color: #fff !important;
    }
    
    /* Show time tooltip more prominently on mobile */
    .video-js .vjs-progress-control .vjs-mouse-display .vjs-time-tooltip,
    .video-js .vjs-progress-control:active .vjs-time-tooltip {
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ========================================
   PHASE 3: FULLSCREEN OPTIMIZATIONS
   ======================================== */

/* Larger progress bar in fullscreen mode */
.video-js.vjs-fullscreen .vjs-progress-holder {
    height: 10px !important;
}

.video-js.vjs-fullscreen .vjs-progress-control {
    padding: 15px 0 !important;
    min-height: 50px;
}

.video-js.vjs-fullscreen .vjs-play-progress:before {
    font-size: 1.6em !important;
}

/* ========================================
   ADDITIONAL MOBILE ENHANCEMENTS
   ======================================== */

@media (max-width: 768px), (pointer: coarse) {
    
    /* Prevent accidental play/pause when seeking */
    .video-js .vjs-progress-control {
        z-index: 5;  /* Above play button */
        position: relative;
    }
    
    /* Ensure smooth seeking without page scroll */
    .video-js .vjs-progress-control * {
        touch-action: none;
    }
    
    /* Better visual separation from control bar */
    .video-js .vjs-progress-control {
        margin-bottom: 2px;
    }
    
    /* Improve contrast for better visibility */
    .video-js .vjs-slider {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }
}

/* ========================================
   SMALL MOBILE DEVICES (< 480px)
   ======================================== */

@media (max-width: 480px) {
    
    /* Even larger touch targets for small phones */
    .video-js .vjs-progress-holder {
        height: 10px !important;
    }
    
    .video-js .vjs-progress-control {
        padding: 15px 0 !important;
        min-height: 50px;
    }
    
    /* Larger scrubber for easier grabbing */
    .video-js .vjs-play-progress:before {
        font-size: 1.6em !important;
    }
    
    /* Larger time tooltip */
    .video-js .vjs-time-tooltip {
        font-size: 1.4em !important;
        padding: 10px 14px !important;
    }
}

/* ========================================
   ACCESSIBILITY IMPROVEMENTS
   ======================================== */

/* Better focus states for keyboard navigation */
.video-js .vjs-progress-control:focus-within .vjs-progress-holder {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .video-js .vjs-progress-holder {
        border: 2px solid #fff;
    }
    
    .video-js .vjs-play-progress {
        background-color: #fff !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .video-js .vjs-progress-control:active .vjs-progress-holder,
    .video-js .vjs-progress-control.vjs-seeking .vjs-progress-holder,
    .video-js .vjs-progress-control:active .vjs-play-progress:before {
        transition: none !important;
    }
}