/* checkout.css — a VENDA do producoes como peça embutível.
 *
 * O site de um evento (`eventos/{slug}/index.html`) tem CSS próprio e não sabe
 * nada daqui; este arquivo veste só o modal de compra que o checkout.js injeta.
 * Por isso os tokens têm valor PRÓPRIO e não herdam do documento: o site pode
 * ser claro, escuro, verde ou tipográfico, e a compra continua legível.
 *
 * Para casar com a identidade do evento, o site sobrescreve o que quiser:
 *   :root { --nx-acento: #89dc39; --nx-painel: #14261a; }
 */
:root {
	--nx-bg: #0f172a;
	--nx-panel: #1e293b;
	--nx-panel2: #273449;
	--nx-borda: #334155;
	--nx-texto: #e2e8f0;
	--nx-mudo: #94a3b8;
	--nx-acento: #BFB16A;
	--nx-sobre-acento: #0f172a;
	--nx-ok: #34d399;
	--nx-erro: #f87171;
	--nx-aviso: #fbbf24;
}

color: var(--nx-texto); border-radius: 8px; width: 2.1rem; height: 2.1rem;
	font-size: 1rem; cursor: pointer; line-height: 1; }
.btn.cta { font-size: 1.05rem; padding: .85rem 1.4rem; white-space: nowrap; }
.barra .btn { margin-left: auto; width: auto; padding: .7rem 1.3rem; }
.secao { margin-top: 2.75rem; }
.secao h2 { font-size: 1.15rem; color: var(--nx-acento); margin-bottom: 1.1rem;
	text-transform: uppercase; letter-spacing: .08em; }
.painel { background: var(--nx-panel); border: 1px solid var(--nx-borda); border-radius: 12px;
	padding: 1rem; margin-top: 1rem; }
.tipos { display: grid; gap: .6rem; }
.tipo { display: flex; align-items: center; justify-content: space-between; }
.tipo .preco { color: var(--nx-mudo); font-size: .9rem; }
.qtd { display: flex; align-items: center; gap: .6rem; }
.qtd button { width: 2rem; height: 2rem; border-radius: 8px; border: 1px solid var(--nx-borda);
	background: var(--nx-panel2); color: var(--nx-texto); font-size: 1.1rem; cursor: pointer; }
.qtd span { min-width: 1.4rem; text-align: center; }
.nota { color: var(--nx-mudo); font-size: .82rem; margin-top: .5rem; }
/* Veredito do cupom, dito no lugar onde ele foi digitado — e não no balão de
   erro lá do fim do formulário, que fala do pagamento. Sem caixa nem fundo:
   é uma legenda de campo, não um alarme. */
.nota.ruim { color: var(--nx-erro); }
.nota.bom { color: var(--nx-ok); }
/* O código viaja sempre em maiúsculas; o campo mostra o que será enviado.
   O autocapitalize sozinho só age no teclado do celular. */
#c-cupom { text-transform: uppercase; }
/* Ingresso da tela de compra confirmada: alvo grande e claramente clicável —
   é o que o comprador vai abrir no celular, na fila da portaria. Um por
   pessoa, empilhados, com o nome em primeiro porque é por ele que se acha o
   próprio ingresso quando se comprou para a família inteira. */
#ingressos { display: flex; flex-direction: column; gap: .6rem; margin: 1rem 0; }
/* Um cartão por ingresso: nome (editável no lugar onde é lido), botão de abrir,
   botão de enviar a quem vai, e o aviso de não aberto. Tudo do mesmo ingresso
   dentro da mesma caixa — sem uma segunda lista lá embaixo para editar nomes. */
.ingresso { display: flex; flex-direction: column; gap: .3rem; text-align: left;
	padding: .7rem .9rem; border: 1px solid var(--nx-borda); border-radius: 10px;
	background: var(--nx-panel2); color: var(--nx-texto); text-decoration: none; }
.ingresso .meta { color: var(--nx-mudo); font-size: .8rem; }
/* Campo que não parece campo até ser tocado: a linha lida como o nome impresso
   no ingresso, e o foco revela que dá para trocar. Fundo do painel, não o do
   documento, para não abrir uma caixa dentro da caixa. */
.ingresso .nome-inline, .ingresso .fone-inline {
	background: transparent; border: 1px dashed var(--nx-borda); padding: .35rem .5rem;
}
.ingresso .nome-inline { font-size: 1rem; font-weight: 700; }
.ingresso .fone-inline { font-size: .85rem; }
.ingresso .nome-inline:hover, .ingresso .fone-inline:hover { border-color: var(--nx-mudo); }
.ingresso .nome-inline:focus, .ingresso .fone-inline:focus {
	background: var(--nx-bg); border-style: solid;
}
.ingresso .estado { color: var(--nx-mudo); font-size: .75rem; min-height: 1em; }
.ingresso .estado.bom { color: var(--nx-ok); }
.ingresso .estado.ruim { color: var(--nx-erro); }
.ingresso .acoes { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .2rem; }
.btn-mini {
	flex: 1 1 auto; text-align: center; cursor: pointer; text-decoration: none;
	padding: .5rem .7rem; border-radius: 8px; font-size: .85rem; font-weight: 600;
	border: 1px solid var(--nx-borda); background: var(--nx-bg); color: var(--nx-texto);
}
.btn-mini.principal { background: var(--nx-acento); color: var(--nx-sobre-acento); border-color: transparent; }
.btn-mini:hover { border-color: var(--nx-acento); }
/* Por que distribuir os ingressos, dito antes da lista. Mesma caixa dos cartões,
   só que sem borda — é recado, não item da lista. */
.nota.destaque { color: var(--nx-texto); background: var(--nx-panel2);
	border-radius: 10px; padding: .7rem .9rem; font-size: .85rem; }
/* Tentou sair com ingresso por abrir. Fica no topo da lista, e o segundo toque
   no Voltar sai assim mesmo — isto avisa, não prende. */
.barra-saida { background: rgba(248,113,113,.14); border: 1px solid var(--nx-erro);
	color: var(--nx-erro); border-radius: 8px; padding: .6rem .8rem; font-size: .85rem;
	font-weight: 600; margin-bottom: .2rem; }
/* Ingresso que ninguém abriu ainda. Deliberadamente gritante: é o único aviso
   desta tela que evita alguém chegar na portaria sem QR nenhum. Some sozinho
   quando o convite é aberto. */
.nao-aberto {
	display: block; margin-top: .4rem; align-self: flex-start;
	background: var(--nx-erro); color: #1a0505; font-weight: 700;
	font-size: .78rem; padding: .2rem .55rem; border-radius: 999px;
	animation: pisca 1.6s ease-in-out infinite;
}
@keyframes pisca { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .nao-aberto { animation: none; } }
/* Espera da operadora: cobre a tela inteira, inclusive o modal (que é quem
   fica inerte por baixo). `position: fixed` dentro do <dialog> é relativo à
   viewport, então rolagem do formulário não descola o aviso. */
.aguarde {
	position: fixed; inset: 0; z-index: 10;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: .4rem; padding: 2rem; text-align: center;
	background: rgba(2, 6, 23, .82); backdrop-filter: blur(3px);
	color: var(--nx-texto); font-size: 1.02rem;
}
.aguarde.oculto { display: none; }
.giro {
	width: 2.6rem; height: 2.6rem; margin-bottom: .6rem; border-radius: 50%;
	border: 3px solid var(--nx-borda); border-top-color: var(--nx-acento);
	animation: gira .9s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .giro { animation-duration: 2.4s; } }
/* Vence o `dialog.modal h2`, que é mais específico que uma classe sozinha. */
dialog.modal h2.ok { color: var(--nx-ok); }
/* Campo com valor que não serve: a borda avisa, e o texto abaixo diz o quê.
   Sem botão de ação dentro do campo — aqui ninguém liga para o comprador
   a partir do formulário de compra dele. */
input.ruim { border-color: var(--nx-erro); }
.dica { color: var(--nx-mudo); font-weight: 400; }
/* Interruptor de texto: a caixa nativa com rótulo clicável basta aqui —
   é uma pergunta, não um painel de configuração. */
.chave { display: flex; align-items: center; gap: .5rem; margin: 1rem 0 .2rem;
	color: var(--nx-texto); cursor: pointer; }
.chave input { width: 1.1rem; height: 1.1rem; accent-color: var(--nx-acento); }
.erro-campo { color: var(--nx-erro); font-size: .78rem; margin-top: .25rem; }
/* O total é o gatilho do cupom (3 cliques) — sem cara de botão. */
.total { cursor: default; user-select: none; }
label { display: block; font-size: .85rem; color: var(--nx-mudo); margin: .8rem 0 .25rem; }
/* A regra BASE dos campos. Ela ficou de fora quando o CSS foi extraído da
   vitrine (07/08) e o formulário de compra foi ao ar sem largura, sem borda e
   sem preenchimento — campos estreitos no meio de um painel largo. `select`
   entra junto: o campo de perfil profissional é um, e um <select> sem estilo
   herda o do sistema operacional, que não combina com nada. */
input, select {
	width: 100%; padding: .65rem .75rem; border-radius: 8px;
	border: 1px solid var(--nx-borda); background: var(--nx-bg);
	color: var(--nx-texto); font-size: 1rem; font-family: inherit;
}
/* A caixa de "preciso de nota fiscal" é a exceção: interruptor não ocupa a
   linha inteira. */
.chave input { width: 1.1rem; height: 1.1rem; accent-color: var(--nx-acento); }
input:focus, select:focus { outline: 2px solid var(--nx-acento); outline-offset: -1px; }
.total { display: flex; justify-content: space-between; font-size: 1.15rem; font-weight: 700;
	margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--nx-borda); }
/* Composição do total (ingressos + taxa do cartão − desconto). A borda de cima
   passa para o bloco: com ela no .total, a linha cortava o meio da conta. */
.resumo { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--nx-borda); }
.resumo .total { margin-top: .5rem; padding-top: .5rem; border-top: 0; }
.resumo-linha { display: flex; justify-content: space-between; gap: .5rem;
	font-size: .9rem; color: var(--nx-mudo); margin-top: .25rem; }
.btn { display: block; width: 100%; margin-top: 1rem; padding: .85rem; border-radius: 10px;
	border: 0; background: var(--nx-acento); color: var(--nx-sobre-acento); font-size: 1.05rem; font-weight: 700;
	cursor: pointer; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.formas { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .3rem; }
.forma { padding: .6rem; border-radius: 8px; border: 1px solid var(--nx-borda);
	background: var(--nx-bg); color: var(--nx-texto); font-size: .95rem; cursor: pointer; }
.forma.sel { border-color: var(--nx-acento); color: var(--nx-acento); font-weight: 700; }
.forma:disabled { opacity: .4; cursor: not-allowed; }
.cc-linha { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.msg { margin-top: .8rem; padding: .7rem .9rem; border-radius: 8px; font-size: .92rem; display: none; }
.msg.erro { display: block; background: rgba(248,113,113,.12); color: var(--nx-erro); }
.msg.ok { display: block; background: rgba(52,211,153,.12); color: var(--nx-ok); }
#qr { background: #fff; border-radius: 12px; padding: 12px; max-width: 280px; margin: 1rem auto; }
#qr svg { display: block; width: 100%; height: auto; }
.pix-codigo { font-family: monospace; font-size: .72rem; word-break: break-all;
	background: var(--nx-bg); border: 1px solid var(--nx-borda); border-radius: 8px; padding: .6rem;
	margin-top: .6rem; }
/* Compra em modal: <dialog> nativo dá o fundo, o ESC e o foco preso de
   graça — o embaçado é uma linha no ::backdrop. */
dialog.modal { border: 0; padding: 0; background: none; color: var(--nx-texto);
	width: min(560px, calc(100% - 1.5rem)); max-height: 90vh; overflow: auto;
	inset: 0; margin: auto; }
/* Barra de rolagem do modal: o formulário é mais alto que a tela no celular e
   em janela baixa, e a barra nativa entrava clara no meio de um painel escuro —
   um risco branco de 15px encostado no conteúdo. Fina, no tom da borda, e sem
   trilho: some quando não é necessária e não rouba largura do formulário.
   Escopada ao modal de propósito — o site do evento manda na barra da PÁGINA. */
dialog.modal {
	scrollbar-width: thin;
	scrollbar-color: var(--nx-borda) transparent;
}
dialog.modal::-webkit-scrollbar { width: 10px; }
dialog.modal::-webkit-scrollbar-track { background: transparent; }
dialog.modal::-webkit-scrollbar-thumb {
	background: var(--nx-borda);
	border-radius: 99px;
	/* A borda transparente afina o polegar sem afinar a área de clique: o dedo
	   continua acertando os 10px, o olho vê 6. */
	border: 2px solid transparent;
	background-clip: content-box;
}
dialog.modal::-webkit-scrollbar-thumb:hover { background: var(--nx-mudo); background-clip: content-box; }

dialog.modal::backdrop { background: rgba(2, 6, 23, .55); backdrop-filter: blur(6px); }
dialog.modal .secao { margin-top: 0; }
/* Título de cada passo (Ingressos / Pague com PIX / confirmado). Veio junto do
   `input`: era `.secao h2` da vitrine e ficou de fora quando o CSS foi extraído
   para cá, então o modal herdava o h2 do SITE do evento — tamanho de manchete e
   cor pensada para outro fundo. */
dialog.modal h2 {
	font-size: 1.15rem; line-height: 1.3; margin-bottom: .9rem;
	color: var(--nx-texto); letter-spacing: -.01em;
}
dialog.modal .painel { margin-top: .6rem; }
.modal-fechar { position: sticky; top: 0; z-index: 1; display: inline-flex;
	align-items: center; gap: .3rem; margin-bottom: .2rem;
	background: var(--nx-panel2); color: var(--nx-texto); border: 1px solid var(--nx-borda);
	border-radius: 999px; padding: .35rem .8rem; font-size: .85rem; cursor: pointer; }
.center { text-align: center; }
.oculto { display: none; }


/* ── Salão desenhado ────────────────────────────────────────────────────────
   Também é venda: em evento com mesa, escolher no mapa é o primeiro passo do
   checkout. O site do evento declara <div data-ev="mapa"> e recebe isto pronto. */
.mesas { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .6rem; }
.mesa { background: var(--nx-panel); border: 1px solid var(--nx-borda); border-radius: 10px;
	padding: .7rem; cursor: pointer; text-align: center; transition: border-color .15s; }
.mesa:hover { border-color: var(--nx-acento); }
.mesa.sel { border-color: var(--nx-acento); background: var(--nx-panel2); }
.mesa.indisp { opacity: .45; cursor: not-allowed; }
.mesa.pontilhada { border: 1.5px dashed var(--nx-mudo); opacity: .55; cursor: default; }
.mesa.pontilhada .num { color: var(--nx-mudo); }
.mapa svg { width: 100%; height: auto; display: block; }
.mapa #paredes { fill: var(--nx-texto); }
.mapa #dependencias { fill: var(--nx-mudo); opacity: .4; }
.mapa #mesas text { fill: var(--nx-texto); }
.mapa #mesas rect, .mapa #mesas circle, .mapa #mesas ellipse, .mapa #mesas polygon {
	stroke: var(--nx-mudo); fill: none; stroke-width: var(--traco, 20); }
.mapa #mesas .ok { cursor: pointer; }
.mapa #mesas .livre rect, .mapa #mesas .livre circle { fill: #00e05a44; stroke: #00e05a; }
.mapa #mesas .avulsa rect, .mapa #mesas .avulsa circle { fill: #00a6ff44; stroke: #00a6ff; }
.mapa #mesas .grupo rect, .mapa #mesas .grupo circle { fill: #ffc40044; stroke: #ffc400; }
.mapa #mesas .esgotada rect, .mapa #mesas .esgotada circle { fill: #ff174433; stroke: #ff1744; }
.mapa #mesas .esgotada { opacity: .55; }
.mapa #mesas .reserva-casa text { display: none; }
.mapa #mesas .reserva-casa rect, .mapa #mesas .reserva-casa circle {
	fill: none; stroke: var(--nx-mudo); stroke-dasharray: calc(var(--traco, 20) * 3) calc(var(--traco, 20) * 2); }
.mapa #mesas .sel rect, .mapa #mesas .sel circle {
	stroke: var(--nx-acento); stroke-width: calc(var(--traco, 20) * 2.4); }
.mapa-legenda { display: flex; gap: .9rem; flex-wrap: wrap; color: var(--nx-mudo);
	font-size: .78rem; margin-bottom: .8rem; }
.mapa-legenda span { display: inline-flex; align-items: center; gap: .35em; }
.mapa-legenda .am { width: .8em; height: .8em; border-radius: 3px; display: inline-block;
	border: 1px solid currentColor; }
.mapa-legenda .livre { background: #00e05a66; border-color: #00e05a; }
.mapa-legenda .avulsa { background: #00a6ff66; border-color: #00a6ff; }
.mapa-legenda .grupo { background: #ffc40066; border-color: #ffc400; }
.mapa-legenda .esgotada { background: #ff174455; border-color: #ff1744; }
.legenda { color: var(--nx-mudo); font-size: .8rem; margin-top: .7rem; display: none; }
.legenda .tracinho { display: inline-block; width: 1.1em; border-top: 2px dashed var(--nx-mudo);
	vertical-align: middle; margin-right: .35em; }
.mesa .num { font-weight: 700; font-size: 1.1rem; }
.mesa .vagas { font-size: .8rem; color: var(--nx-mudo); }
.mesa .tag { display: inline-block; font-size: .68rem; padding: .1rem .45rem;
	border-radius: 99px; margin-top: .3rem; background: var(--nx-panel2); color: var(--nx-mudo); }
.mesa .tag.reservada { color: var(--nx-aviso); }
.mesa .tag.vendida { color: var(--nx-erro); }