/* ============================================================================
   af-blocos.css: blocos comuns de formulário do Afiliados (Conta e O que
   buscar) usados pelo assistente/gaveta de fonte (SC3, .aff-form) e pelo
   assistente de primeiro uso (SC1, raiz com .af-blocos). SC3, 01/10/2026 v2.

   A seção 1 (provisório do DS-4) saiu: as peças estão no ui-kit v1.3.
   Regra da grade: tudo que está num ui-form-stack ocupa a MESMA largura, da
   borda esquerda à direita do corpo; 20 px entre campos, 28 entre seções.
   ============================================================================ */

/* ── 1. (saiu) O provisório do DS-4 virou kit: ui-form-stack, ui-form-section
   (apelidos ui-form-sec*), ui-note, ui-switch-row, ui-checkgrid (contêiner único)
   e ui-dl estão no ui-kit.css v1.3 (DS-4, 01/10 noite). Nada aqui sobrepõe o kit. */

/* ── 2. Blocos Conta e O que buscar ────────────────────────────────────── */
.aff-store { min-width: 0; margin: 0; padding: 0; border: 0; }
.aff-store[hidden] { display: none; }
.aff-mono { font-family: var(--ui-mono); font-size: var(--ui-fs-label); }
.aff-w-num { max-width: 140px; }

/* Tutorial da conexão: vídeo + passos lado a lado; empilha no estreito. */
.aff-tut { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: var(--ui-space-5); align-items: start; }
.aff-tut-txt { display: flex; flex-direction: column; gap: var(--ui-space-2); min-width: 0; }
.aff-video { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.aff-video-el { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--ui-r-lg); border: 1px solid var(--ui-border); background: var(--ui-fill-2); object-fit: cover; }
.aff-video-cap { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--ui-fs-help); color: var(--ui-muted); }
.aff-video-cap svg { flex-shrink: 0; width: var(--ui-ic-xs); height: var(--ui-ic-xs); }
.aff-tut-steps { margin: 0; font-size: var(--ui-fs-label); }
.aff-tut-link { align-self: flex-start; height: auto; min-height: 0; padding: 0; }
/* Vídeo tutorial de formulário (_video-tutorial.php, 10/10): título + 1 linha de apoio ao lado do clipe. */
.aff-tut-t { margin: 0; font-size: var(--ui-fs-label); font-weight: var(--ui-fw-semibold); line-height: var(--ui-lh-snug); color: var(--ui-ink); }
.aff-tut-d { margin: 0; font-size: var(--ui-fs-help); line-height: var(--ui-lh-snug); color: var(--ui-muted); }
.ui-field.aff-tut-txt { margin-bottom: 0; }
/* Vídeo em destaque (conexão da conta, 13/10): cartão tingido, clipe maior, play grande por cima. */
.aff-tut.is-destaque { grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-4); align-items: start; padding: var(--ui-space-4); border: 1px solid rgba(var(--ui-accent-rgb), .28); border-radius: var(--ui-r-xl); background: rgba(var(--ui-accent-rgb), .06); }
.aff-tut.is-destaque .aff-video { position: relative; }
.aff-tut.is-destaque .aff-video-el { border-color: rgba(var(--ui-accent-rgb), .22); }
.aff-video-play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; padding: 0; border: 0; border-radius: 50%; background: var(--ui-accent); color: var(--ui-on-primary); cursor: pointer; transition: transform var(--ui-dur-1) var(--ui-ease), opacity var(--ui-dur-2) var(--ui-ease); }
.aff-video-play svg { width: 28px; height: 28px; margin-left: 3px; fill: currentColor; }
.aff-video-play:hover { transform: scale(1.06); }
.aff-video-play:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 3px; }
.aff-tut.is-playing .aff-video-play { opacity: 0; pointer-events: none; }
.aff-tut-over { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ui-fs-caption); font-weight: var(--ui-fw-semibold); letter-spacing: .05em; text-transform: uppercase; color: var(--ui-accent-ink); }
.aff-tut-over svg { width: var(--ui-ic-xs); height: var(--ui-ic-xs); }
.aff-tut.is-destaque .aff-tut-t { font-size: var(--ui-fs-body-lg); }
.aff-tut.is-destaque .aff-tut-d { font-size: var(--ui-fs-label); }
.aff-tut-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2) var(--ui-space-3); margin-top: var(--ui-space-1); }
@media (prefers-reduced-motion: reduce) { .aff-video-play { transition: none; } .aff-video-play:hover { transform: none; } }

/* Conferir conexão: botão + resultado na mesma linha (quebra no estreito). */
.ui-field.aff-tut, .ui-field.aff-check { margin-bottom: 0; }
.aff-check { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2) var(--ui-space-3); }
.aff-check svg { flex-shrink: 0; }
.aff-check-res { display: flex; align-items: flex-start; gap: 6px; flex: 1 1 240px; min-width: 0; margin: 0; font-size: var(--ui-fs-label); line-height: var(--ui-lh-snug); color: var(--ui-muted); overflow-wrap: anywhere; }
.aff-check-res[hidden] { display: none; }
.aff-check-res.is-ok { color: var(--ui-ok-ink); }
.aff-check-res.is-erro { color: var(--ui-danger-ink); }
.aff-check-res svg { flex-shrink: 0; width: var(--ui-ic-sm); height: var(--ui-ic-sm); margin-top: 1px; }

/* "Mais opções" (um nível, recolhido): seta, título e apoio na mesma linha de base. */
.aff-more { display: block; min-width: 0; margin: 0; }
.aff-more:not([open]) > .aff-more-body { display: none; }
.aff-more-sum { display: flex; align-items: center; gap: var(--ui-space-2); min-height: var(--ui-target); padding: 0; list-style: none; cursor: pointer; border-radius: var(--ui-r-sm); }
.aff-more-sum::-webkit-details-marker { display: none; }
.aff-more-sum:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.aff-more-sum > svg { flex-shrink: 0; width: var(--ui-ic-sm); height: var(--ui-ic-sm); color: var(--ui-muted); transition: transform var(--ui-dur-1) var(--ui-ease); }
.aff-more[open] > .aff-more-sum > svg { transform: rotate(90deg); }
.aff-more-sum > span:not(.aff-more-hint), .aff-more-t { font-size: var(--ui-fs-body); font-weight: var(--ui-fw-semibold); color: var(--ui-ink); }
.aff-more-hint { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--ui-fs-help); font-weight: var(--ui-fw-regular); color: var(--ui-muted); }
.aff-more-body { padding: 20px 0 0; }

.aff-cats, .aff-kws { min-width: 0; }
.aff-combos .ui-btn-link { margin-left: 2px; }
.aff-porque { margin: 0; font-size: var(--ui-fs-body); line-height: var(--ui-lh-body); color: var(--ui-ink-2); }
.aff-reco { margin-top: 6px; }
.aff-secoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--ui-space-3); }

@media (max-width: 760px) {
    .aff-tut { grid-template-columns: minmax(0, 1fr); }
    .aff-video { max-width: 320px; }
}
@media (max-width: 560px) {
    .aff-int .ui-seg-btn { padding: 0 6px; }
    /* "Ajustes da busca": título numa linha, apoio embaixo alinhado com o título (item G). */
    .aff-more-sum { flex-wrap: wrap; row-gap: 2px; }
    .aff-more-sum > span:not(.aff-more-hint), .aff-more-t { white-space: nowrap; }
    .aff-more-hint { flex: 1 0 100%; padding-left: calc(var(--ui-ic-sm) + var(--ui-space-2)); white-space: normal; }
    .aff-secoes { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .aff-more-sum > svg { transition: none; }
}

/* ── 3. Rakuten e conexão oficial da Amazon (05/10/2026, research/D-ux.md 3 a 6) ─────────
   Só posiciona peças do kit (ui-choices.is-grid, ui-switch-row, ui-empty, ui-seg, ui-dl).
   Logos das lojas da Rakuten em tile claro também no escuro (são bitmaps coloridos). */
.aff-tut-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-1) var(--ui-space-4); }
.aff-tut-link svg { flex-shrink: 0; width: var(--ui-ic-xs); height: var(--ui-ic-xs); }
/* SID estreito e Client ID largo na mesma linha (Client Secret embaixo); empilham no celular. */
@media (min-width: 561px) { .ui-field-row.aff-rk-campos { grid-template-columns: minmax(0, 180px) minmax(0, 1fr); } }

/* Resultado do "Conferir conexão" em 2 linhas (tag + conexão oficial da Amazon). */
.aff-check-res.is-duas { flex-direction: column; align-items: stretch; gap: var(--ui-space-1); }
.aff-check-linha { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.aff-check-linha svg { flex-shrink: 0; width: var(--ui-ic-sm); height: var(--ui-ic-sm); margin-top: 1px; }
.aff-check-linha.is-ok { color: var(--ui-ok-ink); }
.aff-check-linha.is-warn { color: var(--ui-warn-ink); }
.aff-check-linha.is-erro { color: var(--ui-danger-ink); }

/* Lojas parceiras: rótulo + contador + "Atualizar lojas" numa linha (quebra sem empurrar). */
.aff-rk-lojas-f[hidden] { display: none; }
.aff-lojas-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-1) var(--ui-space-3); min-width: 0; margin-bottom: var(--ui-space-1); }
.aff-lojas-head > .ui-label { margin: 0; }
.aff-lojas-n { margin-left: auto; font-size: var(--ui-fs-help); font-weight: var(--ui-fw-medium); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ui-muted); }
.aff-lojas-atu svg { flex-shrink: 0; }
.aff-lojas-meta { margin: 0 0 var(--ui-space-2); }
.aff-rk-grade { margin-top: var(--ui-space-2); min-width: 0; }
.aff-rk-grade:empty { display: none; }
.aff-rk-card { align-items: center; min-width: 0; }
.aff-rk-card > .ui-checkbox { margin-top: 0; }
.aff-rk-card .ui-choice-body { min-width: 0; }
.aff-rk-logo { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--ui-r-md); }
.aff-rk-logo.aff-logo-tile img { width: 80%; height: 80%; object-fit: contain; }
.aff-rk-card.is-disabled { cursor: default; opacity: .72; }
.aff-rk-card.is-disabled:hover { border-color: var(--ui-line-strong); }
.aff-rk-pend-badge { align-self: flex-start; margin-top: var(--ui-space-1); }
.aff-rk-lojas [data-aff-rk-min] { margin-top: var(--ui-space-2); }
.aff-rk-recusadas { margin: 0; }
.aff-rk-recusadas .aff-tut-link, .aff-rk-mais a { vertical-align: baseline; }
.aff-rk-conta-card .ui-choice-title { display: flex; align-items: center; flex-wrap: wrap; }
.aff-rk-novo[hidden], .aff-rk-contas[hidden], .aff-rk-vazio[hidden] { display: none; }
@media (max-width: 560px) {
    /* "Atualizar lojas" só com o ícone (rótulo para o leitor de tela e a dica). */
    .aff-lojas-atu { width: var(--ui-target-touch); height: var(--ui-target-touch); padding: 0; gap: 0; }
    .aff-lojas-atu .aff-lojas-atu-t { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* ── Correções de design (CRIT-design 05/10) ──────────────────────────────────────────── */
/* Peças que o JS esconde (conta recusada: "Trocar"/"Atualizar"; vazio: nota "Quer mais lojas?"). */
.aff-rk-dl .ui-btn[hidden], .aff-rk-lojas .ui-btn[hidden], .aff-rk-mais[hidden], .aff-rk-res[hidden] { display: none; }
/* Resultado fora da linha do botão (pilha em coluna): sem a base de 240 px da linha. */
.aff-check-res.aff-rk-res { flex: 0 0 auto; }
/* C6: o resultado do "Conferir conexão" não para embaixo do rodapé fixo (modal e /comecar). */
.aff-check-res { scroll-margin-top: var(--ui-space-4); scroll-margin-bottom: 96px; }
/* C10: o bloco "Lojas parceiras" começa a 20 do subtítulo, como o 1º bloco das outras lojas
   (o kit somava 8 a cada seção dentro da pilha); o rótulo começa no topo da linha. */
.ui-form-stack > .aff-rk-lojas.ui-form-section { margin-top: 0; }
/* O botão (32 no computador, 44 no celular) sai da linha para cima e para baixo sem empurrar o rótulo. */
.aff-lojas-head > .aff-lojas-atu { margin-block: -6px; }
@media (max-width: 560px) { .aff-lojas-head > .aff-lojas-atu { margin-block: -12px; } }
@media (max-width: 560px) {
    /* C9: links do tutorial com alvo de 44 e espaço entre eles. */
    .aff-tut-links { flex-direction: column; align-items: flex-start; gap: var(--ui-space-1); }
    .aff-tut-links > .aff-tut-link, .aff-tut-txt > .aff-tut-link { min-height: var(--ui-target-touch); }
    /* Polir 5: "Conferir conexão" na largura toda, como a ação principal do campo. */
    .aff-check > [data-aff-validar] { flex: 1 1 100%; }
}
@media (max-width: 400px) {
    /* C7: "O que trazer" em 360: o rótulo quebra em 2 linhas dentro da pílula, sem estourar. */
    .aff-rk-oque .ui-seg-btn { height: auto; min-height: 36px; padding: 2px 8px; white-space: normal; line-height: 1.15; text-align: center; }
}

/* ── 4. Awin (06/10/2026, research/D-ux-awin.md 3 a 5) ───────────────────────────────────
   O bloco de rede é o mesmo da Rakuten (af-rede.js): as peças com o prefixo da Awin (aff-aw-*)
   têm o MESMO desenho das aff-rk-* acima. Só tokens; sem sombra; sem !important. */
.aff-aw-lojas-f[hidden] { display: none; }
.aff-aw-grade { margin-top: var(--ui-space-2); min-width: 0; }
.aff-aw-grade:empty { display: none; }
.aff-aw-card { align-items: center; min-width: 0; }
.aff-aw-card > .ui-checkbox { margin-top: 0; }
.aff-aw-card .ui-choice-body { min-width: 0; }
.aff-aw-logo { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--ui-r-md); }
.aff-aw-logo.aff-logo-tile img { width: 80%; height: 80%; object-fit: contain; }
.aff-aw-card.is-disabled { cursor: default; opacity: .72; }
.aff-aw-card.is-disabled:hover { border-color: var(--ui-line-strong); }
.aff-aw-lojas [data-aff-aw-min] { margin-top: var(--ui-space-2); }
.aff-aw-recusadas { margin: 0; }
.aff-aw-recusadas .aff-tut-link, .aff-aw-mais a { vertical-align: baseline; }
.aff-aw-conta-card .ui-choice-title { display: flex; align-items: center; flex-wrap: wrap; }
.aff-aw-novo[hidden], .aff-aw-contas[hidden], .aff-aw-vazio[hidden], .aff-aw-escolha[hidden], .aff-aw-desc[hidden] { display: none; }
.aff-aw-dl .ui-btn[hidden], .aff-aw-lojas .ui-btn[hidden], .aff-aw-mais[hidden], .aff-aw-res[hidden] { display: none; }
.aff-check-res.aff-aw-res { flex: 0 0 auto; }
.ui-form-stack > .aff-aw-lojas.ui-form-section { margin-top: 0; }
/* "Qual conta usar?" (C2): o título do grupo é o rótulo do kit, colado nos cartões. */
.aff-aw-escolha { min-width: 0; margin: 0; padding: 0; border: 0; }
.aff-aw-escolha > legend.ui-label { padding: 0; margin-bottom: var(--ui-space-2); }
/* A chave tem 36 caracteres: no computador o campo não ocupa a linha toda (D-ux-awin 9.2). */
@media (min-width: 561px) { .aff-w-key { max-width: 480px; } }
/* "Desconectar a conta da Awin" (gaveta): ação rara, discreta, embaixo do resumo da conta. */
.aff-aw-desc { margin-top: calc(var(--ui-space-2) * -1); }
.aff-aw-desc-btn { color: var(--ui-danger-ink); }
/* Opção do "O que trazer" desligada (nenhuma loja com catálogo): o motivo está embaixo. */
.aff-aw-oque .ui-seg-btn.is-disabled { opacity: .5; cursor: not-allowed; }
.aff-aw-cat-pronto { flex: 0 0 auto; }
.aff-aw-cat-pronto[hidden], [data-aff-aw-cat-res][hidden] { display: none; }
.aff-aw-liberar { height: auto; min-height: 0; padding: 0; vertical-align: baseline; font-size: inherit; }

/* Bloco "Falta 1 passo para trazer produtos" (5.3): não é aviso nem problema; borda neutra de 1 px,
   raio do kit, padding 16, sem fundo colorido, no ritmo da pilha (20 entre as peças). */
.aff-catalogo { display: flex; flex-direction: column; gap: var(--ui-space-4); min-width: 0; padding: var(--ui-space-4); border: 1px solid var(--ui-border); border-radius: var(--ui-r-md); }
.aff-catalogo[hidden] { display: none; }
.aff-catalogo-t { font-size: var(--ui-fs-body-lg); font-weight: var(--ui-fw-semibold); line-height: var(--ui-lh-snug); color: var(--ui-ink); }
.aff-catalogo-d { margin: calc(var(--ui-space-3) * -1) 0 0; font-size: var(--ui-fs-label); line-height: var(--ui-lh-body); color: var(--ui-ink-2); }
.aff-catalogo .ui-steps { margin: 0; }
.aff-catalogo .ui-note { margin: 0; }
.aff-catalogo-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2) var(--ui-space-4); }
.aff-catalogo-acoes svg { flex-shrink: 0; }
@media (max-width: 560px) {
    .aff-catalogo-acoes { flex-direction: column; align-items: stretch; }
    .aff-catalogo-acoes > .ui-btn { min-height: var(--ui-target-touch); }
    .aff-catalogo-nao { justify-content: center; }
}
@media (max-width: 400px) {
    .aff-aw-oque .ui-seg-btn { height: auto; min-height: 36px; padding: 2px 8px; white-space: normal; line-height: 1.15; text-align: center; }
}

/* Extensão v2: conta ligada pela extensão (_bloco-conta.php). "..." com "Trocar de
   conta" dentro do aviso; no "Outra conta", o caminho de volta fica como link. */
.aff-ext-ok { align-items: center; }
.aff-ext-ok > svg { margin-top: 0; }
.aff-ext-ok > .ui-dropdown { flex: 0 0 auto; margin: -6px -8px -6px 0; }
.ui-callout-body > .aff-ext-alt { align-self: flex-start; height: auto; min-height: 0; margin-top: 2px; padding: 0; }

/* Id da conta trazido pela extensão (FIX-E 06/10): campo só leitura com "Alterar". */
.aff-ext-det { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-1) var(--ui-space-2); }
.aff-ext-det > svg { flex-shrink: 0; width: var(--ui-ic-xs); height: var(--ui-ic-xs); color: var(--ui-ok); }
.aff-ext-det > .ui-btn-link { height: auto; min-height: 0; padding: 0; }
.ui-input[readonly][data-aff-ext-valor] { color: var(--ui-ink); }
/* "Travou? Preciso de ajuda" abaixo do Conferir conexão (13/10). */
.ui-help.aff-ajuda { display: flex; align-items: center; gap: 6px; margin: 0; }
.ui-help.aff-ajuda > svg { flex-shrink: 0; width: var(--ui-ic-xs); height: var(--ui-ic-xs); }
.ui-help.aff-ajuda a { color: var(--ui-accent-ink); font-weight: var(--ui-fw-medium); }
/* Extensão no assistente (13/10): "Jeito mais fácil", com Instalar (Chrome Web Store) e "Já instalei";
   a linha de estado acompanha a detecção ao vivo (af-comecar.js). */
.aff-ext-cta { display: flex; align-items: flex-start; gap: var(--ui-space-3); padding: var(--ui-space-4); border: 1px solid rgba(var(--ui-accent-rgb), .32); border-radius: var(--ui-r-xl); background: rgba(var(--ui-accent-rgb), .07); }
.aff-ext-cta-body { display: flex; flex-direction: column; gap: var(--ui-space-2); min-width: 0; }
.aff-ext-cta-t { margin: 0; font-size: var(--ui-fs-body-lg); font-weight: var(--ui-fw-semibold); line-height: var(--ui-lh-snug); color: var(--ui-ink); }
.aff-ext-cta-d { margin: 0; font-size: var(--ui-fs-label); line-height: var(--ui-lh-body); color: var(--ui-ink-2); }
.aff-ext-cta-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); margin-top: var(--ui-space-1); }
.aff-ext-cta-st { margin: 0; font-size: var(--ui-fs-label); line-height: var(--ui-lh-snug); color: var(--ui-ink-2); overflow-wrap: anywhere; }
.aff-ext-cta-st[hidden] { display: none; }
.aff-ext-cta-st.is-warn { color: var(--ui-warn-ink); }
.aff-ext-cta-st.is-erro { color: var(--ui-danger-ink); }
.aff-ext-cta-st a { color: var(--ui-accent-ink); font-weight: var(--ui-fw-medium); }
@media (max-width: 560px) { .aff-ext-cta { flex-direction: column; } .aff-ext-cta-acts > .ui-btn { flex: 1 1 auto; } }