/* =====================================================================
   MINHA CONTA — Perfil e Pedidos
   ---------------------------------------------------------------------
   A área de conta vinha com o CSS cru do WooCommerce: tabela larga, links
   em lista, nada da identidade da loja. Aqui ela usa a MESMA linguagem já
   estabelecida no checkout — campos de raio 14px com contorno morno, tecla
   física vermelha, títulos em Poppins, seções separadas por espaço e fio
   claro em vez de caixa dentro de caixa.

   Os tokens são os mesmos do checkout, redeclarados aqui com fallback
   porque este arquivo carrega sozinho, sem depender do fancy-checkout.css.
   ===================================================================== */
.woocommerce-account .page-content {
	background: #fff;
	padding-top: 0;
}

/* ---------- Título da página ----------
   Vinha com o estilo cru do tema pai: 40px, peso 500, cinza-escuro e à
   esquerda — nada a ver com o resto da loja. Recebe o mesmo tratamento do
   "Finalização de compra": vermelho da marca, centralizado, peso 800.

   Poppins, e NÃO a fonte de título (OBO Star), pelo mesmo motivo do
   checkout: o arquivo instalado da OBO não tem glifo acentuado, e "Minha
   conta" não tem acento hoje — mas qualquer renomeação ("Minhas Informações")
   poderia ter, e aí a letra acentuada cairia noutra fonte no meio da palavra.

   O respiro segue a mesma lógica do checkout: mais espaço acima (separando
   do cabeçalho) do que abaixo, porque o título pertence ao que vem depois
   dele. Padding, e não margem, porque margem colapsaria através do
   `.page-header` — que não tem borda nem padding — e se perderia. */
.woocommerce-account .page-header {
	padding: 34px 0 0;
}
.woocommerce-account .page-header .entry-title {
	font-family: 'Poppins', system-ui, sans-serif;
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--fancy-vermelho, #A80B1E);
	text-align: center;
	margin: 0 0 26px;
}

.woocommerce-account .woocommerce {
	--fc-radius: 20px;
	--fc-radius-sm: 14px;
	--fc-borda: #f0e9ea;
	--fc-borda-campo: #e7dcde;
	--fc-campo: #fdfbfb;
	--fc-vermelho: var(--fancy-vermelho, #A80B1E);
	--fc-texto: var(--fancy-texto, #1e1e1e);
	--fc-cinza: var(--fancy-cinza-texto, #6b6b6b);

	max-width: 780px;
	margin: 0 auto;
	padding: 0 4px 64px;
	font-family: 'Poppins', sans-serif;
	color: var(--fc-texto);
}

/* O WooCommerce usa um grid de duas colunas (menu à esquerda, conteúdo à
   direita). Duas abas no topo funcionam melhor no celular, então a coluna
   morre e tudo vira uma pilha. */
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-navigation {
	width: 100%;
	float: none;
	margin: 0;
}

/* ---------- Abas ---------- */
.fancy-conta-nav {
	display: flex;
	gap: 8px;
	margin: 0 0 30px;
	border-bottom: 1px solid var(--fc-borda);
}
.fancy-conta-aba {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	font-size: 15px;
	font-weight: 600;
	color: var(--fc-cinza);
	text-decoration: none;
	border-bottom: 2.5px solid transparent;
	margin-bottom: -1px;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.fancy-conta-aba:hover { color: var(--fc-texto); }
.fancy-conta-aba.is-ativa {
	color: var(--fc-vermelho);
	border-bottom-color: var(--fc-vermelho);
}
.fancy-conta-aba i { font-size: 14px; }

/* ---------- Avisos do WooCommerce ---------- */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info {
	border-radius: var(--fc-radius-sm);
	border: 1px solid var(--fc-borda);
	background: var(--fc-campo);
	font-size: 14.5px;
	padding: 14px 16px;
	margin-bottom: 22px;
	list-style: none;
}
.woocommerce-account .woocommerce-message { border-color: #bfe3cd; background: #f2fbf5; }
.woocommerce-account .woocommerce-error   { border-color: #f0c9ce; background: #fdf4f5; }

/* =====================================================================
   PERFIL
   ===================================================================== */
.fancy-perfil-bloco {
	padding-bottom: 28px;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--fc-borda);
}
.fancy-perfil-bloco h2 {
	font-size: 17.5px;
	font-weight: 700;
	margin: 0 0 18px;
	color: var(--fc-texto);
}

/* Foto ao lado dos dados no desktop; empilhado no celular (ver o media
   query no fim do arquivo). */
.fancy-perfil-topo {
	display: flex;
	gap: 28px;
	align-items: flex-start;
}
.fancy-perfil-identidade { flex: 1 1 auto; min-width: 0; }

.fancy-perfil-foto {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.fancy-perfil-foto-img {
	width: 104px;
	height: 104px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--fc-campo);
	border: 1.6px solid var(--fc-borda-campo);
	display: flex;
	align-items: center;
	justify-content: center;
}
.fancy-perfil-foto-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.fancy-perfil-foto-img i {
	font-size: 40px;
	color: #d9cdd0;
}
/* O <input type=file> nativo não aceita estilo; o rótulo faz o papel de
   botão e o input fica escondido dentro dele — clicar no rótulo abre o
   seletor de arquivos de graça, sem JS. */
.fancy-perfil-foto-btn {
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: var(--fc-vermelho);
	text-decoration: underline;
}
.fancy-perfil-foto-btn input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* ---------- Campos ---------- */
.fancy-campo { margin: 0 0 16px; }
.fancy-campo label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--fc-cinza);
	margin-bottom: 6px;
}
.fancy-campo input[type="text"],
.fancy-campo input[type="tel"],
.fancy-campo select {
	width: 100%;
	box-sizing: border-box;
	min-height: 52px;
	padding: 0 16px;
	border: 1px solid var(--fc-borda-campo);
	border-radius: var(--fc-radius-sm);
	background: var(--fc-campo);
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	color: var(--fc-texto);
}
.fancy-campo select { padding-right: 40px; }
.fancy-campo input:focus,
.fancy-campo select:focus {
	outline: none;
	border-color: var(--fc-vermelho);
	box-shadow: 0 0 0 3px rgba(168, 11, 30, 0.10);
}
.fancy-campo small {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--fc-cinza);
}
.fancy-opcional { font-weight: 400; text-transform: none; }

/* E-mail: mostrado como texto, com cadeado. Um <input disabled> pareceria
   um campo quebrado; texto com cadeado diz "isto é assim de propósito". */
.fancy-campo--travado .fancy-campo-valor {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 52px;
	padding: 0 16px;
	border: 1px dashed var(--fc-borda-campo);
	border-radius: var(--fc-radius-sm);
	background: #faf7f7;
	font-size: 15px;
	color: var(--fc-cinza);
	word-break: break-all;
}
.fancy-campo--travado i { color: #c7b9bc; font-size: 13px; flex: 0 0 auto; }

.fancy-campo-par {
	display: flex;
	gap: 12px;
}
.fancy-campo-par > .fancy-campo { flex: 1 1 0; min-width: 0; }

/* ---------- Botões ---------- */
.fancy-btn-primario,
.fancy-btn-secundario {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px 22px;
	border-radius: 12px;
	font-family: 'Poppins', sans-serif;
	font-size: 14.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.005em;
	line-height: 1.25;
	white-space: normal;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.22s ease;
}
/* A mesma "tecla física" do botão de finalizar compra.

   POR QUE CADA REGRA APARECE DUAS VEZES, com e sem `button` na frente:
   `.fancy-btn-primario` é usado em dois tipos de elemento — <a> no thankyou e
   nos pedidos, <button type="submit"> no formulário do perfil. Só a versão
   <button> corre risco, e é onde o item 3.4 do relatório continuava aberto: o
   botão "Salvar alterações" saía como caixa branca com contorno rosa, não como
   a tecla vermelha.

   São DOIS adversários, os dois do tema pai (hello-elementor):
     reset.css   `[type="submit"] { background-color: transparent;
                  border: 1px solid #c36; color: #c36 }`        -> (0,1,0)
     style.css   `[type="submit"]:hover, [type="submit"]:focus
                  { background-color: transparent; color: inherit }` -> (0,2,0)
   (o segundo é o neutralizador que cancela o rosa do primeiro; ver o comentário
   no topo do style.css).

   `.fancy-btn-primario` sozinho vale (0,1,0): EMPATA com o reset no estado
   normal — quem ganha é o arquivo que carregar depois — e PERDE de lavada para
   o (0,2,0) no hover e no focus. Prefixando com o elemento, `button.fancy-btn-
   primario` vira (0,1,1) e `...:hover` vira (0,2,1): ganha dos dois por
   especificidade, sem depender de ordem de carregamento.

   `:focus` declarado JUNTO com `:hover`, e não só ele: o neutralizador ataca os
   dois estados com as mesmas declarações. Cobrir só o hover deixaria o botão
   perder a cor ao ser alcançado pelo teclado — o mesmo defeito, num caminho que
   ninguém testa de olho. */
.fancy-btn-primario,
button.fancy-btn-primario {
	background: var(--fc-vermelho);
	color: #FCE9EA;
	border: none;
	box-shadow: 0 6px 0 #6d0512;
}
.fancy-btn-primario:hover,
.fancy-btn-primario:focus,
button.fancy-btn-primario:hover,
button.fancy-btn-primario:focus {
	background: #b81326;
	color: #FCE9EA;
	border: none;
}
.fancy-btn-primario:active,
button.fancy-btn-primario:active {
	background: #b81326;
	color: #FCE9EA;
	transform: translateY(4px);
	box-shadow: 0 2px 0 #6d0512;
}
.fancy-btn-secundario,
button.fancy-btn-secundario {
	background: #fff;
	color: var(--fc-vermelho);
	border: 1.6px solid var(--fc-borda-campo);
}
.fancy-btn-secundario:hover,
.fancy-btn-secundario:focus,
button.fancy-btn-secundario:hover,
button.fancy-btn-secundario:focus {
	background: #fff;
	border-color: var(--fc-vermelho);
	color: var(--fc-vermelho);
}

.fancy-perfil-salvar { width: 100%; }

/* ---------- Sair ---------- */
.fancy-perfil-sair {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: 34px;
	padding-top: 26px;
	border-top: 1px solid var(--fc-borda);
}
.fancy-perfil-sair strong { display: block; font-size: 15px; }
.fancy-perfil-sair small {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	color: var(--fc-cinza);
}

/* =====================================================================
   PEDIDOS
   ===================================================================== */
.fancy-pedido {
	border: 1px solid var(--fc-borda);
	border-radius: var(--fc-radius);
	padding: 18px 20px;
	margin-bottom: 16px;
	background: #fff;
}
.fancy-pedido-topo {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--fc-borda);
}
.fancy-pedido-num {
	display: block;
	font-size: 15.5px;
	font-weight: 700;
}
.fancy-pedido-data {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: var(--fc-cinza);
}

/* O status é o que a cliente procura primeiro — por isso ganha cor e não
   só texto. Quatro tons, do "esperando" ao "pronto". */
.fancy-pedido-status {
	flex: 0 0 auto;
	padding: 6px 13px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
}
.fancy-status--espera   { background: #fdf6e7; color: #8a6d1f; }
.fancy-status--andando  { background: #fdeef0; color: var(--fc-vermelho); }
.fancy-status--pronto   { background: #eef8f1; color: #1f7a45; }
.fancy-status--problema { background: #f4f4f4; color: #6b6b6b; }

.fancy-pedido-itens {
	list-style: none;
	margin: 0;
	padding: 0;
}
.fancy-pedido-item {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	padding: 14px 0;
	border-bottom: 1px solid var(--fc-borda);
}
.fancy-pedido-item:last-child { border-bottom: none; }
.fancy-pedido-foto img {
	width: 52px;
	height: 52px;
	object-fit: cover;
	border-radius: var(--fc-radius-sm);
	border: 1px solid var(--fc-borda);
	display: block;
}
/* `min-width: 0` para o nome longo poder quebrar: sem isso o item flex
   assume a largura do conteúdo e empurra o preço para fora do cartão. */
.fancy-pedido-desc {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 14px;
	line-height: 1.45;
}
.fancy-pedido-opcoes,
.fancy-pedido-qtd {
	font-size: 12.5px;
	color: var(--fc-cinza);
}
.fancy-pedido-valor {
	flex: 0 0 auto;
	font-weight: 700;
	font-size: 14px;
}

.fancy-pedido-base {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding-top: 14px;
	border-top: 1px solid var(--fc-borda);
}
.fancy-pedido-entrega {
	font-size: 13px;
	color: var(--fc-cinza);
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.fancy-pedido-total {
	display: inline-flex;
	align-items: baseline;
	gap: 9px;
}
.fancy-pedido-total span { font-size: 14px; color: var(--fc-cinza); }
.fancy-pedido-total strong {
	font-size: 20px;
	font-weight: 800;
	color: var(--fc-vermelho);
}

.fancy-pedidos-paginas {
	display: flex;
	gap: 10px;
	margin-top: 20px;
}

.fancy-pedidos-vazio {
	text-align: center;
	padding: 50px 20px;
}
.fancy-pedidos-vazio i {
	font-size: 42px;
	color: #ddd0d3;
	margin-bottom: 16px;
}
.fancy-pedidos-vazio h2 {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 8px;
}
.fancy-pedidos-vazio p {
	font-size: 14.5px;
	color: var(--fc-cinza);
	margin: 0 0 22px;
}

/* =====================================================================
   CELULAR
   ===================================================================== */
@media (max-width: 600px) {
	.woocommerce-account .woocommerce { padding: 0 0 48px; }

	/* Foto acima dos dados: lado a lado em 360px deixaria os campos com
	   metade da largura útil. */
	.fancy-perfil-topo {
		flex-direction: column;
		align-items: center;
		gap: 18px;
	}
	.fancy-perfil-identidade { width: 100%; }

	/* Os pares (Nome/Sobrenome, CEP/Estado, Número/Bairro) viram uma coluna:
	   com ~150px cada, "Sobrenome" e "Complemento" não caberiam no rótulo
	   nem no valor. */
	.fancy-campo-par { flex-direction: column; gap: 0; }

	.fancy-conta-aba { flex: 1 1 0; justify-content: center; padding: 12px 8px; font-size: 14px; }

	.fancy-pedido { padding: 16px; }
	.fancy-pedido-topo { flex-direction: column; }
	.fancy-perfil-sair { flex-direction: column; align-items: stretch; }
	.fancy-perfil-sair .fancy-btn-secundario { width: 100%; }
}

/* Campos de senha herdam o mesmo desenho dos outros — sem isto viriam com o
   estilo cru do navegador, quebrando a coluna no meio do formulário. */
.fancy-campo input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	min-height: 52px;
	padding: 0 16px;
	border: 1px solid var(--fc-borda-campo);
	border-radius: var(--fc-radius-sm);
	background: var(--fc-campo);
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	color: var(--fc-texto);
}
.fancy-campo input[type="password"]:focus {
	outline: none;
	border-color: var(--fc-vermelho);
	box-shadow: 0 0 0 3px rgba(168, 11, 30, 0.10);
}
.fancy-perfil-ajuda {
	margin: -10px 0 16px;
	font-size: 13px;
	color: var(--fc-cinza);
}