/* ══════════════════════════════════════════════════════════════════════
   A tela onde se escolhe o que vem no combo

   Folha compartilhada pela LOJA e pelo PDV, ao lado de
   `comum/escolha-do-combo.js`. Ela morava em `apps/web/estilo.css` ate a
   1.219.0 — que so a loja carrega. Copiar as regras para a folha do painel
   faria dois desenhos da mesma tela, e o dia em que um mudasse o balcao e a
   loja mostrariam coisas diferentes para o mesmo combo.

   ── O contador e o `.contador` de cada lugar ───────────────────────────

   Ele NAO e redefinido aqui. Na loja ele vem de `estilo.css`; no balcao, de
   `painel/estilo.css`, com o `--toque` de 44px que a tela do PDV ja escreve
   uma vez. Redesenha-lo aqui daria um terceiro contador — e o balcao perderia
   justamente o alvo grande que ele tem de proposito.
   ══════════════════════════════════════════════════════════════════════ */

/* ── A tela onde o cliente escolhe o combo (1.216.4) ────────────────────
   O combo promete "5 gelos" sem dizer quais; esta é a janela onde ele diz.
   Ver `docs/LISTAS-DE-ESCOLHA.md`. */

/* Cada lista é um bloco: o cliente lê "escolha 5" e, embaixo, os sabores.
   Dois blocos num combo com gelo e energético. */
.bloco-escolha{margin:18px 0 0}
.bloco-escolha-topo{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;padding-bottom:8px;border-bottom:1px solid var(--linha)}
/* `min-width:0` no título: nome de lista comprido tem de quebrar linha em vez
   de empurrar a pastilha para fora da caixa. */
.bloco-escolha-topo strong{font-size:15px;font-weight:600;min-width:0}
/* O contador "3 de 5" fica ao lado do título, e não no rodapé: é a resposta
   da pergunta que está escrita ali. */
.conta-da-escolha{font-size:12px;color:var(--marca);white-space:nowrap;
  background:color-mix(in srgb,var(--marca) 12%,transparent);
  padding:3px 9px;border-radius:999px;font-variant-numeric:tabular-nums}
.conta-da-escolha.cheia{color:var(--texto-2);background:var(--superficie-alta)}

.opcao-escolha{display:flex;justify-content:space-between;align-items:center;
  gap:12px;padding:11px 0;border-bottom:1px solid var(--linha)}
.opcao-escolha:last-child{border-bottom:0}
/* `min-width:0` no nome, e não largura fixa: sem ele o nome comprido empurra
   o contador e os botões encolhem de 32px para 29px — medido no celular de
   390px. Um alvo de toque que muda de tamanho conforme o nome do sabor é um
   alvo que erra em alguns sabores e não em outros. */
.opcao-escolha span{font-size:14px;flex:1;min-width:0}
.opcao-escolha small{display:block;font-size:11.5px;color:var(--texto-3);margin-top:2px}
/* O sabor que acabou FICA, apagado — como o produto sem estoque fica na
   vitrine com o selo. Sumir deixaria o cliente procurando o gelo de uva que
   ele comprou semana passada e concluindo que a loja parou de vender. */
.opcao-escolha.esgotada span{color:var(--texto-3)}

/* O contador é o `.contador` do carrinho, sem desenho novo: ali a linha
   também é larga e o controle divide espaço com o nome. Um terceiro contador
   na loja seria um terceiro jeito de mexer na quantidade.
   Daqui sai só o estado desligado, que ele ainda não tinha. */
.contador button:disabled{opacity:.35;cursor:default}
.contador button:disabled:hover{background:transparent}

/* O botão desta janela é o da VITRINE, e não o `.principal` das outras.
   `.principal:disabled` desbota o botão inteiro a 45% — e aqui o texto do
   botão ("Faltam 2") é a única explicação que o cliente tem do que falta
   fazer. Uma frase a 45% é uma frase que ele não lê.
   O `.acao-botao` desligado já tem desenho para ser lido parado: é o
   "Esgotado" de todo cartão sem estoque. Falta a ele só a largura cheia, que
   dentro da janela é sempre a mesma.

   ── Escopado no BOTÃO DESTA TELA, e não em `.modal` ────────────────────
   `.modal .acao-botao` alcançava qualquer botão de vitrine dentro de
   qualquer janela — e a janela do produto, que nasceu depois, herdou os
   20px. Medido na loja de verdade: o "+ Adicionar" descia 20px e passava
   3px POR FORA da janela, encostado na borda de baixo.

   O `data-escolha-confirmar` é o botão desta tela e de mais nenhuma. */
.modal [data-escolha-confirmar]{width:100%;margin-top:20px}

/* O que o item SOMA ao combo, embaixo do nome do sabor.
   Em `--texto-2`, e não na cor da marca: é uma cobrança, e pintar cobrança
   com a cor do destaque faz o mais caro parecer o recomendado. */
.acrescimo-do-item{display:block;font-size:11.5px;color:var(--texto-2);
  margin-top:2px;font-variant-numeric:tabular-nums}

/* A linha do carrinho diz o que foi escolhido. Sem ela, dois combos com
   sabores diferentes são duas linhas idênticas, e o cliente não teria como
   saber qual está tirando. */
.escolhas-item{font-size:11.5px;color:var(--texto-3);margin:3px 0 0;line-height:1.5}

/* ── O contador desta tela NAO encolhe no celular ──────────────────────
   A folha da loja reduz `.contador button` para 29px abaixo de 480px —
   decisao do CARRINHO, onde se toca uma ou duas vezes por linha.

   Aqui se toca cinco vezes seguidas para montar cinco gelos, e vale o motivo
   ja escrito la sobre a acao da vitrine: e justamente onde o alvo pequeno faz
   a pessoa errar.

   A largura de virada e a MESMA da folha da loja (480px), e nao um numero
   proximo: duas viradas diferentes deixariam uma faixa de tela onde um
   contador encolhe e o outro nao.

   Medido em navegador: 32px em 360 e 390px, contra os 29px do carrinho na
   mesma largura.

   ── Escopada em `[data-loja]`, e nao solta ──────────────────────────────
   Sem o escopo ela alcancava o BALCAO tambem, e la o efeito era o contrario:
   ele desenha o alvo em 44px, e a regra o ENCOLHIA para 32px numa tela de
   420px. Medido — eu tinha escrito que "no balcao nada muda", e a medicao
   mostrou que mudava. */
@media(max-width:480px){
  [data-loja] .opcao-escolha .contador button{width:32px;height:32px}
}