/* WooCommerce Video Reviews - Frontend Styles */

.woo-video-reviews-container {
    padding: 20px 0;
}

.woo-video-reviews-grid {
    column-count: 3;
    column-gap: 20px;
    margin-top: 20px;
}

.woo-video-item {
    break-inside: avoid;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.woo-video-player {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    background: #000;
}

.woo-video-title {
    margin: 12px 0 0 0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
}

/* Custom video controls - show only essential buttons */
video::-webkit-media-controls-panel {
    display: flex;
}

/* Show these controls */
video::-webkit-media-controls-play-button {
    display: flex;
}

video::-webkit-media-controls-mute-button {
    display: flex;
}

video::-webkit-media-controls-fullscreen-button {
    display: flex;
}

/* Hide these controls */
video::-webkit-media-controls-timeline {
    display: none;
}

video::-webkit-media-controls-current-time-display {
    display: none;
}

video::-webkit-media-controls-time-remaining-display {
    display: none;
}

video::-webkit-media-controls-volume-slider {
    display: none;
}

/* Hide overflow menu (three dots) */
video::-webkit-media-controls-overflow-button {
    display: none !important;
}

video::-internal-media-controls-overflow-button {
    display: none !important;
}

/* Hide download button */
video::-webkit-media-controls-download-button {
    display: none;
}

/* Hide picture-in-picture button */
video::-webkit-media-controls-picture-in-picture-button {
    display: none;
}

/* Hide cast button */
video::-webkit-media-controls-cast-button {
    display: none;
}

/* Hide text track list */
video::-webkit-media-controls-text-track-list {
    display: none;
}

/* Responsive */
@media (max-width: 1024px) {
    .woo-video-reviews-grid {
        column-count: 2;
        column-gap: 15px;
    }
}

@media (max-width: 768px) {
    .woo-video-reviews-grid {
        column-count: 2;
        column-gap: 15px;
    }

    .woo-video-title {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .woo-video-reviews-grid {
        column-count: 1;
        column-gap: 10px;
    }
}