.networkStatus {
  position: fixed;
  right: 14px;
  bottom: max(0px,env(safe-area-inset-bottom));
  z-index: 55;
  max-width: calc(100vw - 28px);
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 999px;
  background: rgba(18,80,51,.92);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  font-size: 12px;
  font-weight: 900;
  pointer-events: none;
}

body:not([data-step="home"]):not([data-step="done"]) .networkStatus {
  bottom: calc(var(--order-summary-height, 92px) + env(safe-area-inset-bottom) + 12px);
}

html[data-layout="kiosk21"] body:not([data-step="home"]):not([data-step="done"]) .networkStatus {
  bottom: calc(var(--kiosk21-summary-height) + var(--safe-bottom) + 12px);
}

body[data-step="home"] .networkStatus,
body[data-step="done"] .networkStatus {
  bottom: max(0px,env(safe-area-inset-bottom));
}

.networkStatus[data-online="false"] {
  background: rgba(183,18,43,.95);
}