/* fppg-plus/assets/css/frontend-fp-sliding.css */

.fppg-plus-fp-sliding-bar {
    display: flex; /* Mantiene Envío Garantizado y logos en la misma fila */
    width: 100%;
    overflow: hidden; /* Oculta desbordamientos que no sean del logos-container */
    box-sizing: border-box;
    position: relative;
    z-index: 9999;
    min-height: 50px;
    align-items: center; /* Alinea verticalmente */
    background-color: #ffffff; /* Asegura un fondo para el difuminado */
}

/* Sección de texto estático "Envío Garantizado" */
.fp-sliding-static-section {
    flex-shrink: 0; /* Evita que este elemento se encoja */
    padding: 10px 20px;
    font-size: 1.1em;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 180px; /* Ancho mínimo razonable para el texto, ajusta si es necesario */
    box-sizing: border-box;
    background-color: #f0f0f0;
    color: #333;
    min-height: 55px;
    /* order no es necesario aquí si siempre va primero en el HTML */
}

/* Contenedor principal de los logos deslizantes */
.fp-sliding-logos-container {
    flex-grow: 1; /* Permite que ocupe el espacio restante en el flex container */
    overflow-x: auto; /* PERMITE EL SCROLL HORIZONTAL en móvil */
    overflow-y: hidden; /* Oculta scroll vertical si lo hubiera */
    -webkit-overflow-scrolling: touch; /* Mejora el scroll en iOS */
    position: relative;
    height: 100%;
    display: flex; /* Para que los logos internos se puedan alinear y la animación funcione */
    align-items: center;
    /* NOTA: En este escenario, la animación se aplica a .fp-sliding-logos-content,
             que es un hijo directo de este contenedor con overflow.
             Asegúrate de que la animación no impida el scroll manual si se desea. */
}

/* Opcional: Ocultar la barra de desplazamiento en .fp-sliding-logos-container */
.fp-sliding-logos-container::-webkit-scrollbar {
    display: none; /* Para Chrome, Safari y Opera */
}
.fp-sliding-logos-container {
    -ms-overflow-style: none;  /* Para IE y Edge */
    scrollbar-width: none;  /* Para Firefox */
}


/* Contenido de los logos que se animará */
.fp-sliding-logos-content {
    display: flex; /* Sigue siendo flex para que los logos se coloquen en fila */
    white-space: nowrap; /* Asegura que los logos estén en una sola línea */
    will-change: transform; /* Optimización para la animación */
    animation: fp-slide-logos 10s linear infinite; /* Animación */
    /* NEW: Asegurarse de que el contenido es suficientemente ancho para su propia animación */
    min-width: fit-content; /* Asegura que no se contraiga y permite que la animación tenga espacio */
}

/* Estilo para cada imagen de logo */
.fp-sliding-logo {
    height: 45px;
    width: auto;
    margin: 0 20px;
    vertical-align: middle;
    opacity: 0.8;
    /* filter: grayscale(100%); */ /* Comentado para que se vean a color */
    transition: filter 0.3s ease-in-out, opacity 0.3s ease-in-out;
    flex-shrink: 0; /* Asegura que los logos no se encojan */
}

.fp-sliding-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* Animación de los logos */
@keyframes fp-slide-logos {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Sigue siendo -50% si el contenido está duplicado */
}

/* Efecto de difuminado en el borde derecho */
.fp-sliding-fade-effect {
    position: absolute;
    top: 0;
    right: 0;
    width: 120px; /* Ancho del difuminado */
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, #ffffff 100%); /* Color de fondo final para el difuminado */
    pointer-events: none; /* Permite hacer clic a través del difuminado */
}

/* Ajustes responsivos (Simplificados) */
@media (max-width: 768px) {
    /* Aquí no cambiamos a column, mantenemos flex (row) */
    .fppg-plus-fp-sliding-bar {
        /* flex-direction: row; -- No es necesario especificar, ya es el valor por defecto */
        /* min-height: auto; -- Puedes ajustarlo si necesitas que la barra se adapte mejor en altura */
    }
    .fp-sliding-static-section {
        /* width: auto; -- Dejar que el contenido defina el ancho en móvil */
        min-width: 120px; /* Un poco más pequeño para móviles */
        padding: 8px 15px;
        font-size: 1em;
        /* order: no necesario, siempre ira a la izquierda */
    }
    .fp-sliding-logos-container {
        /* width: auto; -- Flex-grow lo manejará */
        padding: 5px 0;
        /* order: no necesario, siempre ira a la derecha */
    }
    .fp-sliding-logo {
        height: 30px;
        margin: 0 15px;
    }
    .fp-sliding-fade-effect {
        width: 50px;
    }
}

@media (max-width: 480px) {
    .fp-sliding-static-section {
        font-size: 0.9em;
        padding: 6px 10px;
        min-width: 100px; /* Puede ser aún más pequeño */
    }
    .fp-sliding-logo {
        height: 45px;
        margin: 0 10px;
    }
}