/**
 * Services Carousel Styles
 * 
 * Estilos para el carousel de servicios cuando hay más de 5 items
 *
 * @package 3DAYSGC
 */

/* Contenedor del carousel */
.services-carousel-wrapper {
    position: relative;
    padding: 0 2rem;
    margin: 0 -1rem;
    width: calc(100% + 2rem);
    box-sizing: border-box;
}

/* Swiper container */
.services-swiper {
    padding-bottom: 3rem;
    overflow: visible;
}

/* Slides */
.services-swiper .swiper-slide {
    height: auto;
    display: flex;
}

/* Asegurar que las cards tengan altura uniforme */
.services-swiper .swiper-slide .service-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Pagination dots */
.services-swiper .swiper-pagination {
    position: relative;
    margin-top: 2rem;
    bottom: auto;
    text-align: center;
}

.services-swiper .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: rgba(214, 141, 0, 0.3);
    opacity: 1;
    transition: all 0.3s ease;
    margin: 0 4px;
}

.services-swiper .swiper-pagination-bullet-active {
    background: rgb(214, 141, 0);
    width: 24px;
    border-radius: 6px;
    transform: scale(1.1);
}

/* Dynamic bullets - bullets que se ocultan cuando hay muchos */
.services-swiper .swiper-pagination-bullet-dynamic {
    transition: all 0.3s ease;
}

/* Fade gradients */
.carousel-fade-left,
.carousel-fade-right {
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 10;
}

/* Ajustes responsive */
@media (max-width: 640px) {
    .services-carousel-wrapper {
        padding: 0 0.5rem;
        margin: 0 -0.5rem;
        width: calc(100% + 1rem);
    }

    .carousel-fade-left,
    .carousel-fade-right {
        width: 2rem;
    }
}

/* Asegurar que el fondo del fade coincida con el fondo de la sección (bg-gray-50 = #F9FAFB) */
section#services .carousel-fade-left {
    background: linear-gradient(to right, #F9FAFB, rgba(249, 250, 251, 0)) !important;
}

section#services .carousel-fade-right {
    background: linear-gradient(to left, #F9FAFB, rgba(249, 250, 251, 0)) !important;
}

/* Smooth transitions */
.services-swiper .swiper-slide {
    transition: opacity 0.3s ease;
}

/* Prevenir overflow horizontal en toda la página */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Asegurar que la sección de servicios no cause overflow */
section#services {
    overflow-x: hidden;
    max-width: 100%;
}

section#services .container {
    overflow-x: hidden;
    max-width: 100%;
}