/* ─── T8 — Carrinho Inteligente ───────────────────────────────────────────── */

/*
 * Painel que aparece logo abaixo da barra do carrinho (#cartbar).
 * Visível apenas quando há itens no carrinho.
 */
#carrinho-inteligente-painel {
  /* Ocupa a mesma largura que o cartbar (fixado na parte inferior) */
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 420px;
  z-index: 40; /* abaixo de qualquer .modal-wrap (z-index:50, ver style.css) —
                   senão o painel fica por cima do comprovante/checkout ao
                   confirmar a venda, tampando parte do modal. */
  pointer-events: none; /* o painel em si não bloqueia cliques */
}

/* Recalcula a posição vertical para ficar acima do cartbar.
   O cartbar tem ~62px de altura; o painel fica logo acima dele. */
#carrinho-inteligente-painel {
  bottom: 62px;
}

.ci-painel {
  pointer-events: auto;
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Sombra sutil para separar do conteúdo abaixo */
  box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
}

/* ── Seções individuais ──────────────────────────────────────────────────── */
.ci-secao {
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ci-secao:last-child {
  border-bottom: none;
}

/* ── 3. Margem da venda ──────────────────────────────────────────────────── */
.ci-margem {
  flex-direction: row;
  align-items: center;
  padding: 6px 16px;
}

.ci-margem-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  padding: 4px 10px;
}

.ci-margem-verde  { background: #e3f3e9; color: #1d6e42; }
.ci-margem-amarelo { background: #fef3db; color: var(--amber-deep); }
.ci-margem-vermelho { background: #fde8e2; color: var(--coral-deep); }

.ci-margem-sep { opacity: 0.5; font-weight: 400; }

.ci-margem-pct { font-size: 13px; }

/* ── 2. Avisos de estoque crítico ────────────────────────────────────────── */
.ci-aviso-titulo {
  font-size: 11px;
  font-weight: 700;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--coral-deep);
  letter-spacing: .02em;
}

.ci-criticos {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.ci-critico-item {
  font-size: 11px;
  background: #fde8e2;
  color: var(--coral-deep);
  border-radius: 5px;
  padding: 2px 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ci-critico-item em {
  font-style: normal;
  font-weight: 600;
  opacity: 0.8;
}

/* ── 4. Combos automáticos ───────────────────────────────────────────────── */
.ci-combo-label {
  font-size: 11px;
  font-weight: 700;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--ledger);
  letter-spacing: .02em;
}

.ci-combo-ativo .ci-combo-label {
  color: var(--amber-deep);
}

.ci-combo-nomes {
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
}

.ci-combo-hint {
  font-size: 10.5px;
  color: var(--ink-soft);
  font-style: italic;
}

.ci-combo-sugestao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ci-combo-btn {
  flex-shrink: 0;
  border: none;
  border-radius: 6px;
  background: var(--ledger);
  color: var(--paper);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 120ms;
  white-space: nowrap;
}

.ci-combo-btn:hover { background: var(--ledger-dark); }

.ci-combo-btn em {
  font-style: normal;
  opacity: 0.75;
  font-weight: 400;
}

/* ── 1. Produtos relacionados ────────────────────────────────────────────── */
.ci-rel-titulo {
  font-size: 10.5px;
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-soft);
  font-weight: 500;
}

.ci-rel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ci-rel-chip {
  border: 1px solid var(--line);
  background: var(--paper-dim);
  border-radius: 20px;
  font-size: 11.5px;
  color: var(--ink);
  padding: 5px 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background 100ms, border-color 100ms;
  font-family: inherit;
}

.ci-rel-chip:hover {
  background: var(--ledger);
  border-color: var(--ledger);
  color: var(--paper);
}

.ci-rel-chip:hover .ci-rel-preco { color: var(--amber); }

.ci-rel-preco {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--ink-soft);
  font-weight: 600;
}

/* ── Ajuste do cartbar quando o painel está presente ─────────────────────── */
/* Nada a fazer aqui: o painel usa `bottom: 62px` para ficar
   exatamente acima do cartbar, sem deslocar o layout. */

/* ── Mobile safe-area ─────────────────────────────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #carrinho-inteligente-painel {
    bottom: calc(62px + env(safe-area-inset-bottom));
  }
}

/* ── Desktop (sidebar) ────────────────────────────────────────────────────
   Acima de 1000px o layout ganha uma sidebar fixa de 230px (ver .sidebar em
   style.css) e o #cartbar deixa de ocupar a largura toda da tela: ele vira
   `position:sticky` só dentro de #app (a coluna de conteúdo, ao lado da
   sidebar). O painel, porém, continuava centralizado na viewport inteira
   com no máximo 420px de largura — nesse layout mais largo isso faz ele
   "flutuar" como uma caixinha solta no meio da tela, sem relação visual
   nenhuma com a barra do carrinho (que fica bem mais larga e deslocada pra
   direita, depois da sidebar). Aqui alinhamos o painel exatamente à mesma
   coluna do #cartbar: começa depois da sidebar e ocupa o resto da largura,
   igual ao #cartbar faz com left:0/right:0 dentro de #app. */
@media (min-width: 1000px) {
  #carrinho-inteligente-painel {
    left: 230px; /* largura da .sidebar em style.css */
    right: 0;
    width: auto;
    max-width: none;
    transform: none;
  }

  .ci-painel {
    /* Numa faixa larga, os cartões de aviso/combo/relacionados esticados
       em coluna única (herdado do mobile) ficam com muito espaço vazio
       de cada lado. Reorganiza em linha, com quebra, aproveitando a
       largura extra em vez de empilhar tudo verticalmente. */
    max-height: none;
  }

  .ci-secao {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 10px 24px;
  }

  .ci-rel-titulo,
  .ci-aviso-titulo,
  .ci-combo-label {
    flex-shrink: 0;
    margin-right: 4px;
  }

  .ci-combo-sugestao {
    flex: 1;
    min-width: 260px;
  }

  /* Com uma seção só ativa (o caso mais comum — ex.: só "frequentemente
     comprados juntos"), a barra inteira ficava esticada de ponta a ponta
     da coluna de conteúdo, com o rótulo grudado à esquerda e uma faixa
     enorme de espaço vazio à direita. Limita a largura do cartão a algo
     mais compacto e alinhado à direita, perto do botão "Cobrar" do
     cartbar — fica visualmente ligado à ação de vender, em vez de uma
     barra solta ocupando a tela toda. */
  .ci-painel {
    margin-left: auto;
    max-width: 640px;
    border: 1px solid var(--line);
    border-radius: 12px 12px 0 0;
  }
}

/* ── Painel ao lado do checkout (desktop largo) ───────────────────────────
   Quando o comprovante/checkout (#receiptWrap) abre, ele é um modal
   centralizado na tela toda — e como o painel fica atrás dele (z-index
   menor, ver acima), ele simplesmente some da vista até a pessoa confirmar
   ou voltar. Numa tela larga sobra bastante espaço nas laterais do modal
   (que tem no máximo 440px + padding), então em vez de esconder o painel
   inteiro, ele vira um cartão flutuante à direita do modal — assim dá pra
   conferir a margem da venda e os avisos de estoque crítico sem fechar o
   checkout. Só habilitado a partir de 1200px (abaixo disso não sobra
   espaço real ao lado do modal sem espremer as duas coisas). */
@media (min-width: 1200px) {
  body:has(#receiptWrap) #carrinho-inteligente-painel {
    left: calc(50% + 220px + 32px + 20px); /* logo depois da borda direita do modal (metade de 440px + padding de 32px) + um respiro de 20px */
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: 300px;
    max-width: calc(50vw - 272px - 20px); /* não deixa vazar da tela em janelas mais estreitas dentro da faixa de 1200px+ */
    z-index: 51; /* acima do backdrop do modal (50), só nesse modo lateral */
  }

  body:has(#receiptWrap) .ci-painel {
    border: 1px solid var(--line);
    border-radius: 14px;
    max-height: 70vh;
    box-shadow:
      0 24px 60px -16px rgba(18, 40, 31, .35),
      0 0 0 1px rgba(27, 58, 47, .06);
    /* Só consulta, não ação: o total do comprovante já foi calculado e
       fica congelado na tela — deixar os botões de combo ativos aqui
       adicionaria item ao carrinho sem refletir no checkout já aberto. */
    pointer-events: none;
  }

  /* Volta pro empilhamento vertical (a coluna estreita de 300px não tem
     espaço pra linha, diferente do resto do desktop). */
  body:has(#receiptWrap) .ci-secao {
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 16px;
  }
}