
.title h2 {
color: &#039;&#039;;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
background-color: &#039;&#039;;
}
a {
color: &#039;&#039;;
}
.food-menu-area.food-menu-3-area .food-menu-items .single-menu-item .menu-price-btn a {
color: &#039;&#039;;
}
.food-menu-area.food-menu-3-area .food-menu-items .single-menu-item .menu-price-btn a::before {
background: &#039;&#039;2a;
}
.food-menu-area.food-menu-3-area .food-menu-items .single-menu-item .menu-price-btn a::after {
border-color: &#039;&#039;;
}
.food-menu-area .food-menu-items .single-menu-item .menu-price-btn span {
color: &#039;&#039;;
}
.menu-price-btn del {
color: &#039;&#039;;
}
.food-menu-area.food-menu-2-area .food-menu-items .single-menu-item:hover {
border: 1px solid &#039;&#039;;
}
#variationModal .btn-primary {
background-color: &#039;&#039;;
border-color: &#039;&#039;;
}

#variationModal .form-check span {
color: &#039;&#039;;
}

#variationModal .modal-title small {
color: &#039;&#039;;
}
.cart-icon {
background-color: &#039;&#039;;
}
.cart-header {
background-color: &#039;&#039;;
}
.cart-sidebar .cart-item h4.title a {
color: &#039;&#039;;
}
.cart-sidebar .cart-button {
border: 1px solid &#039;&#039;;
background-color: &#039;&#039;;
}
.cart-sidebar .cart-total strong {
color: &#039;&#039;;
}
.base-btn {
background-color: &#039;&#039;;
border: 1px solid &#039;&#039;;
}
.login-area .login-content .input-btn button {
background: &#039;&#039;;
border-color: &#039;&#039;;
}
.login-area .login-content .input-btn button:hover {
color: &#039;&#039;;
}
.qr-breadcrumb-details h2 {
color: &#039;&#039;;
}
.main-btn.main-btn-2 {
background-color: &#039;&#039;;
border-color: &#039;&#039;;
}
.placeorder-button .main-btn{
background-color: &#039;&#039; !important;
border-color: &#039;&#039; !important;
}
.placeorder-button .main-btn:hover{
color: &#039;&#039; !important;
background-color: transparent !important;
}
.base-btn:hover{
background-color: transparent !important;
color: &#039;&#039; !important;
border-color: &#039;&#039; !important;
}
.login-area .login-content .input-btn a{
color: &#039;&#039; !important;
}
a.dropdown-item:focus{
background-color: &#039;&#039; !important;
}
.checkout-area .coupon:before {
background: &#039;&#039;;
}
.food-menu-area .food-menu-items .single-menu-item .menu-content a.title:hover {
color: &#039;&#039;;
}
.food-menu-area .button-group button.is-checked {
background-color: &#039;&#039;;
color: #fff;
}
.food-menu-area .button-group button {
color: &#039;&#039;;
border: 1px solid &#039;&#039;;
background-color: #fff;
}
.food-menu-area.food-menu-3-area .tabs-btn .nav li a.active{
background: &#039;&#039;;
}


  .subcategories-scroll {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0;
  }

  .subcategories-scroll .filters-button-group {
    flex-wrap: nowrap;
    width: max-content;
    margin-right: auto;
    margin-left: auto;
  }

  .subcategories-scroll .filters-button-group .button {
    flex: 0 0 auto;
    margin: 0 6px;
  }

  /* تأكد إن أول زر عنده مسافة كافية */
  .subcategories-scroll .filters-button-group .button:first-child {
    margin-inline-start: 12px;
  }

  .subcategories-scroll::-webkit-scrollbar {
    height: 5px;
  }

  .subcategories-scroll::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
  }

  .filters-button-group .button {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 8px 15px;
  border: 1px solid #ddd;
  border-radius: 20px;
  background-color: #fff;
  font-size: 14px;
  color: #333;
  margin-left: 4px;
  transition: 0.3s;
  cursor: pointer;
}

.filters-button-group .button.is-checked {
  background-color: &#039;&#039;;
  color: #fff;
  border-color: #fff;
}