/**
 * Herbalist
 * Herbalist – is a website template created for selling the cannabis, medical marijuana and CBD products, cannabis blogging and others
 * Exclusively on https://1.envato.market/herbalist-html
 *
 * @encoding        UTF-8
 * @version         1.0.0
 * @copyright       (C) 2018 - 2021 Merkulove ( https://merkulov.design/ ). All rights reserved.
 * @license         Envato License https://1.envato.market/KYbje
 * @contributors    Lamber Lilit (winter.rituel@gmail.com)
 * @support         help@merkulov.design
 **/
// modal styles

.modal {
    &.swal2-backdrop {
        &-show {
            background: rgba($primary, 0.5);
        }
    }

    &_popup {
        background: #fff;
        border-radius: 16px;
        padding: 30px;
        position: relative;

        &-close {
            position: absolute;
            top: 10px;
            right: 10px;
            color: $gray;
            font-size: 22px;
            line-height: 1;
            transition: color .3s ease-in-out;

            &:hover {
                color: $secondary;
            }
        }

        &--view {
            max-width: 1130px;
            overflow: hidden;

            .about {
                &_main {
                    .underlay {
                        z-index: 1;
                        position: absolute;
                        width: 416px;
                        height: 431px;
                        display: block;
                        bottom: -10%;
                        right: -20%;

                        &_circle {
                            position: absolute;
                            width: 296px;
                            height: 296px;
                            filter: blur(136px);
                            display: block;

                            &--accent {
                                left: 0;
                                bottom: 0;
                                background: rgba(239, 195, 104, 0.1);
                            }

                            &--green {
                                top: 0;
                                right: 0;
                                background: radial-gradient(42.37% 42.37% at 57.89% 44.57%, rgba(255, 255, 255, 0.8) 0%, rgba(37, 143, 103, 0.01) 100%);
                            }
                        }
                    }

                    &-slider {
                        margin-bottom: 20px;
                        overflow: hidden;

                        &--single, &--thumbs {
                            .swiper-slide {
                                border-radius: 16px;
                                overflow: hidden;
                            }
                        }

                        &--single {
                            margin-bottom: 15px;
                            position: relative;

                            .swiper-controls {
                                position: absolute;
                                left: 0;
                                right: 0;
                                top: 50%;
                                transform: translateY(-50%);
                                z-index: 50;
                                padding: 0 15px;

                                .swiper-button-next,
                                .swiper-button-prev {
                                    width: 40px;
                                    height: 40px;
                                    background: #fff;
                                    border-radius: 50%;
                                    font-size: 30px;
                                    transition: opacity .3s ease-in-out;


                                    &:hover {
                                        opacity: .7;
                                    }

                                    .icon {
                                        position: relative;
                                    }
                                }

                                .swiper-button-next .icon {
                                    right: -2px;
                                }

                                .swiper-button-prev .icon {
                                    left: -2px;
                                }
                            }
                        }

                        &--thumbs {
                            .swiper-slide {
                                cursor: pointer;
                            }
                        }
                    }

                    &-info {
                        position: relative;
                        z-index: 50;
                        &_product {

                            .title {
                                margin-bottom: 15px;
                            }
                        }

                        &_rating {
                            margin-bottom: 20px;
                            line-height: 1;

                            .stars {
                                height: 20px;
                                margin-right: 15px;

                                &_star {
                                    margin-right: 10px;
                                    font-size: 20px;

                                    &:last-of-type {
                                        margin-right: 0;
                                    }
                                }
                            }

                            .reviews-amount {
                                font-size: 14px;
                                line-height: 1;
                                margin-top: 10px;
                            }
                        }

                        &_buy {
                            .qty {
                                margin-top: 0;
                            }

                            .btn {
                                margin-left: 30px;
                            }
                        }

                        &_description {
                            margin-bottom: 30px;
                            color: $primary;
                        }

                        &_price {
                            display: inline-block;
                            color: $primary;
                            font-family: $accentFont;
                            font-size: 30px;
                            line-height: 1.3;
                            font-weight: 800;
                            margin-bottom: 20px;
                        }

                        &_action {
                            .action {

                                &_link {
                                    background: #fff;
                                    box-shadow: 1px 2px 15px rgba(33, 72, 66, 0.07);
                                    width: 48px;
                                    height: 48px;
                                    border-radius: 50%;
                                    color: $accent;
                                    font-size: 20px;
                                    margin-right: 15px;
                                    margin-top: 15px;

                                    &:last-of-type {
                                        margin-right: 0;
                                    }

                                    &:hover, &.active {
                                        background: $accent;
                                        color: #fff;
                                    }
                                }
                            }

                            .btn {
                                width: fit-content;
                            }
                        }

                        &_block {

                            .title {
                                margin-bottom: 15px;
                            }

                            .qty {
                                margin-top: 0;
                                margin-bottom: 30px;
                            }

                            .weight-list {
                                margin-top: -10px;
                                margin-bottom: 20px;

                                .list-item {
                                    margin: 10px 10px 0 0;

                                    &:last-of-type {
                                        margin: 10px 0 0;
                                    }
                                }
                            }

                            [type="radio"] {
                                position: absolute;
                                left: -9999px;

                                & + label {
                                    border: 1px solid $primaryHighlight;
                                    border-radius: 100px;
                                    padding: 10px 15px;
                                    display: block;
                                    transition: all .3s ease-in-out;
                                    cursor: pointer;
                                }

                                &:checked + label {
                                    border-color: $secondary;
                                    background: $secondary;
                                    color: #fff;
                                }
                            }
                        }

                    }

                    .btn--underline {
                        margin-top: 30px;
                        display: inline-block;
                    }
                }
            }
        }

        &--search {
            .form {
                display: flex;
                flex-direction: column;

                .field, .btn {
                    width: 100%;
                    height: 48px;
                }

                .field {
                    border: 1px solid #C8C8C8;
                    border-radius: 24px;
                    padding: 10px 120px 10px 20px;
                    transition: all .3s ease-in-out;
                    margin-bottom: 10px;

                    &::placeholder {
                        transition: opacity .3s ease-in-out;
                    }

                    &:focus {
                        border-color: $primary;

                        &::placeholder {
                            opacity: 0;
                        }
                    }
                }
            }
        }

        &--compare {
            text-align: center;

            .title {
                margin-bottom: 15px;
            }

            .content {
                &_media {
                    margin-bottom: 10px;
                    border-radius: 16px;
                    overflow: hidden;
                    max-height: 146px;
                }

                &_main {
                    &-price {
                        margin: 15px 0;
                        color: $primary;
                        font-size: 20px;
                        line-height: 1.3;
                        font-family: $accentFont;
                        font-weight: 800;
                    }
                }
            }
        }
    }
}

// sweet alert 2 toast notification styles

.alert {
    &_popup {
        background: #fff;
        box-shadow: 0 0 15px rgba(37, 143, 103, 0.1);
        border-radius: 16px;
        min-width: 280px;
        max-width: 360px;
        display: flex !important;
        flex-direction: column;
        padding: 30px;
        position: relative;

        &-close {
            font-size: 18px;
            justify-content: flex-end;
            transition: color .3s ease-in-out;
            position: absolute;
            top: 15px;
            right: 15px;

            &:hover, &:focus {
                color: $secondary;
            }
        }
    }
}

// media queries

@media screen and (min-width: 575.98px) {
    .modal {

        &_popup {

            &--view {
                .about {
                    &_main {

                        &-info {

                            &_block {
                                margin-bottom: 30px;
                                .title {
                                    margin-bottom: 0;
                                    margin-right: 30px;
                                }

                                .weight-list {
                                    margin: 0;
                                    .list-item {
                                        margin: 0 20px 0 0;
                                        &:last-of-type {
                                            margin-top: 0;
                                        }
                                    }
                                }

                                .qty {
                                    margin: 0;
                                }
                            }

                            &_rating {

                                .reviews-amount {
                                    margin-top: 0;
                                    margin-left: 20px;
                                }
                            }


                            &_price {
                                margin-bottom: 0;
                                margin-right: 30px;
                            }

                            &_action {
                                margin-top: 40px;
                                .action {
                                    &_link {
                                        margin-top: 0;
                                        margin-right: 30px;
                                    }
                                }

                                .btn {
                                    margin-right: 30px;
                                }
                            }
                        }

                    }
                }
            }

            &--search {

                .form {
                    position: relative;

                    .field {
                        padding: 10px 120px 10px 20px;
                        transition: all .3s ease-in-out;
                        margin-bottom: 0;
                    }

                    .btn {
                        width: unset !important;
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        right: 0;
                    }
                }

            }

            &--compare {
                text-align: left;

                .content {
                    &_media {
                        margin-bottom: 0;
                    }

                    &_main {
                        margin-left: 15px;
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 767.98px) {
    .modal {
        &_popup {

            &--view {
                .about {
                    &_main {

                        &-slider {
                            &--single {
                                margin-bottom: 30px;
                            }
                        }

                    }
                }
            }
        }
    }
}

@media screen and (min-width: 991.98px) {
    .modal {
        &_popup {
            padding: 40px;

            &-close {
                top: 30px;
                right: 30px;
                font-size: 30px;
            }

            &--view {
                .about {
                    &_main {

                        &-slider {
                            max-width: 430px;
                            margin-right: 40px;
                            margin-bottom: 0;

                            &--single {
                                margin-bottom: 30px;
                            }
                        }

                        &-info {

                            &_rating {

                                .reviews-amount {
                                    margin-top: 0;
                                    margin-left: 20px;
                                }
                            }


                            &_price {
                                margin-bottom: 0;
                            }

                            &_action {
                                .action {
                                    &_link {
                                        margin-top: 0;
                                    }
                                }

                                .btn {
                                    margin-right: 30px;
                                }
                            }

                            .btn--underline {
                                margin-top: 40px;
                            }
                        }

                    }
                }
            }

            &--compare {
                min-width: 660px;

                .content {

                    &_main {
                        margin-left: 30px;

                        &-price {
                            margin: 30px 0;
                            font-size: 22px;
                            line-height: 1.1;
                            flex-grow: 1;
                        }
                    }
                }
            }
        }
    }
}