/**
 * Video Autoplay Styles
 * Adds visual enhancements for autoplaying videos
 */

/* Smooth video transition when loading */
.js-player video,
video.js-player {
    transition: opacity 0.3s ease-in-out;
}

.js-player video.invisible,
video.js-player.invisible {
    opacity: 0;
}

/* Mute indicator for videos */
.video-muted-indicator {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 5px;
}

.video-muted-indicator i {
    font-size: 14px;
}

/* Container for video with indicator */
.video-container-with-indicator {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* Tap to unmute hint (optional) */
.video-tap-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 15px 25px;
    border-radius: 8px;
    font-size: 14px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 20;
}

.video-tap-hint.show {
    opacity: 1;
}

/* Improve video controls visibility */
.plyr--video .plyr__controls {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
}

/* Video hover effect */
.js-player:hover {
    cursor: pointer;
}

/* Ensure videos are properly sized */
.js-player video,
video.js-player {
    width: 100%;
    height: auto;
    display: block;
    background: #000;
}

/* Loading state for videos */
.js-player video[data-loading="true"],
video.js-player[data-loading="true"] {
    background: #f0f0f0 url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjAgMCA1MCA1MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyNSIgY3k9IjI1IiByPSIyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjY2NjIiBzdHJva2Utd2lkdGg9IjMiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1kYXNoYXJyYXkiIGR1cj0iMnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IjEgMTUwOzkwIDE1MDsxIDE1MCIvPjwvY2lyY2xlPjwvc3ZnPg==') center center no-repeat;
    background-size: 40px 40px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .video-muted-indicator {
        bottom: 5px;
        right: 5px;
        padding: 3px 8px;
        font-size: 11px;
    }

    .video-tap-hint {
        padding: 10px 20px;
        font-size: 12px;
    }
}