/*
 * MF Component Slider
 * Estilos frontend del componente y sus templates.
 */

.mfcs-slider {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: var(--mfcs-ratio);
    overflow: hidden
}

.mfcs-template-carousel {
    height: var(--mfcs-carousel-height);
    aspect-ratio: auto
}

.mfcs-slider__viewport {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.mfcs-slider__track {
    display: flex;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    transition: transform var(--mfcs-transition-duration, .5s) ease
}

.mfcs-slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden
}

.mfcs-slide__picture {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0
}

.mfcs-slide__link {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    text-decoration: none
}

.mfcs-slide__image {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    object-fit: cover
}

.mfcs-slider__arrow {
    position: absolute;
    top: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(238, 127, 0, .45);
    color: #fff;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color .2s ease, opacity .2s ease
}

.mfcs-slider__arrow:hover {
    background: #ee7f00;
}

.mfcs-slider__arrow--prev {
    left: 16px
}

.mfcs-slider__arrow--next {
    right: 16px
}

/* Iconos SVG de las flechas de navegación. */
.mfcs-slider__arrow svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: currentColor
}

.mfcs-slider__dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    overflow: visible !important;
}

.mfcs-slider__dot {
    display: block;
    width: 10px;
    height: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease
}

.mfcs-slider__dot:hover {
    transform: scale(1.15)
}

.mfcs-slider__dot.is-active {
    background: #fff;
}

.mfcs-transition-fade .mfcs-slider__track {
    position: relative;
    display: block;
    transform: none !important
}

.mfcs-transition-fade .mfcs-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--mfcs-transition-duration, .5s) ease, visibility var(--mfcs-transition-duration, .5s) ease
}

.mfcs-transition-fade .mfcs-slide.is-active {
    opacity: 1;
    visibility: visible
}

.mfcs-template-carousel .mfcs-slide {
    flex: 0 0 33.333333%;
    width: 33.333333%;
    height: fit-content;
}

.mfcs-template-carousel .mfcs-slide__image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    object-fit: contain
}

.mfcs-template-carousel .mfcs-slide__picture {
    display: flex;
    align-items: center;
    justify-content: center;
    height: fit-content;
}

.mfcs-template-carousel .mfcs-slide__link {
    display: flex;
    align-items: center;
    justify-content: center
}

.mfcs-template-carousel .mfcs-transition-fade .mfcs-slide {
    width: 100%
}

@media (max-width:1023px) {
    .mfcs-template-carousel .mfcs-slide {
        flex-basis: 50%;
        width: 50%
    }
}

@media (max-width:767px) {
    .mfcs-template-carousel .mfcs-slide {
        flex-basis: 100%;
        width: 100%
    }

    .mfcs-slider__arrow {
        width: 38px;
        height: 38px
    }

    .mfcs-slider__arrow--prev {
        left: 10px
    }

    .mfcs-slider__arrow--next {
        right: 10px
    }

    .mfcs-slider__dots {
        bottom: 10px;
        gap: 6px
    }

    .mfcs-slider__dot {
        width: 8px;
        height: 8px
    }
}

@media (prefers-reduced-motion:reduce) {
    .mfcs-slider__track {
        transition: none !important
    }

    .mfcs-transition-fade .mfcs-slide {
        transition: none !important
    }

    .mfcs-slider__arrow,
    .mfcs-slider__dot {
        transition: none !important
    }
}