
// Alert when product is added to the basket
.product_alert{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(3px);
    background-color: rgba(0,0,0,.2);
    overflow: auto;
    z-index: 999999;
    transition: .2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    @media screen and (min-width: 991px){
        padding: 3rem 0;
    }
    &.hide{
        opacity: 0;
        pointer-events: none;
        user-select: none;
        transition-delay: .5s;
        .product_alert_inner{
            transform: translateY(-50px);
            opacity: 0;
        }
    }
    .text-success{
        color: #0E1921;
        i.fa-check{
            background: #0E1921;
            color: white;
            width: 18px;
            height: 18px;
            padding: 2px;
            flex-direction: column;
            justify-content: center;
            align-items:center;
            display: inline-flex;
            margin-right: 5px;
        }
    }
    .product_alert_inner{
        width: 100%;
        display: block;
        margin: auto;
        max-width: 800px;
        background: #fff;
        transition: .4s ease;
        max-height: 100%;
        @media screen and (max-width: 991px){
            margin-bottom: 0;
        }
        .product_alert_header{
            position: sticky;
            z-index: 999;
            top: 0;
            background: rgba(14, 25, 33, 0.3);
            padding: 1rem;
            @media screen and (min-width: 991px){
                padding: 2rem;
            }
            &>.partial {
                @media screen and (min-width: 991px){
                    display: flex;
                    align-items: flex-start;
                }
            }

            .add_to_basket_form_compact {
                .inline_add_to_basket_button {
                    display: flex;
                    column-gap: 0.5rem;

                    label {
                        width: 4rem;
                        
                        input {
                            border-radius: 0;
                        }
                    }
                }
            }
            .btn-add-to-basket, .atb-basket{
                border-radius: 0;
            }
        }
        .product_alert_body{
            max-height: 65vh;
            overflow: auto;
            padding: 1rem;
            @media screen and (min-width: 991px){
                padding: 2rem;
            }
            .product{
                border: 0;
                .product-title{
                    font-size: 1rem;
                }
                .stock_price span{
                    font-weight: 400;
                    font-size: 1rem;
                }
                .add_to_basket_form_compact{
                    margin-top: 2rem;
                }
                .product-image{
                    background-color: white;
                    img{
                        filter: unset;
                    }
                }
                .copy_to_clipboard, .product-rating{
                    display: none;
                }
                button, a, .btn.btn-danger{
                    border-radius: 30px;
                    display: inline-block;
                    width: auto;
                    padding: 0.5rem 1rem;
                    i:before{
                        content: "\f03a";
                        font-weight: 800;
                    }
                }
                button.btn-add-to-basket, button.atb-basket{
                    padding-left: 2.5rem;
                }
            }
        }
        .product_alert_footer{
            padding: 1rem;
            display: flex;
            position: sticky;
            bottom: 0;
            column-gap: 1rem;
            background: #0E1921;
            z-index: 99;
            @media screen and (min-width: 991px){
                column-gap: 2rem;
                padding: 2rem;
            }
            a{
                width: 50%;
                padding: .75rem 1rem;
                border-radius: 0;
                &.btn-primary.btn-add-to-basket, &.btn-primary.atb-basket{
                    background-color: #FFCC4D;
                    border-color: #FFCC4D;
                    color: black;
                }
                &.btn-secondary{
                    background-color: #E8F3EA;
                    border-color: #E8F3EA;
                    color: black;
                }
            }
        }
    }
}