/**
 * CVZ Unified Swiper System CSS
 * Mobile-first responsive design with Tailwind compatibility
 */

/* Base Container */
.cvz-swiper-container {
    @apply relative w-full;
}

/* Mobile Full Width */
.cvz-mobile-full-width {
    @apply -mx-4 px-4;
}

@media (min-width: 768px) {
    .cvz-mobile-full-width {
        @apply mx-0 px-0;
    }
}

/* Swiper Container Wrapper */
.swiper-container-wrapper {
    @apply relative w-full overflow-hidden;
}

/* Swiper Base Styles */
.cvz-unified-swiper {
    @apply w-full h-full relative;
    padding: 1.5rem 0 2rem 0; /* Extra bottom padding for shadows */
}

.cvz-unified-swiper .swiper-wrapper {
    @apply flex w-full h-full;
}

.cvz-unified-swiper .swiper-slide {
    @apply flex-shrink-0 w-full h-auto;
    display: flex;
    flex-direction: column;
}

/* Equal Height Slides - only applied via JavaScript when multiple slides visible */
.cvz-equal-height .swiper-slide {
    /* Height will be set dynamically via JavaScript based on slides per view */
}

/* Navigation Styles */
.cvz-swiper-navigation {
    @apply absolute inset-0 pointer-events-none z-10;
}

.cvz-swiper-button-prev,
.cvz-swiper-button-next {
    @apply absolute top-1/2 transform -translate-y-1/2 pointer-events-auto;
    @apply w-12 h-12 bg-white rounded-full shadow-lg;
    @apply flex items-center justify-center text-blue-600;
    @apply hover:bg-blue-50 hover:scale-105 transition-all duration-200;
    @apply cursor-pointer z-20;
}

.cvz-swiper-button-prev {
    @apply left-0;
}

.cvz-swiper-button-next {
    @apply right-0;
}

/* Mobile Navigation Adjustments */
@media (max-width: 767px) {
    .cvz-swiper-button-prev,
    .cvz-swiper-button-next {
        @apply w-10 h-10;
    }
    
    .cvz-swiper-button-prev {
        @apply left-2;
    }
    
    .cvz-swiper-button-next {
        @apply right-2;
    }
    
    .cvz-swiper-button-prev svg,
    .cvz-swiper-button-next svg {
        @apply w-5 h-5;
    }
}

/* Disabled Navigation States */
.cvz-swiper-button-prev.swiper-button-disabled,
.cvz-swiper-button-next.swiper-button-disabled {
    @apply opacity-30 cursor-not-allowed;
}

.cvz-swiper-button-prev.swiper-button-disabled:hover,
.cvz-swiper-button-next.swiper-button-disabled:hover {
    @apply bg-white scale-100;
}

/* Pagination Styles */
.swiper-pagination {
    @apply relative mt-6 text-center;
}

.swiper-pagination-bullet {
    @apply inline-block w-3 h-3 rounded-full bg-gray-300 mx-1 cursor-pointer;
    @apply transition-all duration-200;
}

.swiper-pagination-bullet-active {
    @apply bg-blue-600 scale-125;
}

/* Card Styles for Slides */
.cvz-unified-swiper .swiper-slide .card {
    @apply h-full flex flex-col;
}

/* Mobile Optimizations */
@media (max-width: 767px) {
    .cvz-mobile-full-width .cvz-unified-swiper {
        @apply px-2;
    }
    
    /* Ensure slides use full available width on mobile */
    .cvz-mobile-full-width .swiper-slide {
        @apply px-2;
    }
    
    /* Remove extra spacing on mobile */
    .cvz-mobile-full-width .swiper-container-wrapper {
        @apply overflow-visible;
    }
}

/* Responsive Spacing */
@media (min-width: 640px) {
    .cvz-unified-swiper {
        padding: 2rem 0;
    }
}

@media (min-width: 1024px) {
    .cvz-unified-swiper {
        padding: 2.5rem 0;
    }
}

/* Override default Swiper styles */
.cvz-unified-swiper .swiper-button-next:after,
.cvz-unified-swiper .swiper-button-prev:after {
    display: none !important;
}

/* Loading States */
.cvz-swiper-loading {
    @apply flex items-center justify-center py-12;
}

.cvz-swiper-loading .spinner {
    @apply animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600;
}

/* Error States */
.cvz-swiper-error {
    @apply bg-red-50 border border-red-200 rounded-lg p-4;
}

/* Smooth transitions */
.cvz-unified-swiper .swiper-wrapper {
    transition-timing-function: ease-out;
}

/* Focus styles for accessibility */
.cvz-swiper-button-prev:focus,
.cvz-swiper-button-next:focus {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}

.swiper-pagination-bullet:focus {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}