/* =========================================================================
   loja-checkout.css — formulário de comprador + entrega + frete da loja
   (assets/js/loja-checkout.js). Pedido do cliente 25/set/2026.
   Usado dentro da gaveta (herda as cores --lg-*) e em loja.php (fallbacks).
   ========================================================================= */
.lc {
  --lc-texto: var(--lg-texto, #2a2522);
  --lc-suave: var(--lg-suave, #7a716b);
  --lc-linha: var(--lg-linha, #dcd6cf);
  --lc-campo: var(--lg-card-campo, #fff);
  --lc-ativo: var(--lg-primario, #2a2522);
  --lc-ativo-texto: var(--lg-primario-texto, #fff);
  --lc-erro: #c0392b;
  --lc-verde: var(--lg-verde, #2f7d4f);
  font-family: 'Montserrat', sans-serif;
  color: var(--lc-texto);
  text-align: left;
}
body.theme-dark .lc { --lc-campo: #252220; --lc-erro: #ff7b6b; }

.lc-titulo {
  margin: 18px 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lc-suave);
}
.lc-titulo:first-child { margin-top: 4px; }

.lc-campo { display: block; margin-bottom: 10px; min-width: 0; }
.lc-campo > span { display: block; font-size: 12px; margin-bottom: 4px; color: var(--lc-suave); }
.lc-campo input,
.lc-campo select {
  width: 100%;
  box-sizing: border-box;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--lc-linha);
  border-radius: 6px;
  background: var(--lc-campo);
  color: var(--lc-texto);
  font: inherit;
  font-size: 16px; /* 16px evita o zoom automático do iPhone ao focar */
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.lc-campo select { appearance: auto; padding: 0 6px; }
.lc-campo input:focus,
.lc-campo select:focus { border-color: var(--lc-ativo); box-shadow: 0 0 0 2px rgba(0, 0, 0, .06); }
.lc-campo input::placeholder { color: var(--lc-suave); opacity: .6; }
.lc-campo.lc-invalido input,
.lc-campo.lc-invalido select { border-color: var(--lc-erro); box-shadow: 0 0 0 2px rgba(192, 57, 43, .12); }
.lc-campo.lc-invalido > span { color: var(--lc-erro); }

.lc-linha2 { display: flex; gap: 10px; align-items: flex-end; }
.lc-linha2 > .lc-campo { flex: 1; }
.lc-linha2 > .lc-cep { flex: 0 0 140px; }
.lc-linha2 > .lc-numero { flex: 0 0 96px; }
.lc-linha2 > .lc-uf { flex: 0 0 76px; }
.lc-nao-sei { margin-bottom: 22px; font-size: 12px; }

.lc-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--lc-texto);
  text-decoration: underline;
  text-underline-offset: 2px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.lc-modos { display: flex; gap: 8px; margin-bottom: 14px; }
.lc-modo {
  flex: 1;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--lc-linha);
  border-radius: 6px;
  background: transparent;
  color: var(--lc-texto);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.lc-modo.ativo { background: var(--lc-ativo); border-color: var(--lc-ativo); color: var(--lc-ativo-texto); }
.lc-endereco[hidden] { display: none; }

.lc-frete { margin-top: 6px; }
.lc-frete-msg { font-size: 13px; color: var(--lc-suave); padding: 10px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lc-frete-erro { color: var(--lc-erro); }
.lc-retirada-info { font-size: 13px; color: var(--lc-suave); padding: 4px 0 8px; line-height: 1.5; }

.lc-opcoes { display: flex; flex-direction: column; gap: 8px; border-radius: 8px; }
.lc-opcoes.lc-invalido { outline: 2px solid var(--lc-erro); outline-offset: 3px; }
.lc-opcao {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--lc-linha);
  border-radius: 6px;
  cursor: pointer;
  background: var(--lc-campo);
}
.lc-opcao.ativa { border-color: var(--lc-ativo); box-shadow: inset 0 0 0 1px var(--lc-ativo); }
.lc-opcao input { margin: 0; accent-color: var(--lc-ativo); width: 16px; height: 16px; flex-shrink: 0; }
.lc-opcao-nome { flex: 1; font-size: 14px; }
.lc-opcao-nome small { display: block; font-size: 12px; color: var(--lc-suave); margin-top: 2px; }
.lc-opcao-preco { font-size: 14px; font-weight: 600; white-space: nowrap; }

.lc-spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--lc-linha);
  border-top-color: var(--lc-texto);
  border-radius: 50%;
  display: inline-block;
  animation: lc-gira .8s linear infinite;
}
@keyframes lc-gira { to { transform: rotate(360deg); } }

@media (max-width: 380px) {
  .lc-linha2 > .lc-cep { flex-basis: 120px; }
  .lc-linha2 > .lc-numero { flex-basis: 80px; }
}