/* Filters & Layout */
.vg-filters { text-align: center; margin-bottom: 20px; }
.vg-filter-btn { padding: 10px 20px; margin: 5px; cursor: pointer; border: 1px solid #ddd; background: #fff; transition: 0.3s; border-radius: 4px; }
.vg-filter-btn.active, .vg-filter-btn:hover { background: #0073aa; color: #fff; border-color: #0073aa; }
.vg-grid { display: grid; }
.vg-item { background: #f9f9f9; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }

/* Thumbnails & Hover Effects */
.vg-thumbnail { position: relative; cursor: pointer; aspect-ratio: 16/9; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vg-thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.vg-thumbnail:hover img { transform: scale(1.05); }

.vg-hover-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); display: flex; flex-direction: column;
    align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease;
    color: #fff; padding: 20px; text-align: center; box-sizing: border-box; z-index: 2;
}
.vg-thumbnail:hover .vg-hover-overlay { opacity: 1; }
.vg-hover-overlay .vg-play-icon { font-size: 40px; margin-bottom: 10px; color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.5); }
.vg-hover-title { font-size: 20px; margin: 0 0 5px 0; color: #fff; font-weight: bold; }
.vg-hover-desc { font-size: 14px; color: #ddd; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Load More CTA */
.vg-load-more-wrapper { text-align: center; margin-top: 30px; }
.vg-load-more { padding: 12px 30px; background: #333; color: #fff; border: none; cursor: pointer; border-radius: 4px; font-size: 16px; transition: 0.3s;}
.vg-load-more:hover { background: #555; }
.vg-load-more:disabled { background: #ccc; cursor: not-allowed; }

/* Popup Modal & Responsive Video Container */
.vg-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 999999; display: none; align-items: center; justify-content: center; }
.vg-modal-content { background: #fff; padding: 40px 25px 25px; border-radius: 8px; max-width: 800px; width: 95%; position: relative; max-height: 90vh; overflow-y: auto; box-sizing: border-box; }

/* The modern way to force responsive iframes to 16:9 */
.vg-modal-video-container { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; }
.vg-modal-video-container iframe, .vg-modal-video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

.vg-modal-title { margin-top: 20px; margin-bottom: 10px; font-size: 22px; }
.vg-modal-desc { font-size: 15px; color: #555; line-height: 1.6; }

/* Refined Close Button */
.vg-modal-close { position: absolute; top: 10px; right: 20px; font-size: 30px; cursor: pointer; color: #333; line-height: 1; transition: 0.3s; z-index: 10; font-weight: bold; }
.vg-modal-close:hover { color: #ff0000; }

/* Ensure the parent wrapper can contain the absolute positioned icon */
.vg-thumbnail-wrapper {
    position: relative;
    display: block;
    overflow: hidden;
}

/* Style and center the play icon overlay */
.vg-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent dark circle */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
    pointer-events: none; /* Allows clicks to pass through to the video link */
}

/* Style the Elementor play icon itself */
.vg-play-overlay i {
    color: #ffffff;
    font-size: 24px;
    margin-left: 4px; /* Visually centers the play triangle */
}

/* Optional: Slight pop effect when the user hovers over the thumbnail */
.vg-thumbnail-wrapper:hover .vg-play-overlay {
    background-color: rgba(0, 0, 0, 0.9);
    transform: translate(-50%, -50%) scale(1.1);
}