/********modal*********/

.sf_modal.is-open {

    display: block !important;

    

.stark_modal_window {

    display: block !important;

}

}



.hide-modal-inside {display:none !important;}











#stark_modal_container::after {

    content: '';

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    backdrop-filter: blur(4px);

}



#stark_modal_container {

    position: fixed;

    width: 100%;

    height: 100%;

    top: 32px;

    left: 0;

    z-index: 999;

    background: #0000001f;

    

    .stark_modal_window::after{

        content: "";

        position: absolute;

        inset: -40px;

        border-radius: inherit;

        opacity: .6;

        z-index: -1;

        background: conic-gradient(from 0deg, rgb(122 162 247 / 35%), rgb(173 142 230 / 35%), rgb(242 205 205 / 35%), rgb(195 232 141 / 35%), rgb(122 162 247 / 35%));

        filter: blur(26px);

        animation: rotate 14s linear infinite reverse;

        pointer-events: none;

    }



    .stark_modal_window {

        z-index: 9;

        transform: translate(-50%, -50%);

        position: absolute;

        top: 50%;

        left: 50%;

        width: 500px;

        max-width: 500px;

        height: 80vh;

        padding: 0.25em 1em 1em;

        display: grid !important;

        grid-template-columns: 1fr;

        grid-template-rows: 40px calc(80vh - 40px);

        overflow: hidden;

        isolation: isolate;

        border-radius: 12px;

        background-clip: padding-box;

        background-color: rgb(72 68 92 / 60%) !important;

        color: var(--text);

        backdrop-filter: blur(30px) saturate(120%);

        -webkit-backdrop-filter: blur(30px) saturate(120%);

        box-shadow: 0 0 0 2px #00000021 inset;

    

        .modal-title {

            display: flex;

            flex-direction: row;

            flex-wrap: nowrap;

            align-items: center;

            padding: 0;

            color: rgb(255 255 255 / 90%);

            font-size: 18px;

            clear: none;

            font-weight: 600;

            justify-content: center;

            height: 40px;

            z-index: 999;

            margin: 0;

            border-bottom: 1.5px solid #ffffff52;

        }



        .modal-back-button {

            width: 40px;

            height: 40px;

            position: absolute;

            top: 8px;

            left: 8px;

            cursor: pointer;

            font-size: 0;

            z-index: 9;

        }



        .close-modal::after {

            content: "" !important;

            margin-right: 0;

            background: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/stark-frame/a-cols-1.svg);

            background-size: contain !important;

            width: 20px;

            height: 20px;

            position: absolute;

            top: 10px;

            right: 10px;

        }



        .close-modal {

            width: 40px;

            height: 40px;

            position: absolute;

            top: 4px;

            right: 5px;

            cursor: pointer;

            font-size: 0;

            z-index: 999;

        }



        #comment-status-message {

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            background: #ffffffcc;

            border-radius: 20px;

            display: none;

            z-index: 99;

            backdrop-filter: blur(4px);

            -webkit-backdrop-filter: blur(4px);



            lottie-player {

                width: 200px !important;

                height: 200px !important;

                position: absolute;

                top: 60%;

                left: 50%;

                transform: translate(-50%, -60%);

                z-index: 99;

            }



            #back-response {

                position: absolute;

                bottom: 0;

                left: 0;

                right: 0;

                height: 40px;

                padding: 0 15px;

                color: #fff;

                background: #000;

                border-radius: 10px;

                font-weight: 600;

                font-family: 'Poppins';

                font-size: 13px;

                margin: 8px;

                text-transform: uppercase;

                cursor: pointer;

                z-index: 99;

                display: flex;

                flex-direction: column;

                align-items: center;

                justify-content: center;

                flex-wrap: nowrap;

            }

        }



        #progress-bar-container {

            height: 100%;

            width: 100%;

            margin: 0;

            display: none;

            z-index: 999;

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

            background: #ffffffcc;

            border-radius: 20px;

            

            .progress-circle {

                transform: translate(-50%, -50%) rotate(-90deg);

                top: 50%;

                left: 50%;

                position: absolute;



                circle:nth-child(2) {

                    stroke: #ffb471;

                    transition: stroke-dashoffset 0.5s ease;

                }



                circle {

                    stroke: #e0e0e0;

                    stroke-linecap: round;

                }

            }

        }



        .stark_modal_page {

            height: 100%;



            .stark-page-title {

                display: none;

            }



            #stark_review_form_wrapper {

                padding: 10px 0.5em 15px 1em;

                width: calc(100% - 1.5em);

                

                .comment-reply-title {

                    font-size: 16px;

                    width: 100% !important;

                    display: flex;

                    margin: 0;

                    font-weight: 600;

                    line-height: 20px;

                    color: #000;

                    margin: 0 0 15px;

                    padding: 0;

                }



                #commentform {

                    padding: 0;



                    .form-submit {

                        position: absolute;

                        bottom: 0;

                        left: 0;

                        right: 0;

                        padding: 10px !important;

                        z-index: 9;

                        margin: 0;

                

                        .send_modal_button {

                            width: 100%;

                            border-radius: 8px;

                            background: #3f3c5a;

                            height: 36px;

                            border: 0;

                            color: #fff;

                            font-weight: 600;

                            font-size: 16px;

                        }

                    }



                    .comment-form-comment {

                        display: flex;

                        flex-direction: column;

                        flex-wrap: nowrap;

                        gap: 0.5em;

                        

                        #comment {

                            resize: none;

                            padding: 10px !important;

                            border-radius: 10px;

                            border: 1px solid #d7d7d7;

                        }

                    }



                    .comment-form-rating {



                        .stars:hover a::before {

                            content: "\e020";

                        }



                        .stars a:hover~a::before {

                            content: "\e021";

                        }



                        .stars.selected a.active::before {

                            content: "\e020";

                        }



                        .stars.selected a:not(.active)::before {

                            content: "\e020";

                        }



                        .stars.selected a.active~a::before {

                            content: "\e021";

                        }



                        .stars {

                            position: relative;

                            font-size: 1.4em;

                            display: flex;

                            margin: 5px 0 20px;

                            flex-direction: row;

                            align-items: center;

                            flex-wrap: nowrap;

                            width: fit-content;

                        

                            span {

                                display: inline-flex;

                                flex-direction: row;

                                flex-wrap: nowrap;

                                align-items: center;



                                a::before {

                                    content: "\e021" / "";

                                    display: flex;

                                    position: absolute;

                                    top: 0;

                                    left: 0;

                                    width: fit-content !important;

                                    height: 1em;

                                    line-height: 1;

                                    font-family: WooCommerce;

                                    text-indent: 0;

                                }



                                a {

                                    position: relative;

                                    height: 1em;

                                    width: 1.2em;

                                    text-indent: -999px;

                                    display: inline-block;

                                    text-decoration: none;

                                    color: #ffb471;

                                }

                            }

                        }   

                    }



                    #com-pho-up {

                        margin: 5px 0px 20px;

                        

                        .upload-cont {

                            height: 200px;

                            width: calc(100% - 1.5em);

                            border-radius: 12px;

                            display: flex;

                            flex-direction: column;

                            align-items: center;

                            justify-content: space-between;

                            padding: 0.75em;

                            gap: 0.5em;

                            background-color: #ebeaf2;



                            .upload-footer {

                                background-color: #ffffff;

                                width: calc(100% - 1em);

                                height: 26px;

                                padding: 4px 8px;

                                border-radius: 6px;

                                cursor: pointer;

                                display: flex;

                                justify-content: flex-end;

                                color: black;

                                border: none;

                                align-items: center;

                                

                                svg {

                                    height: 30px;

                                    fill: #3f3c5a;

                                    background-color: transparent;

                                    border-radius: 50%;

                                    padding: 2px;

                                    cursor: pointer;

                                }



                                p {

                                    flex: 1;

                                    text-align: left;

                                    margin: 0;

                                }

                            }



                            .upload-header {

                                flex: 1;

                                width: 100%;

                                border: 1.5px dashed #3f3c5a;

                                border-radius: 6px;

                                display: flex;

                                align-items: center;

                                justify-content: center;

                                flex-direction: column;

                                

                                svg {

                                    height: 75px;

                                }

                                

                                p {

                                    text-align: center;

                                    color: black;

                                    margin: 0;

                                }

                            }

                        }

                    }



                    .adding-photo-cont {

                        position: relative;

                        

                        .comment-form-photo {

                            display: flex;

                            flex-direction: column;

                            flex-wrap: nowrap;

                            

                            #photo-preview-cont {

                                position: relative;

                                max-width: 460px !important;

                                overflow-x: scroll;

                                

                                #photo-preview {

                                    display: flex;

                                    flex-direction: row;

                                    flex-wrap: nowrap;

                                    list-style-type: none;

                                    margin: 0;

                                }

                            }

                        }

                    }

                }

            }

        }

    }

}



#photo {

    display: none;

}



/******All Comment Photo****/



.adding-photo-cont {

    position: relative;

}



/****tabs****/



@media screen and (min-width: 601px) {

    

    #stark_modal_container {

        display:none;



        .stark_modal_window.active-mob {

            display:none;

        }

    }

}

    

@media screen and (max-width: 600px) {



    #stark_modal_container.active-mob {

        opacity: 1;

        visibility: visible;

    }



    #stark_modal_container {

        opacity: 0;

        visibility: hidden;

        transition: opacity 0.4s ease, visibility 0.4s ease;

        display: block !important;

        height: calc(100% - 46px) !important;

        top: 46px  !important;

    

        .stark_modal_window.active-mob {

            transform: translateY(0%) !important;

            opacity: 1 !important;

        }

        

        .stark_modal_window {

            display: flex !important;

            flex-direction: column;

            flex-wrap: nowrap;

            z-index: 9;

            position: absolute;

            top: auto;

            left: 0;

            bottom: 0;

            right: 0;

            width: calc(100% - 2em) !important;

            max-width: unset !important;

            padding: 0.5em 1em 1em;

            border-radius: 15px 15px 0 0;

            background: #ffffff;

            opacity: 0;

            height: auto !important;

            margin: 0;

            transition: transform 0.4s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.35s cubic-bezier(0.77, 0.2, 0.05, 1), top 0.4s;

            transform: translateY(100%);

        }

    }

}