$primary-color: #6E42D3;
$secondary-color: #4C25A5;
$body-font: 'Roboto', sans-serif;
$body-color: #7A8B9A;

.wpfnl-orderbump_reset {
    a,
    p,
    div {
        font-size: 14px;
        color: $body-color;
        font-weight: 400;
        line-height: 1.4;
    }
}

body.wpfunnel_steps-template {
    padding: 0;
    margin: 0;
}

body.wpfnl-theme-style-removed {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.wpfnl-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 15px;
}
.wpfnl-container-fluid {
    width: 100%;
    max-width: 100%;
    padding: 0 15px;
}
.wpfnl-row {
    margin-left: -15px;
    margin-right: -15px;
}
.wpfnl-col {
    padding: 0 15px;
}

.wpfunnel_steps-template figure {
    margin: 0;
}

%reset-style {
    * {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

    p {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        line-height: 1.5;
    }

    h1, h2, h3, h4, h5, h6, p, figur, a {
        margin: 0px;
        text-transform: none;
    }

    h1, h2, h3, h4, h5, h6 {
        font-weight: normal;
        -webkit-font-variant-ligatures: common-ligatures;
        font-variant-ligatures: common-ligatures;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    small {
        font-size: 80%;
    }

    sub,
    sup {
        position: relative;
        font-size: 75%;
        line-height: 0;
        vertical-align: baseline;
    }

    sub {
        bottom: -0.25em;
    }

    sup {
        top: -0.5em;
    }

    img {
        vertical-align: middle;
        border-style: none;
        display: block;
    }

    svg {
        overflow: hidden;
        vertical-align: middle;
        display: block;
        height: auto;
        max-width: 100%;
    }

    del {
        opacity: 1!important;
    }

}

%input-field-default-style {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    input[type="month"],
    input[type="week"],
    input[type="time"],
    input[type="datetime"],
    select,
    textarea {
        border: 1px solid #E5E8F3;
        outline: none;
        padding: 11px 14px;
        outline-offset: 0;
        border-radius: 5px;
        font-size: 16px;
        background-color: #FFFFFF;
        color: rgba(54, 59, 78, 0.8);
        box-shadow: none;
        letter-spacing: normal;

        &:focus {
            border-color: $primary-color;
            outline: none;
            outline-offset:0;
            box-shadow: none;
        }
    }

    select {
        padding: 8px 14px;
    }

    textarea {
        height: auto;
    }
}


//--------wpfnl checkout form reset style----------
.wpfnl-checkout {
    @extend %reset-style;
}


//--------input style----------
.wpfunnel_steps-template-default,
.wpfunnel_steps-template {
    .wpfnl-checkout {
        @extend %input-field-default-style;

        form .form-row input.input-text,
        form .form-row textarea {
            box-sizing: border-box;
            width: 100%;
            margin: 0;
            outline: 0;
            line-height: normal;
        }

        form .form-row-wide {
            clear: both;
        }
        form .form-row-first {
            float: left;
        }
        form .form-row-last {
            float: right;
        }

    }


    #add_payment_method .checkout .col-2 .form-row-first,
    .woocommerce-cart .checkout .col-2 .form-row-first,
    .woocommerce-checkout .checkout .col-2 .form-row-first {
        clear: left;
    }

    //--------button style--------
    .btn-default {
        transition: all 0.3s ease;
        border: none;
        border-radius: 5px;
        font-weight: 700;
        line-height: 1.2;
        outline: none;
        padding: 10px 20px;
        text-decoration: none;
        vertical-align: middle;
        font-size: 15px;
        display: inline-block;
        cursor: pointer;
        background-color: $primary-color;
        color: #fff;
        text-transform: none;
        letter-spacing: normal;
        box-shadow: none;
        text-shadow: none;
        text-align: center;

        &:hover {
            background-color: $secondary-color;
            color: #fff;
        }
    }

    .wpfunnels_offer_button {
        transition: all 0.3s ease;
        border: none;
        border-radius: 5px;
        font-weight: 700;
        line-height: 1.2;
        outline: none;
        padding: 10px 20px;
        text-decoration: none;
        vertical-align: middle;
        font-size: 15px;
        display: inline-block;
        cursor: pointer;
        background-color: $primary-color;
        color: #fff;

        &:hover {
            background-color: $secondary-color;
            color: #fff;
        }
    }

}

.wpfnl-oxy-next-step-btn .wpfnl-loader {
    position: relative;
    top: 3px;
}

#wpfunnels_next_step_controller.elementor-button {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
#wpfunnels_next_step_controller.wpfnl-has-subtitle {
    flex-direction: column;
    row-gap: 3px;
}

.et_divi_builder #et_builder_outer_content .et_pb_button.btn-optin.disabled,
#wpfunnels_next_step_controller.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.7;
}

//--------divi builder input default style----------
.et-db #et-boc .et-l .et_pb_module {
    input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    input[type="tel"],
    input[type="range"],
    input[type="date"],
    input[type="month"],
    input[type="week"],
    input[type="time"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="color"],
    select,
    textarea {
        border: 1px solid #E5E8F3!important;
        outline: none!important;
        padding: 11px 14px!important;
        outline-offset: 0;
        border-radius: 5px;
        font-size: 16px;
        background: #FFFFFF;
        color: rgba(54, 59, 78, 0.8);
        box-shadow: none!important;
        width: 100%!important;

        &:focus {
            border-color: #E5E8F3!important;
            outline: none!important;
            outline-offset:0;
            box-shadow: none!important;
        }
    }

    select {
        padding: 8px 14px;
    }

    textarea {
        height: auto;
    }

}


//----------select2 style-------
.wpfnl-checkout {
    .select2-container .select2-selection--single {
        height: auto;
    }
    .select2-container .select2-selection--single .select2-selection__rendered {
        line-height: normal;
        padding: 11px 14px;
    }
    .select2-container .select2-selection--single .select2-selection__rendered:focus {
        outline: none;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 100%;
        right: 8px;
    }
    .select2-container--default .select2-selection--single{
        border: 1px solid #E5E8F3;
        border-radius: 5px;
        font-size: 16px;
        padding: 0;
    }
    .select2-container--default .select2-search--dropdown .select2-search__field {
        border-color:#E5E8F3;
    }
    .select2-container--focus .select2-selection {
        border-color: #E5E8F3;
        outline: none;
        padding: 0;
    }

    .select2-dropdown {
        border: 1px solid #aaa;
        border-radius: 5px;
    }
    .select2-search--dropdown {
        padding: 12px;
    }
    .select2-container--default .select2-results>.select2-results__options {
        max-height: 190px;
    }
    .select2-container {
        .select2-results__option {
            padding: 6px 14px;
            font-size: 16px;
            line-height: normal;

            &:focus {
                outline: none;
            }
        }
    }
}

.select2-results__options .select2-results__option {
    padding: 3px 12px;
}

//----------wpfnl loader---------
.wpfnl-loader {
    border: 2px solid #8265c5;
    border-radius: 50%;
    border-top: 2px solid #fff;
    width: 13px;
    height: 13px;
    animation: spin 0.7s linear infinite;
    display: none;
    margin-left: 4px;
}
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


//-------wpfnl alert style-----
.wpfnl-alert {
    color: #383d41;
    text-transform: capitalize;
    font-size: 13px;
    font-weight: 500;
    border-radius: 3px;
    cursor: default;
    display: none;

    &.box {
        background-color: #e2e3e5;
        padding: 6px 12px;
        border: 1px solid #d6d8db;
    }


    &.wpfnl-success {
        color:#269c41;

        &.box {
            background-color: #d4edda;
            border-color: #c3e6cb;
        }
    }

    &.wpfnl-error {
        color: #d63342;

        &.box {
            background-color: #f8d7da;
            border-color: #f5c6cb;
        }
    }

    &.wpfnl-warn {
        color: #856404;

        &.box {
            background-color: #fff3cd;
            border-color: #ffeeba;
        }
    }
}


#wpadminbar .wpf-admin-bar-edit-funnel-menu-item .ab-item{
    display: flex;
    align-items: center;
}


.wpfunnel_steps-template .wpfnl-checkout form .form-row input#billing_address_1 {
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) center;
    background-size: 20px 20px;
}