﻿/* custom scroll */
.custom-scrollbar,
[class^="custom-scrollbar-"],
[class*=" custom-scrollbar-"] {
    position: relative;
    height: 4px;
    background: #eee;
    border-radius: 10px;
    margin-top: 10px;
    z-index: 999;
}
.custom-drag,
[class^="custom-drag-"],
[class*=" custom-drag-"] {
    position: absolute;
    height: 100%;
    width: 20%;
    background: #d1d1d1;
    border-radius: 10px;
    cursor: pointer;
    transition: left 0.2s cubic-bezier(.25,.8,.25,1);
}

.custom-scrollbar:hover .custom-drag,
[class^="custom-scrollbar-"]:hover [class^="custom-drag-"],
[class*=" custom-scrollbar-"]:hover [class*=" custom-drag-"] {
    background: #999;
}

.swiper { opacity: 0; transition: opacity 0.3s ease; }
.swiper.swiper-initialized { opacity: 1; }
.swiper-custom-wrapper { position: relative; }
.swiper-custom-wrapper .swiper-scrollbar { position: absolute; bottom: 0; left: 0; width: 100%; }

.custom-scrollbar-featured {
    margin-top: 8px;
}

.swiper-button-next,
.swiper-button-prev {
    background: white;
    width: 60px !important;
    height: 60px !important;
    border-radius: 30px;
    border: 1px solid lightgray !important;
    box-shadow: 1px 3px 5px 1px rgba(0, 0, 0, 0.1);
    margin-top: -40px !important;
}

    .swiper-button-next:hover,
    .swiper-button-prev:hover {
        background-color: #e8e8e8 !important;
    }

    /* Flechas - Íconos y tipografía */
    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-family: 'Roboto', sans-serif !important;
        font-size: 60px !important;
        color: #1c927a !important;
        margin-top: -6px;
    }

    .swiper-button-next::after {
        content: '›' !important;
        margin-right: -4px;
    }

    .swiper-button-prev::after {
        content: '‹' !important;
        margin-left: -4px;
    }

.swiper-custom-wrapper .swiper-button-prev { left: -40px; }
.swiper-custom-wrapper .swiper-button-next { right: -40px; }
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
    display: none !important;
}