/* ==========================================================================
   ANOVA — modal de produto: o que muda por tipo.
   --------------------------------------------------------------------------
   (03/09) Continuacao de css/anova-produto.css, que passou de 400 linhas
   (CONVENCOES.md). Aqui ficam:
     - OLEO: canabinoides, concentracao por medida e o calculo de gotas
     - FLOR: terpenos e linhagem

   DEPENDE de css/anova-produto.css (prefixo, tokens e o --anova-pm-ouro-texto)
   e de css/tema-anova.css (tokens --anova-*). Carrega DEPOIS dos dois.
   ========================================================================== */

/* ==========================================================================
   OLEO
   ========================================================================== */

/* --------------------------------------------------------------------------
   Canabinoides presentes (coluna da esquerda)
   -------------------------------------------------------------------------- */

.anova-pm-canab {
  border: 1px solid var(--anova-linha-n);
  border-radius: var(--anova-raio-p);
  overflow: hidden;
}

.anova-pm-canab-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  font-size: 12px;
}

/* Filete entre as linhas, e nao em volta de cada uma: com borda embaixo de todas
   sobraria um traco solto no fim da lista. */
.anova-pm-canab-linha + .anova-pm-canab-linha {
  border-top: 1px solid var(--anova-linha-n);
}

.anova-pm-canab-nome {
  font-weight: 600;
  color: var(--anova-tinta);
}

.anova-pm-canab-valor {
  font-variant-numeric: tabular-nums;
  color: var(--anova-tinta-2);
}

/* --------------------------------------------------------------------------
   Concentracao por medida
   -------------------------------------------------------------------------- */

.anova-pm-medidas {
  padding: 16px 18px 18px;
  border: 1px solid var(--anova-linha-n);
  border-radius: var(--anova-raio-p);
  background: var(--anova-neutro);
}

/* Tabela de verdade, e nao divs: sao tres colunas com cabecalho, e um leitor de
   tela precisa poder dizer "1 gota, equivale a 0,05 ml, 1,50 mg". Em divs a
   pessoa ouviria seis numeros soltos. */
.anova-pm-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}

.anova-pm-tabela th {
  padding: 0 0 10px;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--anova-tinta-3);
  text-align: right;
  border-bottom: 1px solid var(--anova-linha-n);
}

.anova-pm-tabela th:first-child,
.anova-pm-tabela td:first-child { text-align: left; }

.anova-pm-tabela td {
  padding: 11px 0;
  color: var(--anova-tinta-2);
  text-align: right;
  border-bottom: 1px solid var(--anova-linha-n);
  font-variant-numeric: tabular-nums;
}

.anova-pm-tabela tr:last-child td { border-bottom: 0; }

.anova-pm-tabela td:first-child {
  font-weight: 600;
  color: var(--anova-tinta);
}

/* A coluna dos canabinoides e a resposta da tabela; as outras duas sao o
   caminho ate ela. */
.anova-pm-tabela td:last-child {
  font-weight: 600;
  color: var(--anova-verde-800);
}

/* --------------------------------------------------------------------------
   O calculo de gotas
   -------------------------------------------------------------------------- */

.anova-pm-gotas {
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--anova-linha-n);
}

.anova-pm-gotas-titulo {
  margin: 0 0 12px;
  font-size: 10.5px;
  color: var(--anova-tinta-3);
}

.anova-pm-gotas-linha {
  display: flex;
  align-items: center;
  gap: 12px;
}

.anova-pm-gotas-btn {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid var(--anova-linha-n);
  border-radius: 50%;
  background: var(--anova-branco);
  font-family: inherit;
  font-size: 16px;
  line-height: 1;
  color: var(--anova-tinta-2);
  cursor: pointer;
  transition: border-color var(--anova-transicao-r), color var(--anova-transicao-r);
}

.anova-pm-gotas-btn:hover {
  border-color: var(--anova-verde-600);
  color: var(--anova-verde-800);
}

.anova-pm-gotas-btn:focus-visible {
  outline: 2px solid var(--anova-verde-700);
  outline-offset: 2px;
}

.anova-pm-gotas-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* O trilho preenchido vem de um gradiente cuja parada e a variavel
   --anova-pm-pct, escrita pelo JS. E o unico jeito de ter trilho preenchido
   igual nos tres navegadores: o ::-moz-range-progress so existe no Firefox, e o
   Chrome nao tem equivalente. */
.anova-pm-gotas-range {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  height: 6px;
  margin: 0;
  border-radius: var(--anova-raio-pilula);
  background: linear-gradient(
    to right,
    var(--anova-verde-700) 0 var(--anova-pm-pct, 0%),
    var(--anova-linha-forte) var(--anova-pm-pct, 0%) 100%
  );
  cursor: pointer;
}

/* O polegar precisa ser declarado DUAS vezes, uma por prefixo: um seletor que o
   navegador nao entende invalida a regra inteira, entao juntar os dois numa
   lista faria os dois pararem de valer. */
.anova-pm-gotas-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 17px;
  height: 17px;
  border: 2px solid var(--anova-branco);
  border-radius: 50%;
  background: var(--anova-verde-700);
  box-shadow: 0 1px 5px rgba(15, 50, 38, 0.28);
  cursor: pointer;
}

.anova-pm-gotas-range::-moz-range-thumb {
  width: 17px;
  height: 17px;
  border: 2px solid var(--anova-branco);
  border-radius: 50%;
  background: var(--anova-verde-700);
  box-shadow: 0 1px 5px rgba(15, 50, 38, 0.28);
  cursor: pointer;
}

.anova-pm-gotas-range:focus-visible {
  outline: 2px solid var(--anova-verde-700);
  outline-offset: 4px;
}

/* A resposta do calculo. `aria-live` no HTML: quem nao ve a tela precisa ouvir o
   valor mudar ao mexer no controle, senao o controle nao informa nada. */
.anova-pm-gotas-saida {
  margin-top: 13px;
  padding: 13px 15px;
  border: 1px solid var(--anova-linha-n);
  border-radius: var(--anova-raio-p);
  background: var(--anova-branco);
  font-size: 12.5px;
  color: var(--anova-tinta-2);
}

.anova-pm-gotas-saida strong {
  font-weight: 600;
  color: var(--anova-tinta);
}

.anova-pm-gotas-saida em {
  font-style: normal;
  font-weight: 600;
  color: var(--anova-verde-800);
}

.anova-pm-gotas-saida .anova-pm-gotas-ml {
  color: var(--anova-tinta-3);
}

/* Letra miuda que diz que a conta e aritmetica do rotulo e NAO recomendacao de
   uso. Numa loja de cannabis medicinal isso nao e formalidade: a dose e definida
   por quem prescreve, e a tabela acima nao pode ser lida como sugestao. */
.anova-pm-gotas-nota {
  margin: 11px 0 0;
  font-size: 9.5px;
  line-height: 1.55;
  color: var(--anova-tinta-3);
}

/* ==========================================================================
   FLOR
   ========================================================================== */

/* --------------------------------------------------------------------------
   Terpenos
   -------------------------------------------------------------------------- */

.anova-pm-terpenos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.anova-pm-terpeno {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid var(--anova-linha-n);
  border-radius: var(--anova-raio-pilula);
  background: var(--anova-branco);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--anova-transicao-r), background var(--anova-transicao-r);
}

.anova-pm-terpeno:hover { border-color: var(--anova-verde-600); }

.anova-pm-terpeno:focus-visible {
  outline: 2px solid var(--anova-verde-700);
  outline-offset: 2px;
}

.anova-pm-terpeno.esta-ativo {
  border-color: var(--anova-verde-600);
  background: var(--green-soft);
}

.anova-pm-terpeno-nome {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--anova-tinta);
}

.anova-pm-terpeno.esta-ativo .anova-pm-terpeno-nome { color: var(--anova-verde-800); }

.anova-pm-terpeno-nota {
  display: block;
  font-size: 9.5px;
  color: var(--anova-tinta-3);
}

/* O ponto so aparece no ativo: e a marca de qual chip esta sendo lido no cartao
   abaixo. Nos outros ele seria enfeite. */
.anova-pm-terpeno-ponto {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--anova-verde-700);
  opacity: 0;
}

.anova-pm-terpeno.esta-ativo .anova-pm-terpeno-ponto { opacity: 1; }

/* --------------------------------------------------------------------------
   O cartao do terpeno escolhido
   -------------------------------------------------------------------------- */

.anova-pm-terpeno-card {
  padding: 16px 18px;
  border: 1px solid var(--anova-linha-n);
  border-radius: var(--anova-raio-p);
  background: var(--anova-neutro);
}

.anova-pm-terpeno-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.anova-pm-terpeno-icone {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--anova-verde-700);
}

.anova-pm-terpeno-icone svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.anova-pm-terpeno-titulo {
  margin: 0;
  font-family: 'The Seasons', 'Playfair Display', 'Georgia', 'Times New Roman', serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--anova-tinta);
}

.anova-pm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.anova-pm-tag {
  padding: 4px 10px;
  border: 1px solid var(--anova-linha-n);
  border-radius: var(--anova-raio-pilula);
  background: var(--anova-branco);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--anova-tinta-2);
}

/* "Dominante" nao e mais uma etiqueta de sabor: e a que diz qual terpeno manda
   no perfil. Por isso e a unica colorida. */
.anova-pm-tag.esta-dominante {
  border-color: var(--anova-verde-600);
  background: var(--green-soft);
  color: var(--anova-verde-800);
}

.anova-pm-terpeno-texto {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--anova-tinta-2);
}

.anova-pm-terpeno-onde {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px 9px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--anova-linha-n);
  font-size: 11.5px;
  color: var(--anova-tinta-2);
}

.anova-pm-terpeno-onde-rotulo {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--anova-tinta-3);
}

.anova-pm-terpeno-dica {
  margin: 9px 0 0;
  font-size: 10.5px;
  color: var(--anova-tinta-3);
}

/* --------------------------------------------------------------------------
   Linhagem
   -------------------------------------------------------------------------- */

.anova-pm-linhagem {
  display: grid;
  gap: 10px;
}

.anova-pm-linhagem-item {
  padding: 13px 16px;
  border: 1px solid var(--anova-linha-n);
  border-radius: var(--anova-raio-p);
  background: var(--anova-neutro);
}

.anova-pm-linhagem-nome {
  display: block;
  margin-bottom: 3px;
  font-size: 13px;
  font-weight: 600;
  color: var(--anova-verde-800);
}

.anova-pm-linhagem-texto {
  display: block;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--anova-tinta-2);
}

@media (max-width: 760px) {
  .anova-pm-medidas { padding: 14px; }

  /* A tabela e a unica coisa do modal que nao encolhe bem: tres colunas de
     numeros em 320px viram uma coluna de numeros quebrados. Rola por dentro, em
     vez de espremer — e a pagina nunca rola de lado por causa dela. */
  .anova-pm-medidas-rolagem {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .anova-pm-tabela { min-width: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .anova-pm-terpeno,
  .anova-pm-gotas-btn {
    transition-duration: 0.01ms;
  }
}