/* Menu rotation badges on meal cards ("New", "Until Nov 15"). */

.bowl-center__item .bowl-center__item-image {
  position: relative;
}

.bowl-center__item-badges {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  pointer-events: none;
}

.bowl-center__item-badge {
  display: inline-block;
  padding: 0.3rem 1rem;
  border-radius: 99rem;
  font-size: max(11px, 1.2rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(0, 0, 0, 0.65);
  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.25);
}

.bowl-center__item-badge.is--new {
  background: #f4783e;
  text-transform: uppercase;
}

.bowl-center__item-badge.is--leaving {
  border: 1px solid rgba(244, 120, 62, 0.8);
}

.bowl-center__item-badge.is--soon {
  border: 1px solid rgba(255, 255, 255, 0.55);
}

.bowl-center__item.gu-transit .bowl-center__item-badges {
  display: none;
}

@media (max-width: 767px) {
  .bowl-center__item-badges {
    top: 0.6rem;
    left: 0.6rem;
    right: 0.6rem;
    gap: 0.3rem;
  }

  .bowl-center__item-badge {
    padding: 0.2rem 0.7rem;
    font-size: 10px;
  }
}

/* Menu rotation in the bowl builder: meals not served on the selected
   delivery date, and cart lines that leave the menu before delivery. */

.bowl-center__item.is--unavailable .bowl-center__item-image img {
  filter: grayscale(0.85);
  opacity: 0.55;
}

.bowl-center__item.is--unavailable .bowl-center__item-counter-btn.is--increment {
  opacity: 0.35;
  cursor: not-allowed;
}

.bowl-center__item-unavailable {
  /* Centered under the macros, with room above and before the counter. */
  align-self: stretch;
  margin: 1.2rem 0 1rem;
  text-align: center;
  text-wrap: balance;
  /* The reason ("Last delivery Oct 17") goes on its own line. */
  white-space: pre-line;
  color: #f4783e;
  font-size: max(11px, 1.2rem);
  font-weight: 600;
  line-height: 1.3;
}

.bowl-right__center-li.is--leaving .bowl-right__center-li-span {
  -webkit-line-clamp: 3;
}

.bowl-right__center-li-leaving {
  display: block;
  margin-top: 0.2rem;
  color: #f4783e;
  font-size: max(10px, 1.1rem);
  font-weight: 700;
  text-transform: none;
}