/**
 * ShopTop Design System — Formulários
 * ------------------------------------------------------------------
 * Estilo base de campos de formulário (inputs, selects, textareas),
 * reutilizado em Minha Conta, Checkout, Contato, Newsletter, etc.
 *
 * Estas regras aplicam-se tanto às classes utilitárias próprias
 * (.shoptop-input) quanto, de forma discreta, aos campos nativos do
 * WooCommerce/WordPress (input[type], select, textarea), para que o
 * checkout nativo já herde a identidade visual sem precisar de
 * templates customizados nesta etapa.
 *
 * Depende de: tokens.css, variables.css
 */

.shoptop-label {
	display: block;
	font-size: var(--shoptop-font-size-sm);
	font-weight: var(--shoptop-font-weight-medium);
	color: var(--shoptop-color-text);
	margin-bottom: var(--shoptop-space-1);
}

.shoptop-input,
.shoptop-select,
.shoptop-textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea {
	width: 100%;
	font-family: var(--shoptop-font-family-base);
	font-size: var(--shoptop-font-size-base);
	color: var(--shoptop-input-text);
	background-color: var(--shoptop-input-bg);
	border: 1px solid var(--shoptop-input-border);
	border-radius: var(--shoptop-input-radius);
	padding: var(--shoptop-space-2) var(--shoptop-space-3);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.shoptop-input:focus,
.shoptop-select:focus,
.shoptop-textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--shoptop-input-border-focus);
	box-shadow: 0 0 0 3px var(--shoptop-color-primary-100);
}

.shoptop-input::placeholder,
.shoptop-textarea::placeholder {
	color: var(--shoptop-input-placeholder);
}

/* Estado de erro de validação (ex.: CPF inválido, campo obrigatório) */
.shoptop-field--error .shoptop-input,
.shoptop-field--error .shoptop-select,
.shoptop-field--error .shoptop-textarea,
input.shoptop-input-error {
	border-color: var(--shoptop-field-error-border);
}

.shoptop-field__help {
	display: block;
	font-size: var(--shoptop-font-size-xs);
	color: var(--shoptop-color-text-secondary);
	margin-top: var(--shoptop-space-1);
}

.shoptop-field__error-message {
	display: block;
	font-size: var(--shoptop-font-size-xs);
	color: var(--shoptop-field-error-text);
	margin-top: var(--shoptop-space-1);
}

/*
 * Separação visual do bloco de senha em "Meus dados" (Sprint G.11.1,
 * rodada de UX final) — o WooCommerce já isola esses campos num
 * <fieldset> nativo (checkout-minha-conta.php só traduz o <legend>
 * para "Segurança da conta"); aqui só aplicamos os tokens do Design
 * System à borda/espaçamento que o navegador já desenha por padrão.
 */
.woocommerce-EditAccountForm fieldset {
	margin-top: var(--shoptop-space-6);
	padding: var(--shoptop-space-4);
	border: 1px solid var(--shoptop-input-border);
	border-radius: var(--shoptop-input-radius);
}

.woocommerce-EditAccountForm fieldset legend {
	padding: 0 var(--shoptop-space-2);
	font-size: var(--shoptop-font-size-sm);
	font-weight: var(--shoptop-font-weight-medium);
	color: var(--shoptop-color-text);
}

/* Celular exibido em "Meus dados" (leitura), acima dos campos editáveis */
.shoptop-celular-meus-dados {
	margin-bottom: var(--shoptop-space-4);
	padding: var(--shoptop-space-3);
	background-color: var(--shoptop-gray-50);
	border-radius: var(--shoptop-input-radius);
}

/*
 * Seções do cadastro completo em /my-account/ (Sprint G.11.1 —
 * correção final): "Dados pessoais", "Contato" e "Endereço" — mesma
 * abordagem de fieldset nativo + tokens do Design System já usada no
 * bloco de senha de "Meus dados", para reforçar visualmente que são
 * grupos separados de campos.
 */
.shoptop-registro-secao {
	margin-top: var(--shoptop-space-6);
	padding: var(--shoptop-space-4);
	border: 1px solid var(--shoptop-input-border);
	border-radius: var(--shoptop-input-radius);
}

.shoptop-registro-secao legend {
	padding: 0 var(--shoptop-space-2);
	font-size: var(--shoptop-font-size-sm);
	font-weight: var(--shoptop-font-weight-medium);
	color: var(--shoptop-color-text);
}

/*
 * Pares de campo dentro de cada seção (Nome|Sobrenome, CPF|Nascimento,
 * CEP|Cidade, Número|Complemento, Bairro|Estado) — os `<p>` nativos do
 * WooCommerce já vêm com as classes form-row-first/last/wide; aqui só
 * definimos como o CONTÊINER deles se comporta. Ficam num `<div>`
 * separado do `<fieldset>` (não no fieldset diretamente) porque
 * `<legend>` dentro de um contêiner flex/grid tem suporte inconsistente
 * entre navegadores.
 */
.shoptop-registro-secao__campos {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--shoptop-space-4);
}

.shoptop-registro-secao__campos .form-row {
	flex: 1 1 100%;
	min-width: 0;
}

@media (min-width: 480px) {
	.shoptop-registro-secao__campos .form-row-first,
	.shoptop-registro-secao__campos .form-row-last {
		flex: 1 1 calc(50% - var(--shoptop-space-4) / 2);
	}
}

/* Mensagem de status da consulta de CEP (Sprint G.11.1) — "Buscando
 * endereço…", "Endereço localizado.", ou aviso de CEP não encontrado/
 * falha de rede. Texto discreto; não depende só de cor (ver
 * mensagens, sempre com texto explícito, nunca só ícone/cor). */
.shoptop-cep-feedback {
	display: block;
	margin-top: var(--shoptop-space-1);
	font-size: var(--shoptop-font-size-xs);
	color: var(--shoptop-color-text-secondary);
}

/*
 * Minha Conta deslogada — telas separadas (Sprint G.11.1, correção
 * final): "Minha Conta" (login) e "Criar Minha Conta" (cadastro) nunca
 * aparecem juntas. O WooCommerce sempre renderiza os 2 formulários no
 * mesmo HTML (`templates/myaccount/form-login.php`); só decidimos, por
 * CSS, qual metade mostrar, de acordo com a classe que
 * checkout-minha-conta.php adiciona ao `<body>`
 * (`shoptop-tela-login`/`shoptop-tela-cadastro`, conforme
 * `?tela=cadastro` na URL). Título/h2 nativos ("Login"/"Register") são
 * ocultados em favor do título único que o mesmo módulo PHP imprime.
 */
body.shoptop-tela-login #customer_login .u-column2,
body.shoptop-tela-cadastro #customer_login .u-column1 {
	display: none;
}

#customer_login .u-column1 h2,
#customer_login .u-column2 h2 {
	display: none;
}

/*
 * Título nativo da página "Minha conta" (bloco `wp:post-title` do tema
 * pai, fora do controle deste plugin/tema — não editamos template do
 * WordPress/WooCommerce Core para isso) duplicava com o título único
 * de tela acima: as 2 classes de body só existem na experiência
 * deslogada (ver shoptop_core_classe_tela_conta()), então esconder
 * `.wp-block-post-title` aqui nunca afeta o título de "Minha conta"
 * enquanto o cliente estiver logado.
 */
body.shoptop-tela-login .wp-block-post-title,
body.shoptop-tela-cadastro .wp-block-post-title,
body.shoptop-tela-conta-nao-encontrada .wp-block-post-title {
	display: none;
}

/* Tela "Conta não encontrada" — o formulário nativo de login/registro
 * some inteiro; só o bloco de mensagem + botões (impresso por
 * shoptop_core_conteudo_conta_nao_encontrada()) fica visível. */
body.shoptop-tela-conta-nao-encontrada #customer_login {
	display: none;
}

.shoptop-conta-nao-encontrada {
	max-width: 400px;
	margin: 0 auto;
	padding: var(--shoptop-space-6) var(--shoptop-space-5);
	border: 1px solid var(--shoptop-input-border);
	border-radius: var(--shoptop-input-radius);
	background-color: var(--shoptop-color-surface);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	text-align: center;
}

.shoptop-conta-nao-encontrada .shoptop-btn {
	margin-top: var(--shoptop-space-2);
}

.shoptop-tela-conta__titulo {
	margin-bottom: var(--shoptop-space-6);
	text-align: center;
}

/* Tela de login — card central compacto */
body.shoptop-tela-login #customer_login {
	max-width: 400px;
	margin: 0 auto;
}

body.shoptop-tela-login #customer_login .u-column1 {
	width: 100%;
	float: none;
	padding: var(--shoptop-space-6) var(--shoptop-space-5);
	border: 1px solid var(--shoptop-input-border);
	border-radius: var(--shoptop-input-radius);
	background-color: var(--shoptop-color-surface);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Esconde "Lembrar de mim" — fora do layout aprovado para a tela de
 * login; o checkbox continua no HTML (não enviado = sessão padrão do
 * WordPress, comportamento nativo, nada quebra). */
.woocommerce-form-login__rememberme {
	display: none;
}

/* Tela de cadastro — formulário largo, centralizado, com respiro */
body.shoptop-tela-cadastro #customer_login .u-column2 {
	width: 100%;
	float: none;
	max-width: 880px;
	margin: 0 auto;
}

/* Chamadas de alternância entre as 2 telas (sempre no DOM, o CSS
 * acima decide qual metade do formulário mostrar; aqui decidimos qual
 * chamada mostrar, mesma lógica). */
.shoptop-tela-conta__cta {
	margin-top: var(--shoptop-space-6);
	text-align: center;
}

body.shoptop-tela-login .shoptop-tela-conta__cta--cadastro,
body.shoptop-tela-cadastro .shoptop-tela-conta__cta--login {
	display: none;
}

.shoptop-tela-conta__botao {
	margin-top: var(--shoptop-space-2);
}

/*
 * "Meus pedidos" sem nenhum pedido (Sprint G.11.1): esconde só o botão
 * "Ver produtos"/"Browse products" que o WooCommerce imprime junto da
 * mensagem nativa — produtos pertencem à Loja, não a esta área. A
 * mensagem em si já foi traduzida via filtro `gettext`
 * (checkout-minha-conta.php); aqui só removemos o CTA visualmente.
 * Escopado pela classe de `<body>` (só existe quando o cliente logado
 * está em "Meus pedidos" sem nenhum pedido) — nunca afeta outros
 * links "wc-forward" do site. Confirmado ao vivo que este WooCommerce
 * renderiza o aviso via markup de notice do Blocks
 * (`.wc-block-components-notice-banner__content`), não o `.woocommerce-info`
 * clássico — por isso o seletor mira `.wc-forward` diretamente.
 */
body.shoptop-pedidos-vazios .wc-forward {
	display: none;
}