/* =============================================================================
   AUTH — "auth portal" · shell funcional, sem cinema (readme §11)
   ============================================================================= */

.auth {
  min-height: calc(100svh - var(--header-h));
  display: grid; place-items: center;
  padding: var(--space-16) var(--container-pad) var(--space-24);
}
.auth__panel { width: 100%; max-width: 440px; }

/* O callback do login social (/Account/ExternalLogin) renderiza o componente COMPARTILHADO
   (Shared.Blazor.Authentication), com classes external-login* fixas nele. Elas entram nas MESMAS
   regras do painel de autenticação — nenhuma declaração duplicada, nenhum estilo paralelo. */
.auth__title, .external-login__title { font-size: var(--text-h2); margin-top: var(--space-7); }
.auth__lead, .external-login__lead, .external-login__hint { color: var(--text-muted); margin-top: var(--space-6); }
.external-login__account-name { display: block; margin-bottom: var(--space-4); color: var(--text-body); }

.field, .external-login__account { margin-top: var(--space-11); }
.field__label, .external-login__account-label {
  display: block; margin-bottom: var(--space-4);
  font-family: var(--font-mono); font-size: var(--text-mono-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--text-muted);
}
.field__input, .external-login__email {
  width: 100%; min-height: var(--tap-min);   /* inputs ≥44px (readme §13) */
  padding: var(--space-5) var(--space-7);
  background: var(--maia-surface-1); color: var(--text-body);
  border: 1px solid var(--border-card); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: var(--text-base);
  transition: border-color var(--dur-fast) var(--ease-hud);
}
.field__input:hover, .external-login__email:hover { border-color: var(--maia-line-strong); }
.field__input:focus, .external-login__email:focus { border-color: var(--accent); }

/* Estado de erro: borda + mensagem escrita. A cor nunca comunica sozinha. */
.field__input.invalid { border-color: var(--status-error); }
.field__error, .validation-message, .external-login__error {
  display: block; margin-top: var(--space-4);
  font-size: var(--text-sm); color: var(--status-error);
}
.field__hint {
  margin-top: var(--space-3);
  font-size: var(--text-mono-micro); letter-spacing: var(--track-meta);
  text-transform: uppercase; color: var(--text-label);
}

.auth__submit, .external-login__submit { width: 100%; margin-top: var(--space-12); }

/* Links isolados também são alvos de toque: ≥44px (readme §13). Sem isto eles
   ficavam com 22px de altura — apontado pela auditoria da Etapa 7. */
.auth__links {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-7);
  margin-top: var(--space-9); font-size: var(--text-ui);
}
.auth__links a, .external-login__back {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
}
.auth__note {
  margin-top: var(--space-14); padding-top: var(--space-9);
  border-top: 1px solid var(--border-faint);
  font-size: var(--text-mono-meta); letter-spacing: var(--track-tight); color: var(--text-label);
}

/* Resultado: três estados distintos, cada um com rótulo escrito. */
.auth-outcome {
  margin-top: var(--space-11); padding: var(--space-8);
  border: 1px solid var(--border-faint); border-radius: var(--radius-sm);
}
.auth-outcome__label {
  font-size: var(--text-mono-meta); letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.auth-outcome__message { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--text-muted); }

.auth-outcome[data-outcome="Succeeded"] { border-color: rgba(0, 220, 130, .3); }
.auth-outcome[data-outcome="Succeeded"] .auth-outcome__label { color: var(--status-available); }
.auth-outcome[data-outcome="Rejected"] { border-color: rgba(255, 84, 112, .35); }
.auth-outcome[data-outcome="Rejected"] .auth-outcome__label { color: var(--status-error); }

/* Pendência de integração NÃO é erro nem sucesso — é o terceiro estado, e a
   moldura tracejada âmbar é a mesma linguagem das outras pendências do site. */
.auth-outcome[data-outcome="IntegrationPending"] {
  border-style: dashed; border-color: rgba(255, 194, 75, .4);
}
.auth-outcome[data-outcome="IntegrationPending"] .auth-outcome__label { color: var(--maia-amber); }


/* =============================================================================
   CHECKOUT — fluxo transacional
   ============================================================================= */

.checkout__secure {
  margin-inline-start: auto;
  font-size: var(--text-mono-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--text-muted);
}

.checkout__progress {
  list-style: none; margin: 0 auto; padding: var(--space-9) var(--container-pad) 0;
  max-width: var(--container); display: flex; flex-wrap: wrap; gap: var(--space-9);
}
.checkout__progress li { display: flex; align-items: baseline; gap: var(--space-4); }
.checkout__progress-num { font-size: var(--text-mono-meta); color: var(--text-label); }
.checkout__progress-label {
  font-size: var(--text-mono-meta); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--text-label);
}
.checkout__progress li[data-state="current"] .checkout__progress-num,
.checkout__progress li[data-state="current"] .checkout__progress-label { color: var(--accent); }

.checkout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .5fr);
  gap: var(--gap-split);
  max-width: var(--container); margin-inline: auto;
  padding: var(--space-12) var(--container-pad) var(--space-24);
}
.checkout__title { font-size: var(--text-h2); margin-top: var(--space-7); }

.checkout__stage { margin-top: var(--space-16); }
.checkout__stage-title {
  font-size: var(--text-mono-label); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--text-muted);
  padding-bottom: var(--space-6); border-bottom: 1px solid var(--border-faint);
}
.checkout__stage-text { color: var(--text-muted); margin-top: var(--space-9); max-width: var(--measure-body); }
.checkout__stage-actions { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-9); }

.checkout__plan { margin-top: var(--space-9); }
.checkout__plan-name { font-size: var(--text-h3); }
.checkout__plan-price { font-size: var(--text-h4); margin-top: var(--space-4); }
.checkout__plan-price span { color: var(--text-label); font-size: var(--text-sm); }
.checkout__plan-term {
  margin-top: var(--space-4);
  font-size: var(--text-mono-meta); letter-spacing: var(--track-meta);
  text-transform: uppercase; color: var(--text-label);
}
.checkout__change { margin-top: var(--space-9); font-size: var(--text-ui); }

/* O portão do download é TEXTO, não botão: não há arquivo a oferecer enquanto
   o direito de acesso não for confirmado (readme §10). */
.checkout__gate {
  margin-top: var(--space-9); padding: var(--space-8);
  border: 1px dashed var(--border-placeholder); border-radius: var(--radius-sm);
  font-size: var(--text-mono-meta); letter-spacing: var(--track-meta);
  text-transform: uppercase; color: var(--accent); text-align: center;
}

.checkout__summary {
  align-self: start; position: sticky; top: calc(var(--header-h) + var(--space-9));
  border: 1px solid var(--border-card); border-radius: var(--radius-md);
  background: var(--surface-card); padding: var(--space-9);
}
.checkout__summary-title {
  font-size: var(--text-mono-meta); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--text-label);
}
.checkout__summary-list { margin: var(--space-9) 0 0; display: grid; gap: var(--space-2); }
.checkout__summary-list > div {
  display: flex; justify-content: space-between; gap: var(--space-7);
  padding-block: var(--space-3); border-top: 1px solid var(--border-faint);
}
.checkout__summary-list dt {
  font-family: var(--font-mono); font-size: var(--text-mono-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--text-label);
}
.checkout__summary-list dd { margin: 0; font-size: var(--text-ui); }
.checkout__summary-note {
  margin-top: var(--space-9);
  font-size: var(--text-mono-micro); letter-spacing: var(--track-tight);
  color: var(--text-muted); line-height: 1.8;
}
.checkout__platform {
  margin-top: var(--space-9); padding-top: var(--space-7);
  border-top: 1px solid var(--border-faint);
  display: grid; gap: var(--space-4);
}

/* MOBILE: uma coluna, resumo depois do conteúdo (readme §13). */
@media (max-width: 1080px) {
  .checkout { grid-template-columns: 1fr; }
  .checkout__summary { position: static; }
}

/* ---------- complementos do site ligado ao Commerce (2026-09-22) ------------- */

.auth__panel--wide { max-width: 520px; }
.field__optional { margin-left: var(--space-2); font-size: var(--text-mono-meta); color: var(--text-label); text-transform: uppercase; letter-spacing: var(--track-meta); }
.field__input--code { letter-spacing: .4em; font-size: var(--text-h4); text-align: center; }
.field--check { margin-top: var(--space-2); }
.field__check { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; font-size: var(--text-ui); color: var(--text-muted); }
.field__check input { margin-top: 3px; accent-color: var(--maia-cyan); }

.checkout__stage-actions form { display: contents; }
.checkout__session { margin-top: var(--space-6); }
.checkout__session dd { overflow-wrap: anywhere; }
.checkout__plan-term { margin-top: var(--space-2); font-size: var(--text-mono-meta); letter-spacing: var(--track-tight); color: var(--text-label); }
.checkout__stage .auth-outcome { margin-top: var(--space-6); }

/* ---------- checkout transparente: meio de pagamento, cobranca e artefato ------
   O cartao e' um <fieldset data-maia-card-form> cujos campos NAO passam pelo
   servidor: js/maia-payments.js os le e fala direto com o provedor. Visualmente
   e' o mesmo vocabulario dos outros campos — a diferenca e' de rota, nao de forma. */

.checkout__methods, .checkout__card {
  margin: var(--space-8) 0 0; padding: var(--space-7);
  border: 1px solid var(--border-faint); border-radius: var(--radius-md);
  background: rgba(7, 10, 16, .45);
}
.checkout__methods legend, .checkout__card legend { padding: 0 var(--space-3); }

.checkout__method {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0; cursor: pointer; font-size: var(--text-ui);
}
.checkout__method input { accent-color: var(--maia-cyan); }

.checkout__card-row { display: grid; gap: var(--space-5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.checkout__billing { margin-top: var(--space-8); display: grid; gap: var(--space-2); }

.checkout__artifacts { margin-top: var(--space-8); display: grid; gap: var(--space-6); justify-items: start; }
.checkout__pix-qr {
  width: min(240px, 100%); height: auto; padding: var(--space-4);
  background: #fff; border-radius: var(--radius-sm);
}
.checkout__artifacts textarea { font-family: var(--font-mono); font-size: var(--text-mono-meta); resize: vertical; }

@media (max-width: 640px) {
  .checkout__card-row { grid-template-columns: 1fr; }
}

/* ---------- entrar com um provedor externo, dentro do cartao ------------------
   O botao herda .btn--ghost e so' ganha largura cheia e altura de alvo de toque:
   e' uma alternativa ao formulario de senha, nao a acao principal da tela. */

.social-login { margin-top: var(--space-10); display: grid; gap: var(--space-6); }

.social-login__divider {
  display: flex; align-items: center; gap: var(--space-5);
  font-family: var(--font-mono); font-size: var(--text-mono-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--text-label);
}
.social-login__divider::before,
.social-login__divider::after { content: ""; flex: 1; height: 1px; background: var(--border-faint); }

.social-login__button { width: 100%; min-height: 44px; }