/**
 * @author 1902 Software
 * @copyright Copyright © 2023 1902 Software (https://1902software.com/magento/)
 * @package WriteTextAI_WriteTextAI
 */

.wtai-premium-popup-overlay {
    background: rgba(0, 0, 0, 0.35);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
}

.wtai-categories-index,
.wtai-setup-index,
.wtai-grid-index {
    .wtai-premium {
        border-radius: 3px;
        background: linear-gradient(93.67deg, #00376D 0%, #0066CC 100%);
        color: #ffffff;
        font-size: 12px !important;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        padding: 2px 4px;
        box-sizing: content-box;
        cursor: pointer;
        position: relative;
        
        &:before {
            background-image: url("../WriteTextAI_WriteTextAI/images/ic_premium.png");
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            content: '';
            height: 13px;
            width: 13px;
            display: inline-block;
            margin-right: 5px;
            /*vertical-align: middle;*/
            position: relative;
            top: 2px;
        }
    }


    .wtai-wtai-accordions {
        display: flex;
        flex-wrap: wrap;

        .wtai-category-image-block,
        .wtai-keywords-block {
            width: 100%;
            
            &.wtai-disabled {
                [data-role="title"] {
                    h4,
                    .wtai-step,
                    .admin__field-tooltip,
                    &::before {
                        opacity: .5;
                    }
    
                    .admin__field-tooltip {
                        pointer-events: none;
                        cursor: default;
                    }
                }
    
                [data-role="content"] {
                    opacity: .5;
                    pointer-events: none;
                }
            }
    
            .wtai-premium {
                margin-left: 18px;
            }
        }

        .wtai-attributes-block {
            width: 100%;
            align-self: flex-start;

            &.wtai-contain-ads {
                @media screen and (min-width: 1280px) {
                    max-height: 240px;
                    max-width: ~"calc(100% - 300px)";
                }
    
                .wtai-attributes {
                    @media screen and (min-width: 1280px) {
                        max-height: 160px;
                    }
                }
            }
    
            .wtai-other-details {
                &.wtai-disabled {
                    .admin__control-checkbox {
                        pointer-events: none;
                    }

                    .admin__field-label {
                        opacity: .5;
                        pointer-events: none;
                    }

                    textarea {
                        opacity: .5;
                    }
                }
            }
        }

        .wtai-premium-ads {
            width: 280px;
            height: 240px;
            margin-top: 20px;
            margin-left: auto;
            position: relative;

            .wtai-stop-ads {
                position: absolute;
                right: 0;
                top: 2px;
                cursor: pointer;
                background: #000000;
                color: #ffffff;
                padding: 10px;
                font-size: 11px;
            }

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    .wtai-edit-modal .wtai-attributes-block .wtai-attributes {
        .admin__field-label[for="Thumbnail"] {
            min-width: auto;
            margin-right: 0;
        }
    }

    .wtai-gallery.wtai-accordions {
        .wtai-gallery-block {
            width: 100%;
            
            &.wtai-disabled {
                [data-role="title"] {
                    h4,
                    .wtai-step,
                    .admin__field-tooltip,
                    &::before {
                        opacity: .5;
                    }

                    & > div.wtai-field {
                        opacity: .5;
                        pointer-events: none;
                    }
    
                    .admin__field-tooltip {
                        pointer-events: none;
                        cursor: default;
                    }
                }
    
                [data-role="content"] {
                    opacity: .5;
                    pointer-events: none;
                }
            }
    
            .wtai-premium {
                margin-left: 22px;
                margin-top: 3px;
            }
        }
    }



    .wtai-wtai-toolbar {
        .wtai-top {
            .wtai-premium {
                align-self: center;
                margin-right: 10px;
                margin-bottom: 10px;

                @media screen and (min-width: 768px) {
                    margin-bottom: 0;
                }
            }
        }

        .wtai-bottom {
            .wtai-premium {
                margin-left: 10px;
            }
        }
        
        .wtai-fieldset {
            .wtai-styles {
                .wtai-premium {
                    margin-bottom: 10px;
                }
            }

            &.wtai-suggested {
                .wtai-field {
                    .wtai-premium {
                        position: absolute;
                        top: 7px;
                        right: 0;
                    }
                }

                ul.wtai-disabled {
                    opacity: .5;
                    pointer-events: none;
                
                }
            }
        }
    }

    .wtai-premium-popup-modal {
        .modal-inner-wrap {
            width: 550px;
            margin-left: 0;
            margin-right: 0;
            max-width: ~"calc(100vw - 90px)";

            @media screen and (min-width: 768px) {
                margin-left: auto;
                margin-right: auto;
            }

            .modal-header {
                background: linear-gradient(93.67deg, #00376D 0%, #0066CC 100%);
                padding: 30px 20px 30px 20px;
    
                .modal-title {
                    font-size: 23px;
                    font-style: normal;
                    font-weight: 700;
                    color: #ffffff;

                    &::before {
                        background-image: url("../WriteTextAI_WriteTextAI/images/ic_premium.png");
                        background-position: center;
                        background-repeat: no-repeat;
                        background-size: contain;
                        content: '';
                        height: 24px;
                        width: 24px;
                        display: inline-block;
                        /*vertical-align: middle;*/
                        position: relative;
                        top: 2px;
                    }
                }
    
                .modal-subtitle {
                    display: block;
                    margin-left: 0;
                    font-size: 13px;
                    font-style: normal;
                    font-weight: 400;
                    color: #ffffff;
                    margin-top: 10px;
                }
    
                .action-close {
                    margin: 10px;
                    
                    &::before {
                        font-size: 10px;
                        color: #ffffff;
                    }
                }
            }
    
            .modal-content {
                padding: 20px;

                ul {
                    li {
                        font-size: 13px;
                        font-style: normal;
                        font-weight: 400;
                        color: #303030;
                        list-style: none;
                        padding: 7px 30px;
                        background-image: url("../WriteTextAI_WriteTextAI/images/solid_check.png");
                        background-repeat: no-repeat;
                        background-position: left 6px;
                        background-size: 20px;
                        padding-right: 0;
                    }
                }
            }
    
            .modal-footer {
                padding-top: 0;

                .wtai-action-premium,
                .wtai-secondary-action-premium {
                    background: #2271B1;
                    /*border-radius: 3px;*/
                    height: 40px;
                    /*display: flex;
                    align-items: center;
                    margin-left: auto;*/
    
                    span {
                        font-size: 13px;
                        font-style: normal;
                        font-weight: 600;
                        color: #ffffff;
                        position: relative;
                        bottom: 2px;
                    }
                }

                .wtai-secondary-action-premium {
                    background: #ffffff;
                    border: 1px solid #2271B1;
                    margin-right: 7px;
                    span {
                        color: #2271B1;
                    }
                }
            }
        }
    }

    .wtai-already-premium-popup-modal {
        .wtai-already-premium-popup-container {
            width: 750px;
            max-width: ~"calc(100vw - 90px)";
            margin-left: 0;
            margin-right: 0;

            background: linear-gradient(93.67deg, #00376D 0%, #0066CC 100%);
            color: #ffffff;
            position: fixed;
            top: 60px;
            left: 50%;
            transform: translate(-50%);
            z-index: 90021;
            
            .wtai-header {
                .wtai-title {
                    background: linear-gradient(93.67deg, #00376D 0%, #0066CC 100%);
                    padding: 30px 20px 0 20px;
        
                    font-size: 23px;
                    font-style: normal;
                    font-weight: 700;
                    color: #ffffff;
        
                    &::before {
                        background-image: url("../WriteTextAI_WriteTextAI/images/ic_premium.png");
                        background-position: center;
                        background-repeat: no-repeat;
                        background-size: contain;
                        content: '';
                        height: 24px;
                        width: 24px;
                        display: inline-block;
                        vertical-align: middle;
                        margin-right: 5px;
                    }
                }

                .wtai-actions {
                    position: absolute;
                    top: 0;
                    right: 0;
                    padding: 10px;

                    .action-close {
                        margin: 10px;

                        &::before {
                            font-size: 10px;
                            color: #ffffff;
                        }
                        &:focus {
                            background-color: none;
                        }
                    }
                }
            }
            
            .wtai-content {
                padding: 20px;

                .wtai-sub-notif {
                    font-size: 12px;
                }
            }
        }
    }

    .admin__data-grid-header {
        .wtai-bulk-actions-dropdown {
            .action-menu {
                li {
                    display: flex;
                    align-items: center;

                    .wtai-disabled {
                        opacity: .5;
                        pointer-events: none;
                    }

                    .wtai-premium {
                        margin-right: 14px;
                    }
                }
            }
        }
    }

    .admin__data-grid-wrap {
        table td {
            .action-select-wrap {
                li {
                    display: flex;
                    align-items: center;

                    a.wtai-disabled {
                        opacity: .5;
                        pointer-events: none;
                    }

                    .wtai-premium {
                        margin-right: 10px;
                    }
                }
            }
        }
    }
}

.wtai-categories-index,
.wtai-grid-index {
    .wtai-wtai-accordions {
        .wtai-premium-ads {
            width: 100%;
            height: auto;
        }
    }
}

.wtai-pro-badge {
    display: contents;
}
