﻿.comments-dialog {
    direction: rtl;
}
.iframe_comments iframe {
    width: calc(100% - 20px);
    height: calc(100% - 80px);
}

@media screen and (max-width:1000px) {

    .iframe_comments iframe {
        width: calc(100vw - 20px);
        height: calc(100% - 80px);
    }
}





.comments-dialog .comments-dialog-box {
    position: absolute;
    bottom: 0;
    left: calc(100% - 800px);
    width: 370px;
    height: 100vh;
    padding: 0 10px;
    z-index: 5;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .15);
    background-color: #fff;
    z-index: 1;
}

@media screen and (max-width:1000px) {

    .comments-dialog .comments-dialog-box {
        display: block;
        left: 0;
        transition: bottom .5s;
        bottom: -100%;
        opacity:0;
        pointer-events:none;
    }
    .comments-dialog.is-open .comments-dialog-box {
        transform: none !important;
        width: calc(100% - 30px);
        height: 70vh;
    }
}

.comments-dialog.is-open .comments-dialog-box {
    display: block;
    z-index: 99999999;
    bottom: 0px;
    position: fixed;
    transform: translateX(-50%);
    padding: 0 15px;
    opacity: 1;
    pointer-events: all;
}


    @media screen and (min-width:1000px) {
        .swiper:has(.comments-dialog.is-open) {
            width: 1000px;
        }

            .swiper:has(.comments-dialog.is-open) shorts-video .video-wrapper {
                width: 600px;
            }

            .swiper:has(.comments-dialog.is-open) .comments-dialog.is-open .comments-dialog-box {
                width: 370px;
                float: right;
                left: calc(100% - 400px);
                top: 0;
                position: fixed;
                transform: unset;
                height: 100vh;
                transition: all .3s;
                z-index: 1;
            }

            .swiper:has(.comments-dialog.is-open) .swiper-prev-next {
                left: calc(((100vw - 600px) / 2) - 210px);
            }
    }





    .comments-dialog .comments-dialog-box header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        color: #777;
    }

.comments-dialog .comments-dialog-box .comment-close-button {
    background-color: transparent;
    border: none;
    padding: 0;
}


    .comments-dialog .comments-dialog-box .comment-close-button svg {
        width: 20px;
        height: 20px;
        margin-right: 0;
    }