/* Modal Navigation Fix CSS
 * Provides additional styling rules to ensure navigation controls
 * are properly hidden for single-image modals and fixes carousel conflicts
 */

/* CRITICAL: Override carousel layout in modal to show only one image */
#imageModal .media-carousel,
#imageModal .media-item {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    transition: none !important;
}

/* Hide all media items in modal except the active one */
#imageModal .media-item {
    display: none !important;
}

#imageModal .media-item.modal-active {
    display: block !important;
}

/* Override any carousel positioning in modal */
#imageModal .media-carousel .media-item {
    position: static !important;
    transform: none !important;
    left: auto !important;
    opacity: 1 !important;
}

/* Ensure modal images fill available space properly */
#imageModal .media-item img,
#imageModal .image-container img {
    position: static !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    max-width: 80vw !important;
    max-height: 80vh !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
}

/* Ensure modal videos fill available space properly */
#imageModal .media-item video,
#imageModal .video-container video,
#imageModal video {
    position: static !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    max-width: 80vw !important;
    max-height: 80vh !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
}

/* Default style for navigation controls - display: flex by default */
.modal-navigation-controls {
    display: flex;
}

/* Hide modal navigation controls for single images */
#imageModal.single-image .modal-navigation-controls,
#imageModal.single-image #prevModalImage,
#imageModal.single-image #nextModalImage,
.modal.single-image .modal-navigation-controls,
.modal.single-image #prevModalImage,
.modal.single-image #nextModalImage {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Add extra high specificity rule for navigation buttons */
body .modal-open #imageModal.single-image .modal-navigation-controls,
body .modal-open #imageModal.single-image #prevModalImage,
body .modal-open #imageModal.single-image #nextModalImage,
html body .modal-open .modal.single-image .modal-navigation-controls,
html body .modal-open .modal.single-image #prevModalImage,
html body .modal-open .modal.single-image #nextModalImage {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ONLY show when explicitly enabled by JS for multi-image posts */
body .modal-open #imageModal.multi-image .modal-navigation-controls,
body .modal-open #imageModal.multi-image #prevModalImage,
body .modal-open #imageModal.multi-image #nextModalImage,
#imageModal.multi-image .modal-navigation-controls,
#imageModal.multi-image #prevModalImage, 
#imageModal.multi-image #nextModalImage,
.modal.multi-image .modal-navigation-controls,
.modal.multi-image #prevModalImage,
.modal.multi-image #nextModalImage,
.modal-navigation-controls.show-controls,
.multi-image #prevModalImage,
.multi-image #nextModalImage {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* POST CAROUSEL NAVIGATION CLASSES */
/* Override any base template display rules for carousel items */
.media-carousel .media-item.carousel-item-hidden {
    display: none !important;
}

.media-carousel .media-item.carousel-item-visible {
    display: block !important;
}

/* Ensure post carousel navigation overrides base CSS */
.post-media-container .media-carousel .media-item:not(.active):not(.carousel-item-visible) {
    display: none !important;
}

.post-media-container .media-carousel .media-item.active,
.post-media-container .media-carousel .media-item.carousel-item-visible {
    display: block !important;
}