/* =========================================================
   FOODY / KARENDERIA
   CLEAN GLOVO STYLE
   Listing + Product Modal
   ========================================================= */


/* =========================================================
   1) PRODUCT LISTING
   ========================================================= */

#vue-merchant-menu section .list-item-rows {
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid #ececec !important;
}

#vue-merchant-menu section .list-item-rows:last-child {
  border-bottom: 0 !important;
}

#vue-merchant-menu section .list-item-rows > .row.m-0 {
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  min-height: 132px !important;
  margin: 0 !important;
  padding: 16px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* image column */
#vue-merchant-menu section .list-item-rows > .row.m-0 > .col-3 {
  width: 124px !important;
  max-width: 124px !important;
  flex: 0 0 124px !important;
  padding: 0 !important;
}

/* image wrapper */
#vue-merchant-menu section .item-image-preview {
  width: 112px !important;
  height: 112px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #f4f4f4 !important;
  box-shadow: none !important;
}

#vue-merchant-menu section .item-image-preview .el-image,
#vue-merchant-menu section .item-image-preview .el-image__inner,
#vue-merchant-menu section .item-image-preview img {
  width: 112px !important;
  height: 112px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 18px !important;
}

/* right column */
#vue-merchant-menu section .list-item-rows > .row.m-0 > .col-9 {
  flex: 1 !important;
  max-width: calc(100% - 124px) !important;
  padding: 0 !important;
}

#vue-merchant-menu section .list-item-rows > .row.m-0 > .col-9 > .row.m-0.p-0 {
  display: flex !important;
  align-items: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* text area */
#vue-merchant-menu section .list-item-rows .col-lg-8.col-md-8.d-flex.align-items-center.fixed-height {
  flex: 1 !important;
  max-width: calc(100% - 58px) !important;
  min-height: 112px !important;
  padding: 0 !important;
  align-items: flex-start !important;
}

#vue-merchant-menu section .list-item-rows .center {
  width: 100% !important;
  padding: 0 10px 0 0 !important;
}

#vue-merchant-menu section .list-item-rows .d-flex.align-items-center.mb-1 {
  display: block !important;
  margin-bottom: 6px !important;
}

/* title */
#vue-merchant-menu section .list-item-rows h6 {
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: #1d1d1d !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* hide allergen icon */
#vue-merchant-menu section .list-item-rows .d-flex.align-items-center.mb-1 .ml-2 {
  display: none !important;
}

/* description */
#vue-merchant-menu section .list-item-rows p.ellipsis-2-lines {
  font-size: 13px !important;
  line-height: 1.35 !important;
  color: #6f6f6f !important;
  margin: 6px 0 0 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  max-width: 100% !important;
}

/* price */
#vue-merchant-menu section .list-item-rows .prices,
#vue-merchant-menu section .list-item-rows .bold.m-0.prices,
#vue-merchant-menu section .list-item-rows .center p.bold {
  font-size: 15px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  color: #1d1d1d !important;
  margin: 8px 0 0 0 !important;
  white-space: nowrap !important;
}

/* button column */
#vue-merchant-menu section .list-item-rows .col-lg-4.col-md-4.d-flex.align-items-center {
  width: 58px !important;
  max-width: 58px !important;
  flex: 0 0 58px !important;
  min-height: 112px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
}

/* wrappers */
#vue-merchant-menu section .list-item-rows .quantity-wrapper,
#vue-merchant-menu section .list-item-rows .quantity-parent {
  width: auto !important;
  margin: 0 !important;
}

/* add button */
#vue-merchant-menu section .list-item-rows a.btn.btn-grey.quantity-add-cart,
#vue-merchant-menu section .list-item-rows .el-button {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: #00a082 !important;
  color: transparent !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  position: relative !important;
}

#vue-merchant-menu section .list-item-rows a.btn.btn-grey.quantity-add-cart::after,
#vue-merchant-menu section .list-item-rows .el-button::after {
  content: "+" !important;
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-indent: 0 !important;
  color: #ffffff !important;
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
}

/* quantity mode */
#vue-merchant-menu section .list-item-rows .quantity {
  background: #f5f5f5 !important;
  border-radius: 999px !important;
  padding: 3px 6px !important;
  min-width: 74px !important;
}

#vue-merchant-menu section .list-item-rows .qty-btn {
  background: #00a082 !important;
  color: #fff !important;
  border: 0 !important;
}

/* category title */
#vue-merchant-menu section > h5 {
  font-size: 18px !important;
  font-weight: 800 !important;
  margin-bottom: 14px !important;
  color: #1d1d1d !important;
}

/* hide category description */
#vue-merchant-menu section > p {
  display: none !important;
}


/* =========================================================
   2) PRODUCT MODAL
   ========================================================= */

#itemModal .modal-dialog {
  max-width: 640px !important;
}

#itemModal .modal-content {
  border: 0 !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.14) !important;
  background: #fff !important;
}

#itemModal .modal-header {
  border-bottom: 0 !important;
  padding: 14px 18px 8px !important;
  min-height: 46px !important;
  background: #fff !important;
}

#itemModal .modal-header .close {
  margin-left: auto !important;
  font-size: 34px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  color: #2b2b2b !important;
  opacity: 1 !important;
}

#itemModal .modal-body {
  padding: 0 18px 18px !important;
  background: #fff !important;
}

/* image */
#itemModal .item_s {
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 auto 16px !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: #f5f5f5 !important;
}

#itemModal .item_s .el-image {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  background: #f5f5f5 !important;
}

#itemModal .item_s .el-image__inner,
#itemModal .item_s img {
  width: 100% !important;
  height: auto !important;
  max-height: 260px !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 auto !important;
  border-radius: 22px !important;
}

/* hide thumbs */
#itemModal #owl_item_gallery {
  display: none !important;
}

/* title */
#itemModal h4 {
  font-size: 28px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  color: #1d1d1d !important;
  margin-top: 10px !important;
  margin-bottom: 8px !important;
}

/* description */
#itemModal .text-muted,
#itemModal p.text-muted,
#itemModal text-description,
#itemModal .font13 {
  color: #6f6f6f !important;
}

/* price / sizes */
#itemModal .choose-sizex,
#itemModal .btn-group.btn-group-toggle.input-group-small.choose-sizex.flex-wrap {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 8px 0 14px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  width: auto !important;
  max-width: 100% !important;
}

#itemModal .btn-group > .btn,
#itemModal .btn-group-vertical > .btn {
  flex: 0 0 auto !important;
}

#itemModal .choose-sizex .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 40px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  border: 1px solid #dfe3e8 !important;
  background: #fff !important;
  color: #1d1d1d !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  text-indent: 0 !important;
  overflow: visible !important;
}

#itemModal .choose-sizex .btn.active {
  background: #00a082 !important;
  border-color: #00a082 !important;
  color: #fff !important;
}

#itemModal .choose-sizex .btn del {
  color: inherit !important;
  opacity: .72 !important;
  margin-right: 6px !important;
}

#itemModal .choose-sizex .btn input {
  display: none !important;
}

#itemModal .choose-sizex .btn:empty {
  display: none !important;
}

/* option blocks */
#itemModal .addon-rows {
  background: #fafafa !important;
  border: 1px solid #ebebeb !important;
  border-radius: 18px !important;
  padding: 14px 14px 10px !important;
  margin-bottom: 14px !important;
}

#itemModal .addon-rows .heads {
  margin-bottom: 10px !important;
  background: #f7f7f7 !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
}

#itemModal .addon-rows h5,
#itemModal .addon-rows h6 {
  color: #1d1d1d !important;
}

#itemModal .addon-rows .text-grey,
#itemModal .addon-rows p {
  color: #6e6e6e !important;
}

#itemModal .addon-required {
  background: #fff1c7 !important;
  color: #8a6b00 !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

#itemModal .list-addon li {
  padding: 10px 0 !important;
  border-top: 1px solid #ececec !important;
}

#itemModal .list-addon li:first-child {
  border-top: 0 !important;
}

#itemModal .custom-control-label h6 {
  font-size: 16px !important;
  font-weight: 700 !important;
}

/* textarea + select */
#itemModal textarea.form-control,
#itemModal select.form-control {
  border-radius: 16px !important;
  border: 1px solid #dfdfdf !important;
  box-shadow: none !important;
  font-size: 15px !important;
  background: #fafafa !important;
}

#itemModal textarea.form-control {
  min-height: 96px !important;
  padding-top: 14px !important;
}

#itemModal select.form-control {
  min-height: 56px !important;
}

/* footer */
#itemModal .item-modal-footer {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  border-top: 1px solid #eeeeee !important;
  background: #fff !important;
  padding: 14px 18px 18px !important;
}

#itemModal .item-modal-footer .w-25 {
  width: 120px !important;
  flex: 0 0 120px !important;
}

#itemModal .item-modal-footer .w-75 {
  flex: 1 !important;
  width: auto !important;
}

#itemModal .item-modal-footer .quantity {
  background: #f5f5f5 !important;
  border-radius: 999px !important;
  padding: 6px 8px !important;
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#itemModal .item-modal-footer .qty-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid #d8d8d8 !important;
  background: #fff !important;
  color: #222 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
}

#itemModal .item-modal-footer .qty-btn i {
  font-size: 18px !important;
}

#itemModal .item-modal-footer .qty {
  min-width: 18px !important;
  text-align: center !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1d1d1d !important;
}

#itemModal .add_to_cart {
  min-height: 54px !important;
  border-radius: 18px !important;
  border: 0 !important;
  background: #00a082 !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  padding: 0 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: normal !important;
}

#itemModal .add_to_cart:hover {
  background: #009176 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {
  /* listing */
  #vue-merchant-menu section .list-item-rows > .row.m-0 {
    min-height: 126px !important;
    padding: 14px 0 !important;
  }

  #vue-merchant-menu section .list-item-rows > .row.m-0 > .col-3 {
    width: 116px !important;
    max-width: 116px !important;
    flex: 0 0 116px !important;
  }

  #vue-merchant-menu section .item-image-preview,
  #vue-merchant-menu section .item-image-preview .el-image,
  #vue-merchant-menu section .item-image-preview .el-image__inner,
  #vue-merchant-menu section .item-image-preview img {
    width: 104px !important;
    height: 104px !important;
  }

  #vue-merchant-menu section .list-item-rows > .row.m-0 > .col-9 {
    max-width: calc(100% - 116px) !important;
  }

  #vue-merchant-menu section .list-item-rows .col-lg-8.col-md-8.d-flex.align-items-center.fixed-height {
    max-width: calc(100% - 52px) !important;
    min-height: 104px !important;
  }

  #vue-merchant-menu section .list-item-rows .col-lg-4.col-md-4.d-flex.align-items-center {
    width: 52px !important;
    max-width: 52px !important;
    flex: 0 0 52px !important;
    min-height: 104px !important;
  }

  #vue-merchant-menu section .list-item-rows h6 {
    font-size: 15px !important;
  }

  #vue-merchant-menu section .list-item-rows p.ellipsis-2-lines {
    font-size: 12.5px !important;
  }

  #vue-merchant-menu section .list-item-rows .prices,
  #vue-merchant-menu section .list-item-rows .bold.m-0.prices,
  #vue-merchant-menu section .list-item-rows .center p.bold {
    font-size: 14px !important;
  }

  #vue-merchant-menu section .list-item-rows a.btn.btn-grey.quantity-add-cart,
  #vue-merchant-menu section .list-item-rows .el-button {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  /* modal */
  #itemModal {
    overflow-y: auto !important;
  }

  #itemModal .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
  }

  #itemModal .modal-dialog.modal-dialog-centered {
    display: flex !important;
    align-items: flex-start !important;
    min-height: 100% !important;
  }

  #itemModal .modal-dialog.modal-dialog-scrollable {
    height: auto !important;
  }

  #itemModal .modal-dialog-scrollable .modal-content {
    max-height: none !important;
  }

  #itemModal .modal-content {
    min-height: auto !important;
    border-radius: 0 !important;
  }

  #itemModal .modal-header {
    padding: 12px 14px 6px !important;
  }

  #itemModal .modal-body {
    padding: 0 14px 16px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #itemModal .item_s {
    margin: 0 auto 14px !important;
    border-radius: 18px !important;
  }

  #itemModal .item_s .el-image,
  #itemModal .item_s .el-image__inner,
  #itemModal .item_s img {
    max-height: 210px !important;
    height: auto !important;
    border-radius: 18px !important;
    object-fit: cover !important;
  }

  #itemModal h4 {
    font-size: 22px !important;
    line-height: 1.12 !important;
    margin-top: 6px !important;
    margin-bottom: 8px !important;
  }

  #itemModal .choose-sizex,
  #itemModal .btn-group.btn-group-toggle.input-group-small.choose-sizex.flex-wrap {
    gap: 6px !important;
    margin-bottom: 14px !important;
  }

  #itemModal .choose-sizex .btn {
    min-height: 38px !important;
    padding: 7px 12px !important;
    font-size: 14px !important;
  }

  #itemModal .item-modal-footer {
    padding: 12px 14px 14px !important;
    gap: 10px !important;
  }

  #itemModal .item-modal-footer .w-25 {
    width: 104px !important;
    flex: 0 0 104px !important;
  }

  #itemModal .item-modal-footer .quantity {
    min-height: 48px !important;
    padding: 5px 8px !important;
  }

  #itemModal .item-modal-footer .qty-btn {
    width: 32px !important;
    height: 32px !important;
  }

  #itemModal .item-modal-footer .qty {
    font-size: 16px !important;
  }

  #itemModal .add_to_cart {
    min-height: 50px !important;
    font-size: 14px !important;
    border-radius: 16px !important;
  }
}