/*
 * Reskin leve da página nativa de conta do WooCommerce (/my-account/),
 * pra puxar pro visual da Maro (cores, tipografia, cantos arredondados)
 * sem reescrever a lógica de login/senha — zero JS, zero risco de
 * segurança, só CSS em cima do HTML que o WooCommerce já gera.
 *
 * Confirmado no site ao vivo (20/10/2026): tema Customify + Elementor,
 * markup do formulário é o padrão do WooCommerce
 * (.woocommerce-form-login, .woocommerce-Input, etc.) — sem customização
 * própria do tema nesses seletores, então é seguro estilizar direto.
 *
 * Fase 4a do plano: reskin da página nativa, sem reimplementar login em
 * JS (fica pro backlog — Fase 4b — só se houver evidência real de atrito
 * na conversão).
 */

:root {
  --maro-ink: #1c1917; /* stone-900 */
  --maro-ink-soft: #57534e; /* stone-600 */
  --maro-muted: #78716c; /* stone-500 */
  --maro-border: #d6d3d1; /* stone-300 */
  --maro-border-soft: #e7e5e4; /* stone-200 */
  --maro-bg-soft: #fafaf9; /* stone-50 */
}

/* Título da página ("Entrar", "Minha conta", "Criar conta"...) */
.woocommerce-account .entry-content > h1,
.woocommerce-account .entry-content > h2:first-child,
.woocommerce-account .woocommerce > h2:first-child {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.875rem;
  color: var(--maro-ink);
  margin-bottom: 1.5rem;
}

/*
 * Centraliza SÓ a tela de login/"esqueci senha" (quando a pessoa ainda não
 * está logada). Importante: isso não pode valer pra página inteira — a
 * mesma classe .woocommerce envolve também o dashboard de quem já está
 * logado, e lá o menu de navegação + conteúdo precisam ficar alinhados à
 * esquerda normalmente, não centralizados (foi exatamente esse escopo
 * largo demais que deixou o menu da conta logada "flutuando" fora do
 * lugar). .woocommerce-form-login só existe na tela de login, então o
 * seletor abaixo nunca afeta quem já está logado.
 */
.woocommerce-account:has(.woocommerce-form-login) .woocommerce {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.woocommerce-account:has(.woocommerce-form-login) .woocommerce > h2 {
  align-self: stretch;
  text-align: center;
}

/* Card do formulário de login */
.woocommerce-form-login {
  width: 100%;
  max-width: 26rem;
  margin: 0 !important;
  padding: 2rem;
  background: #fff;
  border: 1px solid var(--maro-border-soft);
  border-radius: 1.25rem;
  box-shadow: 0 1px 3px rgba(28, 25, 23, 0.06);
}

.woocommerce-form-login .form-row label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--maro-ink-soft);
}

.woocommerce-form-login .woocommerce-Input {
  width: 100%;
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--maro-border);
  border-radius: 9999px;
  font-size: 0.95rem;
  color: var(--maro-ink);
  background: var(--maro-bg-soft);
  transition: border-color 150ms ease, background-color 150ms ease;
}

.woocommerce-form-login .woocommerce-Input:focus {
  outline: none;
  border-color: var(--maro-ink);
  background: #fff;
}

.woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--maro-ink-soft);
  margin-bottom: 1rem;
}

.woocommerce-form-login__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.75rem 1.75rem;
  background: var(--maro-ink);
  color: #fff;
  border: none;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: transform 150ms ease;
}

.woocommerce-form-login__submit:hover {
  transform: scale(1.02);
}

.woocommerce-LostPassword {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.875rem;
}

.woocommerce-LostPassword a {
  color: var(--maro-ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.woocommerce-LostPassword a:hover {
  color: var(--maro-ink);
}

/*
 * O WooCommerce carrega um CSS próprio (woocommerce-layout.css) com um
 * layout de 2 colunas flutuantes pra essa página (menu 30% à esquerda,
 * conteúdo 68% à direita, lado a lado) — isso vencia nosso CSS de abas
 * (mesma especificidade, carregado depois). Precisa de !important porque
 * não dá pra controlar com certeza a ordem de carregamento entre o CSS do
 * WooCommerce e o nosso.
 */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  float: none !important;
  width: 100% !important;
}

/*
 * Navegação da conta (Dashboard, Pedidos, Endereços, Dados, Sair) — abas
 * horizontais numa linha só, EM CIMA do conteúdo (não ao lado), com scroll
 * lateral se não couber. Mesmo padrão das abas de "Compre por formato" na
 * listagem, pra manter a mesma linguagem visual nas duas telas de
 * navegação por abas do site.
 */
.woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 1.75rem;
  list-style: none;
  padding: 0 0 0.875rem;
  margin: 0 0 2rem;
  border-bottom: 1px solid var(--maro-border-soft);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
  display: none;
}

.woocommerce-MyAccount-navigation ul li {
  flex: none;
}

.woocommerce-MyAccount-navigation ul li a {
  display: inline-block;
  padding-bottom: 0.875rem;
  margin-bottom: -0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--maro-muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}

.woocommerce-MyAccount-navigation ul li a:hover {
  color: var(--maro-ink);
}

.woocommerce-MyAccount-navigation ul li.is-active a {
  color: var(--maro-ink);
  font-weight: 600;
  border-color: var(--maro-ink);
}

/* Texto do dashboard ("Hello X", "From your account...") */
.woocommerce-MyAccount-content > p {
  color: var(--maro-ink-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.woocommerce-MyAccount-content > p:first-child {
  color: var(--maro-ink);
  font-size: 1.05rem;
}
.woocommerce-MyAccount-content mark {
  background: none;
  color: inherit;
  font-weight: 600;
}

/* Cards do Painel (último pedido + atalhos) */
.maro-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1.75rem;
}

.maro-dashboard-card {
  display: block;
  padding: 1.25rem 1.5rem;
  background: #fff;
  border: 1px solid var(--maro-border-soft);
  border-radius: 1rem;
  text-decoration: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.maro-dashboard-card h3 {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--maro-muted);
  margin-bottom: 0.75rem;
}

.maro-dashboard-card p {
  font-size: 0.875rem;
  color: var(--maro-ink-soft);
}

.maro-dashboard-card-total {
  margin-top: 0.5rem;
  font-weight: 600;
  color: var(--maro-ink);
}

.maro-dashboard-link {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--maro-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.maro-dashboard-card--link:hover {
  border-color: var(--maro-ink);
  box-shadow: 0 1px 3px rgba(28, 25, 23, 0.08);
}

.maro-dashboard-card--link h3 {
  color: var(--maro-ink);
}

/* Miniatura do produto na tabela "Detalhes do pedido" */
.maro-order-item {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.maro-order-item-thumb {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 0.625rem;
  border: 1px solid var(--maro-border-soft);
}

/* Tabela de pedidos */
.woocommerce-orders-table {
  border-collapse: collapse;
  width: 100%;
}

.woocommerce-orders-table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--maro-muted);
  text-align: left;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--maro-border-soft);
}

.woocommerce-orders-table td {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--maro-border-soft);
  font-size: 0.875rem;
  color: var(--maro-ink);
}

.woocommerce-orders-table .button {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.4rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--maro-bg-soft);
  color: var(--maro-ink);
  border: 1px solid var(--maro-border);
  text-decoration: none;
}

/*
 * Endereços (visualização em /my-account/edit-address/) — por padrão o
 * WooCommerce renderiza o endereço dentro de <address>, que todo navegador
 * estiliza em itálico sem nenhuma hierarquia visual (tudo com o mesmo peso).
 * Aqui: nome em negrito, resto em cinza, link de editar alinhado ao lado do
 * título do cartão em vez de solto embaixo.
 */
.woocommerce-MyAccount-content .woocommerce-Addresses {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.woocommerce-MyAccount-content .woocommerce-Address {
  flex: 1 1 280px;
  min-width: 0;
}

.woocommerce-MyAccount-content .woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.woocommerce-MyAccount-content .woocommerce-Address-title h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--maro-ink);
}

.woocommerce-MyAccount-content .woocommerce-Address-title .edit {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: 9999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--maro-ink);
  background: var(--maro-bg-soft);
  border: 1px solid var(--maro-border);
  text-decoration: none;
}

.woocommerce-MyAccount-content .woocommerce-Address-title .edit:hover {
  background: #fff;
  border-color: var(--maro-ink);
}

.woocommerce-MyAccount-content address {
  font-style: normal;
  padding: 1.25rem 1.5rem;
  background: #fff;
  border: 1px solid var(--maro-border-soft);
  border-radius: 1rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--maro-ink-soft);
}

/*
 * Linhas individuais do endereço, separadas via JS (maro-account-theme.js
 * -> formatAddressBlocks) já que o WooCommerce entrega tudo como texto puro
 * separado por <br>, sem marcação por campo.
 */
.maro-addr-line {
  display: block;
}

.maro-addr-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--maro-ink);
  margin-bottom: 0.2rem;
}

.maro-addr-street {
  font-weight: 600;
  color: var(--maro-ink);
}

.maro-addr-detail {
  font-size: 0.875rem;
  color: var(--maro-ink-soft);
}

.maro-addr-cep {
  display: inline-block;
  margin-top: 0.4rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #92400e; /* mesmo tom do .woocommerce-info, pra ficar dentro da paleta já usada */
}

.maro-addr-country {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--maro-muted);
}

/*
 * Formulários de edição (endereço de cobrança/entrega, dados da conta) —
 * mesma linguagem visual do formulário de login (label maiúscula, input em
 * pílula), só que generalizada pra qualquer .form-row dentro da área
 * logada, não só .woocommerce-form-login.
 */
.woocommerce-MyAccount-content .woocommerce-address-fields,
.woocommerce-MyAccount-content .woocommerce-EditAccountForm {
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}

.woocommerce-MyAccount-content .woocommerce-address-fields .form-row label,
.woocommerce-MyAccount-content .woocommerce-EditAccountForm .form-row label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--maro-ink-soft);
}

.woocommerce-MyAccount-content .woocommerce-address-fields .woocommerce-Input,
.woocommerce-MyAccount-content .woocommerce-EditAccountForm .woocommerce-Input,
.woocommerce-MyAccount-content .woocommerce-address-fields select,
.woocommerce-MyAccount-content .woocommerce-EditAccountForm select {
  width: 100%;
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--maro-border);
  border-radius: 9999px;
  font-size: 0.95rem;
  color: var(--maro-ink);
  background: var(--maro-bg-soft);
  transition: border-color 150ms ease, background-color 150ms ease;
}

.woocommerce-MyAccount-content .woocommerce-address-fields .woocommerce-Input:focus,
.woocommerce-MyAccount-content .woocommerce-EditAccountForm .woocommerce-Input:focus,
.woocommerce-MyAccount-content .woocommerce-address-fields select:focus,
.woocommerce-MyAccount-content .woocommerce-EditAccountForm select:focus {
  outline: none;
  border-color: var(--maro-ink);
  background: #fff;
}

.woocommerce-MyAccount-content .woocommerce-address-fields .form-row,
.woocommerce-MyAccount-content .woocommerce-EditAccountForm .form-row {
  margin-bottom: 1.1rem;
}

.woocommerce-MyAccount-content .woocommerce-address-fields button[type="submit"],
.woocommerce-MyAccount-content .woocommerce-EditAccountForm button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.75rem;
  background: var(--maro-ink);
  color: #fff;
  border: none;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: transform 150ms ease;
}

.woocommerce-MyAccount-content .woocommerce-address-fields button[type="submit"]:hover,
.woocommerce-MyAccount-content .woocommerce-EditAccountForm button[type="submit"]:hover {
  transform: scale(1.02);
}

/* Feedback da busca de CEP (maro-account-theme.js -> setCepStatus) */
.maro-cep-status {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--maro-muted);
}

.maro-cep-status--error {
  color: #991b1b;
}

/* Avisos (erro de login, senha trocada, etc.) */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  list-style: none;
  padding: 0.875rem 1.25rem;
  border-radius: 0.875rem;
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

.woocommerce-message {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.woocommerce-error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.woocommerce-info {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}