/* ==========================================================================
   WS GLASS — Telas de acesso e segurança (js/account-ui.js): conta de cliente e painel da loja.
   As cores vêm de variáveis --wa-*; cada produto pode redefini-las para a própria identidade
   (a HALTTERADA redefine em loja.css). Sem variáveis redefinidas, vale o WS Glass.
   ========================================================================== */
:root {
  --wa-surface: var(--ws-surface-2, rgba(255, 255, 255, 0.04));
  --wa-surface-2: var(--ws-surface-3, rgba(255, 255, 255, 0.08));
  --wa-border: var(--ws-border, rgba(255, 255, 255, 0.12));
  --wa-text-2: var(--ws-text-2, #b8b8b8);
  --wa-text-3: var(--ws-text-3, #8a8a8a);
  --wa-link: var(--ws-accent-ink, #00c853);
  --wa-danger: var(--ws-danger, #ff4d4f);
  --wa-radius: var(--ws-radius-lg, 1rem);
  --wa-radius-sm: var(--ws-radius-sm, 0.5rem);
}

.wa-stack { display: flex; flex-direction: column; gap: var(--ws-space-4, 1rem); }
.wa-form { display: flex; flex-direction: column; gap: var(--ws-space-4, 1rem); }
.wa-form__error:empty { display: none; }
.wa-grid-2 { display: grid; gap: var(--ws-space-4, 1rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.wa-actions { display: flex; flex-wrap: wrap; gap: var(--ws-space-2, 0.5rem); align-items: center; justify-content: flex-end; }
.wa-actions--start { justify-content: flex-start; }
.wa-text { margin: 0; color: var(--wa-text-2); font-size: var(--ws-text-sm, 0.875rem); }
.wa-link { color: var(--wa-link); font-weight: 600; text-decoration: none; }
.wa-link:hover { text-decoration: underline; }
.wa-chips { display: flex; flex-wrap: wrap; gap: var(--ws-space-2, 0.5rem); }

.wa-card { display: flex; flex-direction: column; gap: var(--ws-space-4, 1rem); padding: var(--ws-space-5, 1.25rem); border: 1px solid var(--wa-border); border-radius: var(--wa-radius); background: var(--wa-surface); min-width: 0; }
.wa-card__title { margin: 0; display: flex; align-items: center; gap: var(--ws-space-2, 0.5rem); font-size: var(--ws-text-lg, 1.125rem); font-weight: 700; }
.wa-card__title .ws-icon { color: var(--wa-link); }
.wa-card--danger { border-color: color-mix(in srgb, var(--wa-danger) 40%, var(--wa-border)); }

.wa-rows { list-style: none; margin: 0; padding: 0; }
.wa-rows > li + li { border-top: 1px solid var(--wa-border); }
.wa-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ws-space-3, 0.75rem); min-height: 3.25rem; padding: var(--ws-space-3, 0.75rem) 0; }
.wa-row__body { flex: 1 1 14rem; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wa-row__title { font-weight: 600; overflow-wrap: anywhere; }
.wa-row__meta { font-size: var(--ws-text-xs, 0.75rem); color: var(--wa-text-3); overflow-wrap: anywhere; }

/* Telas de acesso: cartão centralizado dentro da página do produto (cabeçalho e rodapé do produto continuam). */
.wa-auth { display: grid; place-items: center; padding: var(--ws-space-6, 1.5rem) 0; }
.wa-auth__card { width: min(100%, 27rem); display: flex; flex-direction: column; gap: var(--ws-space-4, 1rem); padding: clamp(1.25rem, 1rem + 2vw, 2rem); border: 1px solid var(--wa-border); border-radius: var(--wa-radius); background: var(--wa-surface); }
.wa-auth__card:focus { outline: none; }
.wa-auth__brand { margin: 0; display: flex; align-items: center; gap: var(--ws-space-2, 0.5rem); font-size: var(--ws-text-xs, 0.75rem); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wa-link); }
.wa-auth__title { margin: 0; font-size: var(--ws-text-2xl, 1.5rem); line-height: 1.15; }
.wa-auth__lead { margin: 0; color: var(--wa-text-2); font-size: var(--ws-text-sm, 0.875rem); }
.wa-auth__foot { margin: 0; text-align: center; font-size: var(--ws-text-sm, 0.875rem); color: var(--wa-text-2); }
.wa-auth__foot a { color: var(--wa-link); font-weight: 600; }
.wa-code-input { font-family: var(--ws-font-mono, ui-monospace, monospace); font-size: var(--ws-text-xl, 1.25rem) !important; letter-spacing: 0.3em; text-align: center; }
.wa-doc { display: flex; flex-direction: column; gap: var(--ws-space-3, 0.75rem); font-size: var(--ws-text-sm, 0.875rem); max-height: 60vh; overflow: auto; }
.wa-doc p { margin: 0; }
.wa-doc__h { margin: var(--ws-space-2, 0.5rem) 0 0; font-size: var(--ws-text-base, 1rem); }

/* Verificação em duas etapas */
.wa-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ws-space-3, 0.75rem); }
.wa-modal--wide { width: min(40rem, calc(100vw - 2rem)); }
.wa-steps { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: var(--ws-space-2, 0.5rem); font-size: var(--ws-text-sm, 0.875rem); color: var(--wa-text-2); }
.wa-qr { align-self: center; width: min(14rem, 70vw); padding: 0.75rem; border-radius: var(--wa-radius-sm); background: #fff; }
.wa-qr svg { display: block; width: 100%; height: auto; }
.wa-secret { margin: 0; padding: var(--ws-space-3, 0.75rem) var(--ws-space-4, 1rem); border-radius: var(--wa-radius-sm); background: var(--wa-surface-2); font-family: var(--ws-font-mono, ui-monospace, monospace); font-size: var(--ws-text-sm, 0.875rem); text-align: center; overflow-wrap: anywhere; user-select: all; }
.wa-codes { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ws-space-2, 0.5rem); }
.wa-codes li { padding: var(--ws-space-2, 0.5rem); border-radius: var(--wa-radius-sm); background: var(--wa-surface-2); font-family: var(--ws-font-mono, ui-monospace, monospace); text-align: center; }

/* Navegação da conta (abas) */
.wa-nav { display: flex; gap: var(--ws-space-1, 0.25rem); overflow-x: auto; border-bottom: 1px solid var(--wa-border); margin-bottom: var(--ws-space-5, 1.25rem); scrollbar-width: thin; }
.wa-nav a { flex: none; display: inline-flex; align-items: center; gap: var(--ws-space-2, 0.5rem); min-height: 2.75rem; padding: 0 var(--ws-space-4, 1rem); color: var(--wa-text-3); font-weight: 700; text-decoration: none; white-space: nowrap; }
.wa-nav a[aria-current="page"] { color: inherit; box-shadow: inset 0 -2px 0 var(--wa-link); }
.wa-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ws-space-3, 0.75rem); margin-bottom: var(--ws-space-4, 1rem); }
.wa-head h1, .wa-head h2 { margin: 0; }
.wa-head p { margin: 0; color: var(--wa-text-3); font-size: var(--ws-text-sm, 0.875rem); overflow-wrap: anywhere; }