/* ==========================================================================
# Subscribe Popup default style
========================================================================== */

.qodef-sp-holder {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 115;
    visibility: hidden;
    transition: $opacity-transition;
    background-color: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;

    .qodef-sp-inner {
        width: 90%;
        max-width: 600px;
        background-color: #ffffff;
        padding: 40px;
        opacity: 0;
        box-shadow: $box-shadow;
        transition: transform .3s cubic-bezier(0.06, 0.47, 0.38, 0.99), $opacity-transition;
    }

    .qodef-sp-close {
        position: absolute;
        top: 16px;
        right: 16px;
        display: block;
        color: #000000;

        &:hover {
            color: $text-color;
        }

        svg {
            stroke: currentColor;
            fill: currentColor;
        }
    }

    .qodef-sp-content-container {
        background-color: $additional-background-color;
        background-size: cover;
        padding: 40px;
    }

    .qodef-sp-title {
        margin: 0 0 30px 0;
    }

    .qodef-sp-subtitle {
        margin: 0 0 20px 0;
    }

    .wpcf7 {
        width: 100%;
        display: block;
    }

    .qodef-sp-prevent {
        @include qodefRelativeLayout();

        margin-top: 28px;
    }

    .qodef-sp-prevent-inner {
        cursor: pointer;

        > * {
            position: relative;
            display: inline-block;
            vertical-align: top;
            line-height: 1;
        }
    }

    .qodef-sp-prevent-input {
        margin: 1px 1px 0 0;
        width: 11px;
        height: 11px;
        border: 1px solid $heading-color;
        overflow: hidden;

        svg {
            @include qodefAbsoluteLayout();

            opacity: 0;
            transition: $opacity-transition;
        }

        &.qodef-sp-prevent-clicked {
            svg {
                opacity: 1;
            }
        }
    }

    .qodef-sp-prevent-label {
        font-size: 13px;
    }
}

/* Popup open/close style */

.qodef-sp-opened {
    .qodef-sp-holder {
        opacity: 1;
        visibility: visible;
        transition: $opacity-transition;

        .qodef-sp-inner {
            opacity: 1;
            transform: scale(1);
            transition: transform .8s cubic-bezier(0.26, 0.63, 0, 0.96);
        }
    }
}