/**
 * Edenred Mobile Carousel - VERSIÓN CON SOPORTE PARA GRIDS
 */

/* ========================================
   Accesibilidad - Screen Reader Only
   ======================================== */

/* Clase para contenido solo visible para lectores de pantalla */
.sr-only,
.screen-reader-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border-width: 0 !important;
}

/* Variante focusable (para skip links) */
.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* ========================================
   Container principal
   ======================================== */

.swiper-slide {
    box-shadow: none !important;
}

.edenred-mobile-carousel.carousel-initialized {
    position: relative !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.edenred-mobile-carousel.carousel-initialized .edenred-swiper {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
}

.edenred-mobile-carousel.carousel-initialized .swiper-wrapper {
    display: flex !important;
    transition-property: transform !important;
    transition-timing-function: ease !important;
    position: relative !important;
    align-items: stretch !important;
}

/* ========================================
   CRÍTICO: Slides
   ======================================== */

.edenred-mobile-carousel.carousel-initialized .swiper-slide {
    flex-shrink: 0 !important;
    height: 100% !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
}

/* Ancho fijo para slides de grid - esto previene el bug de 33 millones de píxeles */
.edenred-mobile-carousel.carousel-initialized[data-carousel-type="grid"] .swiper-slide {
    width: 80% !important;
    max-width: 300px !important;
}

/* ========================================
   Contenido de los slides - SELECTIVO
   ======================================== */

/* Contenedores flex de Elementor y widgets de grid */
/* Contenedores flex de Elementor y widgets de grid */
.edenred-mobile-carousel.carousel-initialized .swiper-slide>.e-con,
.edenred-mobile-carousel.carousel-initialized .swiper-slide>.elementor-column,
.edenred-mobile-carousel.carousel-initialized .swiper-slide>.elementor-element:not(.elementor-element-overlay):not(.elementor-shape):not(.elementor-background-overlay) {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    /* width: 100% !important;  <- Eliminado width forzado para no romper desktop */
    max-width: 100% !important;
    height: auto !important;
}

/* Solo aplicar 100% width si NO es desktop carousel o estamos en mobile */
.edenred-mobile-carousel.carousel-initialized:not([data-enable-desktop="yes"]) .swiper-slide>.e-con,
.edenred-mobile-carousel.carousel-initialized:not([data-enable-desktop="yes"]) .swiper-slide>.elementor-column {
    width: 100% !important;
}

/* En Desktop con carrusel habilitado, respetar ancho natural si está definido */
/* En Desktop con carrusel habilitado, respetar ancho natural si está definido */
@media (min-width: 1025px) {
    .edenred-mobile-carousel.carousel-initialized[data-enable-desktop="yes"] .swiper-slide {
        width: auto;
        /* IMPORTANTE: Sin !important para permitir que el JS defina el ancho */
        max-width: none !important;
        flex-shrink: 0 !important;
        margin-right: 0;
        /* Bootstrap reset habitualmente necesario */
    }

    /* El contenido DEBE llenar el slide, ya que el slide tiene ahora el ancho correcto */
    .edenred-mobile-carousel.carousel-initialized[data-enable-desktop="yes"] .swiper-slide>.e-con,
    .edenred-mobile-carousel.carousel-initialized[data-enable-desktop="yes"] .swiper-slide>.elementor-column {
        width: 100% !important;
    }
}

/* NO forzar display en todos los elementos hijos */
.edenred-mobile-carousel.carousel-initialized .swiper-slide .elementor-widget,
.edenred-mobile-carousel.carousel-initialized .swiper-slide .elementor-widget-wrap,
.edenred-mobile-carousel.carousel-initialized .swiper-slide .e-con-inner {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Asegurar que el contenido de los widgets sea visible (especialmente imágenes) */
.edenred-mobile-carousel.carousel-initialized .swiper-slide .elementor-widget-wrap,
.edenred-mobile-carousel.carousel-initialized .swiper-slide .elementor-widget-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Asegurar que las imágenes sean visibles y centradas */
.edenred-mobile-carousel.carousel-initialized .swiper-slide img {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto !important;
}

/* ========================================
   Flechas ocultas
   ======================================== */

.edenred-mobile-carousel .swiper-button-prev,
.edenred-mobile-carousel .swiper-button-next {
    display: none !important;
}

/* ========================================
   Paginación
   ======================================== */

.edenred-mobile-carousel .swiper-pagination {
    position: static !important;
    margin-top: 10px !important;
    padding: 10px 0 !important;
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    z-index: 10 !important;
}

.edenred-mobile-carousel .swiper-pagination-bullet {
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    background: #CBD5E1 !important;
    opacity: 1 !important;
    margin: 0 6px !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    transform: scale(0.4) !important;
}

.edenred-mobile-carousel .swiper-pagination-bullet-active {
    background: #475569 !important;
    transform: scale(0.8) !important;
}

/* ========================================
   Desktop
   ======================================== */

/* ========================================
   Desktop Overflow Support
   ======================================== */
.edenred-mobile-carousel[data-overflow-right="yes"],
.edenred-mobile-carousel[data-overflow-right="yes"]>.e-con-inner {
    overflow: visible !important;
}

.edenred-mobile-carousel[data-overflow-right="yes"] .edenred-swiper {
    overflow: visible !important;
    width: 100% !important;
}

@media (min-width: 1025px) {
    .edenred-mobile-carousel:not([data-enable-desktop="yes"]) .edenred-swiper {
        display: none !important;
    }

    /* Mostrar el e-con-inner original en desktop SOLO si no es carrusel desktop */
    .edenred-mobile-carousel[data-carousel-type="grid"]:not([data-enable-desktop="yes"])>.e-con-inner {
        display: flex !important;
    }
}

/* ========================================
   Fixes para Editor de Elementor
   ======================================== */
.elementor-editor-active .elementor-element.edenred-mobile-carousel[data-overflow-right="yes"],
.elementor-editor-active .elementor-element.edenred-mobile-carousel[data-overflow-right="yes"]>.e-con-inner,
.elementor-editor-active .elementor-element.edenred-mobile-carousel[data-overflow-right="yes"] .edenred-swiper,
.elementor-editor-active .elementor-element.edenred-mobile-carousel[data-overflow-right="yes"] .swiper-wrapper {
    overflow: visible !important;
    z-index: 9999 !important;
}