/**
 * ✅ OPTIMIZADO: CSS para Featured Products Slider
 * Archivo CSS separado correctamente del PHP
 */

/* Contenedor principal del carrusel */
.featured-carousel {
    overflow: hidden;
    contain: layout style paint; /* CSS Containment para mejor rendimiento */
}

.featured-carousel-inner {
    display: flex;
    will-change: transform; /* Optimización GPU */
    backface-visibility: hidden;
    transform: translateZ(0); /* Forzar aceleración GPU */
}

/* Slides de productos */
.featured-product-slide {
    flex-shrink: 0;
    min-width: 0; /* Prevenir overflow */
}

/* Optimizaciones de imágenes */
.featured-product-img {
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Botones de navegación */
.featured-carousel-prev,
.featured-carousel-next {
    will-change: transform, background-color;
    backface-visibility: hidden;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.featured-carousel-prev:active,
.featured-carousel-next:active {
    transform: scale(0.95);
}

/* Paginación */
.featured-carousel-pagination {
    contain: layout style;
}

.featured-pagination-dot {
    will-change: background-color;
    transition: background-color 0.2s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.featured-pagination-dot:active {
    transform: scale(0.9);
}

/* Estados de carga */
.featured-products-loading {
    opacity: 0.8;
    pointer-events: none;
    filter: blur(0.5px);
}

.featured-products-loaded {
    opacity: 1;
    pointer-events: auto;
    filter: none;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

/* Optimización para dispositivos lentos */
@media (prefers-reduced-motion: reduce) {
    .featured-product-img {
        transition: none !important;
    }
    
    .group:hover .featured-product-img {
        transform: none !important;
    }
    
    .featured-carousel-inner {
        transition: none !important;
    }
    
    .featured-pagination-dot {
        transition: none !important;
    }
}

/* Optimización para pantallas de alta densidad */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .featured-product-img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Hover effects optimizados */
.featured-product-slide .group:hover .featured-product-img {
    transform: scale(1.05) translateZ(0);
}

/* Ajuste del texto "Precio online" */
.featured-product-slide .text-orange-500.border.border-orange-500 {
    margin-left: -0.25rem; /* Mover un poco más a la izquierda */
}

/* Mantener precio en oferta en una sola línea */
.featured-product-slide .flex.justify-between.items-center.gap-2 {
    flex-wrap: nowrap; /* No permitir wrap */
    min-width: 0; /* Permitir que los elementos se contraigan */
}

.featured-product-slide .flex.items-baseline.gap-2 {
    flex-wrap: nowrap;
    min-width: 0;
    flex-shrink: 1;
}

.featured-product-slide .font-semibold.text-red-600 {
    white-space: nowrap; /* Mantener precio en una línea */
    font-size: 0.875rem; /* Reducir ligeramente el tamaño si es necesario */
    line-height: 1.2;
}

.featured-product-slide .bg-red-600.px-2.py-0\.5 {
    flex-shrink: 0; /* No permitir que el badge se contraiga */
    white-space: nowrap;
}

/* Responsive optimizations */
@media (max-width: 640px) {
    .featured-carousel-prev,
    .featured-carousel-next {
        width: 2.5rem;
        height: 2.5rem;
    }
    
    .featured-carousel-prev svg,
    .featured-carousel-next svg {
        width: 1rem;
        height: 1rem;
    }
}