/* ####### start general classes #######  */
html {
    scroll-behavior: smooth;
}

.border-raduis-style {
    border-radius: 200px !important;
}

.border-start-raduis-style {
    border-radius: 0;
    border-start-start-radius: 200px;
    border-end-start-radius: 200px;
}

.border-end-raduis-style {
    border-radius: 0;
    border-start-end-radius: 200px;
    border-end-end-radius: 200px;
}


/* ####### end general classes #######  */


/* ####### start accordion component ####### */

.accordion-container {
    .card {
        background-color: transparent;
        box-shadow: none;
        border: none;

        .card-header {
            border: none;
        }
    }

    .btn-category-style {
        width: fit-content;
        margin-inline-start: auto;
        padding-inline: 50px;

        @media (max-width: 767px) {
            margin-inline: auto;
        }
    }

    .btn-toggler {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        color: var(--dark);
        padding: 0;

        &:is(:hover) {
            text-decoration: none;
        }

        .btn-title {
            margin-block-end: 0;
            font-size: 15px;
            font-weight: 600;

            @media (min-width: 768px) {
                font-size: 18px;
            }
        }

        .btn-icon-box {
            transition: .3s;

            .btn-toggler-icon {
                --size: 20px;

                @media (min-width: 768px) {
                    --size: 24px;
                }

                width: var(--size);
                height: var(--size);
            }
        }

        &:is(.collapsed) {
            .btn-icon-box {
                transition: .3s;
                transform: rotate(180deg);
            }
        }
    }

    #sub-category-box {
        border-block-end: 1px solid var(--secondary);
        padding-block-end: 16px;
        margin-block-end: 16px;
    }
}

/* ####### end accordion component ####### */


/* ####### start swiper component ####### */
.swiper {
    .swiper-wrapper {
        padding-block-end: 24px;

        @media (min-width: 992px) {
            padding-block-end: 32px;
        }
    }

    .swiper-scrollbar {
        height: 8px;
        width: 40%;
        inset-inline-start: 50%;
        transform: translateX(-50%);

        .swiper-scrollbar-drag {
            background-color: var(--primary);
            cursor: pointer;
        }
    }

    .swiper-button-next,
    .swiper-button-prev {
        border-radius: 15px;
        background-color: #86b22b;
        padding: 10px;
        color: white;
        box-shadow: 0px 0px 1px 1px aliceblue;
    }

    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: 20px;
        font-weight: bold;
    }

    @media (max-width: 767px) {

        .swiper-button-next,
        .swiper-button-prev {
            display: none;
        }
    }
}


/* ####### end swiper component ####### */




/* ############################# start header #############################  */


/* top header  */

@media (max-width: 991px) {
    .aiz-main-wrapper {
        padding-block-end: 60px;
    }

    .top-navbar {
        display: none;
    }
}



header {

    .front-header-search {
        @media (max-width: 991px) {
            border: 1px solid var(--dark);
            border-radius: 200px;
            padding-inline-start: 8px;
            padding-inline-end: 24px;
            height: 36px;

            .input-header-search {
                padding-inline-start: 8px;
                height: 32px;
            }
        }
    }

    .header-top-user-mobile {
        @media (max-width: 991px) {
            &::after {
                display: none;
            }
        }
    }

    .user-dropdown-menu {
        min-width: 150px;
    }
}

/* ############################# end header #############################  */


/* ############################# start home page #############################  */
.home-banner-area {
    .hero-section-img {
        @media (max-width:991px) {
            height: auto;
        }
    }

    .swiper-pagination {
        bottom: 22px;

        @media (min-width: 992px) {
            bottom: 32px;
        }

        .swiper-pagination-bullet {
            background: var(--white);
            opacity: 1;
            width: 10px;
            height: 10px;
        }

        .swiper-pagination-bullet-active {
            background: var(--primary);
        }
    }
}

.home-category-container {
    .swiper-list {
        padding-block-start: 16px;
        padding-block-end: 12px;

        .swiper-item {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 4px;
            height: 40px;
            background-color: var(--primary);
            color: var(--white);
            border-radius: 8px;
            margin-inline-end: 8px;

            @media (max-width: 767px) {
                font-size: 13px !important;
                padding-inline: 12px;
            }

            .link-icon {
                display: flex;
                font-size: 20px;
                max-width: 24px;
            }
        }

        &::-webkit-scrollbar {
            background-color: var(--secondary);
            height: 6px;
            border-radius: 10px;
        }


        &::-webkit-scrollbar-thumb {
            background-color: var(--primary);
            border-radius: 10px;
        }
    }
}

.aiz-carousel .slick-arrow {
    @media (max-width: 991px) {
        display: none !important;
    }
}

/* start reset home page carousel format  */
.px-2.py-4.px-md-4.py-md-3.bg-white.shadow-sm.rounded {
    background-color: transparent !important;
    box-shadow: none !important;

    .d-flex.mb-3.align-items-baseline.border-bottom {
        border-bottom: none !important;

        .border-bottom.border-primary.border-width-2.pb-3.d-inline-block {
            border-bottom: none !important;
        }

    }

    /* best sellers section  */
    .row.no-gutters.box-3.align-items-center.border.border-light.rounded.hov-shadow-md.my-2.has-transition {
        background-color: var(--white);
    }
}

/* end reset home page carousel format  */

.aiz-card-box {
    border-radius: 16px !important;
    box-shadow: 0px 1px 4px 1px rgb(0 0 0 / 10%);

    .price-box {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: 45px;
    }
}

.aiz-mobile-bottom-nav {
    padding-block-start: 4px;
    z-index: 1100;

    .link-item {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: inherit;
        padding-block: 6px;
        padding-inline: 4px;
        min-height: 50px;

        .item-icon-box {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            color: #999999;
            font-size: 28px;
            width: 24px;
            height: 24px;

            &.cart {
                position: relative;
                font-size: 32px;

                .cart-count {
                    position: absolute;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    top: -8px;
                    inset-inline-end: -8px;
                    width: 16px;
                    height: 16px;
                    border-radius: 50%;
                    font-size: 12px;
                    background-color: var(--red);
                    color: var(--white);
                }

            }

            &.categories {
                width: 29px;
            }

            .logo-icon-box {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 24px;
                height: 24px;
                background-color: var(--primary);
                border-radius: 50%;

                .logo-icon {
                    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(70deg) brightness(99%) contrast(107%);
                }
            }

            .item-icon {
                display: flex;
                stroke: #808080;
                max-width: 100%;
                height: auto;
            }
        }




        .item-title {
            display: none;
            font-size: 12px;
            font-weight: 600;
        }

        &:is(.active) {
            .item-icon-box {
                color: var(--primary);

                &.cart {
                    margin-block-end: -2px;
                }
            }

            .item-title {
                display: block;
                color: var(--primary);
            }

            .item-icon {
                stroke: var(--primary);
            }

            .home-icon {
                display: none;
            }
        }

        &:not(.active) {
            .logo-icon-box {
                display: none;
            }
        }
    }




}

/* ############################# end home page #############################  */

/* ############################# start categories page #############################  */
.categories-container {

    /* start categories components  */
    .btn-category-style {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--primary);
        color: var(--white);
        font-weight: 500;
        font-size: 14px;
        padding-inline: 8px;
        padding-block: 6px;
        border: none;

        @media (min-width: 768px) {
            font-size: 18px;
        }
    }

    .category-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        color: var(--gray);
        margin-block-end: 8px;

        .category-icon-box {
            border-radius: 8px;
            border: 2px solid #cdcdcd;
            overflow: hidden;
        }

        .title {
            text-align: center;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        &:is(.active) {
            .category-icon-box {
                background-color: #d0e3a8;
                padding-inline: 6px;
                padding-block: 4px;

                @media (min-width: 768px) {
                    padding-inline: 8px;
                    padding-block: 6px;
                }
            }
        }
    }

    /* end categories components  */
}

/* ############################# end categories page #############################  */

/* ############################# start single product details page #############################  */
.product-details {
    .slick-slider.product-gallery {
        border: none;
    }

    .detail-item-box {
        background-color: var(--white);
        padding: 16px;

        &:not(:last-child) {
            margin-block-end: 4px;
        }

        @media (min-width: 991px) {
            margin-inline-start: 8px;
        }
    }

    .product-img-box {
        position: relative;
        text-align: center;


        .heart-icon-btn,
        .items-count {
            position: absolute;
            bottom: 16px;
            z-index: 1;
            cursor: pointer;
            background-color: #eee;
        }

        .heart-icon-btn {
            inset-inline-end: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            padding: 0;
            font-size: 20px;
            color: var(--dark);
        }

        .items-count {
            inset-inline-start: 4px;
            font-size: 15px;
            padding-inline: 8px;
            padding-block: 4px;
            border-radius: 8px;
        }
    }

    .price-box {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-block-end: 8px;

        .price-before {
            font-size: 16px;

            @media (min-width: 992px) {
                font-size: 22px;
            }
        }

        .price-after {
            /* font-size: 20px; */

            @media (min-width: 992px) {
                font-size: 28px;
            }
        }
    }

    .seller-img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid rgb(219 219 219);
        margin-inline-end: 8px;
    }

    .quantity-select-box {
        position: relative;
        @media (min-width: 767px) {
            max-width: 350px;
        }

        &::before {
            content: "\f107";
            position: absolute;
            font-family: "Line Awesome Free";
            font-weight: 900;
            top: 50%;
            inset-inline-end: 16px;
            transform: translateY(-50%);
        }

        .quantity-select {
            background-color: rgb(237 255 255);
            appearance: none;
        }

        /* quantity select btn  */
        .quantity-select.dropdown,
        .quantity-select .dropdown-toggle {
            border-radius: 200px;
        }

        /* quantity select dropdown menu  */
        .dropdown-menu {
            border-end-start-radius: 8px;
            border-end-end-radius: 8px;
        }

        .bootstrap-select .dropdown-menu li:not(:last-child) {
            border-block-end: 1px solid rgb(190, 190, 190);
        }

        .dropdown-item.active {
            color: var(--gray) !important;
            background-color: var(--soft-primary);
            border-inline-start: 4px solid var(--primary);
            border-inline-end: 2px solid var(--primary);
        }
    }


    .btns-box {
        width: 100%;
        display: flex;
        align-items: center;

        .seller-store {
            border-inline-end: 1px solid #bfbfbf;
            padding-inline-end: 16px;
            margin-inline-end: 16px;
        }

        .add-to-cart,
        .buy-now {
            min-width: 135px;
        }

        @media (max-width: 767px) {
            position: fixed;
            width: 100%;
            bottom: 0;
            inset-inline-start: 0;
            z-index: 10;
            background-color: white;
            padding-block: 12px;
            padding-inline: 16px;
            box-shadow: 0 -6px 10px 0 rgba(0, 0, 0, 0.1);

            .add-to-cart {
                border-radius: 0 !important;
                border-start-start-radius: 50px !important;
                border-end-start-radius: 50px !important;
            }

            .buy-now {
                border-radius: 0 !important;
                border-start-end-radius: 50px !important;
                border-end-end-radius: 50px !important;
            }
        }
    }
}

.review-box {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 40px;
    margin-block-end: 8px;
}

/* ############################# end single product details page #############################  */



/* ############################# start cart page #############################  */

.place-order-box {
    @media (min-width: 992px) {
        margin-block-start: 16px;
    }
    @media (max-width: 991px) {
        position: fixed;
        left: 0;
        width: 100%;
        bottom: 57px;
        background-color: var(--light);
        padding-block-start: 24px;
        padding-block-end: 24px;
        z-index: 10;
    }
}


#cart-summary {
    @media (max-width: 767px) { 
        margin-block-end: 110px;
    }
    @media (min-width: 768px) and (max-width: 991px) { 
        margin-block-end: 160px;
    }

    .product-item {
        background-color: var(--white);
        padding: 16px;
        border: none;
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
        border-radius: 10px !important;

        &:not(:last-child) {
            margin-block-end: 16px;
        }

        &:is(.total) {
            @media (max-width: 767px) {
                padding-block: 10px;
            }
        }

        &:has(.btn-action) {
            @media (max-width: 767px) {
                background-color: transparent;
                box-shadow: none;
                padding: 0;
                margin-block-start: -4px;

                .btn-action {
                    border-radius: 200px;
                }
            }
        }

        .item-name {
            font-size: 12px;
            font-weight: 500;
            line-height: 1.5;

            @media (min-width: 768px) {
                font-size: 16px;
            }
        }

        .item-price {
            font-size: 14px;

            @media (min-width: 768px) {
                color: var(--dark);
                font-weight: 600;
                font-size: 16px;
            }
        }

        .btn-minus,
        .btn-plus {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            background-color: #eeeeee;
            font-size: 14px;
            border: 1px solid #a8a8a8;
            opacity: 1;

            @media (min-width: 768px) {
                width: 32px;
                height: 32px;
                font-size: 20px;
            }
        }

        .btn-delete {
            color: var(--gray);
            font-size: 20px;
            margin-inline-start: auto;

            @media (max-width: 767px) {
                margin-inline-end: 16px;
            }

            @media (min-width: 768px) {
                font-size: 26px;
            }
        }
    }
}

/* ############################# end cart page #############################  */


/* ############################# start shipping page #############################  */

.shipping-page {
    background-color: var(--light);
    margin-block-end: 60px;
    width: 100%;
    max-width: 700px;
    margin-inline: auto;

    .page-body {
        .main-container {
            @media (max-width: 991px) {
                padding: 0 !important;
            }
        }

        .shipping-item {
            background-color: var(--white);
            padding-block: 16px;
            padding-inline: 16px;

            @media (min-width: 992px) {
                border-radius: 8px;
            }

            &:not(:last-child) {
                margin-block-end: 8px;
            }

            .item-content-box {
                position: relative;
                border-radius: 8px;
                background-color: #eeeeee;
                padding: 8px 16px;
                border: 1px solid transparent;
                cursor: pointer;
                width: 100%;

                &:not(:last-child) {
                    margin-block-end: 12px;
                }

                &>*:not(:last-child) {
                    margin-block-end: 4px;
                }

                &:has(.item-input:checked) {
                    border-color: var(--primary);

                    .input-shape {
                        border-color: var(--primary);

                        &::before {
                            background-color: var(--primary);
                        }
                    }
                }
            }

            .item-content {
                .input-shape {
                    position: relative;
                    width: 14px;
                    height: 14px;
                    border-radius: 50%;
                    border: 2px solid var(--primary);
                    cursor: pointer;
                    padding: 0;
                    margin-inline-end: 16px;
                    margin-bottom: 0;

                    &::before {
                        content: "";
                        position: absolute;
                        top: 50%;
                        inset-inline-start: 50%;
                        transform: translate(-50%, -50%);
                        width: 60%;
                        height: 60%;
                        border-radius: inherit;
                    }
                }

                .item-input {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    inset-inline-start: 0;
                    margin-block-end: 0;
                    visibility: hidden;
                    cursor: pointer;
                }

                .item-img {
                    max-width: 56px;
                    padding-inline-end: 8px;
                }

                .item-label {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    margin-block-end: 0;
                    width: 100%;
                    cursor: pointer;
                    flex: 1;
                }
            }

            &:has(#pickup-location:checked) {
                .btn-location-box {
                    display: flex;
                }
            }

            .btn-location-box {
                display: none;
                justify-content: flex-end;
            }

            .input-coupon {
                border-color: #b6b6b6;
                border-start-start-radius: 8px;
                border-end-start-radius: 8px;
            }

            .btn-coupon {
                font-size: 12px;
                padding-inline: 8px;
                border-start-end-radius: 8px;
                border-end-end-radius: 8px;
            }

            .summary-box {
                border: 1px solid #b6b6b6;
                padding: 8px;
                border-radius: 8px;
                margin-block-end: 8px;
            }

            .total-box {
                padding: 8px;
                border-radius: 8px;
            }
        }



        




        /* modal for change or edit or new address  */
        .popup-shipping {
            position: relative;
            background-color: var(--white);
            max-width: 700px;
            border-radius: 8px;
            height: 92%;
            transform-style: preserve-3d;
            transition: .5s;

            .popup-title {
                font-size: 18px;
                font-weight: 600;
                text-align: center;
                color: var(--primary);
                margin-block-end: 0;
            }

            .address-box {
                position: relative;
                border: 1px solid gray;
                border-radius: 15px;
                padding-block: 16px;
                padding-inline: 16px;

                &:not(:last-child) {
                    margin-block-end: 16px;
                }

                &:has(.address-input:checked) {
                    border-color: var(--primary) !important;
                }

                .address-input {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    inset-inline-start: 0;
                    margin-block-end: 0;
                    visibility: hidden;
                    cursor: pointer;
                }
            }

            .info-box,
            .actions-box {
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
        }

    }

    &:has(.shipping-item) {
        .place-order-box {
            @media (max-width: 991px) {
                bottom: 55px;
            }
        }
    }
}



/* ############################# end shipping page #############################  */



/* ############################# start auth (login & register) page #############################  */
.profile {
    .brand-box {
        width: 130px;
    }

    .iti--separate-dial-code .iti__selected-flag,
    .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
        border-start-start-radius: 200px;
        border-end-start-radius: 200px;
        margin-inline-start: 0;
    }
}

/* ############################# end auth (login & register) page #############################  */


/* ############################# start profile page #############################  */
/* profile sidebar */

.aiz-mobile-side-nav {
    &:has(.active) {
        .aiz-user-sidenav {
            @media (max-width:991px) {
                padding-block-end: 60px !important;
            }
        }
    }
}

.aiz-user-sidenav-wrap {

    .brand-box {
        display: flex;
        width: 56px;
    }

    .person-name {
        flex: 1;
    }

    .aiz-side-nav-list {
        &.content {
            padding-block: 10px;
        }

        .aiz-side-nav-link {
            align-items: center;
        }

        .side-item {
            padding: 10px 20px 10px 15px;

            &.order-box:not(:last-child) {
                margin-block-end: 8px;
            }

        }

        .order-link {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            color: var(--dark);
            margin-inline-end: 16px;
            transition: .3s;

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

            .item-count {
                position: absolute;
                display: flex;
                align-items: center;
                justify-content: center;
                inset-inline-end: 6px;
                top: -6px;
                width: 18px;
                height: 18px;
                border-radius: 50%;
                background-color: var(--green);
                color: white;
                font-size: 10px;
            }
        }

        .icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background-color: var(--green);
            color: var(--white);
            margin-inline-end: 8px;
            font-size: 20px;
        }

        #policies-dropdown {
            .aiz-side-nav-link {
                padding-inline-start: 32px;
                position: relative;

                &:not(:last-child)::before {
                    content: "";
                    position: absolute;
                    width: 85%;
                    height: 1px;
                    bottom: 0;
                    inset-inline-start: 52%;
                    transform: translateX(-50%);
                    background-color: #808080;
                }
            }
        }

    }
}


/* sidebar mobile  */
.sidebar-mobile-container {
    @media (max-width: 575px) {
        width: 100% !important;
        max-width: 100% !important;
    }

    .aiz-side-nav-item.language {
        @media (min-width: 992px) {
            display: none;
        }
    }

}

/* Profile Modal For Mobile  */
.profile-modal {
    display: none;

    position: fixed;
    bottom: -100%;
    inset-inline-start: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--light);
    z-index: 2000;
    transition: .3s;

    .btn-profile {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        color: var(--white);
        padding: 0;
        font-size: 18px;

        &.edit {
            background-color: var(--green);
        }

        &.delete {
            background-color: var(--danger);
        }
    }

    .modal-body {

        /* language modal content  */
        .modal-content-area {
            .content-item {
                position: relative;
                background-color: var(--white);
                padding-inline: 12px;
                padding-block: 16px;
                border: 1px solid transparent;
                margin-block-end: 16px;
                border-radius: 8px;
                cursor: pointer;

                &:has(.item-input:checked) {
                    border-color: var(--primary);
                }
            }

            .item-input {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                inset-inline-start: 0;
                margin-block-end: 0;
                visibility: hidden;
            }

            .item-label {
                display: flex;
                align-items: center;
                gap: 8px;
                margin-block-end: 0;
            }
        }

    }
}

body:is(.open-profile-modal.settings) {
    .profile-modal.settings {
        bottom: 0;
    }
}

body:is(.open-profile-modal.language) {
    .profile-modal.language {
        bottom: 0;
    }
}

body:is(.open-profile-modal.currency) {
    .profile-modal.currency {
        bottom: 0;
    }
}

/* ############################# end profile page #############################  */





/* ################ Show and hide password ############################# */
.input-container {
    position: relative;
}

.pass-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 32px;
    height: 32px;
    top: calc(50%);
    inset-inline-end: 16px;
    transform: translateY(-50%);
    color: var(--gray-50);
    cursor: pointer;
    font-size: 18px;
}

.input-container {
    &.pass-show {
        .pass-icon.show-pass {
            display: none;
        }
    }

    &:not(.pass-show) {
        .pass-icon.hide-pass {
            display: none;
        }
    }
}

body:not(:has(.product-details, .home-page)) {

    header {
        @media (max-width: 991px) {
            display: none;
        }
    }
}

body:not(:has(.home-page)) {

    footer,
    .footer-widget {
        @media (max-width: 991px) {
            display: none;
        }
    }
}

@media (min-width: 992px) {
    #box-search {
        position: relative;

        .typed-search-box {
            position: absolute;
        }
    }
}