/* ==========================================================================
   Recursos de venda: farmacia (avise-me, pergunte ao farmaceutico,
   recomendados, sugestao) e servicos (combo, vale-presente).
   Usa as variaveis do loja.css (--marca, --linha, --raio...).
   ========================================================================== */

/* O botao do chat flutuante fica acima da barra fixa de agendar */
body:has(.ag-rodape) .cl-botao { bottom: 84px; }

/* ---------------------------------------------------------------- Farmacia */
.cartao-produto.indisponivel:not(:disabled) { opacity: .8; cursor: pointer; }
.cartao-produto.indisponivel:not(:disabled) .nome { text-decoration: none; }
.cartao-produto.indisponivel:not(:disabled) .selo-esgotado { background: #fde8e1; color: #b4410f; }

.fm-em-falta {
  display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 8px; border-radius: 6px;
  background: #f3f4f6; color: #6b7280; font-size: .75rem; font-weight: 600;
}

.fm-ficha { display: flex; flex-direction: column; gap: 16px; padding: 0 16px 8px; }
@media (min-width: 768px) { .fm-ficha { padding: 0 28px 8px; } }
.fm-perguntar {
  border: 1.5px solid #15803d; color: #15803d; background: #fff; border-radius: 10px; font-weight: 600; padding: 10px;
}
.fm-perguntar:hover { background: #f0fdf4; color: #15803d; border-color: #15803d; }

.fm-avise { display: flex; flex-direction: column; gap: 8px; }
.fm-avise .btn { height: 48px; border-radius: 10px; font-weight: 700; }
.fm-msg { font-size: .85rem; color: #15803d; }
.fm-msg.erro { color: #dc3545; }

.fm-reco h2 { font-size: 1rem; font-weight: 800; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.fm-reco > p { font-size: .82rem; color: var(--tinta-fraca); margin: -6px 0 10px; }
.fm-ia {
  font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  color: var(--marca); background: color-mix(in srgb, var(--marca) 12%, #fff);
}
.fm-reco-lista {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(118px, 1fr); gap: 10px;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.fm-reco-lista::-webkit-scrollbar { display: none; }
.fm-reco-item {
  display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 8px;
  border: 1px solid var(--linha); border-radius: var(--raio); background: #fff; min-width: 0;
}
.fm-reco-item:hover { border-color: var(--marca); }
.fm-reco-img {
  height: 64px; border-radius: 8px; display: grid; place-items: center; overflow: hidden;
  background: color-mix(in srgb, var(--marca) 8%, #fff); color: var(--marca); font-size: 1.4rem;
}
.fm-reco-img img { width: 100%; height: 100%; object-fit: cover; }
.fm-reco-nome {
  font-size: .8rem; font-weight: 600; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fm-reco-preco { font-size: .82rem; font-weight: 700; }
.fm-reco-motivo { font-size: .68rem; color: var(--tinta-fraca); }

.fm-reco-pagina { padding: 16px; border-bottom: 8px solid var(--fundo); }

.fm-sugerir { padding: 16px; }
.fm-sugerir form {
  display: flex; flex-direction: column; gap: 4px; padding: 14px;
  border: 1.5px dashed color-mix(in srgb, var(--marca) 55%, #fff); border-radius: var(--raio);
  background: color-mix(in srgb, var(--marca) 4%, #fff);
}
.fm-sugerir strong { font-size: .95rem; }
.fm-sugerir small { font-size: .8rem; color: var(--tinta-fraca); margin-bottom: 6px; }
.fm-sugerir-linha { display: flex; gap: 8px; }
.fm-sugerir-linha .form-control { flex: 1; }

/* ---------------------------------------------------------------- Servicos */
.ag-combo {
  margin-top: 12px; padding: 12px; border: 1.5px dashed color-mix(in srgb, var(--marca) 60%, #fff);
  border-radius: var(--raio); background: color-mix(in srgb, var(--marca) 4%, #fff);
}
.ag-combo-topo { font-size: .78rem; font-weight: 700; color: var(--marca); margin-bottom: 6px; }
.ag-combo-linha { display: flex; align-items: center; gap: 10px; }
.ag-combo-linha > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ag-combo-linha strong { font-size: .92rem; }
.ag-combo-linha small { font-size: .78rem; color: var(--tinta-fraca); }
.ag-combo .btn { border-radius: 999px; font-weight: 700; white-space: nowrap; }
.ag-combo.ativo { border-style: solid; border-color: var(--marca); }

.ag-presente {
  display: flex; align-items: center; gap: 12px; padding: 12px; margin: 0 16px 0;
  border: 1.5px solid var(--linha); border-radius: var(--raio); cursor: pointer;
}
.ag-presente-icone {
  flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--marca) 12%, #fff); color: var(--marca); font-size: 1.2rem;
}
.ag-presente > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.ag-presente strong { font-size: .92rem; }
.ag-presente small { font-size: .78rem; color: var(--tinta-fraca); }
.ag-presente .form-check-input { width: 2.6em; height: 1.4em; margin: 0; cursor: pointer; }
.ag-presente .form-check-input:checked { background-color: var(--marca); border-color: var(--marca); }
.ag-presente:has(input:checked) { border-color: var(--marca); }
.ag-presente-campos { padding: 12px 16px 0; }

.ag-vale-ok {
  margin: 0 16px 12px; padding: 12px; border-radius: var(--raio); display: flex; gap: 10px; align-items: flex-start;
  background: #f0fdf4; color: #166534; font-size: .88rem;
}
.ag-vale-ok i { font-size: 1.3rem; }
.ag-vale-erro { margin: 0 16px 12px; padding: 10px 12px; border-radius: var(--raio); background: #fee2e2; color: #991b1b; font-size: .86rem; }

/* Pagina do vale-presente */
.vale-cartao {
  margin: 16px; padding: 22px 18px; border-radius: 18px; color: #fff; text-align: center;
  background: linear-gradient(135deg, var(--marca), color-mix(in srgb, var(--marca) 55%, #000));
  box-shadow: 0 10px 30px color-mix(in srgb, var(--marca) 35%, transparent);
}
.vale-cartao .vale-emoji { font-size: 2.6rem; line-height: 1; }
.vale-cartao h1 { font-size: 1.3rem; font-weight: 800; margin: 8px 0 2px; }
.vale-codigo {
  display: inline-block; margin-top: 12px; padding: 6px 16px; border-radius: 10px; letter-spacing: .25em;
  background: rgba(255,255,255,.18); font-size: 1.4rem; font-weight: 800;
}