/* evolury-shipping-simulator — cálculo de frete na página do produto.
 * Self-contained; herda o acento do tema via var(--evo-accent) — o token CURTO, que é o
 * contrato publicado para mu-plugins (o `--evolury-*` é do tema). Ver #257. */

.evosim {
  margin: 1.25rem 0;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 10px;
  background: #fff;
  /* Largura total da coluna do produto — harmônico com a grade/conteúdo. */
  width: 100%;
  box-sizing: border-box;
}
.evosim__title { display: block; font-size: .95rem; font-weight: 600; margin-bottom: .65rem; }
.evosim__row { display: flex; gap: .5rem; }
.evosim__cep {
  flex: 0 0 9rem;
  width: 9rem;
  padding: .55rem .7rem;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 8px;
  font-size: 16px; /* >=16px evita o autozoom do iOS Safari ao focar */
  text-align: left;
}
.evosim__cep:focus {
  outline: none;
  border-color: var(--evo-accent, var(--evolury-accent, #0c91eb));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--evo-accent, var(--evolury-accent, #0c91eb)) 25%, transparent);
}
/* Secundário ao "Adicionar ao carrinho" (que é o CTA cheio): contorno na cor de
   acento + largura do conteúdo (não estica). Hover preenche levemente.
 *
 * A COR VEM DO TOKEN "AA", NÃO DO ACENTO CRU (mu#611). O acento é escolhido pela
 * marca da loja e não tem compromisso com contraste: medido nas três lojas da
 * frota, como TEXTO sobre branco ele dá 3,35 / 3,70 / 2,68:1 — abaixo dos 4,5:1
 * que o WCAG AA pede. Preencher o botão não resolveria: contraste é simétrico,
 * então texto branco sobre o mesmo acento dá exatamente a mesma razão.
 *
 * O tema já publica a versão corrigida (`--evo-brand-aa`: 5,17 / 5,12 / 5,19:1
 * nas mesmas lojas) junto do par de primeiro plano (`--evo-brand-aa-fg`). Usar o
 * token é melhor que escurecer por conta própria — a conta é dele, por loja.
 *
 * ⚠️ O acento cru NÃO entra na cadeia de fallback: cair nele é exatamente o
 * defeito. Sem token de AA, o último recurso é um azul que sabidamente passa. */
.evosim__btn {
  flex: 0 0 auto;
  padding: .55rem 1.1rem;
  border: 1px solid var(--evo-accent-aa, var(--evo-brand-aa, #0871b8));
  border-radius: 8px;
  background: transparent;
  color: var(--evo-accent-aa, var(--evo-brand-aa, #0871b8));
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.evosim__btn:hover {
  background: var(--evo-accent-aa, var(--evo-brand-aa, #0871b8));
  color: var(--evo-brand-aa-fg, #fff);
}
.evosim__btn.is-loading { opacity: .7; cursor: wait; }
/* 12,8px é texto NORMAL para o WCAG: 4,5:1 também aqui (mu#611). */
.evosim__link { display: inline-block; margin-top: .45rem; font-size: .8rem; color: var(--evo-accent-aa, var(--evo-brand-aa, #0871b8)); }

.evosim__results { margin-top: .7rem; }
.evosim__rates { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(0, 0, 0, .08); }
.evosim__rate {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .55rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.evosim__rate-name { flex: 1 1 auto; font-size: .9rem; }
.evosim__eta { font-size: .78rem; color: #6b7280; white-space: nowrap; }
.evosim__rate-cost { font-weight: 700; white-space: nowrap; }
/* O "Mais detalhes" da excursão é injetado dentro de .evosim__rate-name como
   bloco (classe .evo-exc-more--stacked, estilizada pelo evolury-excursoes). */

.evosim__msg { font-size: .85rem; color: #555; margin: .5rem 0 0; }
.evosim__msg--err { color: #b91c1c; }
.evosim__msg--note { color: #b45309; }

.evosim__stale { font-size: .8rem; color: #b45309; margin: .5rem 0 0; }
.evosim.is-stale .evosim__results { opacity: .4; }