/* ==========================================================================
   Checkout, carrinho e Minha conta

   Carregado só nessas telas (ver coerencia_checkout_assets()). O que está aqui
   é ordem e medida dos campos — a cor e a tipografia vêm dos tokens do
   style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Ordem dos campos no checkout em blocos

   O locale já reordena pelo lado do servidor. Estas regras garantem a ordem
   visual mesmo que uma versão do bloco ignore o `priority` — o contêiner é
   flex-wrap, então `order` resolve.
   -------------------------------------------------------------------------- */

.wc-block-components-address-form__country    { order: 1; }
.wc-block-components-address-form__first_name { order: 2; }
.wc-block-components-address-form__last_name  { order: 3; }
.wc-block-components-address-form__postcode   { order: 4; }
.wc-block-components-address-form__address_1  { order: 5; }

.wc-block-components-address-form__address_2-toggle,
.wc-block-components-address-form__address_2,
.wc-block-components-address-form__address_2-hidden-input { order: 6; }

.wc-block-components-address-form__city       { order: 7; }
.wc-block-components-address-form__state      { order: 8; }
.wc-block-components-address-form__phone      { order: 9; }

/*
 * Campos adicionais do tema (ver coerencia_registrar_campo_bairro,
 * _complemento e _cpf).
 *
 * A API de campos adicionais do WooCommerce não aceita posição: o campo entra
 * como último filho e sem `order`, o que no flex vale 0 — por isso o CPF
 * apareceria ANTES do País.
 *
 * O bairro leva o MESMO `order` do CEP: empatados, o navegador desempata pela
 * ordem do HTML, e o campo adicional é o último filho — então cai à direita do
 * CEP, no lugar que o Sobrenome ocupa na linha do Nome. A largura vem do
 * próprio bloco, que divide a linha entre os dois.
 *
 * O complemento segue a mesma receita, uma linha abaixo: `order: 6`, empatado
 * com o Número, cai à direita dele.
 */
.wc-block-components-address-form__coerencia-bairro      { order: 4; }
.wc-block-components-address-form__coerencia-complemento { order: 6; }
.wc-block-components-address-form__coerencia-cpf         { order: 10; }

/* --------------------------------------------------------------------------
   Placeholder x rótulo flutuante

   O campo do bloco tem rótulo flutuante: com o campo vazio e sem foco, o
   rótulo mora DENTRO do input, no mesmo lugar onde o placeholder é desenhado.
   Os campos nativos do WooCommerce não trazem placeholder nenhum, então a
   colisão nunca aparecia lá.

   Os três campos que este tema acrescenta trazem — "Ex.: Centro",
   "Ex.: apto 32, bloco B" e "000.000.000-00" — e saíam impressos por cima do
   rótulo: "Bairro" e "Ex.: Centro" na mesma linha, ilegíveis os dois.

   Tirar o placeholder resolveria a sobreposição e jogaria fora a dica, que é
   justamente o que esses três campos têm de útil: bairro e complemento são
   campos que a pessoa preenche errado sem exemplo. A dica passa a aparecer
   quando o rótulo sobe, que é o contrato da etiqueta flutuante — `is-active` é
   a classe que o próprio bloco põe no foco e mantém com o campo preenchido.

   A transição acompanha a do rótulo, senão a dica pisca antes de ele terminar
   de subir.
   -------------------------------------------------------------------------- */

.wc-block-components-text-input input::placeholder {
	opacity: 0;
	transition: opacity 0.2s ease;
}

.wc-block-components-text-input.is-active input::placeholder {
	opacity: 1;
}

@media (max-width: 600px) {
	.wc-block-components-address-form__postcode,
	.wc-block-components-address-form__address_2,
	.wc-block-components-address-form__coerencia-bairro,
	.wc-block-components-address-form__coerencia-complemento { flex: 0 0 100%; }
}

/*
 * O CPF do plugin brasileiro no checkout clássico: ele registra o campo com
 * `required => false` porque quem decide é o "Tipo de Pessoa", e é o JavaScript
 * dele que acrescenta o `*` ao rótulo quando Pessoa Física está selecionada. Só
 * que ele não tira o "(opcional)" que o WooCommerce já tinha escrito ali. O
 * rótulo sai "CPF (opcional) *" — e quem lê só o começo deixa em branco e
 * esbarra em "CPF é um campo obrigatório" no fim da compra.
 *
 * Por que CSS e não `required => true` no filtro: o campo é escondido para
 * Pessoa Jurídica, e campo obrigatório escondido faz o WooCommerce barrar a
 * compra do CNPJ pedindo um CPF que não está na tela.
 */
#billing_cpf_field label .optional {
	display: none;
}

/*
 * Descrição de campo no formulário clássico. O rótulo do `address_2` é
 * `screen-reader-text` por padrão do WooCommerce, então quem enxerga a tela só
 * tem o placeholder — e ele some assim que a pessoa começa a digitar. A regra
 * fica para qualquer dica que um plugin acrescente ali; o tema não usa mais
 * nenhuma, desde que o complemento ganhou caixa própria.
 */
.woocommerce form .form-row#billing_address_2_field .description,
.woocommerce form .form-row#shipping_address_2_field .description {
	display: block;
	margin: var(--sp-1) 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Barra "Usar outro endereço"

   Segunda porta para o formulário que o cartão de resumo esconde atrás de um
   "Editar" pequeno demais. Encaixa no cartão: ele perde os cantos de baixo, ela
   assume.
   -------------------------------------------------------------------------- */

.coe-endereco-outro {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	width: 100%;
	/* -1px come a borda repetida entre o cartão e a barra. */
	margin: -1px 0 var(--sp-4);
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--line);
	border-radius: 0 0 var(--radius) var(--radius);
	background-color: var(--paper-2);
	font-family: var(--font-ui);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: var(--navy);
	cursor: pointer;
}

.coe-endereco-outro:hover,
.coe-endereco-outro:focus {
	background-color: var(--navy);
	border-color: var(--navy);
	color: var(--paper);
}

.coe-endereco-outro__icone {
	display: inline-flex;
}

/* O cartão de resumo perde o canto de baixo para a barra encaixar nele. */
.wc-block-components-address-card:has(+ .coe-endereco-outro) {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* --------------------------------------------------------------------------
   Minha conta
   -------------------------------------------------------------------------- */

/*
 * O CPF é campo adicional do WooCommerce; a caixa de texto vem dele, e aqui só
 * se acerta a medida — documento de 14 caracteres num campo de largura total
 * parece que espera mais do que espera.
 */
.woocommerce-address-fields .coe-conta-endereco__cpf input {
	max-width: 260px;
}

@media (max-width: 599px) {
	.woocommerce-address-fields .coe-conta-endereco__cpf input {
		max-width: none;
	}
}

/* A linha de ajuda abaixo do CPF em "Detalhes da conta". */
.coe-conta__ajuda {
	display: block;
	margin-top: var(--sp-1);
	font-size: 13px;
	line-height: 1.4;
	color: var(--ink-muted);
}