@import 'mixin/global';

.leaving-popup,
.expert-popup,
.book-demo-popup,
.premium-popup,
.webinar-popup {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 2;
    margin: auto;
    width: 300px;
    height: fit-content;
    background: $white;
    border-radius: 15px;
    padding: $space10;

    .close {
        float: right;
        cursor: pointer;

        path {
            transition: 0.3s all ease-in-out;
        }

        @media (hover:hover) {
            &:hover {
                path {
                    stroke: $primary-color;
                }
            }
        }
    }

    .popup-body {
        .subhead {
            @include font-size(14px);
            line-height: 20px;
            color: #697386;
            margin: auto;
        }

        .btn {
            @include font-size(16px);
            line-height: 24px;
            border-radius: 10px;
            font-family: $robotomedium;
            padding: 8px 22px;
            transition: 0.3s all ease-in-out;

            &:hover {
                background: $primary-hover;
            }
        }
    }
}

.leaving-popup,
.expert-popup,
.premium-popup {

    .popup-body {
        text-align: center;

        .popup-img {
            margin: auto auto $space25;
        }

        .head {
            @include font-size(15px);
            line-height: 24px;
            font-family: $robotobold;
            color: $title-color;
        }
    }
}

.leaving-popup {
    .popup-body {
        .btns {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: $space25 0 $space15;
        }

        .leave-btn {
            border: 1px solid $primary-color;
            color: $primary-color;
            margin-right: $space15;

            &:hover {
                border-color: $primary-hover;
                color: $primary-hover;
                background: $white;
            }
        }

        .expert-btn {
            background: $primary-color;
            color: $white;
        }

        .subhead {
            padding: 0 $space10;
        }
    }
}

.expert-popup {

    .popup-body {
        padding: $space20+1 $space10+1;

        .btn {
            display: block;
            padding: 14px 22px 14px 22px;
            background: $primary-color;
            border: 2px $primary-color;
            color: $white;
            margin-top: $space20+2;
        }
    }
}

.book-demo-popup {
    padding: $space15+1 $space15+3;
    text-align: center;

    .popup-body {
        display: block;

        .head {
            @include font-size(23px);
            line-height: 32px;
            font-family: $robotomedium;
            margin: 0 0 $space15+1;
        }

        .btn {
            background: $primary-color;
            color: $white;
            padding: 14px 22px;
            margin: $space20+4 auto;
            display: block;
            width: fit-content;
        }
    }
}

.premium-popup {

    .popup-body {
        .head {
            @include font-size(18px);
            line-height: 28px;
        }

        .subhead {
            width: 85%;
        }

        .premium-btn {
            @include font-size(15px);
            line-height: 20px;
            font-family: $robotomedium;
            color: $white;
            display: block;
            padding: $space15;
            background: $primary-color;
            margin: 24px 21px 21px 21px;
        }
    }
}

.webinar-popup {
    padding: 0;
    width: 340px;

    .popup-head {
        display: block;
        background: #F2F4F7;
        padding: $space15;
        border-radius: 10px 10px 0 0;
        position: relative;

        svg {
            position: absolute;
            right: 15px;
            top: 15px;
        }

        .head,
        .subhead {
            display: block;
        }

        .head {
            @include font-size(16px);
            line-height: 24px;
            font-family: $robotobold;
            color: $title-color;
        }

        .subhead {
            @include font-size(14px);
            line-height: 20px;
            font-family: $robotomedium;
            color: #697386;
        }

        .close {
            float: unset;
            margin: $space15+1 0 $space15+1 auto;
        }
    }

    .popup-body {
        padding: $space15;

        .single-input {
            display: flex;
            flex-direction: column;
            border-bottom: $common-border;
            appearance: none;
            position: relative;

            .field-label {
                @include font-size(13px);
                line-height: 16px;
                color: $subtitle-color;
            }

            .input-field,
            .nice-select .option,
            .nice-select .current {
                @include font-size(16px);
                line-height: 20px;
                color: $title-color;
                font-family: $robotoregular;
            }

            .current {
                padding: $space5;
            }

            .nice-select {
                background: url("../images/dropdown.svg") no-repeat;
                background-position: right 5px center;

                .list {

                    .option {
                        color: $subtitle-color;
                    }
                }
            }
        }

        .small-head {
            @include font-size(15px);
            line-height: 24px;
            color: $title-color;
            margin: $space30+2 0 0;
            font-family: $robotobold;
        }

        .details {
            @include flex;
            flex-wrap: wrap;

            .single-input {
                width: 100%;
                margin-top: $space30;
                padding: $space5 7px;

                .input-field {
                    &::placeholder {
                        color: $placeholder-color;
                    }
                }

                .field-label {
                    position: absolute;
                    top: 0;
                    left: 9px;
                    opacity: 0;
                    transition: 0.2s all ease-in-out;

                }

                &.field-not-empty {
                    .field-label {
                        top: -15px;
                        opacity: 1;
                    }
                }

                &:nth-of-type(1),
                &:nth-of-type(2) {
                    .input-field {
                        background: url("../images/search.svg") no-repeat;
                        background-position: right 5px center;
                    }
                }

                .search-dropdown {
                    display: none;
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 38px;
                    background: $white;
                    border-radius: 10px;
                    border: $common-border;
                    z-index: 1;
                    padding: $space5;
                    max-height: 215px;
                    overflow: auto;

                    .drp-list {
                        @include font-size(15px);
                        line-height: 20px;
                        color: $subtitle-color;
                        padding: $space5;
                        cursor: pointer;

                        &:hover {
                            background: $bg-light;
                        }
                    }
                }
            }
        }

        .save-btn {
            line-height: 20px;
            background: $primary-color;
            color: $white;
            padding: 14px 22px;
            border-radius: 10px;
            float: right;
            width: fit-content;
            margin: $space30+2 0;
        }
    }
}

.popup-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.5);
}

@media screen and (min-width:767px) {

    .leaving-popup {
        width: 321px;

        .popup-body {
            padding: 0 $space20 0 $space30;
        }
    }

    .expert-popup,
    .premium-popup {
        .popup-body {
            .subhead {
                width: 67%;
            }
        }
    }

    .expert-popup {
        width: 423px;
    }

    .book-demo-popup {
        width: 700px;

        .popup-body {
            display: flex;
            align-items: center;
            text-align: left;

            .btn {
                margin: $space20+4 0 0;
            }
        }
    }

    .premium-popup {
        width: 480px;
    }

    .webinar-popup {
        width: 660px;

        .popup-head {
            padding: $space10 $space30;
            align-items: center;
            display: flex;

            svg {
                position: unset;
            }
        }

        .popup-body {
            padding: $space30;

            .details {
                .single-input {
                    width: 45%;
                }
            }
        }
    }
}

@media screen and (min-width:1024px) {
    .book-demo-popup {
        width: 821px;
    }
}