@import url(main.css);

/* restaurant menu */
.menu {
    align-items: start;
    padding-top: var(--ws-4);
    padding-bottom: var(--ws-4);
}

.list-svg.active svg circle,
.grid-svg.active svg rect {
  fill: #1b1b1b;
}

.list-svg svg circle,
.grid-svg svg rect {
  fill: #bbbbbb;
}

/*=== category list menu classes ===*/
.list-menu {
  grid-template-columns: repeat(4, minmax(5rem, 1fr));
  gap: var(--ws-4);
  padding-top: var(--ws-4);
  display: none;
}

.list-menu.active {
  display: grid;
}

.list-menu-item {
  border-radius: 8px;
  border: 2px solid #fff;
  background: #f6f6f6;
  box-shadow: var(--shadow), -10px -10px 50px 0px #fff;
  width: auto;
  height: 100px;
  white-space: wrap;
  text-align: center;
  padding: var(--ws-1);
}

/*=== category page ===*/
.category-order {
  display: none;
}

@media (max-width: 962px) {
    /* menu classes */
  .restaurant-food-img {
    min-width: 120px;
    height: auto;
    border-radius: 8px;
  }
}

@media (max-width: 828px) {
    /*=== menu classes===*/
  .menu-header-p {
    display: none;
  }

  /*=== category list menu classes ===*/
  .list-menu {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
     /* menu classes */
  .restaurant-food-img {
    min-width: 100px;
    height: auto;
  }

  .hollow-header {
    display: none;
  }

  .restaurant-btn-container {
    justify-content: left;
  }
}