/* O bloco "Calcular frete" (F07): o campo do CEP com o botão "OK" ao lado e o resultado, ou o erro, embaixo. */

.frete {
  margin: var(--espaco-4) 0;
}

.frete h2 {
  margin: 0 0 var(--espaco-2);
  font-size: 1.125rem;
}

.campo-do-cep {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2);
  margin: 0;
}

.campo-do-cep label {
  flex-basis: 100%;
  font-weight: 600;
}

.campo-do-cep input {
  width: 9rem;
  min-height: var(--alvo-minimo);
  padding: 0 var(--espaco-2);
  font: inherit;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
}

.campo-do-cep input[aria-invalid="true"] {
  border-color: var(--cor-erro);
}

.frete-resultado,
.frete-erro {
  margin: var(--espaco-2) 0 0;
  overflow-wrap: anywhere;
}

.frete-erro {
  color: var(--cor-erro);
}

/* No resumo do carrinho (alinhado à direita): a linha do frete com "Trocar CEP", ou "Calcular frete" com o campo e
   "OK" à direita; os botões como os do cupom (F06). */
.carrinho-frete {
  margin: 0 0 var(--espaco-3);
}

.carrinho-frete-titulo {
  margin: 0 0 var(--espaco-2);
  font-size: 1.125rem;
}

.carrinho-frete .campo-do-cep {
  justify-content: flex-end;
}

.carrinho-frete button {
  min-width: var(--alvo-minimo);
  min-height: var(--alvo-minimo);
  padding: 0 var(--espaco-3);
  font: inherit;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-texto-suave);
  border-radius: var(--raio);
  cursor: pointer;
}

.carrinho-frete-linha {
  overflow-wrap: anywhere;
}