/* 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; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.vg-item { background: #f9f9f9; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }

/* Thumbnails */
.vg-thumbnail { position: relative; cursor: pointer; aspect-ratio: 16/9; background: #ddd; 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-play-icon { position: absolute; font-size: 50px; color: white; text-shadow: 0 0 15px rgba(0,0,0,0.8); pointer-events: none; }
.vg-title { margin: 15px; font-size: 18px; text-align: center; }

/* 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 */
.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: 25px; border-radius: 8px; max-width: 800px; width: 95%; position: relative; max-height: 90vh; overflow-y: auto; }
.vg-modal-close { position: absolute; top: -40px; right: 0px; font-size: 35px; cursor: pointer; color: #fff; line-height: 1; }
.vg-modal-video-container iframe, .vg-modal-video-container video { width: 100%; height: 450px; border: none; background: #000; }
.vg-modal-title { margin-top: 20px; margin-bottom: 10px; font-size: 22px; }
.vg-modal-desc { font-size: 15px; color: #555; line-height: 1.6; }