/* Contenedor principal de todo el footer del módulo */
.mycustomfooter-wrapper {
    display: flex;
    justify-content: center; /* Centra horizontalmente los iconos */
    align-items: center; /* Centra verticalmente los iconos */
    padding: 20px 0; /* Espaciado superior e inferior */
    background-color: #fcfcfc; /* Fondo suave para el área de los iconos */
    flex-wrap: wrap; /* Permite que los iconos se envuelvan si hay muchos */
    gap: 15px; /* Espacio entre los iconos */
    width: 100%;
    border: 0;
}

.payment-icons-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px; /* Espacio entre los iconos */
}

.payment-icon {
    max-width: 80px; /* Ajusta el tamaño de los iconos de pago individuales */
    height: auto;
    opacity: 0.9; /* Un poco de transparencia */
    transition: opacity 0.3s ease; /* Transición suave al pasar el ratón */
}

.payment-icon:hover {
    opacity: 1; /* Opacidad completa al pasar el ratón */
}

/* Barra inferior azul */
.mycustomfooter-bottom-bar {
    background-color: #00609b; /* Un tono de azul PrestaShop (ajusta según tu preferencia) */
    color: #ffffff; /* Texto blanco */
    padding: 10px 0; /* Espaciado interno de la barra */
    font-size: 0.85em; /* Tamaño de fuente ligeramente más pequeño */
    text-align: center; /* Centra el texto */
    position: absolute;
    left: 0;
    width: 100%;
}

/* Si usas la clase 'container' de Bootstrap para centrar el contenido */
.mycustomfooter-bottom-bar .container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Permite que el texto se envuelva en pantallas pequeñas */
    max-width: 1200px; /* Ancho máximo para el contenido en el container */
    margin: 0 auto; /* Centra el container */
}

.mycustomfooter-bottom-bar a {
    color: #ffffff; /* Color blanco para el enlace */
    text-decoration: underline; /* Subrayado por defecto para el enlace */
}

.mycustomfooter-bottom-bar a:hover {
    color: #e6e6e6 !important; /* Un blanco más claro al pasar el ratón */
    text-decoration: none; /* Sin subrayado al pasar el ratón */
}

.mycustomfooter-bottom-bar .separator {
    margin: 0 8px; /* Espacio alrededor del separador */
    display: inline-block; /* Asegura que el separador se alinee correctamente */
}

/* Media queries para pantallas pequeñas */
@media (max-width: 768px) {
    .mycustomfooter-bottom-bar .container {
        flex-direction: column; /* Apila el texto verticalmente en pantallas pequeñas */
        padding: 0 15px; /* Pequeño padding lateral para móviles */
    }
    .mycustomfooter-bottom-bar .separator {
        display: none; /* Oculta el separador en pantallas pequeñas si se apila */
    }
    .copyright-text, .promotion-text {
        margin-bottom: 5px; /* Espacio entre líneas apiladas */
    }
    .payment-icon {
        max-width: 60px; /* Ajusta tamaño de iconos en móviles */
    }
}

.mycustomfooter-wrapper img[alt="Webpay Plus"]{
    max-width: 160px;
}

.mycustomfooter-wrapper img[alt="PayPal"]{
    max-width: 150px;
}