/* Mobile Carousel Navigation Fix 
 * Ensures carousel controls are always visible on mobile devices
 */

/* Force carousel controls to be visible on all screen sizes */
.carousel-control.prev,
.carousel-control.next {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 1000 !important;
}

/* Mobile-specific carousel control fixes */
@media (max-width: 767px) {
    .media-carousel .carousel-control.prev,
    .media-carousel .carousel-control.next {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 1000 !important;
        width: 44px !important;
        height: 44px !important;
        background: rgba(0, 0, 0, 0.7) !important;
        border: 2px solid rgba(255, 255, 255, 0.8) !important;
        border-radius: 50% !important;
        color: white !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .media-carousel .carousel-control.prev {
        left: 8px !important;
    }
    
    .media-carousel .carousel-control.next {
        right: 8px !important;
    }
    
    .media-carousel .carousel-control i[data-feather],
    .media-carousel .carousel-control .feather {
        width: 24px !important;
        height: 24px !important;
        stroke-width: 3px !important;
        color: white !important;
    }
}

/* Ensure controls are not affected by other CSS rules */
.post-media-container .media-carousel .carousel-control {
    display: flex !important;
    visibility: visible !important;
}

/* Override any potential hiding rules */
.media-carousel:not(.single-item) .carousel-control {
    display: flex !important;
    visibility: visible !important;
}