/* ==========================================================================
   VetFamily na tela do pedido
   ==========================================================================
   A oferta publicada no portal, quando aparece ao lado do preço do
   distribuidor. Três peças: a ETIQUETA na linha do item (a marca clicável, o
   preço, a diferença e a moeda de pontos), a MARCA na linha que já está na
   VetFamily e no cabeçalho da nota, e o KIT (o combo dentro da nota). Fecha
   com a caixa de CONFIRMAÇÃO do sistema, que a etiqueta usa e os cadastros
   herdam.

   A cor da marca é a da VetFamily (#e9544a), e só ela: o coral do sistema é a
   ação primária, e a marca de um parceiro não pode parecer o botão de enviar.

   Tokens do :root de application.css. Nada de cor solta fora da marca.
   ========================================================================== */

:root {
  --vetfamily: #e9544a;
  --vetfamily-wash: #fdecea;
  --moeda: #8a5a00;
  --moeda-wash: var(--color-cream);
}

/* ---- a etiqueta ao lado do preço ---------------------------------------- */
/* Mora na coluna do dinheiro (à direita), abaixo do unitário. Uma linha só,
   que quebra em duas quando a tela é estreita — a marca e o preço ficam
   juntos porque são o gesto: clicar na marca é comprar por aquele preço. */
.vetfamily-etiqueta {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px;
  justify-content: flex-end;
  margin-top: 6px;
  padding: 3px 8px 3px 3px;
  border: 1px solid var(--vetfamily-wash);
  border-radius: var(--radius-tags);
  background: var(--color-paper-white);
  font-size: var(--text-caption);
  white-space: nowrap;
}
.vetfamily-etiqueta__forma { margin: 0; display: inline-flex; }
/* 40px de alvo com a marca de 24px dentro: no celular é o polegar que clica. */
.vetfamily-etiqueta__marca {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin: -6px -4px -6px -6px;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  transition: transform 120ms ease;
}
.vetfamily-etiqueta__marca:hover { transform: scale(1.08); }
.vetfamily-etiqueta__marca:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.vetfamily-etiqueta__marca img { width: 24px; height: 24px; display: block; }
.vetfamily-etiqueta__nome { font-weight: var(--font-weight-semibold); color: var(--vetfamily); }
.vetfamily-etiqueta__preco {
  font-weight: var(--font-weight-semibold); color: var(--text-heading-color);
  font-variant-numeric: tabular-nums;
}
.vetfamily-etiqueta__delta { font-variant-numeric: tabular-nums; font-weight: var(--font-weight-medium); }
.vetfamily-etiqueta__delta--bom { color: #0a5c38; }
.vetfamily-etiqueta__delta--ruim { color: #a13312; }

/* ---- a moeda de pontos --------------------------------------------------- */
/* Âmbar sobre creme: é a única cor "de dinheiro" do sistema, e existe para a
   moeda não se confundir com o selo verde de pontos do item (que é o total do
   que a parcela escolhida rende). */
.moeda {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--radius-tags);
  background: var(--moeda-wash); color: var(--moeda);
  font-size: var(--text-caption); font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.moeda__regua { font-weight: var(--font-weight-regular); opacity: 0.8; }

/* ---- a marca na linha e no cabeçalho da nota ----------------------------- */
.vetfamily-marca {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: var(--font-weight-semibold); color: var(--vetfamily);
  white-space: nowrap;
}
.vetfamily-marca img { width: 16px; height: 16px; display: block; }
.vetfamily-marca__campanha { color: var(--text-meta); font-weight: var(--font-weight-regular); }
.etiqueta--vetfamily {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--vetfamily-wash); color: var(--vetfamily);
}
.etiqueta--vetfamily img { width: 14px; height: 14px; }
/* Na barra escura do rodapé a logo é a versão branca. */
.barra__vetfamily { height: 18px; width: auto; margin-left: var(--spacing-8); vertical-align: middle; opacity: 0.9; }

/* ---- o painel de pontos no resumo ---------------------------------------- */
.extrato__coluna--pontos .extrato__valor { color: #0a5c38; }
/* No celular o resumo é uma grade de duas colunas; a terceira ocupa a linha
   de baixo inteira em vez de ficar num canto. */
@media (max-width: 719px) { .extrato__coluna--pontos { grid-column: 1 / -1; } }
.extrato__coluna--pontos .extrato__nota { display: flex; flex-wrap: wrap; gap: 0 6px; }
.extrato__link { color: inherit; text-decoration: underline dotted; }

/* ---- a caixa de confirmação ---------------------------------------------- */
.confirmacao {
  border: 0; padding: 0; margin: auto;
  width: min(440px, calc(100vw - 32px));
  border-radius: var(--radius-cards-sm);
  background: var(--surface-card);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.24);
}
.confirmacao::backdrop { background: rgba(10, 57, 34, 0.45); }
.confirmacao__caixa { margin: 0; padding: var(--spacing-20); display: grid; gap: var(--spacing-12); }
.confirmacao__titulo {
  margin: 0; font-size: var(--text-subheading); line-height: var(--leading-subheading);
  font-weight: var(--font-weight-semibold); color: var(--text-heading-color);
}
.confirmacao__texto { margin: 0; font-size: var(--text-body-sm); color: var(--text-primary); }
.confirmacao__texto:empty { display: none; }
.confirmacao__corpo:empty { display: none; }
.confirmacao__item { margin: 0; font-weight: var(--font-weight-medium); color: var(--text-primary); }
.confirmacao__linha {
  display: flex; justify-content: space-between; gap: var(--spacing-12);
  font-size: var(--text-body-sm); color: var(--text-secondary);
}
.confirmacao__linha strong { color: var(--text-heading-color); font-variant-numeric: tabular-nums; }
.confirmacao__cabeca { display: flex; align-items: center; gap: var(--spacing-8); }
.confirmacao__cabeca img { height: 22px; width: auto; }
.confirmacao__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: var(--text-body-sm); }
.confirmacao__acoes { display: flex; justify-content: flex-end; gap: var(--spacing-8); margin-top: var(--spacing-4); }

/* ---- o kit dentro da nota ------------------------------------------------ */
/* Uma linha só para o kit (D5): fechada mostra o que decide — nome, quantos
   produtos, preço, "você economiza", pontos —, aberta mostra as linhas dos
   produtos com as condições individuais. `<details>` nativo, como o combo. */
.kit { border-top: 1px solid var(--color-cloud-gray); }
.kit__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) var(--spacing-16); cursor: pointer; list-style: none;
}
.kit__gatilho::-webkit-details-marker { display: none; }
.kit__gatilho:hover { background: var(--color-cloud-gray); }
.kit__marca {
  grid-area: marca; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-icons);
  background: var(--vetfamily-wash); color: var(--vetfamily);
}
.kit__identidade { grid-area: identidade; display: flex; flex-direction: column; min-width: 0; }
.kit__nome { font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.kit__meta { font-size: 11px; color: var(--text-meta); }
.kit__dinheiro { grid-area: dinheiro; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.kit__total { font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); color: var(--text-heading-color); font-variant-numeric: tabular-nums; }
.kit__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-semibold); font-variant-numeric: tabular-nums;
}
.kit__seta { grid-area: seta; color: var(--text-meta); transition: transform 120ms ease; }
.kit[open] .kit__seta { transform: rotate(90deg); color: var(--vetfamily); }
.kit__corpo { padding: 0 var(--spacing-16) var(--spacing-12); background: var(--color-cream); }
.kit__produtos { list-style: none; margin: 0; padding: var(--spacing-8) 0 0; display: grid; gap: 6px; }
.kit__produto { display: flex; align-items: baseline; gap: var(--spacing-8); font-size: var(--text-body-sm); }
.kit__quantidade { flex: 0 0 auto; min-width: 4.5ch; font-weight: var(--font-weight-semibold); color: var(--vetfamily); font-variant-numeric: tabular-nums; }
.kit__descricao { min-width: 0; flex: 1 1 auto; }
.kit__unitario { flex: 0 0 auto; margin-left: auto; font-size: 11px; color: var(--text-meta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kit__acoes { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-8); margin-top: var(--spacing-8); }
.kit__acoes form { margin: 0; }
.kit__regra { font-size: 11px; color: var(--text-meta); }

@media (min-width: 640px) {
  .kit__gatilho {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "marca identidade dinheiro seta";
  }
  .kit__dinheiro { justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  .kit__seta, .vetfamily-etiqueta__marca { transition: none; }
}

/* ---- a faixa de combos no topo ------------------------------------------- */
/* Os cartões lado a lado, rolando na horizontal no celular e em grade a
   partir de 720px. A faixa fica entre o resumo e os distribuidores: é onde o
   olho passa antes das linhas, e é o que "destaque maior" quer dizer. */
.combos--vetfamily { margin: var(--spacing-16) 0 0; }
.combos__marca { display: flex; align-items: center; gap: var(--spacing-8); }
.combos__marca img { height: 22px; width: auto; }
.combos__cartoes {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(240px, 78vw);
  gap: var(--spacing-12); overflow-x: auto; padding: 4px 4px var(--spacing-8);
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.combos__cartoes > * { scroll-snap-align: start; }
.cartao-kit {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--spacing-12); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-cards-sm); background: var(--surface-card);
  min-width: 0;
}
.cartao-kit--no-pedido { border-color: var(--vetfamily); }
.cartao-kit__foto {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-lg); background: var(--color-cloud-gray);
}
.cartao-kit__sem-foto {
  width: 100%; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg); background: var(--vetfamily-wash); color: var(--vetfamily);
}
.cartao-kit__nome { font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.cartao-kit__meta { font-size: 11px; color: var(--text-meta); }
.cartao-kit__preco { font-size: var(--text-body); font-weight: var(--font-weight-semibold); color: var(--text-heading-color); font-variant-numeric: tabular-nums; }
.cartao-kit__selos { display: flex; flex-wrap: wrap; gap: 4px; }
.cartao-kit__acoes { margin-top: auto; padding-top: 6px; display: flex; gap: var(--spacing-8); align-items: center; }
.cartao-kit__acoes form { margin: 0; flex: 1 1 auto; }
.cartao-kit__acoes .botao { width: 100%; justify-content: center; }
.cartao-kit__produtos { margin: 0; padding: 0; list-style: none; font-size: 11px; color: var(--text-secondary); display: grid; gap: 2px; }
.combos__mais { margin-top: var(--spacing-8); }

@media (min-width: 720px) {
  .combos__cartoes {
    grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    overflow: visible; scroll-snap-type: none;
  }
}