/* ==========================================================================
   Combos na tela do pedido
   ==========================================================================
   O combo é UM objeto, não uma tabela de linhas soltas: um cartão com casca
   própria, e o que se abre acontece DENTRO dele. Por isso a lista de produtos
   não repete a borda do cartão nem ganha cartão próprio — ela muda de fundo,
   que é o suficiente para dizer "isto está dentro daquilo".

   Mobile-first pelo mesmo motivo do pedido (application.css): o comprador de
   pet shop decide isto no balcão, com o celular na mão e uma mão só livre. Na
   coluna estreita o preço desce para a segunda linha do gatilho; a partir de
   640px ele volta para a mesma linha do nome.

   Tokens do :root de application.css. Nada de cor solta aqui.
   ========================================================================== */

.combos {
  margin-top: var(--spacing-24);
}

.combos__cabecalho {
  margin-bottom: var(--spacing-12);
}

.combos__titulo {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  font-weight: var(--font-weight-semibold);
  color: var(--text-heading-color);
  margin: 0;
}

.combos__nota {
  margin: 2px 0 0;
  font-size: var(--text-body-sm);
  color: var(--text-meta);
}

.combos__lista {
  display: grid;
  gap: var(--spacing-12);
}

/* ---- o cartão ----------------------------------------------------------- */

.combo {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-cards-sm);
  /* Sem isto o fundo do corpo aberto vaza pelos cantos arredondados. */
  overflow: hidden;
}

/* Aberto, a casca acende: é o cartão inteiro que está em foco, não só a seta.
   Verde-folha porque é a cor de destaque do sistema — o coral é reservado à
   ação primária, e um combo aberto não é uma ação. */
.combo[open] {
  border-color: var(--color-leaf-bright);
}

/* ---- a linha fechada ---------------------------------------------------- */

.combo__gatilho {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "marca identidade seta"
    "marca dinheiro   seta";
  align-items: center;
  column-gap: var(--spacing-12);
  row-gap: 2px;
  padding: var(--spacing-12);
  cursor: pointer;
  /* O triângulo nativo brigaria com a seta desenhada — e ele muda de forma a
     cada navegador, que é o oposto de um catálogo de ícones. */
  list-style: none;
}

.combo__gatilho::-webkit-details-marker { display: none; }

.combo__gatilho:hover { background: var(--color-cloud-gray); }

.combo__gatilho:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

/* A pastilha do ícone é o que dá cara de objeto único ao bloco: o mesmo selo
   verde em todos os combos, do lado de fora do texto. */
.combo__marca {
  grid-area: marca;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-icons);
  background: var(--color-mint-wash);
  color: var(--color-canopy-green);
}

.combo__identidade {
  grid-area: identidade;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.combo__nome {
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.combo__meta {
  font-size: var(--text-caption);
  color: var(--text-meta);
}

.combo__dinheiro {
  grid-area: dinheiro;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}

.combo__preco {
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-heading-color);
  font-variant-numeric: tabular-nums;
}

/* A economia usa a mesma dupla de cores do `.etiqueta--ok` do sistema — é o
   mesmo significado ("isto está a seu favor"), então é a mesma cor. */
.combo__economia {
  border-radius: var(--radius-tags);
  padding: 2px 8px;
  background: var(--color-mint-wash);
  color: #0a5c38;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A seta é a `seta_direita` do catálogo, girada: uma seta só no sistema, dois
   estados. `prefers-reduced-motion` desliga o giro — quem pediu menos
   movimento continua vendo a direção, que é o que informa. */
.combo__seta {
  grid-area: seta;
  color: var(--text-meta);
  transition: transform 120ms ease;
}

.combo[open] .combo__seta {
  transform: rotate(90deg);
  color: var(--color-canopy-green);
}

@media (prefers-reduced-motion: reduce) {
  .combo__seta { transition: none; }
}

/* ---- o que se abre ------------------------------------------------------ */

.combo__corpo {
  padding: var(--spacing-12);
  background: var(--color-sage-wash);
  border-top: 1px solid var(--border-hairline);
}

.combo__produtos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

/* Duas colunas, e não um flex que quebra: a etiqueta "já na sua lista" precisa
   descer ALINHADA com a descrição, não voltar para debaixo da quantidade. */
.combo__produto {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-8);
  font-size: var(--text-body-sm);
  color: var(--text-primary);
}

/* Largura fixa para as quantidades alinharem entre si — é a coluna que o olho
   soma ("2 un, 1 un, 6 un") sem precisar de tabela. */
.combo__quantidade {
  flex: 0 0 auto;
  min-width: 4.5ch;
  font-weight: var(--font-weight-semibold);
  color: var(--color-canopy-green);
  font-variant-numeric: tabular-nums;
}

.combo__descricao { min-width: 0; flex: 1 1 auto; }

.combo__conta {
  margin: var(--spacing-12) 0 0;
  padding-top: var(--spacing-8);
  border-top: 1px solid var(--border-hairline);
  font-size: var(--text-caption);
  color: var(--text-secondary);
}

/* ---- da tela larga para cima -------------------------------------------- */

@media (min-width: 640px) {
  .combo__gatilho {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "marca identidade dinheiro seta";
    column-gap: var(--spacing-16);
    padding: var(--spacing-12) var(--spacing-16);
  }

  .combo__dinheiro {
    justify-content: flex-end;
    text-align: right;
  }

  .combo__corpo { padding: var(--spacing-16); }
}