/* All styles are now prefixed with a class based on the widget ID to increase specificity and avoid conflicts */
.pixel9ine-gallery-container {
    /* Add any global container styles here if needed */
}

.pixel9ine-gallery-container .gallery-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    /* Padding is now controlled by Elementor widget settings */
}

.pixel9ine-gallery-container .gallery-carousel {
    width: 100%;
}

.pixel9ine-gallery-container .mySwiper {
    width: 100%;
    overflow: visible; /* Important for coverflow effect to show surrounding slides */
    padding-bottom: 150px; /* Adjust as needed, or make customizable via Elementor control */
}

.pixel9ine-gallery-container .swiper-slide {
    display: flex;
    justify-content: center;
    transition: transform 0.3s ease;
    overflow: visible; /* Allows transforms like rotation to be visible */
}

.pixel9ine-gallery-container .swiper-slide .img-wrap {
    position: relative;
    width: var(--efg-image-width, 260px); /* Dynamic width controlled by Elementor setting */
    aspect-ratio: var(--efg-aspect-ratio-width, 4) / var(--efg-aspect-ratio-height, 5); /* Dynamic aspect ratio */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform: scale(0.85); /* Default scale for non-active slides */
    border-radius: 20px;
    box-shadow: 0 0 15px rgba(52, 152, 219, 0); /* Initial shadow, overridden by active state and Elementor control */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.pixel9ine-gallery-container .swiper-slide.swiper-slide-active .img-wrap {
    transform: scale(1); /* Active slide is at full scale */
    /* Box shadow is now controlled by Elementor's Group_Control_Box_Shadow */
}

.pixel9ine-gallery-container .img-wrap img {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    object-fit: cover;
    display: block;
    -webkit-box-reflect: below 2px linear-gradient(to bottom, transparent, transparent 40%, rgba(0, 0, 0, 0.4));
}

/* Ensure Fancybox appears above all other Elementor elements */
.fancybox__container {
    z-index: 99999 !important;
}

/* Responsive adjustments for the .mySwiper padding-bottom if needed (e.g., for smaller screens) */
@media (max-width: 768px) {
    .pixel9ine-gallery-container .mySwiper {
        padding-bottom: 100px; /* Adjust for tablets */
    }
}

@media (max-width: 480px) {
    .pixel9ine-gallery-container .mySwiper {
        padding-bottom: 80px; /* Adjust for mobile */
    }
}