/* Selo da mesa — "Mesa 07" preso no canto, enquanto o cliente navega.
 *
 * O número chega pelo botão da mesa (?m=7) e precisa ficar visível todo o
 * tempo: é ele que vai no topo do pedido. Se o cliente estiver na mesa errada,
 * toca no selo e troca — pedido com mesa errada é pior que pedido sem mesa,
 * porque o garçom entrega na mesa que não pediu.
 */

.ms {
  position: fixed;
  left: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(12, 12, 14, .82);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}

/* A barra do catálogo é sticky e ocupa a largura toda quando tem item na
   lista. Sem isto o selo fica em cima do botão de enviar. */
body:has(.ct.ativo) .ms { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }

.ms svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: .85; }
.ms b { font-weight: 800; font-variant-numeric: tabular-nums; }

/* Página de fundo claro: a pílula escura funciona, mas o contorno some. */
.ms.ms-claro {
  background: rgba(255, 255, 255, .92);
  border-color: rgba(0, 0, 0, .12);
  color: #15120f;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .14);
}

/* O campo só aparece depois do toque: o estado normal é só o número. */
.ms-editar { display: none; }
.ms.ms-abrindo .ms-rotulo { display: none; }
.ms.ms-abrindo .ms-editar { display: inline-flex; align-items: center; gap: 6px; }

.ms-editar input {
  width: 52px;
  padding: 4px 6px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .1);
  color: inherit;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  -moz-appearance: textfield;
}
.ms-editar input::-webkit-outer-spin-button,
.ms-editar input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ms.ms-claro .ms-editar input { border-color: rgba(0, 0, 0, .18); background: rgba(0, 0, 0, .05); }

.ms-editar button {
  padding: 5px 10px;
  border: 0;
  border-radius: 8px;
  background: #25d366;
  color: #08140c;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
  .ms { transition: bottom .2s ease; }
}