/**
 * @author 1902 Software
 * @copyright Copyright © 2023 1902 Software (https://1902software.com/magento/)
 * @package WriteTextAI_WriteTextAI
 */
 
/* eslint-disable Magento2.Less.ClassNaming.NotAllowedSymbol */

@button-background: #514943;
@border-color: #D6D6D6;

.wtai-setup-index {
    min-width: 0;

    .page-title-wrapper {
        margin-top: 1.1rem;

        .page-title {
            background-image: url("../WriteTextAI_WriteTextAI/images/logo_writetext.png");
            background-repeat: no-repeat;
            background-size: 200px;
            font-size: 0;
            height: 35px;
        }
    }

    .page-content {
        .messages {
            .message {
                display: flex;
                align-items: center;
                column-gap: 10px;
                justify-content: space-between;
            }
        }

        .wtai-stepper-container {
            .wtai-stepper-title {
                font-family: 'Open Sans';
                font-size: 28px;
                font-style: normal;
                font-weight: 400;
                line-height: 38px;
                margin-left: auto;
                margin-right: auto;
                max-width: ~"calc(100vw - 148px)";
                padding-left: 76px;
                width: 676px;
            }

            .wtai-stepper {
                margin-left: auto;
                margin-right: auto;
                margin-top: 20px;
                max-width: ~"calc(100vw - 148px)";
                width: 676px;
        
                .wtai-step {
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-start;
                    margin-bottom: 40px;
                    transition: max-height 0.5s ease;
        
                    &:last-child {
                        .wtai-indicator {
                            .wtai-line {
                                display: none;
                            }
                        }
                    }
        
                    &.wtai-completed {
                        .wtai-indicator {
                            .wtai-circle {
                                background-color: #EB5202;
                                background-image: url("../WriteTextAI_WriteTextAI/images/check.png");
                                background-position: center;
                                background-repeat: no-repeat;
                                background-size: 17.5px;
                                border: none;
    
                                span {
                                    font-size: 0;
                                }
                            }
                        }

                        .wtai-content {
                            .wtai-header {
                                align-items: center;
                                display: flex;
                                flex-wrap: wrap;
                                grid-gap: 10px;
                                justify-content: space-between;

                                .wtai-completed-badge {
                                    display: flex;
                                }
                            }
                        }
                    }
        
                    &.wtai-active {
                        max-height: 100%;

                        .wtai-indicator {
                            .wtai-circle {
                                background-color: #EB5202;
                                border: none;
    
                                span {
                                    color: #FFFFFF;
                                }
                            }
                        }
    
                        .wtai-content {
                            .wtai-content-content {
                                display: block;
                            }
                        }
                    }
        
                    .wtai-indicator {
                        position: relative;
        
                        .wtai-circle {
                            align-items: center;
                            background-color: #FFFFFF;
                            border: 2px dashed #D6D6D6;
                            border-radius: 100%;
                            display: flex;
                            height: 46px;
                            justify-content: center;
                            margin-top: 30px;
                            position: relative;
                            width: 46px;
                            z-index: 1;
        
                            span {
                                color: #D6D6D6;
                                font-family: 'Open Sans';
                                font-size: 20px;
                                font-size: 20px;
                                font-style: normal;
                                font-weight: 700;
                            }
                        }
        
                        .wtai-line {
                            border: 1px solid #D6D6D6;
                            height: ~'calc(100% + 40px)';
                            left: 23px;
                            position: absolute;
                            top: 50px;
                        }
                    }
        
                    .wtai-content {
                        background: #F8F8F8;
                        border: 1px solid #D6D6D6;
                        border-radius: 1px;
                        color: #303030;
                        display: inline-block;
                        margin-left: 30px;
                        padding: 20px;
                        width: 600px;

                        @media screen and (min-width: 768px) {
                            padding: 30px;
                        }
    
                        .wtai-header {
                            .wtai-step-number {
                                font-family: 'Open Sans';
                                font-size: 14px;
                                font-style: normal;
                                font-weight: 700;
                                line-height: 19px;
                            }
    
                            .wtai-step-title {
                                font-family: 'Open Sans';
                                font-size: 20px;
                                font-style: normal;
                                font-weight: 400;
                                line-height: 27px;
                            }

                            .wtai-completed-badge {
                                align-items: center;
                                background: #FFDDCB;
                                border-radius: 100px;
                                color: #EB5202;
                                display: flex;
                                display: none;
                                font-family: 'Open Sans';
                                font-size: 14px;
                                font-style: normal;
                                font-weight: 600;
                                height: 36px;
                                justify-content: center;
                                margin-left: auto;
                                width: 132px;

                                &::before {
                                    background-image: url("../WriteTextAI_WriteTextAI/images/completed.png");
                                    background-position: center;
                                    background-repeat: no-repeat;
                                    background-size: 100%;
                                    content: '';
                                    height: 8.33px;
                                    margin-right: 9.33px;
                                    width: 12.5px;
                                }
                            }
                        }
    
                        .wtai-content-content {
                            display: none;
                            font-family: 'Open Sans';
                            font-style: normal;
                            font-weight: 400;
                            line-height: 18px;
                            margin-top: 20px;

                            > p {
                                font-size: 13px;
                            }

                            .wtai-step-one-list {
                                padding-left: 40px;
                                font-size: 13px;
                            }

                            .wtai-login-register {
                                align-items: center;
                                border: 1px solid #D6D6D6;
                                border-radius: 1px;
                                display: flex;
                                flex-wrap: wrap;
                                grid-gap: 10px;
                                justify-content: space-between;
                                margin-top: 20px;
                                padding: 14px 20px;

                                .wtai-account-name {
                                    color: #007BDB;
                                    font-family: 'Open Sans';
                                    font-size: 14px;
                                    font-style: normal;
                                    font-weight: 400;
                                    line-height: 19px;
                                    text-decoration-line: underline;
                                    word-break: break-word;
                                }

                                .wtai-no-account-badge {
                                    border: 1px solid #CC2020;
                                    border-radius: 100px;
                                    color: #CC2020;
                                    font-family: 'Open Sans';
                                    font-size: 13px;
                                    font-style: normal;
                                    font-weight: 600;
                                    line-height: 18px;
                                    margin-left: 10px;
                                    padding: 4px 8px 6px 8px;
                                }

                                #wtaiLoginRegisterButton {
                                    align-items: center;
                                    background: #514943;
                                    color: #FFFFFF;
                                    display: flex;
                                    font-family: 'Open Sans';
                                    font-size: 14px;
                                    font-style: normal;
                                    font-weight: 600;
                                    justify-content: center;
                                }
                            }
                        }
                    }
                }

                .wtai-step.wtai-freemium {
                    &:not(.wtai-active) {
                        display: none;
                    }
                    .wtai-indicator {
                        .wtai-circle {
                            background-color: unset;
                            border: none;
                        }
                    }

                    .wtai-content {
                        background: linear-gradient(93.67deg, #00376D 0%, #0066CC 100%);
                        color: #fff;
                        font-weight: 700;
                        font-size: 18px;
                        line-height: 28px;
                        text-align: center;
                        padding: 20px;

                        p {
                            margin: 0;

                            span {
                                background-image: url("../WriteTextAI_WriteTextAI/images/premium.svg");
                                background-position: center;
                                background-repeat: no-repeat;
                                background-size: contain;
                                content: '';
                                height: 24px;
                                width: 94px;
                                display: inline-block;
                                vertical-align: middle;
                                position: relative;
                                top: -2px;
                            }
                        }
                    }
                }
            }
        }
    }

    .admin__action-multiselect-text {
        line-height:19px;
    }

    .admin__action-multiselect-search-label {
        width: 1.1em;
    }

    .wtai-step2-form {
        margin-top: 20px;

        li._disabled {
            opacity: .5;
            pointer-events: none;
        }

        .wtai-field .admin__field {
            .admin__field-label:before {
                display: none;
            }
        }

        .admin__control-checkbox + label {
            text-align: left;
            width: 100%;
        }

        .wtai-button {
            min-width: 132px;
            width: 100%;

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

    .wtai-field-row  {
        .lib-clearer();
        border-bottom: 1px solid #D6D6D6;

        padding: 10px 0;

        @media screen and (min-width: 768px) {
            padding: 10px 20px;
        }

        &.wtai-open_graph.wtai-no-display {
            display: none;
        }

        &:last-child {
            border-bottom: none;
        }

        &.wtai-short_product_description {
            border-bottom: none;
            padding-bottom: 0;
        }

        .wtai-label,
        .wtai-field {
            width: 100%;

            @media screen and (min-width: 768px) {
                width: 50%;
            }
        }

        .wtai-label {
            float: left;
            line-height: 33px;

            @media screen and (min-width: 768px) {
                width: 60%;
            }

            .wtai-required {
                color: #EB5202;
                margin-left: 5px;
            }
        }

        .wtai-field {
            float: right;

            @media screen and (min-width: 768px) {
                width: 40%;
            }
        }

        .action-select-wrap:not(.wtai-active):not(._active) .action-select:after {
            transform: none;
        }

        .admin__control-checkbox + .admin__field-label:before {
            margin-top: 9px;
        }
    }

    .wtai-actions {
        margin-top: 30px;
        text-align: right;
        
        .wtai-button {
            background: @button-background;
            border-color: @button-background;
            color: #fff;
            width: 100%;

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

        .wtai-button-icon {
            display: inline-block;
            font-size: 16px;
            line-height: 18px;
            padding-left: 5px;
        }
    }

    .wtai-step3-form {
        margin-top: 30px;

        .admin__field-label {
            text-align: left;
        }

        .wtai-fieldset.wtai-template-assigning {
            .wtai-templates-optional-lists {
                padding-left: 20px;
                
                strong {
                    font-weight: 600;
                }
            }
        }

        .wtai-fieldset.wtai-description-length {
            display: flex;
            align-items: center;
            border-bottom: none;

            .wtai-fieldset-title {
                font-size: 14px;
            }

            .wtai-field-column {
                .wtai-fieldset-title {
                    line-height: normal;
                    font-size: 13px;
                }
    
                .wtai-fieldset-subtitle {
                    font-size: 12px;
                }
            }

            &.wtai-with-border {
                border-bottom: 1px solid #d6d6d6;
            }
        }

        .wtai-fieldset.wtai-auto-transfer {
            margin-bottom: 0;

            &.wtai-no-border {
                border-bottom: none;
            }

            &.wtai-last-fieldset {
                padding-bottom: 10px;
            }

            .wtai-fieldset-title {
                font-size: 14px;
                line-height: 32px;
                margin-bottom: 0;
            }

            .wtai-disabled {
                .lib-tooltip(
                    @_tooltip-border-color: transparent,
                    @_tooltip-color: #303030,
                    @_tooltip-position: top
                );
        
                .tooltip-content {
                    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
                    font-size: 13px;
                }

                .wtai-disabled-cron-job-message,
                .wtai-field-column {
                    opacity: .5;
                    pointer-events: none;
                }
            }
            .wtai-field-column-container {
                width: 100%;
            }
            .wtai-field-column {
                display: flex;
                align-items: center;
                gap: 10px;

                .wtai-fieldset-title {
                    flex: auto;
                    flex-shrink: 0;
                    line-height: normal;
                    font-size: 13px;
                }

                .wtai-fieldset-subtitle {
                    font-size: 12px;
                }
                .wtai-field.admin__field.row {
                    .wtai-control {
                        display: flex;
                        gap: 10px;
                        align-items: center;
                    }
                }
            }

            .wtai-disabled-cron-job-message {
                display: flex;
                gap: 7px;
                align-items: flex-start;
                justify-content: center;
                font-size: 13px;
                margin-top: 10px;
                color: #CC2020;
                margin-bottom: 10px;

                .wtai-icon-info {
                    background-image: url("../WriteTextAI_WriteTextAI/images/generate-error.png");
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: contain;
                    flex-shrink: 0;
                    margin-top: 4px;
                    display: block;
                    width: 16px;
                    height: 16px;
                }
            }
        }
    }

    .wtai-step4-form {
        .wtai-button {
            min-width: 132px;
        }
    }

    .wtai-fieldset {
        border: 0;
        border-bottom: 1px solid @border-color;
        display: flex;
        flex-wrap: wrap;
        margin: 0 0 15px 0;
        padding: 0;

        &:not(:nth-last-child(-n+4)) {
            padding-bottom: 8px;
        }

        &.wtai-disabled {
            opacity: .5;
        }

        .wtai-error-message {
            flex: 100%
        }
    }

    .wtai-fieldset-row {
        flex: 100%;
        font-weight: 600;
        margin-bottom: 15px;
    }

    .wtai-fieldset-title {
        flex: 100%;
        font-weight: 600;
        margin-bottom: 15px;
    }

    .wtai-fieldset-content {
        font-size: 13px;
        margin-bottom: 15px;
    }

    .wtai-ul-padding-left {
        padding-left: 20px;
    }

    .wtai-field-column {
        flex: 100%;
        margin-bottom: 10px;
        position: relative;

        @media screen and (min-width: 768px) {
            flex: 50%;
        }

        &:hover {
            .wtai-disabled-tooltip.wtai-active {
                display: block;
            }
        
        }

        &:last-child {
            margin-bottom: 15px;
        }

        .row {
            display: flex;

            .wtai-control + .wtai-control {
                margin-left: 15px;
            }
        }

        .wtai-label {
            display: inline-block;
            margin-right: 5px;
        }

        .wtai-disabled-tooltip {
            display: none;
            position: absolute;
            left: 0;
            background: #FFFFFF;
            padding: 10px;
            border-radius: 1px;
            box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
            top: -200%;
            width: max-content;
            z-index: 1;

            &.wtai-active {
                &::hover {
                    display: block;
                }
            }

            &::after {
                border-color: #fff transparent transparent transparent;
                border-style: solid;
                border-width: 10px;
                top: 100%;
                content: "";
                left: 30px;
                transform: translate(-50%);
                position: absolute;
            }
        }

        .wtai-fieldset-title {
            line-height: 32px;
            margin-bottom: 0;
        }

        &.wtai-trigger-action-related-fields {
            .wtai-disabled-tooltip {
                left: 50%;
                transform: translate(-50%);
                top: 20%;

                &::after {
                    left: 50%;
                }
            }
        }
    }
}