/* ImageSwipeSlider Styles - Ultra Simple Overlay System */
.em-image-swipe-slider {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    z-index: 10 !important;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    /* Responsive height based on aspect ratio */
    aspect-ratio: 16/9 !important;
    min-height: 200px !important;
    max-height: 70vh !important;
    /* Interactive cursor for swipe functionality */
    cursor: grab !important;
    user-select: none !important;
    /* Smooth performance during drag operations */
    will-change: transform !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
}

/* Dynamic height: Container adapts to image dimensions */
.em-image-swipe-slider.dynamic-height {
    height: auto !important;
    aspect-ratio: unset !important;
    min-height: unset !important;
    max-height: unset !important;
}

.em-image-swipe-slider.dynamic-height .em-swipe-slider-track {
    height: auto !important;
}

.em-image-swipe-slider.dynamic-height .em-swipe-slide {
    position: relative !important;
    height: auto !important;
    display: block !important;
    top: unset !important;
    left: unset !important;
}

.em-image-swipe-slider.dynamic-height .em-swipe-slide:not(.active) {
    display: none !important;
}

.em-image-swipe-slider.dynamic-height .em-swipe-slide.active {
    display: block !important;
}

.em-swipe-slider-track {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    display: block !important;
    z-index: 1 !important;
}

.em-swipe-slide {
    /* All slides have identical positioning - stacked on top of each other */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1 !important;
    
    /* All slides are hidden by default */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(0) !important;
    transition: all 0.5s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
    
    /* Performance optimizations for smooth dragging */
    will-change: transform, opacity !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-transform-style: preserve-3d !important;
    transform-style: preserve-3d !important;
}

/* Only the active slide is visible */
.em-swipe-slide.active {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2 !important;
    transform: translateX(0) !important;
}

/* Slide animations for enhanced UX */
.em-swipe-slide.slide-in-right {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 3 !important;
    transform: translateX(100%) !important;
    animation: slideInFromRight 0.5s cubic-bezier(0.4, 0.0, 0.2, 1) forwards !important;
}

.em-swipe-slide.slide-in-left {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 3 !important;
    transform: translateX(-100%) !important;
    animation: slideInFromLeft 0.5s cubic-bezier(0.4, 0.0, 0.2, 1) forwards !important;
}

.em-swipe-slide.slide-out-left {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2 !important;
    transform: translateX(0) !important;
    animation: slideOutToLeft 0.5s cubic-bezier(0.4, 0.0, 0.2, 1) forwards !important;
}

.em-swipe-slide.slide-out-right {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2 !important;
    transform: translateX(0) !important;
    animation: slideOutToRight 0.5s cubic-bezier(0.4, 0.0, 0.2, 1) forwards !important;
}

/* Keyframe animations for smooth sliding */
@keyframes slideInFromRight {
    from {
        transform: translateX(100%) !important;
        opacity: 0.8 !important;
    }
    to {
        transform: translateX(0) !important;
        opacity: 1 !important;
    }
}

@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%) !important;
        opacity: 0.8 !important;
    }
    to {
        transform: translateX(0) !important;
        opacity: 1 !important;
    }
}

@keyframes slideOutToLeft {
    from {
        transform: translateX(0) !important;
        opacity: 1 !important;
    }
    to {
        transform: translateX(-100%) !important;
        opacity: 0.8 !important;
    }
}

@keyframes slideOutToRight {
    from {
        transform: translateX(0) !important;
        opacity: 1 !important;
    }
    to {
        transform: translateX(100%) !important;
        opacity: 0.8 !important;
    }
}

.em-swipe-slide img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    position: relative !important;
    z-index: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
    /* Disable image dragging to prevent conflicts */
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
    -webkit-touch-callout: none !important;
}

/* Dynamic height: Images keep their natural dimensions */
.em-image-swipe-slider.dynamic-height .em-swipe-slide img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    max-width: 100% !important;
}

/* Navigation Styles */
.em-swipe-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.4);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.2s ease;
    pointer-events: auto;
}

.em-swipe-arrow:hover {
    background: rgba(0,0,0,0.6);
}

.em-swipe-arrow-left { left: 10px; }
.em-swipe-arrow-right { right: 10px; }

.em-swipe-dots {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
    pointer-events: auto;
}

.em-swipe-dot {
    display: block;
    width: 46px;
    height: 6px;
    background: #51515170;
    border-radius: 999px;
    transition: all 220ms ease;
    border: none;
    cursor: pointer;
    opacity: 1;
    pointer-events: auto;
}

.em-swipe-dot.active {
    background: #b3b3b3;
}

.em-swipe-dot:hover {
    filter: brightness(0.95);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .em-image-swipe-slider {
        aspect-ratio: 4/3 !important;
        min-height: 150px !important;
        max-height: 50vh !important;
    }
    
    .em-swipe-arrow {
        width: 32px;
        height: 32px;
    }
    
    .em-swipe-arrow-left { left: 5px; }
    .em-swipe-arrow-right { right: 5px; }
    
    .em-swipe-dot {
        width: 36px;
        height: 5px;
    }
}

@media (max-width: 480px) {
    .em-image-swipe-slider {
        aspect-ratio: 1/1 !important;
        min-height: 200px !important;
        max-height: 40vh !important;
    }
}

/* Drag animation states for enhanced UX */
.em-image-swipe-slider.is-dragging {
    cursor: grabbing !important;
}

.em-image-swipe-slider.is-dragging .em-swipe-slide {
    transition: none !important;
}

.em-image-swipe-slider.drag-snap-back .em-swipe-slide {
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}

/* Alternative height settings for different use cases */
.em-image-swipe-slider.em-height-small {
    aspect-ratio: 21/9 !important;
    min-height: 150px !important;
    max-height: 300px !important;
}

.em-image-swipe-slider.em-height-large {
    aspect-ratio: 3/2 !important;
    min-height: 300px !important;
    max-height: 80vh !important;
}

.em-image-swipe-slider.em-height-square {
    aspect-ratio: 1/1 !important;
    min-height: 200px !important;
    max-height: 600px !important;
}