/**
 * PopCore Addon - Slides Styles
 * Version: 1.0.4
 * 
 * PopMart-style full-view slide mode
 * Uses CSS aspect-ratio without breaking slide animations
 */

/* ==========================================================================
   PopMart Full-View Mode - Main Container
   ========================================================================== */

.ecomus-slides-elementor.popcore-fullview-mode {
    position: relative;
    width: 100%;
    overflow: hidden;
    
    /* CSS aspect-ratio for modern browsers */
    aspect-ratio: var(--popcore-aspect-ratio, 2.4) / 1;
    height: auto !important;
    min-height: unset !important;
    max-height: unset !important;
    
    /* CSS Containment - prevents layout recalculations from affecting parent */
    contain: layout style;
    
    /* GPU layer for smooth rendering */
    transform: translate3d(0, 0, 0);
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 1) {
    .ecomus-slides-elementor.popcore-fullview-mode {
        height: 0 !important;
        padding-bottom: calc(100% / var(--popcore-aspect-ratio, 2.4)) !important;
    }
    
    .ecomus-slides-elementor.popcore-fullview-mode .ecomus-slides-elementor__inner {
        position: absolute !important;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

/* ==========================================================================
   Inner Elements - Preserve Slide Animations
   ========================================================================== */

/* Swiper wrapper - let Swiper handle its own transitions for sliding */
.ecomus-slides-elementor.popcore-fullview-mode .ecomus-slides-elementor__inner,
.ecomus-slides-elementor.popcore-fullview-mode .swiper-wrapper {
    height: 100% !important;
    /* DO NOT override transition here - Swiper needs it for slide animation */
}

/* Individual slides */
.ecomus-slides-elementor.popcore-fullview-mode .ecomus-slides-elementor__item,
.ecomus-slides-elementor.popcore-fullview-mode .swiper-slide {
    height: 100% !important;
    min-height: 100% !important;
    /* Keep slide-specific animations intact */
}

/* ==========================================================================
   Background Image Styling
   ========================================================================== */

.ecomus-slides-elementor.popcore-fullview-mode .ecomus-slides-elementor__item {
    background-size: var(--popcore-media-fit, contain) !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.ecomus-slides-elementor.popcore-fullview-mode[data-popcore-fit="contain"] .ecomus-slides-elementor__item {
    background-size: contain !important;
}

.ecomus-slides-elementor.popcore-fullview-mode[data-popcore-fit="cover"] .ecomus-slides-elementor__item {
    background-size: cover !important;
}

/* ==========================================================================
   Content Layout
   ========================================================================== */

.ecomus-slides-elementor.popcore-fullview-mode .ecomus-slide {
    position: absolute !important;
    inset: 0;
    display: flex;
    align-items: center;
}

.ecomus-slides-elementor.popcore-fullview-mode .ecomus-slide__content {
    position: relative;
    z-index: 5;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.ecomus-slides-elementor.popcore-fullview-mode .swiper-pagination {
    position: absolute;
    bottom: 20px !important;
    z-index: 10;
}

.ecomus-slides-elementor.popcore-fullview-mode .swiper-arrows,
.ecomus-slides-elementor.popcore-fullview-mode .swiper-button-prev,
.ecomus-slides-elementor.popcore-fullview-mode .swiper-button-next {
    z-index: 10;
}

/* ==========================================================================
   Disable ONLY Height-Related Auto-Height (Not Slide Transitions)
   ========================================================================== */

/* Only override the wrapper height transition, not transform transitions */
.ecomus-slides-elementor.popcore-fullview-mode.swiper-autoheight .swiper-wrapper {
    height: 100% !important;
    /* Preserve transform transitions for sliding, only remove height transition */
    transition-property: transform !important;
}

.ecomus-slides-elementor.popcore-fullview-mode.swiper-autoheight,
.ecomus-slides-elementor.popcore-fullview-mode.swiper-autoheight .swiper-slide {
    height: 100% !important;
}

/* ==========================================================================
   Elementor Editor
   ========================================================================== */

.elementor-editor-active .ecomus-slides-elementor.popcore-fullview-mode,
.elementor-editor-preview .ecomus-slides-elementor.popcore-fullview-mode {
    aspect-ratio: var(--popcore-aspect-ratio, 2.4) / 1;
    height: auto !important;
}

/* ==========================================================================
   Image Box Carousel - Match Products Carousel Arrow Style
   Apply the same styling as Products Carousel navigation buttons
   ========================================================================== */

/**
 * Make Image Box Carousel arrows match Products Carousel arrows
 * Products Carousel uses: swiper-button-small + outline-dark style
 */

/* Apply smaller size like Products Carousel heading arrows */
.ecomus-image-box-carousel .swiper-button,
.ecomus-image-box-carousel .ecomus-image-box-carousel__heading .swiper-button {
    /* Match Products Carousel arrow size */
    --em-arrow-width: 32px;
    --em-arrow-height: 32px;
    --em-arrow-font-size: 14px;
}

/* Ensure consistent outline dark styling */
.ecomus-image-box-carousel .swiper-button.swiper-button-outline-dark {
    --em-arrow-bg-color: transparent;
    --em-arrow-color: var(--em-color__dark, #000);
    --em-arrow-border-color: var(--em-color__dark, #000);
    --em-arrow-rounded: 50%;
}

/* Hover state */
.ecomus-image-box-carousel .swiper-button.swiper-button-outline-dark:hover {
    --em-arrow-bg-color: var(--em-color__dark, #000);
    --em-arrow-color: var(--em-color__light, #fff);
}