/**
 * The following styles get applied inside the editor only.
 *
 * Replace them with your own styles or remove the file completely.
 */

.seoaic-multistep-lead-block {
    padding: 40px 15px 20px 15px;
    background-color: #f3f4f5;
    color: #100717;
    position: relative;
    border-radius: 5px;

    &:hover {
        &::before {
            opacity: 1;
        }
    }

    &::before {
        position: absolute;
        content: "Multistep Leads Form";
        top: 4px;
        right: 15px;
        font-size: 22px;
        font-family: "Archivo", sans-serif;
        font-weight: 600;
        color: #100717;
        background: #ff4893;
        background: linear-gradient(90deg, #5d78f7 -30%, #a551f6 80%);
        background-clip: border-box;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        opacity: 0.6;
        transition: opacity 0.3s linear;
    }

    .seoaic-repeater-item {
        position: relative;
        padding: 0 15px;
    }

    .seoaic-ms-collapse-btn {
        position: relative;
        left: -15px;
    }

    .seoaic-ms-move-btns-container {
        position: relative;
        width: 50px;

        button {
            padding: 0;
            min-width: 100%;
        }
    }

    .seoaic-ms-step-header {
        position: relative;
        min-height: 34px;

        .seoaic-ms-move-btns-container {
            position: absolute;
            left: 20px;
            top: 0;
        }
    }

    .seoaic-ms-step-content {
        padding: 0 0 15px 0;
    }

    .seoaic-ms-step-number {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        pointer-events: none;
        box-shadow: 0px 0px 9px 0px #000;
        background-color: #545b62;
        color: #fff;
        font-size: 14px;
        border-radius: 7px;
        padding: 0px 7px;
    }

    .seoaic-ms-options-type {
        .components-flex {
            flex-direction: row;
            flex-wrap: wrap;
        }

        .components-radio-control__option {
            gap: 0;

            input[type="radio"] {
                display: none;

                &:checked + label {
                    background: linear-gradient(90deg, #5d78f7 -30%, #a551f6 80%);
                    color: white;
                    border: 1px solid #5d78f7;

                    &:hover {
                        background: linear-gradient(90deg, #5d78f7 -30%, #a551f6 80%);
                    }
                }
            }

            label {
                background-color: #fff;
                border: 1px solid #ddd;
                border-radius: 15px;
                font-weight: bold;
                padding: 7px 15px;
                transition: all 0.15s linear;

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

    .seoaic-multistep-form-option {
        border-radius: 5px;
        padding: 7px 5px 0 5px;
        margin: 6px 0 0 0;
        box-sizing: border-box;
        position: relative;

        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            border-top: 1px dashed #fff;
            background: linear-gradient(to right, #5d78f7, #a551f6) border-box;
            mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
            -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
        }

        label {
            margin-bottom: 0px;
        }

        .components-select-control {
            gap: 0;
        }
    }

    .seoaic-multistep-remove-btn {
        position: absolute;
        top: 0;
        right: -15px;
        padding: 0 !important;

        .dashicon {
            color: #c00;
        }
    }

    .seoaic-multistep-add-choice-btn,
    .seoaic-multistep-remove-choice-btn {
        height: 32px;
    }

    .seoaic-ms-step-form-wrapper {
        margin-top: 10px;
    }

    .seoaic-steps-flex-wrapper {
        margin-bottom: 10px;
    }

    .seoaic-ms-single-option-row {
        .seoaic-multistep-remove-choice-btn {
            margin-top: 15px;
        }
    }

    .seoaic-ms-multi-option-input {
        margin: 0;
    }

    .seoaic-ms-contact-form-option {
        margin-bottom: 5px;
    }

    .seoaic-ms-fields-dd-field {
        position: relative;

        &::before {
            position: absolute;
            content: "Drop-down list";
            top: -5px;
            font-size: 14px;
            font-family: "Archivo", sans-serif;
            font-weight: 500;
            color: #100717;
            opacity: 0.3;
            transition: opacity 0.3s linear;
        }
    }

    .seoaic-input-name-icon,
    .seoaic-input-email-icon,
    .seoaic-input-tel-icon {
        width: 40px;
        text-align: center;

        &::before {
            display: inline-block;
        }
    }

    .seoaic-input-name-icon::before {
        content: url("data:image/svg+xml,<%3Fxml version=\"1.0\" encoding=\"UTF-8\"%3F><svg xmlns=\"http://www.w3.org/2000/svg\" id=\"Outline\" viewBox=\"0 0 30 20\" width=\"30\" height=\"35\"><path d=\"M12,12A6,6,0,1,0,6,6,6.006,6.006,0,0,0,12,12ZM12,2A4,4,0,1,1,8,6,4,4,0,0,1,12,2Z\"/><path d=\"M12,14a9.01,9.01,0,0,0-9,9,1,1,0,0,0,2,0,7,7,0,0,1,14,0,1,1,0,0,0,2,0A9.01,9.01,0,0,0,12,14Z\"/></svg>");
    }

    .seoaic-input-email-icon::before {
        content: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 30 20" width="30" height="35"><path d="M19,1H5A5.006,5.006,0,0,0,0,6V18a5.006,5.006,0,0,0,5,5H19a5.006,5.006,0,0,0,5-5V6A5.006,5.006,0,0,0,19,1ZM5,3H19a3,3,0,0,1,2.78,1.887l-7.658,7.659a3.007,3.007,0,0,1-4.244,0L2.22,4.887A3,3,0,0,1,5,3ZM19,21H5a3,3,0,0,1-3-3V7.5L8.464,13.96a5.007,5.007,0,0,0,7.072,0L22,7.5V18A3,3,0,0,1,19,21Z"/></svg>')
    }

    .seoaic-input-tel-icon::before {
        content: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 30 20" width="30" height="35"><path d="M22.17,1.82l-1.05-.91c-1.21-1.21-3.17-1.21-4.38,0-.03,.03-1.88,2.44-1.88,2.44-1.14,1.2-1.14,3.09,0,4.28l1.16,1.46c-1.46,3.31-3.73,5.59-6.93,6.95l-1.46-1.17c-1.19-1.15-3.09-1.15-4.28,0,0,0-2.41,1.85-2.44,1.88-1.21,1.21-1.21,3.17-.05,4.33l1,1.15c1.15,1.15,2.7,1.78,4.38,1.78,7.64,0,17.76-10.13,17.76-17.76,0-1.67-.63-3.23-1.83-4.42ZM6.24,22c-1.14,0-2.19-.42-2.91-1.15l-1-1.15c-.41-.41-.43-1.08-.04-1.51,0,0,2.39-1.84,2.42-1.87,.41-.41,1.13-.41,1.55,0,.03,.03,2.04,1.64,2.04,1.64,.28,.22,.65,.28,.98,.15,4.14-1.58,7.11-4.54,8.82-8.81,.13-.33,.08-.71-.15-1,0,0-1.61-2.02-1.63-2.04-.43-.43-.43-1.12,0-1.55,.03-.03,1.87-2.42,1.87-2.42,.43-.39,1.1-.38,1.56,.08l1.05,.91c.77,.77,1.2,1.82,1.2,2.96,0,6.96-9.77,15.76-15.76,15.76Z"/></svg>')
    }

    .seoaic-ms-mode-selector-wrapper {
        padding: 30px 0;

        button {
            padding: 10px;
        }
    }



    .seoaic-warning-note {
        font-size: 13px;
    }
}

.seoaic-gear-waiting-animate {
    font-size: 25px;
    width: 25px;
    height: 25px;
    animation: seoaic-rotate 2s infinite linear;
}

@keyframes seoaic-rotate {
    0% {
        transform: rotate(0deg);
        color: #5d78f7;
    }
    50% {
        color: #a551f6;
    }
    100% {
        transform: rotate(360deg);
        color: #5d78f7;
    }
}

.seoaic-range-container {
    margin-bottom: 10px;

    .seoaic-double-range-label {
        font-size: 11px;
        font-weight: 500;
        line-height: 1.4;
        text-transform: uppercase;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    }

    .seoaic-range-sliders-control {
        position: relative;
        min-height: 50px;
    }

    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        pointer-events: all;
        width: 24px;
        height: 24px;
        background-color: #fff;
        border-radius: 50%;
        box-shadow: 0 0 0 1px #C6C6C6;
        cursor: pointer;
    }

    input[type=range]::-moz-range-thumb {
        -webkit-appearance: none;
        pointer-events: all;
        width: 20px;
        height: 20px;
        background-color: #fff;
        border-radius: 50%;
        box-shadow: 0 0 0 1px #C6C6C6;
        cursor: pointer;
    }

    input[type=range]::-webkit-slider-thumb:hover {
        background: #f7f7f7;
    }

    input[type=range]::-webkit-slider-thumb:active {
        box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
        -webkit-box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
    }

    input[type="number"] {
        width: 50px;
        height: 30px;
        font-size: 16px;
        border: none;
        text-align: center;
    }

    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        opacity: 1;
    }

    input[type="range"] {
        -webkit-appearance: none;
        appearance: none;
        height: 2px;
        width: 100%;
        position: absolute;
        background-color: #C6C6C6;
        pointer-events: none;
        top: 50%;
        transform: translateY(-50%);
    }

    input.seoaic-range-slider-from {
        height: 0;
        z-index: 1;
    }
}

.seoaic-ms-block-settings {
    padding: 15px;
}

.seoaic-dn {
    display: none;
}