/*
************
*************************
17. shop details
******************************************************* 
*************************************************************** */
 @use '../abstracts/variables' as *;

 .bz {
    &-shop-details {
        &.mb-70 {
            @media #{$xs} {
                margin-bottom: 20px;
            }
        }

        &-content {
            &.ml-20 {
                @media #{$lg} {
                   margin-left: 15px;
                }
                @media #{$md} {
                   margin-left: 0;
                }
                @media #{$xs} {
                   margin-left: 0;
                }
            }

            &-title {
                font-size: 24px;
                line-height: 1.3;
                margin-bottom: 20px;
                font-family: inherit;
                font-weight: 600;

                @media #{$xs} {
                    font-size: 20px;
                }
                @media #{$sm} {
                    font-size: 24px;
                }
            }

            &-price-rating-wrap {
                display: flex;
                gap: 110px;

                @media #{$lg} {
                    gap: 60px;
                }

                @media #{$xs} {
                    display: block;
                    gap: 0;
                }
                @media #{$sm} {
                    display: flex;
                    gap: 110px;
                }

            }
            &-price {
                & span {
                    font-size: 18px;
                    color: var(--clr-common-black-deep);
                    margin-right: 10px;
                    display: inline-block;
                    font-weight: 500;                    
                }
                & del {
                    font-size: 18px;
                    color: var(--clr-bg-gray-6);
                    display: inline-block;
                    font-weight: 500;                    
                }
            }

            &-rating {
                & a {
                    display: inline-block;
                    color: var(--clr-color-orange-4);
                    margin-right: 3px;
                    font-size: 18px;

                    &:last-child {
                        margin-right: 0;
                    }

                    @media #{$lg} {
                        font-size: 15px;
                        margin-right: 0;
                    }
                    @media #{$xs} {
                        font-size: 15px;
                        margin-right: 2px;
                    }
                }
                & span {
                    display: inline-block;
                    font-size: 18px;
                    color: var(--clr-common-black-deep);
                    margin-left: 20px;
                    font-weight: 500;

                    @media #{$lg} {
                        margin-left: 10px;
                    }
                    @media #{$xs} {
                        margin-left: 10px;
                        font-size: 16px;
                    }
                }
            }

            &-bottom-wrap {
                width: 100%;

                @media #{$lg} {
                    width: 100%;
                }
                @media #{$xs} {
                    width: 100%;
                }
            }

            &-color-size-wrap {
                display: flex;
                justify-content: space-between;

                // @media #{$lg} {
                //     gap: 50px;
                // }
                @media #{$xs} {
                    display: block;
                }
                @media #{$sm} {
                    display: flex;
                }
                
            }
            
            &-color {
                & ul {
                    & li {
                        width: 18px;
                        height: 18px;
                        position: relative;
                        margin-right: 15px;
                        display: inline-block;
                        cursor: pointer;
                        
                        &:last-child {
                            margin-bottom: 0;

                        
                        
                        }

                        &:hover::before {
                            position: absolute;
                            content: "";
                            width: 18px;
                            height: 18px;
                            background: var(--clr-common-white);
                            box-sizing: border-box;
                            border: 1px solid #dddfe3;
                            border-radius: 50%;
                        }
                        

                        &::after {
                            position: absolute;
                            content: "";
                            width: 8px;
                            height: 8px;
                            border-radius: 50%;
                            background: var(--clr-common-black-deep);
                            top: 5px;
                            left: 5px;
                        }


                        & a {
                            display: block;
                            color: var(--clr-body-text);
                            font-size: 12px;
                            line-height: 20px;
                            margin-top: 20px; 
                            opacity: 0;
                            visibility: hidden;
                        }

                        &:hover a {
                            opacity: 1;
                            visibility: visible;
                        }
                        
                    }
                    & .active {
                        & a {
                            opacity: 1;
                            visibility: visible;
                        }
                    }
                }
            }

            &-size {
                &-box {
                    display: flex;

                }

                &-item {
                    margin-right: 10px;

                    &:last-child {
                        margin-right: 0;
                    }

                    & label {
                        
                        & input {
                            margin-right: 5px;
                            cursor: pointer;
                        }
                        & input[name="optradio"] {
                            accent-color: var(--clr-theme-primary);
                        }
                    } 
                }
            }

            &-cart-action-wrap {
                display: flex;
                gap: 30px;

                @media #{$xs} {
                    display: block;
                    gap: 0;
                }
                @media #{$sm} {
                    display: flex;
                    gap: 30px;
                }
            }
            
            &-quantity-box {
                width: 120px;
                height: 60px;
                background: transparent;
                position: relative;
                border: 1px solid var(--clr-bg-gray-8);
                
                & .plus {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    border: 0;
                    right: 16px;
                    background-color: transparent;
                    color: var(--clr-bg-gray-8);
                }
                & .minus {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    border: 0;
                    left: 16px;
                    background-color: transparent;
                    color: var(--clr-bg-gray-8);
                }
                & input {
                    width: 100%;
                    border: 0;
                    background: transparent;
                    height: 60px;
                    text-align: center;
                    font-size: 16px;
                    color: var(--clr-common-black-deep);
                    font-weight: 500;
                }
            }

            &-add-cart {
                height: 60px;
                background: var(--clr-theme-primary);
                display: inline-block;
                text-align: center;
                line-height: 60px;
                font-weight: 600;
                font-size: 16px;
                color: var(--clr-common-white);
                text-decoration: none;
                transition: .3s;
                flex: 1;
                max-width: 100%;
                @media #{$xs} {
                    width: 240px;
                }

                &:hover {
                    background: var(--clr-color-orange);
                    color: var(--clr-common-white);
                }
            }

            &-widget-action {
                display: flex;

                @media #{$xs} {
                    display: block;
                }
                @media #{$sm} {
                    display: flex;
                }

                &-item {
                    margin-right: 40px;
                    padding-right: 40px;
                    border-right: 1px solid var(--clr-bg-gray-8);

                    @media #{$lg} {
                        margin-right: 25px;
                        padding-right: 25px;
                    }
                    @media #{$xs} {
                        margin-right: 0;
                        padding-right: 0;
                        border: 0;
                        margin-bottom: 15px;

                        &:last-child {
                            margin-bottom: 0;
                        }
                    }
                    @media #{$sm} {
                        margin-right: 25px;
                        padding-right: 25px;
                        border-right: 1px solid var(--clr-bg-gray-8);
                        margin-bottom: 0;

                        
                    }

                    &:last-child {
                        margin-right: 0;
                        padding-right: 0;
                        border-right: 0;
                    }

                    & a {
                        font-size: 16px;
                        font-weight: 500;
                        color: var(--clr-bg-gray-6);

                        & i {
                            margin-right: 8px;
                        }

                        &:hover {
                            color: var(--clr-theme-primary);
                        }
                    }
                }
            }

            &-list {

                & ul {

                    & li {
                        margin-bottom: 5px;

                        &:last-child {
                            margin-bottom: 0;
                        }
                        
                        & b {
                            font-size: 18px;
                            font-weight: 500;
                            color: var(--clr-common-black-deep);
                            margin-right: 15px;
                            display: inline-block;
                        }

                        & span {
                            color: var(--clr-body-text);
                            font-size: 16px;
                            display: inline-block;
                        }
                    }
                }
            }

            &-social {
                width: 220px;

                @media #{$lg} {
                    width: 190px;
                }

                & a {
                    font-size: 17px;
                    color: var(--clr-bg-gray-6);
                    margin-right: 20px;

                    &:hover {
                        color: var(--clr-color-orange);
                    }
                }
            }



        }
    }
    &-single-shop-details {
        &-active {

            & .has-width {
                width: 100%;

                @media #{$md} {
                    width: 100%;
                }
                @media #{$xs} {
                    width: 100%;
                }

                & img{
                    width: 100%;
                }
            }  
        }
        &-image {
            margin-bottom: 15px;
        }

        &-control-wrap {

            
            & .swiper-slide.swiper-slide-active {
                border: 1px solid var(--clr-theme-primary);

                & .bz-single-shop-details-control-image::after {
                    opacity: 0;
                }
            }
            }

    }
}


// shop info

.bz {
    &-single-shop-details-control{

        &-image {
            position: relative;
            cursor: pointer;

            &::after {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: var(--clr-bg-gray-2);
                content: "";
                opacity: .5;
            }
        }
        
        
    }

    &-shop-details-info-tab-controls {

        &.mb-50 {
            @media #{$xs}{
                margin-bottom: 30px;
            }
        }

        & .nav {
            
            @media #{$xs}{
                display: block;
            }
            @media #{$sm}{
                display: flex;
            }

        }

        & button {
            background: transparent;
            border: none;
            font-size: 22px;
            color: var(--clr-common-black-deep);
            margin-right: 60px;
            position: relative;
            font-weight: 500;
            display: inline-block;
            padding: 0;
            padding-bottom: 5px;

            @media #{$xs} {
                font-size: 18px;
                margin-right: 0;
                margin-bottom: 15px;
                display: block;
                font-weight: 400;
            }
            @media #{$sm}{
                display: inline-block;
                margin-right: 30px;
                margin-bottom: 0;
                font-size: 20px;
                font-weight: 500;
            }
            &:is(.active) {
                color: var(--clr-theme-primary);
            }
            &:last-child {
                margin-right: 0;
            }

            &::after {
                position: absolute;
                content: "";
                left: 0;
                top: 100%;
                width: 0;
                height: 2px;
                background: var(--clr-theme-primary);
                transition: .3s;
            }

            &.active::after {
                width: 100%;
            }

            &:hover {
                color: var(--clr-theme-primary);
                &::after {
                    width: 100%;
                }
            }
        }
    }

    &-description {
        &-text {
            & p {
                font-size: 16px;
                line-height: 28px;
                margin-bottom: 25px;
            }
        }

        &-list {
            & ul {
                & li {
                    font-size: 16px;
                    margin-bottom: 15px;
                    display: inline-block;

                    @media #{$xs}{
                        font-size: 15px;
                        margin-bottom: 15px;
                    }

                    & i{
                        display: inline-block;
                        margin-right: 10px;
                        font-size: 22px;
                        color: var(--clr-color-orange);
                        transform: translateY(3px);
                    }

                    &:last-child {
                        margin-bottom: 0;
                    }
                }
            }
        }
    }

    &-shop {
        &-details {
            &-faq {
                &-top {
                    &.mb-40 {
                        @media #{$xs}{
                            padding: 15px 0;

                           
                        }
                    }
                }
                &-title {
                    font-size: 22px;
                    font-weight: 500;
                    font-family: $jost;
                }
                &-text {
                    margin-bottom: 0;
                }


                &-box {

                    & .card {
                        border-radius: 0;
                        margin-bottom: 20px;
                        background: var(--clr-common-white);
                        transition: .3s; 
                        padding: 0 40px;

                        @media #{$xs}{
                            padding: 0 20px;
                        }
                        @media #{$sm}{
                            padding: 0 30px;
                        }

                        &:last-child {
                            margin-bottom: 0;
                        }
                        
                        & .card-header {
                            padding: 0;
                            margin: 0;
                            border: none;
                            background: transparent;

                            & .card-btn {
                                font-size: 18px;
                                font-weight: 500;
                                padding: 20px 0;
                                display: block;
                                text-align: left;
                                position: relative;
                                color: var(--clr-common-black-deep);
                                border-bottom: 1px solid var(--clr-bg-gray-8);
                                padding-right: 30px;
                                &::after {
                                    position: absolute;
                                    right: 0;
                                    top: 50%;
                                    content: "\f068";
                                    font-family: "Font Awesome 5 Pro";
                                    font-size: 18px;
                                    color: var(--clr-body-text);
                                    transform: translateY(-50%);
                                    transition: .3s;

                                }

                                @media #{$xs}{
                                    padding: 15px 0;
                                    font-size: 16px;
                                    line-height: 1.4;
                                    padding-right: 20px;
                                    &::after {
                                        right: 0;
                                    }
                                }

                                @media #{$sm}{
                                    padding: 20px 0;
                                    font-size: 18px;
                                    line-height: 1.2;
                                    padding-right: 20px;
                                    &::after {
                                        right: 0;
                                    }
                                }
                                


                            }
                            & .card-btn.collapsed {
                                border-bottom: 0;
                                transition: .3s;

                                &::after {
                                    content: "\f078";
                                    font-size: 18px;
                                }
                            }
                        }


                        & .card-body {
                            padding: 30px 0;

                            & p {
                                margin-bottom: 0;
                            }
                        }
                    }

                }
            }

            &-review {
                &-title {
                    font-size: 22px;
                    font-weight: 500;
                    font-family: $jost;

                    @media #{$xs} {
                        font-size: 20px;
                    }
                }
                &-box-single {
                    display: flex;
                    gap: 20px;

                    @media #{$md} {
                        display: block;
                        gap: 0;
                    }
                    @media #{$xs} {
                        display: block;
                        gap: 0;
                    }

                    & .wrap {
                        width: 100%;
                        
                    }

                    .content {
                        width: 710px;

                        @media #{$xs} {
                            width: 100%;
                        }
                    }

                    & .reviewer-info {
                        display: flex;
                        gap: 40px;
                        align-items: center;
                        margin-bottom: 5px;

                        @media #{$xs} {
                            gap: 30px;
                        }
                    }

                    & .title {
                        font-size: 18px;
                        font-weight: 500;
                        color: var(--clr-common-black-deep);
                        margin-bottom: 0;
                        line-height: 27px;
                        font-family: $jost;
                    }
                    & .rating {
                        i {
                            display: inline-block;
                            margin-right: 5px;
                            color: var(--clr-color-orange-4);
                            cursor: pointer;
    
                            &:last-child {
                                margin-right: 0;
                            }
                        }
                        
                    }

                    & .review-date {
                        & span {
                            display: inline-block;
                            color: var(--clr-color-orange-2);
                            font-size: 14px;
                            margin-right: 60px;

                            @media #{$xs} {
                                margin-right: 30px;
                            }
                        }
                        & a {
                            display: inline-block;
                            color: var(--clr-bg-gray-6);
                            font-size: 14px;

                            &:hover {
                                color: var(--clr-theme-primary);
                            }
                        }
                    }

                    & .review {
                        font-size: 14px;
                        line-height: 24px;
                        margin-bottom: 0;
                    }

                    
                }
                &-box {
                    & .required-field {
                        & p {
                            font-size: 16px;
                            margin-bottom: 0;

                            @media #{$xs} {
                                font-size: 15px;
                            }
                        }
                    }
                }
            }
        }
    }

    &-review {
        & span {
            display: inline-block;
            margin-right: 30px;
            font-size: 18px;
            font-weight: 500;
            color: var(--clr-common-black-deep);
        }

        &-rating {
            display: inline-block;
            & i{
                display: inline-block;
                margin-right: 5px;
                cursor: pointer;

                &:last-child {
                    margin-right: 0;
                }

            
            }
            & .active {
                color: var(--clr-color-orange-4);
            }
        }
    }

    &-submit-form-default {
        &-single {
            & .name, .email {
                width: 100%;
                padding: 0 25px;
                height: 60px;
                line-height: 60px;
                border: 1px solid var(--clr-bg-gray-8);
                border-radius: 0;
            }
            & textarea {
                width: 100%;
                padding: 20px 25px;
                height: 250px;
                border: 1px solid var(--clr-bg-gray-8);
                border-radius: 0;

                @media #{$xs}{
                    height: 140px;
                }
            }

            & .condition-box {
                display: flex;
                gap: 10px;

                & .has-condition {
                    width: 18px;
                    height: 18px;
                    margin-top: 4px;
                }

                & label.condition {
                    font-size: 16px;
                    color: var(--clr-common-black-deep);
                }
            }

            &-btn {
                padding: 18px 30px;
                border: 0;
            }
        }
    }

    &-shop-details {
        &-area {
            &.pb-110 {
                padding-bottom: 40px;
            }
        }

        &-section-title {
            font-size: 24px;
            font-weight: 600;
            font-family: $jost;
        }
    }
}

.shop-details {
    &-area {
        
    }
}








.bz-border-bottom {
    border-bottom: 1px solid var(--clr-bg-gray-8);
}
.borter-top {
    border-top: 1px solid var(--clr-bg-gray-8);
}
.bz-shop-details-content-color ul li.cl-olive::after {
	background: var(--clr-theme-primary);
}

.bz-shop-details-content-color ul li.cl-black::after {
	background: var(--clr-common-black-deep);
}

.bz-shop-details-content-color ul li.cl-red::after {
	background: #BC1927;
}

.bz-shop-details-content-color ul li.cl-blue::after {
	background: #3E2FD4;
}
.bz-shop-details-content-color ul li.cl-green::after {
	background: #008000;
}