/* checkout.css — a COMPRA (2B.3): o que o `montarCompra()` de checkout.js desenha.
   Morava inline na vitrine; saiu dali em 02/10/2026 porque a face dos anfitriões
   passou a montar o mesmo checkout (/comprar, o formando comprando adicionais), e
   CSS em dois lugares é CSS que diverge no primeiro ajuste. */
/* ── A COMPRA (2B.3) — só existe quando o evento vende ──────────────────── */
#vt-compra { margin-top: 2.5rem; }
#vt-compra h2 {
	font-size: .8rem; text-transform: uppercase; letter-spacing: .09em;
	color: var(--nexus-text-muted); margin-bottom: .75rem; font-weight: 600;
}
.vt-lote-atual { color: var(--nexus-text-muted); margin-bottom: 1rem; }
.vt-card {
	border: 1px solid var(--nexus-border); border-radius: 12px;
	padding: 1rem 1.25rem; background: var(--nexus-bg-surface); margin-top: .75rem;
}
.vt-card label { display: block; font-size: .85rem; margin-top: .75rem; }
.vt-card label:first-child { margin-top: 0; }
.vt-card input { width: 100%; margin-top: .25rem; }
/* O salão: mesa livre é convite a clicar; as demais só informam. */
#vt-mesas svg { width: 100%; height: auto; touch-action: manipulation; }
#vt-mesas .vt-mesa-ok { cursor: pointer; }
#vt-mesas .vt-mesa-ok :is(circle, rect, path, ellipse, polygon) { fill: color-mix(in srgb, var(--nexus-primary) 25%, transparent); }
#vt-mesas .vt-mesa-ok.sel :is(circle, rect, path, ellipse, polygon) { fill: var(--nexus-primary); }
#vt-mesas .vt-mesa-reservada :is(circle, rect, path, ellipse, polygon),
#vt-mesas .vt-mesa-vendida :is(circle, rect, path, ellipse, polygon) { fill: var(--nexus-border); }
.vt-mesa-card {
	display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
	border: 1px solid var(--nexus-border); border-radius: 10px;
	padding: .6rem .9rem; margin-top: .5rem; cursor: pointer;
}
.vt-mesa-card.sel { border-color: var(--nexus-primary); }
.vt-mesa-card.vt-indisp { opacity: .55; cursor: default; }
.vt-tag {
	font-size: .75rem; padding: .1rem .5rem; border-radius: 999px;
	background: var(--nexus-bg-subtle, var(--nexus-border));
}
.vt-tipo-linha {
	display: flex; align-items: center; justify-content: space-between;
	gap: .75rem; padding: .5rem 0; border-top: 1px solid var(--nexus-border);
}
.vt-tipo-linha:first-child { border-top: 0; }
.vt-nota { font-size: .85rem; color: var(--nexus-text-muted); margin-top: .5rem; }
.vt-erro { color: var(--nexus-error); font-weight: 600; }
#vt-pagamento img { display: block; max-width: 220px; margin: 1rem auto; }
#vt-pagamento textarea { width: 100%; height: 4rem; font-size: .75rem; }
.vt-vazio-compra { color: var(--nexus-text-muted); }
/* J2.2 — o cartão do link de grupo (mesa aberta com lugares sobrando): mesmo
   `.vt-card`, só com a borda em destaque — é convite a AÇÃO (copiar/mandar o
   link), não informação passiva como os outros `.vt-card` da página. Não há
   bloco de vitrine em `app.less`: TODA classe `.vt-*` já mora aqui, inline —
   a face é standalone (ver comentário do topo do arquivo). */
.vt-grupo-link { border-color: var(--nexus-primary); }

/* A forma de pagamento: rádio e rótulo na mesma linha. O `.vt-card label { display: block }`
   acima é para os campos de texto; nos rádios ele empilhava a bolinha sobre o texto
   (visto na face dos anfitriões em 02/10/2026). */
#vt-forma { border: 0; padding: 0; margin-top: .75rem; }
#vt-forma label { display: flex; align-items: center; gap: .45rem; margin-top: .35rem; }
#vt-forma input { width: auto; margin: 0; }