/* Wizard de criacao de lista da home publica.
 *
 * CAMADA 3 (componente): depende de `lv-tokens.css` e de `lv-base.css`, e de
 * mais nada. Nao conhece `lv-home.css` -- o dia em que outra pagina abrir este
 * wizard, esta folha vai junto sem levar a home atras.
 *
 * PREFIXO `lv-wiz-`, e nao `.wiz-` nem `.ft-`. Aqueles dois ja existem: o
 * primeiro e o wizard da area logada (inline no `home.php`), o segundo e o das
 * sete landings. Sao tres wizards diferentes e nenhum deve pintar o outro.
 *
 * MEDIR ESTA FOLHA DA BAIXO, E E FALSO POSITIVO. O `cobertura-css.mjs` mede um
 * carregamento parado, e o modal nasce fechado: quase nenhuma regra daqui chega
 * a ser aplicada. E o mesmo caso do hover e do `prefers-reduced-motion` que o
 * cabecalho daquela ferramenta ja documenta. Nao apague regra daqui por causa
 * do percentual -- abra o wizard e meca com ele aberto. */

/* ===== A CAIXA ========================================================= */

.lv-wiz-dialog { max-width: 620px; }

.lv-wiz {
  /* Tokens LOCAIS, no molde dos `convites/templates/*/style.css`: a paleta de
     recusa nao existe em `lv-tokens.css`, e escrever `#b3261e` em tres lugares
     e a cor que fica para tras no dia em que a marca mudar. Escopados em
     `.lv-wiz` para nao virarem contrato global sem ninguem ter decidido isso.

     `--lv-wiz-facebook` fica literal de proposito: e a cor da marca deles, nao
     uma escolha nossa, e nao acompanha mudanca de tema nenhuma. */
  --lv-wiz-erro: #b3261e;
  --lv-wiz-erro-fundo: #fdecea;
  --lv-wiz-erro-texto: #8c1d18;
  --lv-wiz-status: #adb5bd;
  --lv-wiz-status-fundo: #f1f3f5;
  --lv-wiz-status-texto: #495057;
  /* O TETO DO WIDGET DO GOOGLE, e por isso a largura das quatro saidas.
     `google.accounts.id.renderButton` aceita `width` entre 200 e 400 e ignora
     o resto: nao da para ele acompanhar um painel de 564px. Como as quatro
     saidas fazem a mesma coisa -- criar a conta e a lista --, tres delas
     descerem para 400 e melhor do que uma ficar 164px mais estreita que as
     outras. Nao e escolha estetica: e o unico numero possivel. */
  --lv-wiz-acao-larg: 400px;
  --lv-wiz-facebook: #1877f2;
  --lv-wiz-facebook-hover: #166fe0;

  border: none; border-radius: 22px; overflow: hidden;
  font-family: var(--lv-font-text);
  color: var(--lv-ink);
}

/* ===== CABECALHO ======================================================= */

.lv-wiz-cabecalho {
  position: relative;
  padding: 26px 28px 20px;
  background: var(--lv-accent-soft);
  border-bottom: 1px solid var(--lv-line);
}

.lv-wiz-voltar,
.lv-wiz-fechar {
  position: absolute; top: 18px;
  width: 44px; height: 44px;      /* 44px e o minimo de alvo de toque */
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  line-height: 1; color: var(--lv-muted);
  border-radius: 999px;
}
/* O `font-size` sai da regra agrupada porque `.lv-wiz-fechar` esta nela: com
   os 22px la em cima e os 28px aqui, o mesmo seletor recebia a propriedade
   duas vezes, e quem lesse a primeira nao descobriria a segunda. */
.lv-wiz-voltar { left: 14px; font-size: 22px; }
/* Enquanto a lista esta sendo guardada o Voltar nao vale: o pedido ja levou um
   retrato do estado. Esmaecido e sem ponteiro para nao parecer quebrado. */
.lv-wiz-voltar[aria-disabled="true"] { opacity: .4; cursor: default; pointer-events: none; }
.lv-wiz-fechar { right: 14px; font-size: 28px; }
.lv-wiz-voltar:hover,
.lv-wiz-fechar:hover { background: rgba(0, 0, 0, .06); color: var(--lv-ink); }
.lv-wiz-voltar:focus-visible,
.lv-wiz-fechar:focus-visible {
  outline: 2px solid var(--lv-accent-strong); outline-offset: 2px;
}

.lv-wiz-passo-rotulo {
  margin: 0 0 6px; text-align: center;
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--lv-accent-strong);
}

.lv-wiz-titulo {
  margin: 0 0 16px; text-align: center;
  font-family: var(--lv-font-display); font-weight: 800;
  font-size: 24px; line-height: 1.2; color: var(--lv-ink);
  text-wrap: balance;
}

.lv-wiz-barra { display: flex; gap: 6px; max-width: 260px; margin: 0 auto; }
.lv-wiz-seg {
  flex: 1; height: 4px; border-radius: 999px;
  background: rgba(0, 0, 0, .10);
  transition: background .25s ease;
}
.lv-wiz-seg.is-ativo { background: var(--lv-accent-strong); }

/* ===== CORPO E PASSOS ================================================== */

/* O QUE ROLA E O CORPO. O dialogo pede `modal-dialog-scrollable`, mas essa
   classe do Bootstrap so age sobre um `.modal-body`, e aqui o corpo e o
   `.lv-wiz-corpo`. O que ela fazia de fato era por `overflow:hidden` no
   `.modal-content` -- e o `.lv-wiz` repete isso por causa do `border-radius` --,
   entao o excedente era CORTADO, sem nada para rolar.

   Medido a 640x512, que e 1280x1024 com zoom de 200% (WCAG 1.4.4): o
   `#lvWizProximo3` ficava em y=662 numa janela de 512, e `elementFromPoint`
   devolvia `null`. A roda do mouse nao movia nada. So o Tab chegava la, porque
   o navegador rola container `overflow:hidden` ao focar. Sem aviso, sem barra
   de rolagem: o botao simplesmente nao estava na tela.

   `.modal-content` ja e `flex-direction: column` pelo Bootstrap, entao basta o
   corpo poder rolar e encolher -- `min-height: 0`, sem o qual um item de flex
   nao encolhe abaixo do conteudo e o `overflow` nunca entra. */
.lv-wiz-corpo {
  padding: 24px 28px 28px; background: var(--lv-surface);
  overflow-y: auto; min-height: 0;
}

/* ACIMA DO BANNER DE COOKIE, que esta em `z-index:100500 !important`
   (`assets/includes/tracking.php:21`). O modal do Bootstrap fica no padrao
   1055, entao o banner era desenhado por cima: medido a 320x568,
   `elementFromPoint` no centro de "Continuar" devolvia `cc-btn cc-allow` -- a
   pessoa tocava em continuar e aceitava cookies. E o publico deste wizard e
   justamente quem chega pela primeira vez, ou seja, quem tem o banner na tela.

   Todo modal do projeto sobe (100000 a 200010); este ficou para tras. Fica
   abaixo de 1000000, que e o `avisoBloqueante` do `js/app.js`: recusa
   bloqueante tem de continuar vencendo o wizard.

   A folha so carrega na home, e a home so tem este modal. */
#lvWizardModal { z-index: 100600; }
/* ESCOPADO POR `body.lv-wiz-aberto`, que o `lv-wizard.js` liga e desliga. A
   home tem TRES modais -- o wizard, o "Fale com o Suporte" (100060) e a
   politica de privacidade (1055, aberta pelo link do banner de cookie). Sem o
   escopo, este backdrop de 100590 ficava acima dos outros dois: o formulario
   de suporte aparecia inteiro, so lavado, e nenhum campo respondia a clique --
   o foco ia para o `body` e nada explicava. Na politica era pior, porque quem
   a abre e quem acabou de chegar e ainda precisa aceitar ou recusar. */
body.lv-wiz-aberto .modal-backdrop { z-index: 100590; }

/* O passo escondido usa `hidden`, e nao `display:none` por classe: assim ele
   sai tambem da arvore de acessibilidade, sem precisar de `aria-hidden` a
   reboque -- e sem `aria-hidden`, nao ha como sobrar elemento focavel dentro
   de subarvore escondida, que e a falha que ja apareceu nas abas dos planos. */
.lv-wiz-passo[hidden] { display: none; }

/* ===== PASSO 1: OS TIPOS =============================================== */

.lv-wiz-tipos {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}

.lv-wiz-tipo {
  display: flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 14px 16px;
  background: var(--lv-surface); border: 1.5px solid var(--lv-line); border-radius: 14px;
  cursor: pointer; text-align: left;
  font-family: inherit; color: var(--lv-ink);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.lv-wiz-tipo:hover {
  border-color: var(--lv-accent);
  box-shadow: 0 6px 18px rgba(220, 140, 219, .18);
  transform: translateY(-2px);
}
.lv-wiz-tipo:focus-visible {
  outline: 2px solid var(--lv-accent-strong); outline-offset: 2px;
}
.lv-wiz-tipo.is-escolhido {
  border-color: var(--lv-accent-strong);
  background: var(--lv-accent-soft);
}

.lv-wiz-tipo-emoji { font-size: 26px; line-height: 1; flex: none; }
.lv-wiz-tipo-nome  { font-size: 15px; font-weight: 600; line-height: 1.25; }

/* ===== CELULAR ========================================================= */

@media (max-width: 575px) {
  .lv-wiz-cabecalho { padding: 22px 20px 18px; }
  .lv-wiz-corpo     { padding: 20px; }
  .lv-wiz-titulo    { font-size: 20px; }
  /* Uma coluna: em duas, "Aniversario Infantil" quebra em tres linhas a 390px
     e os cartoes deixam de ter a mesma altura. */
  .lv-wiz-tipos     { grid-template-columns: 1fr; }
}

/* ===== MENOS MOVIMENTO ================================================= */

/* `!important` por DOIS motivos diferentes, e nao um so. As duas `transition`
   acima (`.lv-wiz-seg` e `.lv-wiz-tipo`) tem a mesma especificidade e vem
   antes: contra elas o `!important` desempata o que a ordem decidiria. Ja o
   `transform: none` precisa vencer `.lv-wiz-tipo:hover`, que e 0,2,0 contra
   0,1,0 -- ali nao ha empate nenhum, e reordenar a regra NAO substitui o
   `!important`. Quem tirar achando que basta mover devolve o salto de
   `translateY(-2px)` no hover justamente a quem pediu menos movimento. */
@media (prefers-reduced-motion: reduce) {
  .lv-wiz-seg,
  .lv-wiz-tipo {
    transition: none !important;
    transform: none !important;
  }
}

/* ===== PASSO 2: OS MODELOS ============================================= */

.lv-wiz-temas { display: grid; gap: 12px; }

.lv-wiz-tema {
  border: 1.5px solid var(--lv-line); border-radius: 14px;
  background: var(--lv-surface); overflow: hidden;
}
.lv-wiz-tema:hover { border-color: var(--lv-accent); }

/* O cartao inteiro escolhe o tema; o "Ver itens" e um botao a parte, por cima.
   Sao dois botoes irmaos e nao um dentro do outro: botao aninhado e HTML
   invalido, e o navegador desfaz o aninhamento movendo o de dentro para fora --
   o clique passa a cair no lugar errado. */
.lv-wiz-tema-escolher {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 60px; padding: 14px 16px;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: inherit; color: var(--lv-ink);
}
.lv-wiz-tema-escolher:focus-visible,
.lv-wiz-ver:focus-visible {
  outline: 2px solid var(--lv-accent-strong); outline-offset: -2px;
}

.lv-wiz-tema-icone { font-size: 22px; line-height: 1; flex: none; }
.lv-wiz-tema-nome  { font-size: 15px; font-weight: 600; flex: 1; }
.lv-wiz-tema-conta { font-size: 13px; color: var(--lv-muted); flex: none; }

.lv-wiz-ver {
  display: block; width: 100%;
  padding: 9px 16px; min-height: 44px;
  background: var(--lv-bg); border: none; border-top: 1px solid var(--lv-line);
  cursor: pointer; text-align: left;
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--lv-accent-strong);
}
.lv-wiz-ver:hover { background: var(--lv-accent-soft); }

.lv-wiz-previa {
  padding: 12px 16px 14px;
  border-top: 1px solid var(--lv-line);
  /* A previa do cha de bebe tem 25 itens: sem teto, o modal cresce alem da
     tela e o botao de escolher o tema sai de vista. */
  max-height: 240px; overflow-y: auto;
}
.lv-wiz-previa[hidden] { display: none; }

.lv-wiz-previa-dica {
  margin: 0 0 8px; font-size: 12px; color: var(--lv-muted);
}

.lv-wiz-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 0; font-size: 14px; cursor: pointer;
}
.lv-wiz-item input { width: 17px; height: 17px; flex: none; accent-color: var(--lv-accent-strong); }

/* O cartao "Comecar do zero" nao tem previa nem contagem de itens. */
.lv-wiz-tema-vazio .lv-wiz-tema-nome  { color: var(--lv-muted); }
.lv-wiz-tema-vazio .lv-wiz-tema-conta { font-style: italic; }

/* Espera enquanto `api/get_templates.php` responde. Fica no cartao do TIPO,
   e nao num passo 2 que talvez nem chegue a existir. */
.lv-wiz-tipo.is-carregando { opacity: .55; pointer-events: none; }

/* ===== PASSO 3: OS DETALHES =========================================== */

.lv-wiz-rotulo {
  display: block; margin: 0 0 6px;
  font-size: 13px; font-weight: 600; color: var(--lv-ink);
}
.lv-wiz-rotulo + .lv-wiz-campo { margin-bottom: 16px; }

.lv-wiz-obrigatorio { color: var(--lv-accent-strong); }
.lv-wiz-opcional    { font-weight: 400; color: var(--lv-muted); }

.lv-wiz-campo {
  display: block; width: 100%;
  /* 16px e o minimo que o Safari do iPhone aceita sem dar zoom no campo ao
     focar -- e o zoom desalinha o modal inteiro. */
  padding: 12px 14px; font-family: inherit; font-size: 16px;
  color: var(--lv-ink); background: var(--lv-surface);
  border: 1.5px solid var(--lv-line); border-radius: 10px;
}
.lv-wiz-campo:focus {
  outline: none;
  border-color: var(--lv-accent-strong);
  box-shadow: 0 0 0 3px var(--lv-accent-soft);
}
.lv-wiz-campo[aria-invalid="true"] { border-color: var(--lv-wiz-erro); }

textarea.lv-wiz-campo { resize: vertical; min-height: 60px; }

.lv-wiz-mais { margin: 4px 0 18px; }
.lv-wiz-mais > summary {
  cursor: pointer; padding: 10px 0; min-height: 44px;
  display: flex; align-items: center;
  font-size: 14px; font-weight: 600; color: var(--lv-accent-strong);
}
.lv-wiz-mais > summary:focus-visible {
  outline: 2px solid var(--lv-accent-strong); outline-offset: 2px;
}

.lv-wiz-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* DEPOIS da regra que altera, e nao junto das outras la em cima: `@media` nao
   soma especificidade, entao a base escrita adiante vencia por ordem e esta
   regra nunca valia. Medido a 280px: o campo de hora saia 46px para fora da
   caixa e o corpo do wizard ganhava rolagem lateral. E o caso que o CLAUDE.md
   descreve com o `.lv-fechamento-painel h2`. */
@media (max-width: 575px) {
  .lv-wiz-linha { grid-template-columns: 1fr; }
}

/* A RECUSA E TEXTO, e nao so a borda vermelha do campo. Quem nao distingue cor
   ficaria sem informacao nenhuma. */
.lv-wiz-erro {
  margin: 0 0 14px; padding: 11px 13px;
  background: var(--lv-wiz-erro-fundo); border-left: 3px solid var(--lv-wiz-erro); border-radius: 6px;
  font-size: 14px; color: var(--lv-wiz-erro-texto);
}
.lv-wiz-erro[hidden] { display: none; }

/* AVISO DE ESTADO, e nao de recusa. Cor neutra de proposito: o vermelho do
   `.lv-wiz-erro` ao lado diria que algo deu errado, quando o que esta
   acontecendo e justamente a coisa dar certo. */
.lv-wiz-status {
  margin: 0 0 14px; padding: 11px 13px;
  background: var(--lv-wiz-status-fundo); border-left: 3px solid var(--lv-wiz-status); border-radius: 6px;
  font-size: 14px; color: var(--lv-wiz-status-texto);
}
.lv-wiz-status[hidden] { display: none; }

.lv-wiz-avancar {
  display: block; width: 100%; min-height: 52px;
  padding: 15px 24px; border: none; border-radius: 999px;
  background: var(--lv-gradient); color: #fff; cursor: pointer;
  font-family: var(--lv-font-display); font-weight: 800; font-size: 17px;
}
.lv-wiz-avancar:hover { box-shadow: 0 10px 26px rgba(220, 140, 219, .38); }
.lv-wiz-avancar:focus-visible {
  outline: 2px solid var(--lv-ink); outline-offset: 2px;
}

/* ===== PASSO 4: A CONTA =============================================== */

.lv-wiz-resumo {
  padding: 14px 16px; margin-bottom: 20px;
  background: var(--lv-accent-soft); border-radius: 12px; text-align: center;
}
.lv-wiz-resumo-nome {
  margin: 0 0 3px;
  font-family: var(--lv-font-display); font-weight: 800; font-size: 17px;
  color: var(--lv-ink);
  /* Nome de lista pode ser longo e vem de quem digitou: sem isto, uma palavra
     sem espaco estoura a largura do modal. */
  overflow-wrap: anywhere;
}
.lv-wiz-resumo-detalhe { margin: 0; font-size: 13px; color: var(--lv-muted); }

.lv-wiz-social  { display: grid; gap: 10px; justify-items: center; }
/* 40px, QUE E A ALTURA DO WIDGET. O `min-height` aqui reserva o espaco antes
   de o SDK desenhar, para a lista de botoes nao pular; reservar 44 deixava 4px
   de vao morto abaixo do widget e desalinhava a coluna. `size: 'large'` e o
   maior que o `renderButton` aceita, entao 40 e o numero real. */
.lv-wiz-google  { min-height: 40px; }

/* AS QUATRO SAIDAS COM A MESMA LARGURA. Escopado no passo 4 pelo atributo, e
   nao aplicado nas classes base, porque `.lv-wiz-avancar` tambem e o "Proximo"
   do passo 3, onde nao ha widget de terceiro nenhum ditando largura.

   `margin-left/right` em vez de `margin-inline` para nao perder o
   `margin-top: 10px` do `.lv-wiz-secundario` nem o `20px 0` do `.lv-wiz-ou`. */
[data-lv-passo="4"] .lv-wiz-social,
[data-lv-passo="4"] .lv-wiz-ou,
[data-lv-passo="4"] .lv-wiz-avancar,
[data-lv-passo="4"] .lv-wiz-secundario {
  max-width: var(--lv-wiz-acao-larg);
  margin-left: auto;
  margin-right: auto;
}

/* A MESMA ALTURA DO GOOGLE, e por isso 40 e nao 48. O widget do Google e fixo
   em 40px (`size: 'large'` ja e o maior do `renderButton`), entao quem tem de
   descer e este -- os dois lado a lado com alturas diferentes se leem como
   coisas diferentes, que e o defeito que o `filled_blue` veio corrigir.

   `flex` para o icone e o rotulo ficarem centrados como um grupo, do mesmo
   jeito que as sete landings fazem. */
.lv-wiz-facebook {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  /* SEM PADDING VERTICAL: com ele o botao dava 42px e nao 40, e o par voltava
     a nao bater. Quem manda na altura e o `min-height`, e ele so vale quando
     nada empurra por baixo. Continua crescendo se o rotulo um dia quebrar
     linha, porque e `min-height` e nao `height`. */
  width: 100%; min-height: 40px; padding: 0 20px;
  border: none; border-radius: 999px; cursor: pointer;
  background: var(--lv-wiz-facebook); color: #fff;
  font-family: inherit; font-weight: 700; font-size: 15px;
}
/* `flex: none` para o SVG nao encolher quando o rotulo virar "Entrando...". */
.lv-wiz-facebook-icone { flex: none; }
.lv-wiz-facebook:hover { background: var(--lv-wiz-facebook-hover); }
.lv-wiz-facebook[hidden] { display: none; }

/* O "ou" com um risco de cada lado, sem imagem nem pseudo-elemento duplicado. */
.lv-wiz-ou {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0; font-size: 13px; color: var(--lv-muted);
}
.lv-wiz-ou::before,
.lv-wiz-ou::after {
  content: ""; flex: 1; height: 1px; background: var(--lv-line);
}

.lv-wiz-secundario {
  display: block; width: 100%; min-height: 48px; margin-top: 10px;
  padding: 13px 24px; border: 1.5px solid var(--lv-line); border-radius: 999px;
  background: var(--lv-surface); color: var(--lv-ink); cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: 15px;
}
.lv-wiz-secundario:hover { border-color: var(--lv-accent); }
.lv-wiz-secundario:focus-visible,
.lv-wiz-facebook:focus-visible {
  outline: 2px solid var(--lv-accent-strong); outline-offset: 2px;
}

/* AS QUATRO SAIDAS do passo 4, e nao "os dois botoes" -- foi o que o commit
   a419259 consertou. Google e Facebook chamam o mesmo `guardarPendente`:
   deixando os dois de fora, em 3G a pessoa tocava no Google, nada mudava na
   tela, ela tocava no Facebook, saiam dois POST e quem vencia a navegacao era
   o primeiro pedido. */
/* `pointer-events: none` porque `aria-disabled` NAO desabilita nada sozinho:
   ele so informa. Sem isto, o contentor do Google e o botao do Facebook
   ficavam marcados e continuavam clicaveis durante a gravacao. */
.lv-wiz-avancar[aria-disabled="true"],
.lv-wiz-secundario[aria-disabled="true"],
.lv-wiz-facebook[aria-disabled="true"],
.lv-wiz-google[aria-disabled="true"] { opacity: .6; cursor: default; pointer-events: none; }