/* Short Videos Widget Styles */

.short-videos-widget {
    width: 100%;
    margin: 20px 0;

    .short-videos-header {
        text-align: center;
        margin-bottom: 20px;
    }

    .short-videos-label {
        display: block;
        font-size: 14px;
        color: #666;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 8px;
    }

    .short-videos-title > *{
        font-size: 24px;
        font-weight: 700;
        color: #333;

        > * {
            margin: 0 !important;
        }

        @media (min-width:768px){
            margin-bottom: 50px;
        }

        @media (max-width:768px){
            margin-bottom: 20px;
        }

    }

    .short-videos-controls {
        display: flex;
    }

    .short-videos-wrapper {
        position: relative;

        .short-videos-container {
            border-radius: 20px;

            .swiper-slide {
                transition: opacity 0.3s ease;
                opacity: 0.4;

                &.swiper-slide-fully-visible,
                &.swiper-slide-active {
                    opacity: 1;
                }
            }
        }

        .short-video-embed {
            width: 100%;
            border-radius: 12px;
            overflow: hidden;
            position: relative;

            iframe, video {
                aspect-ratio: 9 / 16;
                border: none;
                border-radius: 12px;
                display: block;
                width: 100%;
                height: auto;
            }
        }

        .short-videos-pagination {
            position: relative;
            right: 0;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            gap: 8px;
            width: max-content;
            margin: 12px auto 0;

            .swiper-pagination-bullet {
                width: 12px;
                height: 12px;
                opacity: 1 !important;
                margin: 0;
            }

            .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
                background-color: #CDCFD1;
            }

            .swiper-pagination-bullet-active {
                background-color: #788090;
            }
        }

        .short-videos-button-next,
        .short-videos-button-prev {
            display: flex;
            justify-content: center;
            font-weight: bold;
            position: absolute;
            align-items: center;
            z-index: 4;
            top: 50%;
            transform: translateY(-50%);


            &.swiper-button-lock {
                display: none !important;
            }
        }

        .short-videos-button-next {
            &:after {
                border-radius: 100%;
                background: #F2F4F8;
                width: 40px;
                height: 40px;
                content: '';
            }

            &:not(.swiper-button-disabled) {
                cursor: pointer;

                &:after {
                    content: url('data:image/svg+xml,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="40" height="40" rx="20" fill="%23F2F4F8"/><path d="M26 19.5002L14 19.5002M26 19.5002L21.5 15M26 19.5002L21.5 24" stroke="%23161616" stroke-width="2" stroke-linecap="round"/></svg>');
                }
            }

            &.swiper-button-disabled {
                &:after {
                    content: url('data:image/svg+xml,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="40" height="40" rx="20" fill="%23F2F4F8"/><path d="M26 19.5002L14 19.5002M26 19.5002L21.5 15M26 19.5002L21.5 24" stroke="%23CDCFD1" stroke-width="2" stroke-linecap="round"/></svg>');
                }
            }
        }

        .short-videos-button-prev {
            &:after {
                border-radius: 100%;
                background: #F2F4F8;
                width: 40px;
                height: 40px;
                content: '';
            }

            &:not(.swiper-button-disabled) {
                cursor: pointer;

                &:after {
                    content: url('data:image/svg+xml,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="40" y="40" width="40" height="40" rx="20" transform="rotate(-180 40 40)" fill="%23F2F4F8"/><path d="M14 20.4998L26 20.4998M14 20.4998L18.5 25M14 20.4998L18.5 16" stroke="%23161616" stroke-width="2" stroke-linecap="round"/></svg>');
                }
            }

            &.swiper-button-disabled {
                &:after {
                    content: url('data:image/svg+xml,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="40" y="40" width="40" height="40" rx="20" transform="rotate(-180 40 40)" fill="%23F2F4F8"/><path d="M14 20.4998L26 20.4998M14 20.4998L18.5 25M14 20.4998L18.5 16" stroke="%23CDCFD1" stroke-width="2" stroke-linecap="round"/></svg>');
                }
            }
        }
    }
}

@media (min-width:1190px) {
    .short-videos-widget {
        .short-videos-button-prev {
            left: -50px;
        }

        .short-videos-button-next {
            right: -50px;
        }
    }
}
@media (max-width:1190px) {
    .short-videos-widget {
        .short-videos-button-prev {
            left: 0px;
        }

        .short-videos-button-next {
            right: 0px;
        }
    }
}

@media (min-width:575px) {
    .short-videos-widget {
        .short-videos-wrapper {
            &.container{
                padding: 0;    
            }
        }
    }
}

@media (max-width: 575px) {
    .short-videos-widget {
        .short-videos-controls {
            justify-content: center;
            align-items: center;
            margin-top: 16px;
            gap: 16px;
            display: none;
        }

        .short-videos-button-prev,
        .short-videos-button-next {
            position: relative !important;
            top: 0;
            transform: none;
            width: 40px;
            height: 40px;
        }

        .short-videos-pagination {
            margin: 0 !important;
        }
    }
}

.short-video-iframe-wrapper {
    position: relative;
    width: 100%;
    height: 100%;

    iframe {
        display: block;
        width: 100%;
        height: 100%;
    }

    .short-video-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
        cursor: pointer;
        background: transparent;

        &.hidden {
            display: none;
        }
    }
}