/* Allergen pills on MenuList cards (Stage 2).
 *
 * 2026-07-28: bottom-right corner overlay instead of an inline row. Mounted in
 * .menu-body (position:relative), with right/bottom offsets matching the
 * .menu-left text padding (10px / 8px, MenuItem.css:75) so the pills line up
 * with the name/price/description column. The background is the card colour so
 * a long description running underneath is covered rather than showing through
 * the gaps between pills — the description is truncated by design, the allergen
 * is the thing that must stay readable.
 * z-index 1 keeps it above the description but below the sold-out stamp (2).
 * pointer-events:none so tapping the corner still opens the product.
 */
.allergen-pills {
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  max-width: calc(100% - 20px);
  padding-left: 6px;
  /* 2026-07-28: inherit, NOT var(--tmo-online-bg-page, #fff). The fallback only
   * applies when the variable is undefined — brands that define it (CB = #F2F2F2)
   * got a grey slab floating on a white card. inherit takes .menu-body's own
   * computed colour, so the strip is always invisible whatever the theme sets,
   * while still hiding the description that runs underneath. */
  background: inherit;
  font-family: var(--tmo-online-font-system-small-family, inherit);
  font-weight: var(--tmo-online-font-system-small-weight, inherit);
  font-size: 10px;
  pointer-events: none;
}
/* 2026-07-28: quiet outline chip. The earlier red/bold treatment shouted over
 * the product name on every card even though a wheat tag on a bakery menu is
 * unremarkable. Loud styling is reserved for the customer's OWN registered
 * allergens (.allergen-warning-* below) — that is the only case where the
 * badge is asking the customer to stop and look. */
.allergen-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  border: 1px solid #dcdcdc;
  background: inherit;
  color: #8a8a8a;
  font-family: var(--tmo-online-font-system-small-family, inherit);
  font-weight: var(--tmo-online-font-system-small-weight, 400);
  line-height: 1.4;
  white-space: nowrap;
  user-select: none;
}
/* strict / loose no longer differ visually here: the bulk API already drops
 * codes the brand has not enabled, so everything reaching the list is strict. */
.allergen-pill-loose,
.allergen-pill-strict {
  border-color: #dcdcdc;
  color: #8a8a8a;
}
.allergen-style-icons .allergen-pill {
  padding: 2px 4px;
  font-family: var(--tmo-online-font-system-small-family, inherit);
  font-weight: var(--tmo-online-font-system-small-weight, inherit);
  font-size: 1.05em;
}

/* Warning halos for customer matches. */
.allergen-warning-card {
  position: relative;
}
.allergen-warning-card::after {
  content: '⚠';
  position: absolute;
  top: 4px;
  right: 6px;
  font-family: var(--tmo-online-font-system-small-family, inherit);
  font-weight: var(--tmo-online-font-system-small-weight, inherit);
  font-size: 1.2em;
  z-index: 2;
}
.allergen-warning-anaphylaxis {
  outline: 3px solid #D32F2F;
  outline-offset: -3px;
}
.allergen-warning-medium {
  outline: 2px solid #F57C00;
  outline-offset: -2px;
}
.allergen-warning-low {
  outline: 1px solid #388E3C;
  outline-offset: -1px;
}

#allergen-omit-counter {
  margin-left: 8px;
  font-size: 0.9em;
  color: #d33;
}