.order-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.status.Placed { color: #ffcc80; background: #382a18; border-color: #9a682d; }
.status.Preparing { color: #c6ccff; background: #262846; border-color: #686cb0; }
.status.Served { color: #a8ead1; background: #17382d; border-color: #458569; }
.status.Paid { color: #b4e7ff; background: #173548; border-color: #4782a1; }
.status.Cancelled { color: #ffb3af; background: #482523; border-color: #a95852; }
.row.order-arrived { box-shadow: inset 4px 0 #ffcc80; background: rgba(255, 204, 128, .11); }
.nav button.order-tab-alert { outline: 2px solid #ffcc80; outline-offset: -2px; animation: order-tab-flash .7s ease-in-out 3 alternate; }
@keyframes order-tab-flash { to { background: #795120; } }
@media (prefers-reduced-motion: reduce) { .nav button.order-tab-alert { animation: none; } }
@media (max-width: 780px) { .row > .order-badges { grid-column: 2; justify-content: flex-start; } }
.service-alerts { position: relative; }
.service-alerts summary { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; list-style: none; }
.service-alerts summary::-webkit-details-marker { display: none; }
.service-alerts [data-alert-count] { background: #65d6a4; color: #09231a; border-radius: 1rem; padding: 0 .4rem; font-weight: 700; }
.service-alert-popover {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  width: min(17rem, calc(100vw - 2rem)); box-sizing: border-box; padding: .85rem;
  background: #14231d; color: #e6f2ec; border: 1px solid #547466; border-radius: .85rem;
  box-shadow: 0 .5rem 1.5rem #0008; font-size: .875rem;
}
.service-alert-popover ul { padding-inline-start: 1.15rem; }
.service-alert-popover button { margin: .2rem 0; }
.service-alert-popover p:empty { display: none; }
@media (max-width: 620px) {
  .service-alert-popover { position: fixed; top: 4rem; right: 1rem; }
}