/* forms.css — estilos app-level de validação e UX de senha.
   Carregado por padrão em todos os temas e pelo admin, para que validação,
   olho de senha e força de senha funcionem em qualquer tema.

   TODA cor/medida sai de um token do tema com fallback: um tema define
   --accent, --muted, --border, --radius etc. e este arquivo se adapta, sem
   precisar sobrescrever nada. Se ainda assim o tema quiser marcação/estilo
   próprios, pode recusar este CSS com app_head($seo, ['core_css' => false])
   e cuidar de .field-error/.password-* por conta própria. */

.field-error { display: block; color: var(--danger, #b91c1c); font-size: 0.85rem; margin-top: 0.25rem; }
input.is-invalid, textarea.is-invalid, select.is-invalid { border-color: var(--danger, #b91c1c) !important; }

/* Olho de mostrar/ocultar senha */
.password-wrap { position: relative; display: block; }
.password-wrap > input { width: 100%; padding-right: 2.4rem; }
.password-toggle {
  position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; font-size: 1.05rem; line-height: 1;
  padding: 0.2rem; opacity: 0.55;
}
.password-toggle:hover, .password-toggle.is-on { opacity: 1; }
/* Todo tema/admin define `button:active { transform: translateY(1px) }` como
   micro-interação de clique — especificidade (0,1,1) vence a centralização
   vertical acima (0,1,0) e desloca o botão durante o mousedown, fazendo o
   mouseup/click cair no input por baixo em vez do próprio botão (o "olhinho"
   parecia não responder). `:active` aqui sobe a especificidade pra (0,2,0) e
   preserva a centralização. */
.password-toggle:active { transform: translateY(-50%); }

/* Barra de força + regras (campos de definição de senha) */
.password-strength { margin-top: 0.45rem; }
.password-bar { height: 6px; border-radius: var(--radius-sm, 4px); background: var(--border, #e5e7eb); overflow: hidden; }
.password-bar > span {
  display: block; height: 100%; width: 100%; background: var(--danger, #ef4444);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.2s, background 0.2s;
}
.password-bar.strength-2 > span { background: var(--warning, #f59e0b); }
.password-bar.strength-3 > span { background: var(--warning-strong, #eab308); }
.password-bar.strength-4 > span { background: var(--success, #22c55e); }
.password-level { font-size: 0.8rem; color: var(--muted, #6b7280); margin-top: 0.2rem; }
.password-rules { list-style: none; padding: 0; margin: 0.35rem 0 0; font-size: 0.82rem; }
.password-rules li { color: var(--muted, #6b7280); padding-left: 1.3rem; position: relative; line-height: 1.5; }
.password-rules li::before { content: '○'; position: absolute; left: 0; }
.password-rules li.is-met { color: var(--success, #16a34a); }
.password-rules li.is-met::before { content: '✓'; font-weight: 700; }

/* Endereço estruturado (padrão BR) */
.address-fields { border: 1px solid var(--border, #e5e7eb); border-radius: var(--radius, 8px); padding: 0.75rem 1rem 1rem; margin: 0.75rem 0; }
.address-fields > legend { font-weight: 600; font-size: 0.95rem; padding: 0 0.4rem; }
.address-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.address-row > label { flex: 1 1 45%; min-width: 8rem; }
.cep-status { display: block; color: var(--muted, #6b7280); font-size: 0.8rem; margin-top: 0.2rem; min-height: 1rem; }

/* Formas de entrega no checkout */
.shipping-methods { border: 1px solid var(--border, #e5e7eb); border-radius: var(--radius, 8px); padding: 0.75rem 1rem 1rem; margin: 0.75rem 0; }
.shipping-methods > legend { font-weight: 600; font-size: 0.95rem; padding: 0 0.4rem; }
.shipping-option {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.15rem 0.6rem;
  padding: 0.55rem 0.4rem; border-bottom: 1px solid var(--border, #f1f1f4); cursor: pointer;
}
.shipping-option:last-child { border-bottom: 0; }
.shipping-option .shipping-name { font-weight: 500; }
.shipping-option .shipping-desc { grid-column: 2; color: var(--muted, #6b7280); font-size: 0.82rem; }
.shipping-option .shipping-price { grid-column: 3; grid-row: 1; font-weight: 600; white-space: nowrap; }

/* Resumo de valores do checkout (bloco de CTA — acento tênue; tokens do tema com fallback) */
.checkout-summary {
    margin: 1.25rem 0; padding: 1rem 1.15rem;
    background: var(--accent-soft, #eef4ff);
    border: 1px solid var(--border-strong, #d0d5dd); border-radius: var(--radius, 8px);
}
.checkout-summary p { margin: 0.2rem 0; display: flex; justify-content: space-between; }
.checkout-summary p:last-child { border-top: 1px solid var(--border-strong, #d0d5dd); margin-top: 0.5rem; padding-top: 0.5rem; font-size: 1.1rem; }
.checkout-summary p:last-child strong { color: var(--accent, #2563eb); }

/* ── Acessibilidade (app-level, todos os temas) ──────────────────────────────
   Skip link: oculto até receber foco por teclado, aí aparece no topo. */
.skip-link {
  position: absolute; left: 0.5rem; top: -3rem; z-index: 1000;
  background: var(--accent, #0f5f5c); color: #fff;
  padding: 0.6rem 1rem; border-radius: 0 0 var(--radius, 6px) var(--radius, 6px);
  text-decoration: none; transition: top 0.15s ease;
}
.skip-link:focus { top: 0; outline: 2px solid #fff; outline-offset: 2px; }

/* Resumo de erros focável no envio com erro. */
.error-summary {
  margin: 0 0 1.25rem; padding: 0.9rem 1.1rem;
  border: 1px solid var(--danger, #b91c1c); border-radius: var(--radius, 6px);
  background: color-mix(in srgb, var(--danger, #b91c1c) 8%, transparent);
}
.error-summary:focus { outline: 2px solid var(--danger, #b91c1c); outline-offset: 2px; }
.error-summary__title { margin: 0 0 0.4rem; font-weight: 600; color: var(--danger, #b91c1c); }
.error-summary__list { margin: 0; padding-left: 1.2rem; }
.error-summary__list a { color: var(--danger, #b91c1c); }

/* Mensagem de erro por campo (a que o aria-describedby aponta). */
.field-error { display: block; color: var(--danger, #b91c1c); font-size: 0.85rem; margin-top: 0.25rem; }

/* ── Selo de status (app-level) ───────────────────────────────────────────────
   `status_badge()` é helper do NÚCLEO, então o estilo mínimo dele mora aqui —
   senão cada tema que mostrasse o status de um pedido teria de reinventar (ou,
   como acontecia, cuspir "paid" cru em inglês por não ter onde estilizar).

   Precisa funcionar em temas de fundo claro E escuro sem saber qual é. Por isso
   o texto usa os PRÓPRIOS tokens do tema (--fg sobre --soft é um par que o tema
   já garante legível) e a cor do estado vive só no ponto: um valor fixo aqui
   nunca teria contraste nos dois extremos. O rótulo ("Pago", "Falhou") é que
   carrega o significado — o ponto é reforço, não a informação.

   Duas armadilhas de cascata, e o seletor resolve as duas de uma vez:

   1. o ADMIN também carrega este arquivo, e já tem o selo dele em admin.css
      (com outros tons). Sem excluí-lo, propriedades daqui que o admin não
      redefine (borda, line-height) vazariam para lá. Daí o `:not(.admin)`.
   2. o `:where()` zera a especificidade do escopo — sem ele, `body:not(.admin)
      .badge` passaria a valer MAIS que o `.badge` de um tema, e o tema perderia
      o direito de substituir (o mfc, que tem selo próprio, seria o primeiro a
      quebrar). Com `:where()`, isto vale exatamente `.badge`: forms.css carrega
      antes do theme.css, então quem define ganha. */
:where(body:not(.admin)) .badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.15rem 0.6rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; line-height: 1.7; white-space: nowrap;
  background: var(--soft, #f3f4f6); color: var(--fg, #111827);
  border: 1px solid var(--border, #e5e7eb);
}
/* O ponto é sempre `currentColor`, nunca uma cor fixa: um tema que já estiliza o
   selo (mfc) define a cor do TEXTO, e um ponto de cor própria brigaria com ela.
   Assim o ponto acompanha qualquer tema de graça — inclusive os que ainda nem
   existem. */
:where(body:not(.admin)) .badge-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: currentColor; }

/* O estado entra como TINTA sobre o fundo do próprio tema, não como cor de
   texto: 16% mal move a luminância, então o par --fg/--bg que o tema já garante
   legível continua valendo em fundo claro e escuro. Fixar a cor no texto exigiria
   um valor que tivesse contraste nos dois extremos — não existe. */
:where(body:not(.admin)) .badge-ok     { background: color-mix(in srgb, #16a34a 16%, var(--bg, #fff)); border-color: color-mix(in srgb, #16a34a 38%, var(--bg, #fff)); }
:where(body:not(.admin)) .badge-warn   { background: color-mix(in srgb, #d97706 16%, var(--bg, #fff)); border-color: color-mix(in srgb, #d97706 38%, var(--bg, #fff)); }
:where(body:not(.admin)) .badge-danger { background: color-mix(in srgb, #dc2626 16%, var(--bg, #fff)); border-color: color-mix(in srgb, #dc2626 38%, var(--bg, #fff)); }
:where(body:not(.admin)) .badge-info   { background: color-mix(in srgb, #2563eb 16%, var(--bg, #fff)); border-color: color-mix(in srgb, #2563eb 38%, var(--bg, #fff)); }