/* ============================================================================
   af-comecar.css: assistente "Sua primeira oferta no grupo" (/client/afiliados/comecar).
   SC1, 01/10/2026. O ui-wizard (página, palco, rodapé fixo, estados), ui-choice,
   ui-checkgrid, ui-chipfield, ui-steps e ui-popover são do ui-kit; aqui só o que é
   desta tarefa: a conta da loja (vídeo + passos), as linhas de 2-3 campos, a lista
   de grupos, o palco com o caminho e as ofertas do pronto. Namespace afw-*.
   Só tokens --ui-*; sem sombra, sem faixa, sem !important. Cabe em 360 px.
   ============================================================================ */

/* ── Ritmo: o do kit ───────────────────────────────────────────────────────
   Cada passo é .ui-wizard-step.ui-form-stack com .ui-form-section (DS-4 v1.3):
   20 px entre campos, 28 entre seções, linha de 1 px no .is-divided. Os blocos
   COMUNS (_bloco-conta/_bloco-busca, SC3) vêm com o mesmo ui-form-stack. Aqui
   não há margem de campo nenhuma: só o que é desta tela. */

/* ── Loja ─────────────────────────────────────────────────────────────────── */
/* Rakuten (05/10) e Awin (06/10): tile na cor da marca. Com 6 lojas a grade fecha 3 × 2 (sem is-wide). */
.afw-loja .ui-choice-title { display: flex; align-items: center; min-width: 0; }
.afw-logo.af-mk { border-color: transparent; }
.afw-logo.af-mk .af-mk-logo { width: 60%; height: 60%; }
.afw-logo { background: var(--ui-phone-bg); border: 1px solid var(--ui-border-subtle); color: var(--ui-phone-ink); font-size: var(--ui-fs-label); font-weight: var(--ui-fw-semibold); }
.afw-logo img { display: block; width: 20px; height: 20px; object-fit: contain; opacity: .78; }
.afw-plano { height: auto; padding: 0; margin-top: 2px; align-self: flex-start; }
.afw-nao .ui-btn-link, .afw-nova-rede .ui-btn-link { height: auto; min-height: 0; padding: 0; vertical-align: baseline; font-size: inherit; }
.afw-nao-d { margin: 0 0 var(--ui-space-3); font-size: var(--ui-fs-body); line-height: var(--ui-lh-body); color: var(--ui-ink-2); }
.afw-nao-pop .ui-mlist { margin-bottom: var(--ui-space-3); }

/* ── Para onde ────────────────────────────────────────────────────────────── */
.afw-redes .ui-tile svg, .afw-modo-rede .ui-tile svg { width: var(--ui-ic-sm); height: var(--ui-ic-sm); }
.afw-grupos-in { display: flex; flex-direction: column; gap: var(--ui-space-3); min-width: 0; }
.afw-glist { max-height: 340px; overflow-y: auto; padding: 2px; }
.afw-g[hidden] { display: none; }
.afw-row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.afw-ritmo-campos[hidden] { display: none; }

/* ── Prévia do passo 3 (ui-phone + ui-wa-*) ───────────────────────────────── */
.afw-prev[hidden] { display: none; }
.afw-prev { display: flex; flex-direction: column; align-items: center; gap: var(--ui-space-3); }
.afw-phone { --ui-phone-scale: .8; }
.afw-prev-media { display: grid; place-items: center; background: var(--ui-wa-chat-bg); }
.afw-prev-media-t { font-size: var(--ui-fs-help); color: var(--ui-wa-meta); }

/* ── Palco: o caminho sendo montado ──────────────────────────────────────── */
.afw-path { display: flex; flex-direction: column; align-items: stretch; gap: var(--ui-space-1); }
.afw-path-node { display: flex; align-items: center; gap: var(--ui-space-3); min-height: 56px; padding: var(--ui-space-2) var(--ui-space-3); border: 1px dashed var(--ui-ctl-line); border-radius: var(--ui-r-lg); background: var(--ui-bg-card); }
.afw-path-node.is-set { border-style: solid; border-color: var(--ui-border); }
.afw-path-media { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; overflow: hidden; border-radius: var(--ui-r-sm); background: var(--ui-fill-2); color: var(--ui-ink-2); }
.afw-path-media svg { width: var(--ui-ic-sm); height: var(--ui-ic-sm); }
.afw-path-media .afw-path-logo { display: grid; place-items: center; width: 100%; height: 100%; background: var(--ui-phone-bg); color: var(--ui-phone-ink); font-size: var(--ui-fs-caption); font-weight: var(--ui-fw-semibold); }
.afw-path-media .afw-path-logo img { width: 18px; height: 18px; object-fit: contain; opacity: .78; }
.afw-path-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.afw-path-k { font-size: var(--ui-fs-caption); font-weight: var(--ui-fw-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--ui-muted); }
.afw-path-v { overflow: hidden; text-overflow: ellipsis; font-size: var(--ui-fs-label); font-weight: var(--ui-fw-medium); line-height: var(--ui-lh-snug); color: var(--ui-ink); }
.afw-path-arrow { display: grid; place-items: center; height: 16px; color: var(--ui-muted-2); }
.afw-path-arrow svg { width: 14px; height: 14px; }

/* ── Pronto: as primeiras ofertas ─────────────────────────────────────────── */
.afw-offers { width: 100%; max-width: 560px; margin: var(--ui-space-5) auto 0; padding: 0; list-style: none; text-align: left; border: 1px solid var(--ui-border); border-radius: var(--ui-r-xl); background: var(--ui-bg-card); }
.afw-offers:empty { display: none; }
.afw-offer { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: var(--ui-space-3); min-height: 68px; padding: var(--ui-space-2) var(--ui-space-4); }
.afw-offer + .afw-offer { border-top: 1px solid var(--ui-border-subtle); }
.afw-offer-thumb { display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: var(--ui-r-sm); border: 1px solid var(--ui-border-subtle); background: var(--ui-phone-bg); }
.afw-offer-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.afw-offer-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.afw-offer-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--ui-fs-body); font-weight: var(--ui-fw-medium); color: var(--ui-ink); }
.afw-offer-meta { font-size: var(--ui-fs-help); color: var(--ui-muted); font-variant-numeric: tabular-nums; }
/* "Posta sozinho": quando a oferta sai (a regra posta sozinha; nada a aprovar). */
.afw-offer-quando { font-size: var(--ui-fs-help); color: var(--ui-ink-2, var(--ui-ink)); font-variant-numeric: tabular-nums; }
.afw-send { margin: var(--ui-space-4) 0 0; font-size: var(--ui-fs-body); color: var(--ui-ink-2); }
.afw-send.is-ok { color: var(--ui-ok-ink); }
.afw-send.is-warn { color: var(--ui-warn-ink); }
.afw-send.is-erro { color: var(--ui-danger-ink); }
.afw-done-actions .ui-btn svg, .afw-vazio .ui-btn svg { flex-shrink: 0; width: var(--ui-ic-sm); height: var(--ui-ic-sm); }
.afw-vazio .ui-empty-ico { margin: 0 auto var(--ui-space-4); }

@media (max-width: 760px) {
    .afw-row3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .afw-offer { grid-template-columns: 44px minmax(0, 1fr); padding: var(--ui-space-3); row-gap: var(--ui-space-2); }
    .afw-offer > .ui-btn { grid-column: 2; justify-self: start; }
}

/* Cabeçalho: contador à esquerda; passos, "Ver o caminho" e o X de sair à direita. */
.afw .ui-wizard-head > .ui-wizard-count { margin-right: auto; }
.afw .ui-wizard-head > .afw-sair { margin-right: calc(var(--ui-space-2) * -1); }
/* No celular o nome do passo já está no título logo abaixo: o contador fica curto e o X cabe na mesma linha. */
@media (max-width: 560px) {
    .afw .afw-count-label { display: none; }
}
/* Rodapé fixo colado ao fim da tela (VAL-SC): o .cl-main-inner tem 24 px de respiro embaixo e o sticky
   parava ali, com uma faixa do formulário aparecendo por baixo do Voltar. Mesmo ajuste do assistente de
   Redes (gc-create.css); o kit já soma env(safe-area-inset-bottom) ao respiro do rodapé. O cartão recorta
   (clip) o canto reto quando o rodapé chega ao fim. */
.afw.ui-wizard.is-page { overflow: clip; }
.afw > .ui-wizard-foot { bottom: calc(var(--ui-space-6) * -1); border-radius: 0; }
/* Rakuten no palco: o tile segue na cor da marca (o símbolo é máscara). */
.afw-path-media .afw-path-logo.af-mk { background: var(--af-mk-bg); color: var(--af-mk-ink); }
.afw-path-media .afw-path-logo > .af-mk-logo { width: 60%; height: 60%; }
/* Aqui as outras 4 lojas estão em tile neutro claro: a Rakuten vai na variante CLARA (D-ux 7.1),
   "R" carmim sobre o fundo claro, na lista de lojas e no palco. */
.afw-loja .afw-logo.af-mk-rakuten, .afw-path-media .afw-path-logo.af-mk-rakuten { --af-mk-bg: var(--ui-phone-bg); --af-mk-ink: #BF0000; border-color: var(--ui-border-subtle); }
.afw-loja .afw-logo.af-mk-awin, .afw-path-media .afw-path-logo.af-mk-awin { --af-mk-bg: var(--ui-phone-bg); border-color: var(--ui-border-subtle); }
/* "Preciso de ajuda" (13/10): à direita do cabeçalho, antes do "Ver o caminho"; no celular só o ícone. */
.afw .ui-wizard-head > .afw-ajuda svg { width: var(--ui-ic-sm); height: var(--ui-ic-sm); }
@media (max-width: 560px) {
    .afw .afw-ajuda-t { display: none; }
    .afw .ui-wizard-head > .afw-ajuda { width: var(--ui-ctl-sm); padding-inline: 0; justify-content: center; }
}
@media (max-width: 560px) {
    /* Com o "Preciso de ajuda" (só ícone), contador, ajuda, "Ver o caminho" e o X cabem numa linha. */
    .afw .ui-wizard-head { flex-wrap: nowrap; column-gap: var(--ui-space-2); }
    .afw .ui-wizard-head > .ui-wizard-count { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .afw .ui-wizard-head > .afw-preview-btn { flex: 0 0 auto; }
}
@media (max-width: 400px) { .afw .afw-count-passo { display: none; } }
/* Keep the selected radio visible over the local wizard input reset. */
.afw input.ui-radio:checked { background-color: var(--ui-accent); border-color: var(--ui-accent); }
.afw input.ui-radio:checked::after { background: var(--ui-on-primary, #fff); transform: scale(1); }
.afw input.ui-checkbox:checked { background-color: var(--ui-accent); border-color: var(--ui-accent); }
.afw input.ui-checkbox:checked::after { opacity: 1; transform: none; }