/* =============================================================================
   style-pre-cadastro-wizard.css — casca compartilhada dos DOIS formulários de
   cadastro (pre_cadastro_usuario_limitado.php e pre_cadastro_franqueado.php).

   Existe como arquivo separado justamente porque eles são cópias gêmeas: a regra
   do projeto é que mudem juntos, e duas folhas de estilo paralelas seriam o
   caminho mais curto para eles voltarem a divergir.

   Cores SEMPRE por token do design_tokens.css. Os dois arquivos passaram a
   carregá-lo; o de franqueado mantém os apelidos antigos (--dark-bg e afins)
   apontando para os tokens, então o CSS que já existia lá continua valendo.
   ========================================================================== */

/* O atributo [hidden] NAO vence um display declarado no CSS — e .am-btn,
   .pcw-confirmado e afins declaram display. Sem esta regra o botao "Criar minha
   conta" e a marca "E-mail confirmado" apareciam ja no passo 2, porque o JS
   esconde por atributo. Vale so nestas duas paginas (so elas carregam este CSS). */
[hidden] { display: none !important; }

/* As duas paginas tinham body proprio: a de franqueado com display:flex + centro
   (a barra da marca virava um bloco estreito ao lado do formulario) e a de convite
   com padding no topo (faixa sobrando acima da barra). A casca precisa do body
   limpo; por isso a classe .pcw-page, posta nas duas. */
body.pcw-page {
    display: block;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    align-items: initial;
    justify-content: initial;
}

/* ---- Logo dentro do painel lateral -------------------------------------- */
.pcw-aside__brand {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 2px;
}
.pcw-aside__logo {
    width: auto;
    max-height: 40px;
    height: auto;
    display: block;
}

/* ---- Duas colunas: formulário à esquerda, apresentação à direita --------- */
.pcw-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    min-height: calc(100vh - 45px);
}
.pcw-formcol {
    padding: 34px 24px 56px;
    display: flex;
    justify-content: center;
}
.pcw-formcol__inner { width: 100%; max-width: 460px; }

/* Mesmo tratamento do hero do login.php: fundo com clarao suave da marca e os
   veiculos ancorados embaixo. Reusa img/login/Carro.png e Moto.png — as mesmas
   imagens do login, para o cadastro e a entrada terem a mesma cara. */
.pcw-aside {
    position: relative;
    overflow: hidden;
    border-left: 1px solid var(--line);
    padding: 48px 40px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    background:
        radial-gradient(900px 520px at 24% 14%, rgba(34, 197, 94, .12), transparent 55%),
        var(--panel-2);
}
.pcw-aside__conteudo {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 460px;
}
/* Largura em % da COLUNA, nao em vw: assim os veiculos acompanham a coluna e
   nao vazam quando a janela muda de tamanho. */
.pcw-aside__veiculos {
    position: relative;
    z-index: 1;
    margin-top: 34px;
    width: min(100%, 620px);
    align-self: center;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    filter: drop-shadow(0 22px 38px rgba(0, 0, 0, .5));
}
.pcw-aside__veiculos img { height: auto; display: block; }
.pcw-aside__veiculos .car  { position: relative; z-index: 2; width: 62%; }
.pcw-aside__veiculos .moto { position: relative; z-index: 1; width: 48%; margin-left: -12%; margin-bottom: 1%; }
.pcw-aside h2 {
    font-size: clamp(20px, 2.1vw, 28px);
    line-height: 1.22;
    font-weight: 600;
    color: var(--brand-text, var(--brand));
    letter-spacing: -0.3px;
}
.pcw-aside p { font-size: clamp(13px, 1vw, 15px); line-height: 1.6; color: var(--muted); }
.pcw-aside ul { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-top: 4px; }
.pcw-aside li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text); }
.pcw-aside li i { color: var(--brand); margin-top: 3px; flex: 0 0 auto; }

/* A coluna de apresentação é enfeite: some antes de espremer o formulário. */
@media (max-width: 900px) {
    .pcw-split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .pcw-aside {
        order: -1;
        display: flex;
        border-left: none;
        border-bottom: 1px solid var(--line);
        padding: 18px 16px 14px;
        justify-content: center;
        gap: 12px;
    }
    .pcw-aside__conteudo,
    .pcw-aside__veiculos { display: none; }
    .pcw-aside__brand { justify-content: center; }
    .pcw-formcol { padding: 24px 16px 48px; }
}

/* ---- Cabeçalho do passo ------------------------------------------------- */
.pcw-head { margin-bottom: 20px; }
.pcw-head h1 { font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; color: var(--heading); letter-spacing: -0.2px; }
.pcw-head p { margin-top: 6px; font-size: clamp(13px, 1vw, 14px); line-height: 1.5; color: var(--muted-sub, var(--muted)); }

/* ---- Trilha de progresso: REMOVIDA -------------------------------------- */
/* A barra de etapas e o "Passo X de Y" saíram de propósito: ver quantos passos
   faltam, logo na primeira tela, fazia o cadastro parecer longo e derrubava a
   conversão. O passo agora se anuncia só pelo título (.pcw-head h1). */

/* ---- Passos ------------------------------------------------------------- */
/* [hidden] não vence um display declarado, então quem esconde é ESTA regra —
   e é por isso que o JS alterna a classe, não o atributo. */
.pcw-step { display: none; }
.pcw-step.is-active { display: block; }

/* ---- Navegação ---------------------------------------------------------- */
.pcw-nav { display: flex; gap: 10px; align-items: center; margin-top: 24px; }
.pcw-nav .pcw-avancar { flex: 1 1 auto; justify-content: center; }
.pcw-nav .pcw-voltar { flex: 0 0 auto; }

/* ---- Passo do código ---------------------------------------------------- */
.pcw-codigo-box { text-align: center; }
.pcw-codigo-input {
    width: 100%;
    max-width: 260px;
    margin: 4px auto 0;
    display: block;
    text-align: center;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 10px;
    text-indent: 10px; /* compensa o letter-spacing sobrando à direita */
    padding: 12px 10px;
}
.pcw-codigo-dica { margin-top: 12px; font-size: 13px; color: var(--muted); line-height: 1.6; }
.pcw-reenviar {
    background: none;
    border: none;
    color: var(--brand);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}
.pcw-reenviar[disabled] { color: var(--muted); cursor: default; text-decoration: none; }

/* ---- Recado do passo (erro/sucesso) ------------------------------------- */
/* Cor no texto e na borda, nunca fundo cheio por severidade. */
.pcw-msg {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.55;
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--text);
}
.pcw-msg--erro { border-color: var(--error); color: var(--error); }
.pcw-msg--ok   { border-color: var(--success); color: var(--success); }

/* ---- E-mail já confirmado ---------------------------------------------- */
.pcw-confirmado {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--success);
    margin-top: 8px;
}

/* Telas pequenas: tudo um ponto menor. A lista de criterios de senha e o que
   mais come tela no passo 1, e era ela que empurrava o botao para fora da dobra. */
@media (max-width: 640px) {
    .pcw-formcol { font-size: 13px; }
    .pcw-formcol label { font-size: 13px; }
    /* ⚠️ 16px NO CAMPO, e nao menos: abaixo disso o Safari do iPhone da zoom
       sozinho ao focar o input e a pessoa perde o enquadramento da tela. Quem
       encolhe para ganhar espaco e o texto em volta (rotulo, dica, criterios),
       que e o que de fato ocupa altura. */
    /* body.pcw-page na frente para vencer as regras proprias de cada pagina
       (body.pre-cadastro-convite .am-input tem especificidade maior que
       .pcw-formcol .am-input) sem recorrer a !important. */
    body.pcw-page .pcw-formcol .am-input,
    body.pcw-page .pcw-formcol .am-select,
    body.pcw-page .pcw-formcol input:not([type=checkbox]):not([type=radio]),
    body.pcw-page .pcw-formcol select,
    body.pcw-page .pcw-formcol textarea { font-size: 16px; padding-top: 9px; padding-bottom: 9px; }
    .pcw-formcol .pc-hint,
    .pcw-formcol .form-hint,
    .pcw-formcol .validation-message { font-size: 11.5px; line-height: 1.45; }
    .pcw-formcol .password-requirements li,
    .pcw-formcol ul li { font-size: 12px; }
    .pcw-aside__brand { justify-content: center; }
    .pcw-aside__logo { max-height: 30px; }
}

@media (max-width: 480px) {
    .pcw-head h1 { font-size: 17px; }
    .pcw-codigo-input { font-size: 22px; letter-spacing: 8px; text-indent: 8px; }
}