.sticky-cart {
    position: sticky;
    position: -webkit-sticky;
    top: 110px;
}

.account-border-box {
    margin-top: 30px;
    border: 1px solid var(--text--color);
    border-radius: 20px;
    padding: 30px;
}

/* TABS START  */

/* custom scrollbar start  */

.paymenttabs::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #Fff;
    border-radius: 50%;
    padding-top: 15px;
    margin-top: 10px;
}

.paymenttabs::-webkit-scrollbar {
    width: 10px;
    border-radius: 50%;
    background-color: #F5F5F5;
    padding-top: 15px;
    margin-top: 10px;
}

.paymenttabs::-webkit-scrollbar-thumb {
    border-radius: 50%;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.171);
    background-color: #f5f5f5;
    padding-top: 15px;
    margin-top: 10px;
}

/* custom scrollbar END  */
/* tabs  */
.select-btn.active {
    border: 1px solid var(--primary--color);
    background: var(--primary--color--with--opacity) !important;
}

.select-btn:hover {
    border: 1px solid var(--primary--color);
    background: var(--primary--color--with--opacity) !important;
}

.select-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    white-space: nowrap;
    padding: 5px 30px;
    border-radius: 25px;
    gap: 5px;
    border: 1px solid #343434;
}

.select-btn .btn-text {
    font-size: 20px;
    font-weight: 500;
    color: var(--text--color);
}

.select-btn .arrow-dwn {
    color: #000000;
    font-size: 20px;
    margin-top: 3px;
}

.select-btn.open .arrow-dwn {
    transform: rotate(-180deg);
}

.sort-clear {
    color: var(--text--color);
    background-color: var(--white--color);
    border: 1px solid var(--text--color);
    border-radius: 10px;
    font-size: 18px;
    font-weight: 500;
    padding: 3px 14px;
    margin-right: 10px;
}

.list-items {
    top: 45px;
    background-color: var(--white--color);
    position: absolute;
    border-radius: 10px;
    padding: 0 16px;
    box-shadow: 0px 1px 4px 2px rgba(0, 0, 0, 0.25);
    display: none;
    width: fit-content;
    margin: 10px;
    z-index: 1;
}

.select-btn.open~.list-items {
    display: block;
}

.list-items .item {
    display: flex;
    align-items: center;
    list-style: none;
    justify-content: space-between;
    height: 50px;
    cursor: pointer;
    transition: 0.3s;
    padding: 0 5px;
    border-radius: 8px;
}

.item .item-text {
    font-size: 16px;
    font-weight: 400;
    color: #333;
}

.item .checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 16px;
    width: 16px;
    border-radius: 100%;
    border: 1.5px solid #9c9c9c;
}

.item.checked .checkbox {
    background-color: var(--primary--color);
    border-color: var(--primary--color);
}

.checkbox .check-icon {
    color: var(--white--color);
    font-size: 10px;
}

.sort-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

.sort-apply:hover {
    background-color: var(--primary--hover--color);
}

.sort-apply {
    background-color: var(--primary--color);
    color: var(--white--color);
    border-radius: 10px;
    border: none;
    padding: 5px 15px;
    font-size: 18px;
    font-weight: 500;
}

.wrapper {
    position: relative;
    width: 100%;
    transition: .3s ease;
    display: flex;
    align-items: baseline;
    column-gap: 15px;
}

.wrapper .icon {
    position: relative;
    top: 6px;
    display: flex;
    align-self: flex-start;
    justify-content: center;
}

.icon i {
    position: relative;
    font-size: 30px;
    line-height: 30px;
    color: var(--secondary--color);
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}

.wrapper .tabsBox {
    display: flex;
    /*gap: 15px;*/
    scroll-behavior: smooth;
    overflow-x: hidden;
    list-style: none;
    padding: 0;
}

.tabsBox.dragging {
    cursor: grab;
    scroll-behavior: auto;
}

.tabsBox .tab {
    cursor: pointer;
    background: transparent;
    transition: background ease 0.2s;
    white-space: nowrap;
    border-radius: 25px;
    border: 1px solid #343434;
    padding: 5px 30px;
    font-size: 20px;
    color: var(--text--color);
    font-weight: 600;
    height: fit-content;
}

.tab.active {
    border: 1px solid var(--primary--color);
    background: var(--primary--color--with--opacity) !important;
}

.tab:hover {
    border: 1px solid var(--primary--color);
    background: var(--primary--color--with--opacity) !important;
}

.tabsBox.dragging .tab {
    user-select: none;
    pointer-events: none;
}

.paymenttabs {
    margin-top: 50px;
}

.paymenttab {
    background-color: transparent;
    border-radius: 15px;
    cursor: pointer;
    padding: 10px;
    /*width: 200px;*/
    min-height: 250px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    border: 1px solid #343434;
    display: flex;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.paymenttab img {
    padding-top: 10px;
    border-radius: 50%;
}

.payment-tab-title {
    padding-top: 10px;
    margin-bottom: 0;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text--color);
    margin-bottom: 0;
}

.paymenttab.active,
.paymenttab:active,
.paymenttab:hover {
    background-color: var(--primary--color--with--opacity);
    border: 1px solid var(--primary--color);
}

.paymenttab:hover .payment-tab-title,
.paymenttab:active .payment-tab-title,
.paymenttab.active .payment-tab-title {
    color: var(--primary--color);
}

/*.payment-tab-title {*/
/*    padding-top: 20px;*/
/*    font-weight: 600;*/
/*    font-size: 18px;*/
/*    line-height: 43px;*/
/*    color: var(--text--color);*/
/*}*/

.paymenttabcontent {
    display: none;
}

.paymenttabcontents .active {
    display: block;
}

/* TABS END  */


/* ALL ORDERS CSS START  */
.all-orders {
    display: flex;
    flex-direction: column;
    column-gap: 50px;
}

.order-container {
    display: flex;
    flex-direction: column;
    row-gap: 15px;
    padding: 20px 0;
    border-bottom: 1px solid #ECECEC;
}

.order-container:last-child {
    border-bottom: none !important;
}

.order-item-icon {
    width: 40px;
    height: 40px;
}

.order-box,
.order-store-detail {
    display: flex;
    justify-content: space-between;
}

.order-item-name {
    display: flex;
    align-items: center;
    column-gap: 8px;
}

.order-details,
.order-status {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

.order-item-name h4,
.order-price {
    font-size: 18px;
    line-height: 25px;
    color: var(--text--color);
    font-weight: 600;
    text-transform: capitalize;
}

.order-item-name h6 {
    font-size: 16px;
    line-height: 20px;
    color: var(--text--color);
    font-weight: 600;
    text-transform: capitalize;
    margin-top: 10px;
}

.order-datetime,
.order-address {
    margin: 0;
    font-size: 16px;
    line-height: 20px;
    color: var(--text--color);
    font-weight: 500;
}

.order-address {
    font-weight: 500;
}

.order-price {
    color: var(--primary--color);
    font-weight: 700;
    text-align: end;
}

.order-store-icon {
    width: 30px;
    height: 30px;
}

.order-item-rating p {
    margin: 0;
    font-size: 16px;
    line-height: 20px;
    color: var(--text--color);
    font-weight: 500;
}

.rating-star {
    display: inline-flex;
}

/* ALL ORDERS CSS END  */

/* PRODUCT CART SECTION START  */
.recommended-product-item .product-image img {
    border-radius: 20px;
}

.recommended-product-item .food-product-title h4 {
    color: var(--text--color);
    font-weight: 600;
    font-size: 26px;
    line-height: 42px;
    text-transform: capitalize;
    padding-top: 10px;
}

.recommended-product-item .food-product-description p {
    color: var(--text--color);
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    margin-top: 10px;
}

.recommended-product-item .topping-popup-main-title {
    margin-right: 12px;
    color: var(--text--color);
    font-size: 18px;
    font-weight: 400;
}

.recommended-product-item .add-btn {
    margin-top: 0;
}

.recommended-product-item .price-and-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 5px 0;
}

.recommended-product-item .food-add-cart {
    width: 100%;
    padding: 0 35px;
}

.recommended-product-item #food-add-qty {
    margin: 0 0 0 auto;
}

@media only screen and (max-width: 1400px) {
    .recommended-product-item .food-product-title h4 {
        font-size: 25px;
        line-height: 1.5;
    }

    .food-product-price {
        column-gap: 5px;
    }

    .food-product-price h6 {
        font-size: 20px;
        line-height: 1.5;
    }

    .food-add-cart {
        font-size: 20px !important;
        height: 30px;
    }

    .recommended-product-item .food-add-cart {
        padding: 0px 25px;
    }

    .recommended-product-item .topping-popup-main-title {
        font-size: 15px;
    }

    .recommended-product-item .food-product-description p {
        font-size: 14px;
        line-height: 1.5;
    }
}

@media only screen and (max-width: 767px) {
    .recommended-product-item .food-product-title h4 {
        font-size: 20px;
        line-height: 1.3;
    }
}

@media only screen and (max-width: 600px) {
    .recommended-product-item .product-image {
        text-align: left;
    }

    .recommended-product-item .food-product-title h4 {
        font-size: 20px;
        line-height: 1.3;
    }
}

.add-cart-section {
    padding: 40px 0;
    justify-content: space-between;
    align-items: start;
}

.food-product-detail {
    display: flex;
    flex-direction: column;
    row-gap: 3px;
}

.all-food-products {
    display: flex;
    justify-content: start;
    flex-direction: column;
    row-gap: 50px;
    margin-bottom: 30px;
}

.food-product {
    display: flex;
    align-items: flex-start;
    justify-content: start;
    column-gap: 15px;
}

.food-product-image {
    width: 216px;
    border-radius: 15px;
}

.add-btn {
    margin-top: -20px;
}

.food-add-cart {
    background-color: var(--white--color);
    color: var(--primary--color);
    font-size: 24px;
    font-weight: 500;
    border-radius: 10px;
    border: none;
    width: 50%;
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.16));
}

#food-add-qty {
    display: none;
    background-color: var(--white--color);
    border-radius: 10px;
    border: none;
    margin: 0 auto;
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.16));
}

.food-product-title {
    display: flex;
    align-items: first baseline;
    justify-content: space-between;
}

.food-product-title h4 {
    color: var(--text--color);
    font-weight: 600;
    font-size: 26px;
    line-height: normal;
    text-transform: capitalize;
}

.food-product-title a {
    color: var(--text--color);
    font-weight: 500;
    font-size: 18px;
    line-height: 23px;
}

.food-product-price {
    display: flex;
    align-items: baseline;
    justify-content: start;
    column-gap: 10px;
}

.food-product-price h6 {
    color: var(--text--color);
    font-weight: 600;
    font-size: 20px;
    line-height: normal;
}

.food-product-price .old-price {
    color: #BEBEBE;
    font-weight: 400;
    text-decoration-line: line-through;
}

.food-product-description p {
    color: var(--text--color);
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    text-transform: capitalize;
}

#cart {
    overflow: visible;
}

.product-cart {
    width: 100%;
    height: fit-content;
    background-color: var(--white--color);
    border: 1px #343434;
    border-radius: 20px;
    padding: 20px 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.product-cart-title {
    display: flex;
    align-items: baseline;
    justify-content: start;
    column-gap: 5px;
}

.product-cart-title h4 {
    color: var(--text--color);
    font-weight: 600;
    font-size: 20px;
    line-height: normal;
}

.product-cart-store-title h4 {
    background-color: var(--primary--color--with--opacity);
    color: var(--primary--color);
    font-weight: 600;
    font-size: 18px;
    line-height: 23px;
    text-transform: capitalize;
    border-radius: 10px;
    padding: 10px;
    border: 1px solid var(--primary--color); /* added border */
}

.cart-product-title h4 {
    color: var(--cart--text--color);
    font-weight: 600;
    font-size: 20px;
}

.cart-product-title p {
    color: var(--cart--text--color);
    font-weight: 400;
    font-size: 14px;
    margin: 0;
}

.cart-product-title h6 {
    color: var(--cart--text--color);
    font-weight: 600;
    font-size: 16px;
}

.cart-add-quentity p {
    color: var(--cart--text--color);
    font-weight: 400;
    font-size: 16px;
    margin: 0;
}

.cart-add-quentity {
    display: flex;
    align-items: baseline;
    justify-content: start;
    column-gap: 10px;
}

.qty-input {
    border-radius: 10px;
    border: 1px solid #343434;
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 90px;
    height: 35px;
}

.qty-input .product-qty,
.qty-input .qty-count {
    background: transparent;
    color: var(--primary--color);
    font-weight: 600;
    font-size: 16px;
    border: none;
    display: inline-block;
    min-width: 0;
    height: 2.5rem;
}

.qty-input .product-qty:focus,
.qty-input .qty-count:focus {
    outline: none;
}

.qty-input .product-qty {
    width: 50px;
    min-width: 0;
    display: inline-block;
    text-align: center;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

.qty-input .product-qty::-webkit-outer-spin-button,
.qty-input .product-qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.qty-input .qty-count {
    padding: 0;
    cursor: pointer;
    width: 60px;
    font-size: 18px;
    /*text-indent: -100px;*/
    /*overflow: hidden;*/
    position: relative;
}

/*.qty-input .qty-count:before,*/
/*.qty-input .qty-count:after {*/
/*    content: "";*/
/*    height: 2px;*/
/*    width: 10px;*/
/*    position: absolute;*/
/*    display: block;*/
/*    background-color: var(--primary--color);*/
/*    top: 0;*/
/*    bottom: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*    margin: auto;*/
/*}*/

.qty-input .qty-count--add:after {
    transform: rotate(90deg);
}

.cart-divider {
    background-color: #f5f5f5;
    margin: 5px -20px;
    height: 3px;
}

.cart-text .accordion {
    width: 100%;
}

.cart-text {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    text-transform: capitalize;
    background-color: var(--white--color);
    width: 100%;
}

.cart-text h4 {
    color: var(--cart--text--color);
    font-weight: 600;
    font-size: 16px;
    line-height: normal;
    margin: 0;
}

.arrow-right {
    font-weight: 300 !important;
    font-size: 14px;
    color: #343434;
}

.cart-text p {
    color: var(--secondary--color);
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 10px;
}

.bill-receip {
    display: flex;
    justify-content: start;
    flex-direction: column;
    gap: 0px;
}

.checkout button {
    background-color: var(--primary--color);
    color: var(--white--color);
    font-weight: 500;
    font-size: 20px;
    text-transform: capitalize;
    border: none;
    border-radius: 10px;
    width: 100%;
    height: 40px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.tip-buttons {
    display: flex;
    align-items: baseline;
    justify-content: start;
    column-gap: 10px;
}

.tip-btn {
    cursor: pointer;
    background: transparent;
    white-space: nowrap;
    border: 1px solid #343434;
    color: var(--text--color);
    border-radius: 25px;
    font-size: 15px;
    font-weight: 600;
    width: 70px;
    height: 30px;
}

.tip-btn:active,
.tip-btn.active {
    border: 1px solid var(--primary--color);
    background: var(--primary--color--with--opacity) !important;
}

.additional-instruction {
    width: 100%;
    padding-top: 10px;
    border-radius: 5px;
}

.instruction::placeholder {
    color: rgb(190, 190, 190);
}

/* FAQ SECTION START  */
.accordion-button:not(.collapsed) {
    color: #343434;
    background-color: transparent;
    box-shadow: none;
    padding: 0px 0px 0px 0px;
}

.accordion-button {
    padding: 0px 0px 0px 0px;
    color: var(--text--color);
    font-size: 20px;
    line-height: 1.5;
    text-transform: capitalize;
}

.accordion-button::after {
    background-image: url("/assets/website/images/icons/add.svg") !important;
    background-size: cover;
    width: 25px;
    height: 25px;
    transform: none !important;
}

.accordion-button:focus {
    z-index: 3;
    border: 0;
    outline: 0;
    box-shadow: none;
}

.accordion-body {
    padding: 0;
}

.additional-instruction {
    padding-top: 10px;
}

/* FAQ SECTION END  */
/* HERO SECTION START  */
/*#store-hero {*/
/*    padding-top: 30px;*/
/*}*/

.checkbox {
    margin-top: 0px;
    margin-left: 0px;
}

.storehero-title h1 {
    color: var(--text--color);
    font-weight: 600;
    font-size: 30px;
    line-height: normal;
}

.storehero-title .badge {
    color: #00AD6F !important;
    background-color: #E6F7F1 !important;
    font-weight: 400;
    font-size: 16px;
    padding: 6px 15px !important;
    border-radius: 10px !important;
    line-height: normal;
    position: relative;
    top: -5px;
}

.store-hero {
    padding-top: 20px;
}

.storehero-categories {
    display: flex;
    align-items: center;
    justify-content: start;
}

.storehero-categories p {
    color: var(--text--color);
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
}

.storehero-rating,
.storehero-time {
    display: flex;
    align-items: baseline;
    justify-content: start;
    column-gap: 5px;
}

.rating-icon {
    color: var(--rating--color);
    font-size: 18px;
}

.storehero-rating p {
    color: var(--text--color);
    font-weight: 400;
    font-size: 16px;
}

.storehero-text p,
.storehero-time p {
    color: var(--text--color);
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
}

.store-card {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 20px;
    background-color: #F5F5F5;
    border-radius: 10px;
    padding: 12px;
}

.store-card-text h4 {
    color: var(--text--color);
    font-weight: 550;
    font-size: 22px;
    line-height: normal;
}

.store-card-text h6 {
    color: var(--text--color);
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
}

.store-offer-card {
    margin-top: 25px !important;
    border-radius: 12px;
    text-align: center;
    padding-bottom: 15px;
    background: var(--primary--gradiant);
}

.discount-icon {
    position: relative;
    top: -16px;
}
#all-orders{
    margin-top: 100px;
}

/* HERO SECTION END  */

/* RESPONSIVE START */
@media only screen and (max-width: 1400px) {
    .store-card {
        width: 48%;
    }
    #all-orders{
        margin-top: 50px;
    }
    .store-offer-card {
        width: 100%;
    }
}

@media only screen and (max-width: 1200px) {
    .store-card {
        width: 45%;
    }
}

@media only screen and (max-width: 992px) {
    .add-cart-section {
        row-gap: 40px;
    }

    .store-card {
        width: 48%;
    }
}

@media only screen and (max-width: 768px) {
    .store-card {
        width: 100%;
    }

    .store-offer-card {
        width: 100%;
    }

    .add-cart-section {
        row-gap: 40px;
    }

    .storehero-title h1 {
        font-size: 26px;
    }

    .givereview-popup,
    .openinghour-popup,
    .review-popup {
        width: 100%;
    }

    .payment-tab-title img {
        width: 50%;
    }

    .payment-tab-title {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

@media only screen and (max-width: 500px) {
    .food-product-image {
        width: 130px;
        height: 100%;
    }

    .food-product-title h4 {
        font-size: 22px;
        line-height: 1.5;
    }

    .food-product-detail {
        row-gap: 0px;
    }

    .food-product-price h6 {
        font-size: 20px;
        line-height: 20px;
    }

    .all-store-cards {
        margin-top: 0;
    }
}

@media only screen and (max-width: 400px) {
    .food-add-cart {
        font-size: 18px;
        line-height: 1.5;
        font-weight: 500;
    }

    .food-product-title h4 {
        font-size: 20px;
        line-height: 1.5;
    }

    .food-product-description p {
        font-size: 14px;
        line-height: 1.5;
    }

    .add-btn {
        margin-top: -15px;
    }
}

@media only screen and (max-width: 325px) {
    .food-product-title h4 {
        font-size: 16px;
        line-height: 1.5;
    }
}

@media only screen and (min-width: 576px) and (max-width: 770px) {
    .all-food-products .row-cols-md-2 > * {
        width: 64% !important;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .all-food-products .row-cols-md-2 > * {
        width: 64% !important;
    }
}


/* RESPONSIVE end */