/**
 * @author 1902 Software
 * @copyright Copyright © 2023 1902 Software (https://1902software.com/magento/)
 * @package WriteTextAI_WriteTextAI
 */
 
.modal-popup.wtai-bulk-keyword-analysis-popup {
    .modal-inner-wrap {
        max-width: none;
        width: 655px;

        @media screen and (min-width: @screen__m) {
            max-width: none;
        }

        .modal-content {
            .wtai-subtitle {
                padding-bottom: 0;
            }

            form {
                .wtai-form-fields {
                    @media screen and (min-width: @screen__t) {
                        display: block;
                    }

                    .wtai-col.wtai-col-4 .wtai-field-rows {
                        &:last-child {
                            margin-bottom: 0;
                        }

                        .wtai-auto-text-opt-help-container {
                            display: block;
                            position: relative;

                            .admin__field-tooltip.wtai-small {
                                .admin__field-tooltip-action {
                                    &:before {
                                        font-size: 14px;
                                    }
                                }
                                    
                                .admin__field-tooltip-content {
                                    bottom: auto;
                                    right: unset;
                                    top: 32px;
                                    left: 50%;
                                    transform: translate(-50%);

                                    &:before {
                                        left: 50%;
                                        transform: translate(-36%);
                                        border-top-color: transparent;
                                        border-bottom-color: #fff;
                                        bottom: auto;
                                        top: -36px;
                                    }

                                    &:after {
                                        left: 50%;
                                        top: -4px;
                                        bottom: auto;
                                        border-top-color: #fff;
                                        border-bottom-color: transparent;
                                    }
                                    .wtai-content-wrapper {
                                        padding-right: 0;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        .modal-footer {
            .action-primary {
                background-color: #eb5202;
                border-color: #eb5202;
                color: #ffffff;
            }
        }
    }

    .modal-footer {
        padding-top: 0;
    }

    .wtai-optimization-settings-container {
        border: solid 1px #e3e3e3;
        padding: 20px;
        @media screen and (min-width: @screen__m) {
            max-height: 500px;
            overflow: hidden;
            overflow-y: auto;
        }
        
        @media screen and (min-width: @screen__m) and (min-height: 600px){
            height: 46vh;
        }
        @media screen and (min-width: @screen__m) and (min-height: 850px){
            height: unset;
        }

    }

    .wtai-tabs-container {
        margin-bottom: 20px;

        .tabs-horiz {
            li {
                &.ui-state-default {
                    border-radius: 13px 13px 0 0;
                    background: #EEEEEE;
                    border: unset;
                    border-bottom: unset;
                }
                &.ui-state-default.ui-state-active {
                    background: #ffffff;
                    border: 0.1rem solid #d1d1d1;
                    border-bottom: unset;

                    .ui-tabs-anchor {
                        border-top: unset;
                        padding-top: 1rem;
                    }
                }
                .ui-tabs-anchor {
                    padding: 1rem 1rem 1rem;
                    padding-left: 10px;
                    padding-right: 10px;

                    span {
                        font-size: 13px;
                    }

                    span.wtai-sub-title {
                        display: block;
                        font-size: 11px;
                        font-weight: 400;
                        color: #1D232799;
                    }
                }
            }
        }

        .wtai-tab-content {
            border: 1px solid #d1d1d1;

            fieldset.wtai-trigger-action {
                display: flow-root;
            }

            .wtai-fieldset-subtitle {
                margin-top: 5px;
                margin-bottom: 10px;
                font-style: italic;
                font-size: 11px;
            }

            .wtai-field-column {
                .wtai-label-with-input {
                    display: flex;
                    gap: 10px;

                    .wtai-control {
                        position: relative;
                        bottom: 7px;
                    }
                }
            }
        }
    }

    .modal-inner-wrap {
        .modal-content {
            .wtai-tabs-error-message {
                margin-bottom: 0;
                margin-top: 20px;
            }

            form {
                .wtai-cluster-count,
                .wtai-input-number {
                    width: 52px;
                }

                input.wtai-input-number[type='number'] {
                    appearance: textfield;
                    -moz-appearance: textfield;
                }

                input.wtai-input-number[type='number']::-webkit-outer-spin-button,
                input.wtai-input-number[type='number']::-webkit-inner-spin-button {
                    -webkit-appearance: none;
                    margin: 0;
                }

                .ui-spinner {
                    display: inline-flex;
                    vertical-align: middle;
                    align-items: stretch;
                }

                .ui-spinner-input {
                    height: 32px;
                    line-height: 32px;
                    box-sizing: border-box;
                    margin: 0;
                }

                .ui-spinner-button {
                    cursor: pointer;
                    box-sizing: border-box;
                }

                .wtai-form-fields {
                    .wtai-tabs {
                        .lib-data-tabs();
                        width: auto;
                        
                        @media screen and (min-width: @screen__m) {
                            min-width: unset;
                            padding-right: 0;
                        }

                        .item.content.wtai-tab-content {
                            padding: 20px;
                            float: unset;
                            margin-left: 0;
                            margin-top: 0;
                            border-top: none;
                            height: 477px;
                            height: auto;

                            @media screen and (min-width: @screen__t) {
                                height: 450px;
                                height: auto;
                            }

                            @media screen and (min-width: @screen__m) {
                                float: right;
                                margin-left: -100%;
                                margin-top: 55px;
                                border-top: 1px solid #e3e3e3;
                            }

                            &.wtai-text-length-tab,
                            &.wtai-keyword-optimization-tab {
                                height: auto;
                                
                                @media screen and (min-width: @screen__m) {
                                    min-height: 450px;
                                }

                                @media screen and (min-width: @screen__m) and (min-height: 600px){
                                    height: 300px;
                                    min-height: unset;
                                    overflow: auto;
                                }

                                @media screen and (min-width: @screen__m) and (min-height: 700px){
                                    height: 350px;
                                }

                                @media screen and (min-width: @screen__m) and (min-height: 800px){
                                    height: 400px;
                                }

                                @media screen and (min-width: @screen__m) and (min-height: 850px){
                                    height: 450px;
                                }

                                

                            }

                            &.wtai-text-length-tab {
                                .message.message-warning.warning {
                                    margin-bottom: 10px;
                                }
                            }

                        }

                        .item.title.wtai-tab-title {
                            float: unset;
                            margin: 0;
                            
                            @media screen and (min-width: @screen__m) {
                                margin-right: 10px;
                                float: left;
                            }

                            .wtai-sub-title {
                                display: block;
                                font-size: 11px;
                                font-weight: 400;
                                color: #1D232799;
                                margin-top: 2px;
        
                                &.wtai-sub-title-changed {
                                    font-style: italic;
                                }

                            }

                            &[aria-expanded="true"] {
                                @media screen and (min-width: @screen__m) {
                                    padding-bottom: 5px;
                                    border-bottom: 2px solid #ffffff;
                                }

                                .switch {
                                    background-color: #ffffff;
                                    height: auto;
                                    color: #1D2327;
                                    opacity: 1;
                                    font-weight: 600;
                                    @media screen and (min-width: @screen__m) {
                                        border: 1px solid #d1d1d1;
                                        border-bottom: 3px solid #ffffff;
                                        padding-bottom: 8px;
                                    }

                                    &:hover {
                                        background-color: #ffffff;
                                    }
                                }
                            }

                            &.active {
                                > .switch:hover,
                                > .switch:focus {
                                    padding-bottom: 8px;
                                }
                            }
                            > .switch {
                                border: unset;
                            }
                            .switch {
                                color: #1D2327;
                                height: auto;
                                padding: 1rem;
                                font-size: 13px;
                                font-weight: 400;
                                -moz-border-radius: 0;
                                line-height: unset;
                                -webkit-border-radius: 3px 3px 0 0;
                                background-color: #EEEEEE;
                                border-bottom: 1px solid #d1d1d1;

                                &:hover {
                                    background: #EEEEEE;
                                }

                                &:active {
                                    background: #EEEEEE;
                                    color: rgba(29, 35, 39, 0.6);
                                    text-decoration: none;
                                }

                                @media screen and (min-width: @screen__m) {
                                    border-bottom: none;
                                    border-radius: 12px 12px 0 0;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .wtai-field-product-texts {
        .wtai-fieldset-row {
            padding: 5px 0;
        }
        .wtai-field-columns {
            -webkit-column-count: 2;
            -moz-column-count: 2;
            column-count: 2;
            column-gap: 0;

            .wtai-field-column {
                padding: 5px 0;
            }
        }
    }
}