/**
 * GMoney Logo Carousel Widget Stylesheet
 * GPU Accelerated 60fps Ticker Marquee con Presets Monocromáticos (Negro/Blanco/Color)
 */

/* Contenedor Principal */
.gmoney-logo-carousel__wrapper {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    padding: 10px 0;
    margin: 0 auto;
}

/* Filas del Carrusel */
.gmoney-logo-carousel__row {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    display: block;
}

/* Fila 1 */
.gmoney-logo-carousel__row-1 {
    margin-bottom: 24px;
}

/* Fila 2 */
.gmoney-logo-carousel__row-2 {
    margin-bottom: 0;
}

/* Track contenedor de los logos */
.gmoney-logo-carousel__track {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: max-content;
    box-sizing: border-box;
    will-change: transform;
}

/* -------------------------------------------------------------
 * ANIMACIONES MARQUEE EN MODO CONTINUO (0% SALTOS / 0% FLASHES)
 * ------------------------------------------------------------- */
.gmoney-logo-carousel__wrapper.mode-continuous .gmoney-marquee-left {
    animation: gmoneyMarqueeLeft var(--gmoney-speed, 20s) linear infinite !important;
}

.gmoney-logo-carousel__wrapper.mode-continuous .gmoney-marquee-right {
    animation: gmoneyMarqueeRight var(--gmoney-speed, 20s) linear infinite !important;
}

.gmoney-logo-carousel__wrapper.pause-on-hover .gmoney-logo-carousel__row:hover .gmoney-logo-carousel__track {
    animation-play-state: paused !important;
}

/* Keyframes Fila 1: Derecha a Izquierda */
@keyframes gmoneyMarqueeLeft {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

/* Keyframes Fila 2: Izquierda a Derecha */
@keyframes gmoneyMarqueeRight {
    0% {
        transform: translate3d(-50%, 0, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

/* -------------------------------------------------------------
 * CÁLCULO DE ANCHO: EXACTAMENTE 5 LOGOS EN DESKTOP (RESPONSIVE)
 * ------------------------------------------------------------- */
.gmoney-logo-carousel__slide {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: auto !important;
    box-sizing: border-box;
    flex: 0 0 calc(100% / var(--gmoney-slides-desktop, 5)) !important;
    width: calc(100% / var(--gmoney-slides-desktop, 5)) !important;
    max-width: calc(100% / var(--gmoney-slides-desktop, 5)) !important;
    padding-left: calc(var(--gmoney-gap, 20px) / 2);
    padding-right: calc(var(--gmoney-gap, 20px) / 2);
}

@media (max-width: 1024px) {
    .gmoney-logo-carousel__slide {
        flex: 0 0 calc(100% / var(--gmoney-slides-tablet, 3)) !important;
        width: calc(100% / var(--gmoney-slides-tablet, 3)) !important;
        max-width: calc(100% / var(--gmoney-slides-tablet, 3)) !important;
    }
}

@media (max-width: 767px) {
    .gmoney-logo-carousel__slide {
        flex: 0 0 calc(100% / var(--gmoney-slides-mobile, 2)) !important;
        width: calc(100% / var(--gmoney-slides-mobile, 2)) !important;
        max-width: calc(100% / var(--gmoney-slides-mobile, 2)) !important;
    }
}

/* Item contenedor del Logo */
.gmoney-logo-carousel__item {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 50px;
    box-sizing: border-box;
    text-align: center;
}

/* Enlace alrededor del Logo */
.gmoney-logo-carousel__link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-decoration: none;
    border: none;
    outline: none;
}

/* Imagen del Logotipo */
.gmoney-logo-carousel__img {
    display: block !important;
    max-width: 160px;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    box-shadow: none;
    border: none;
    border-radius: 0;
    opacity: 0.9;
    user-select: none;
    -webkit-user-drag: none;
    transition: all 0.3s ease-in-out;
}

/* -------------------------------------------------------------
 * PRESETS DE COLOR DE LOGOTIPOS (NEGRO / BLANCO / COLOR ORIGINAL)
 * ------------------------------------------------------------- */

/* Preset por defecto: Negro en Normal -> Blanco en Hover */
.gmoney-logo-preset-black_to_white .gmoney-logo-carousel__img {
    filter: brightness(0) invert(0);
}
.gmoney-logo-preset-black_to_white .gmoney-logo-carousel__item:hover .gmoney-logo-carousel__img {
    filter: brightness(0) invert(1);
}

/* Preset: Blanco en Normal -> Negro en Hover */
.gmoney-logo-preset-white_to_black .gmoney-logo-carousel__img {
    filter: brightness(0) invert(1);
}
.gmoney-logo-preset-white_to_black .gmoney-logo-carousel__item:hover .gmoney-logo-carousel__img {
    filter: brightness(0) invert(0);
}

/* Preset: Negro en Normal -> Color Original en Hover */
.gmoney-logo-preset-black_to_color .gmoney-logo-carousel__img {
    filter: brightness(0) invert(0);
}
.gmoney-logo-preset-black_to_color .gmoney-logo-carousel__item:hover .gmoney-logo-carousel__img {
    filter: none;
}

/* Preset: Blanco en Normal -> Color Original en Hover */
.gmoney-logo-preset-white_to_color .gmoney-logo-carousel__img {
    filter: brightness(0) invert(1);
}
.gmoney-logo-preset-white_to_color .gmoney-logo-carousel__item:hover .gmoney-logo-carousel__img {
    filter: none;
}

/* Preset: Escala de Grises en Normal -> Color Original en Hover */
.gmoney-logo-preset-grayscale_to_color .gmoney-logo-carousel__img {
    filter: grayscale(100%);
}
.gmoney-logo-preset-grayscale_to_color .gmoney-logo-carousel__item:hover .gmoney-logo-carousel__img {
    filter: grayscale(0%);
}

/* Preset: Ninguno (Color original en ambos) */
.gmoney-logo-preset-none .gmoney-logo-carousel__img {
    filter: none;
}