/* --- Main Wrapper & Feed --- */
.ivf-wrapper { position: relative; width: 100%; box-sizing: border-box; z-index: 1; overflow: hidden; border-radius: 12px; --videos-per-view: 3; --videos-per-view-tablet: 2; --videos-per-view-mobile: 1; }
.ivf-wrapper::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.ivf-feed-container { overflow: hidden; }
.ivf-feed { display: flex; transition: transform 0.5s ease-in-out; gap: 15px; align-items: center; }

/* --- Video Item --- */
.ivf-item { flex-shrink: 0; height: 320px; width: calc(320px * 9 / 16); background-color: #000; border-radius: 12px; cursor: pointer; position: relative; overflow: hidden; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; transition: transform 300ms ease-in-out; }
.ivf-item:hover { z-index: 5; }
.ivf-item .ivf-play-icon { width: 60px; height: 60px; background: rgba(0, 0, 0, 0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease; }
.ivf-item:hover .ivf-play-icon { transform: scale(1.1); }
.ivf-item .ivf-play-icon img { width: 50%; height: 50%; }

/* --- Navigation Arrows --- */
.ivf-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.8); color: #333; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 24px; font-weight: bold; user-select: none; z-index: 10; transition: background-color 0.2s ease, color 0.2s ease; }
.ivf-nav:hover { background-color: #fff; }
.ivf-nav.ivf-prev { left: 0; }
.ivf-nav.ivf-next { right: 0; }
.ivf-nav.disabled { opacity: 0.3; cursor: not-allowed; }

/* --- Lightbox --- */
.ivf-lightbox { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.85); z-index: 9999; display: none; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.ivf-lightbox.active { display: flex; }
.ivf-lightbox-close { position: absolute; top: 20px; right: 30px; width: 40px; height: 40px; cursor: pointer; z-index: 10001; }
.ivf-lightbox-close img { width: 100%; height: 100%; }

/* Lightbox Gallery Styles */
.ivf-lightbox-gallery-wrapper { display: flex; align-items: center; justify-content: center; width: 100%; gap: 20px; }
.ivf-lightbox-content { position: relative; max-width: 450px; width: 60%; max-height: 95%; flex-shrink: 0; transition: opacity 0.3s ease-out, transform 0.3s ease-out; }
.ivf-lightbox-content.ivf-loading { opacity: 0; transform: scale(0.95); }
.ivf-lightbox-content video, .ivf-lightbox-content iframe { width: 100%; height: auto; max-height: 95vh; border-radius: 12px; border: none; aspect-ratio: 9 / 16; }
.ivf-lightbox-nav { background-size: cover; background-position: center; border-radius: 8px; cursor: pointer; opacity: 0.7; position: relative; flex-shrink: 0; transition: opacity 0.3s ease, transform 0.3s ease; }
.ivf-lightbox-nav:hover { opacity: 1; transform: scale(1.05); }
.ivf-lightbox-nav::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); border-radius: 8px; }

/* Tablet and Mobile */
@media (max-width: 1024px) {
    .ivf-lightbox-nav { display: none; }
    .ivf-lightbox-content { width: 80%; }
}
@media (max-width: 767px) {
    .ivf-lightbox-content { width: 90%; }
}