/* Tela de cadastro (/cadastro). Tokens vêm de design-system.css — não
   inventar cor, raio nem tipografia; só o que é específico desta tela mora
   aqui. Espelha public/_design-demos/cadastro-onboarding-v1.html
   (telas "Passo 1 · cadastro.php"). */

/* .ds-link-btn (design-system.css) declara display:inline-flex, que — sendo
   regra de autor — vence o [hidden]{display:none} do agente de usuário na
   mesma especificidade. Sem isto, os links do modo manual ficam visíveis
   os dois ao mesmo tempo mesmo com o atributo hidden presente. */
[hidden] { display: none !important; }

/* O design system declara .ds-input { width:100% } sem box-sizing, e o projeto
   não tem reset global — então padding e borda somam à largura e estouram o
   contêiner. Escopado a esta tela para não alterar o comportamento das telas
   legadas, que já convivem com esse cálculo há muito tempo. */
.cadastro-cartao .ds-input,
.cadastro-busca-input {
    box-sizing: border-box;
}

body.cadastro-fundo {
    /* box-sizing:border-box aqui não é só consistência: sem ele, o
       min-width:375px trava a largura do CONTEÚDO em 375px e o padding
       lateral (16px de cada lado) soma por cima, estourando o piso de
       375px em 32px — o mesmo tipo de estouro do .ds-input, só que na raiz
       da página. */
    box-sizing: border-box;
    margin: 0;
    min-width: 375px;
    font-family: var(--ds-font-body);
    color: var(--ds-text-primary);
    /* Mesmas regras do login.css legado (linhas 2-9), e não é preferência:
       login_bg.png é uma faixa de 1381x289, larga e baixa. Com `cover` o
       navegador escala a imagem até cobrir a ALTURA do viewport, o que num
       monitor comum amplia a faixa várias vezes e joga o desenho para fora da
       tela. O tamanho natural, ancorado embaixo e com attachment fixed, é o que
       mantém a faixa colada no rodapé da janela enquanto a página rola. */
    /* #ff6600 e não var(--ds-brand): o login_bg.png é OPACO e o fundo dele é
       exatamente #ff6600 (conferido pixel a pixel). Com o #e8611a do design
       system atrás, os dois laranjas se encontram numa emenda visível na linha
       onde a faixa começa. Quem manda na cor aqui é a imagem. */
    background-color: #ff6600;
    background-image: url('/assets/img/login_bg.png');
    background-position: center bottom;
    background-attachment: fixed;
    background-repeat: no-repeat;
    padding: 34px 16px 60px;
}

/* Abaixo de 600px a faixa em tamanho natural fica pequena demais para a
   largura da tela — o legado resolve dobrando a escala. */
@media only screen and (max-width: 600px) {
    body.cadastro-fundo { background-size: 200%; }
}

.cadastro-caixa { max-width: 468px; margin: 0 auto; }

.cadastro-logo { text-align: center; margin-bottom: 18px; }
.cadastro-logo img { width: 170px; }

.cadastro-cartao {
    background: #fff;
    border-radius: var(--ds-radius-lg);
    padding: 26px 24px 22px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .22);
}
.cadastro-cartao h1 { margin: 0 0 4px; font-size: 19px; font-weight: 700; letter-spacing: -.015em; }
.cadastro-sub { margin: 0 0 20px; font-size: 12.5px; color: var(--ds-text-secondary); line-height: 1.5; }
.cadastro-nota { margin: 0 0 14px; font-size: 11.5px; color: var(--ds-text-muted); line-height: 1.5; }

/* Cabeçalho de seção — mesmo padrão do .ds-modal-section-title do design
   system, mas esse arquivo não define uma classe solta pra fora de modal. */
/* .ds-section-title subiu para design-system.css — era usada por mais de
   uma tela. Valores idênticos aos que estavam aqui. */

/* ---- Campo Places: o herói da tela ---- */
#bloco-busca { position: relative; margin-bottom: 16px; }
/* É este wrap — e não o #bloco-busca — que ancora o dropdown de sugestões.
   Ele envolve só o campo, então o `top: 100%` do #sugestoes cai exatamente na
   borda de baixo do input. */
.cadastro-busca-wrap { position: relative; }
.cadastro-busca-icone {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    display: flex; color: var(--ds-text-faint); pointer-events: none; transition: color .12s;
}
.cadastro-busca-icone.cadastro-busca-icone--ativo { color: var(--ds-brand); }
.cadastro-busca-input {
    height: 44px; font-size: 14.5px; font-weight: 600; padding-left: 36px;
}
/* modo manual: sem lupa, o texto encosta como um campo comum */
#bloco-busca.modo-manual .cadastro-busca-icone { display: none; }
#bloco-busca.modo-manual .cadastro-busca-input { padding-left: 12px; }

#sugestoes {
    position: absolute; top: 100%; left: 0; right: 0; margin-top: 5px;
    background: #fff; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .16); z-index: 40; overflow: hidden;
}
.cadastro-sugestao {
    display: block; width: 100%; text-align: left; background: none; border: none;
    border-bottom: 1px solid #f2f2f2; padding: 11px 13px; cursor: pointer; font-family: inherit;
}
.cadastro-sugestao:hover, .cadastro-sugestao:focus { background: var(--ds-brand-light); }
.cadastro-sugestao-principal { font-size: 13.5px; font-weight: 700; color: var(--ds-text-primary); }
.cadastro-sugestao-secundaria { display: block; font-size: 11.5px; color: var(--ds-text-muted); margin-top: 2px; }

/* Nenhum resultado no Google: a saída usa o que já foi digitado — nunca um
   beco sem saída. */
.cadastro-sem-resultado {
    display: block; width: 100%; text-align: left; background: none; border: none;
    padding: 13px; cursor: pointer; font-family: inherit; font-size: 12.5px;
    color: var(--ds-text-secondary); line-height: 1.5;
}
.cadastro-sem-resultado:hover, .cadastro-sem-resultado:focus { background: var(--ds-brand-light); }
.cadastro-sem-resultado-acao { color: var(--ds-brand); font-weight: 700; }

/* Atribuição do Google — exigida pelos Termos da Places API sempre que
   dados do Places aparecem fora de um mapa Google. Não é decoração, não
   remover nem esconder. */
.cadastro-atribuicao {
    display: flex; align-items: center; justify-content: flex-end; gap: 5px;
    padding: 6px 12px; font-size: 10px; color: var(--ds-text-muted); letter-spacing: .02em;
}
.cadastro-atribuicao-logo { font-weight: 700; letter-spacing: -.02em; font-size: 11.5px; }

.cadastro-modo-manual { font-size: 11.5px; padding: 0; margin-top: -6px; margin-bottom: 16px; }
#dica-manual { margin: 4px 0 6px; }
.cadastro-voltar-busca { font-size: 11.5px; padding: 0; margin-bottom: 16px; }

/* ---- Card de confirmação: o momento "ele já me conhece" ---- */
.cadastro-card-lugar {
    border: 1px solid var(--ds-brand); background: var(--ds-brand-light);
    border-radius: var(--ds-radius-md); padding: 13px 14px; margin-bottom: 18px;
}
.cadastro-card-lugar-topo { display: flex; gap: 12px; }
.cadastro-card-lugar-foto {
    width: 62px; height: 62px; flex-shrink: 0; background: #fff;
    background-size: cover; background-position: center;
    border: 1px dashed var(--ds-border-mid); border-radius: var(--ds-radius-md);
    display: flex; align-items: center; justify-content: center;
    text-align: center; color: var(--ds-text-muted); font-size: 10px; line-height: 1.3;
}
.cadastro-card-lugar-info { min-width: 0; flex: 1; }
.cadastro-card-lugar-nome { font-size: 14px; font-weight: 700; line-height: 1.25; }
.cadastro-card-lugar-linha {
    display: flex; gap: 5px; align-items: flex-start; margin-top: 4px;
    font-size: 11.5px; color: var(--ds-text-secondary);
}
.cadastro-card-lugar-linha svg { color: var(--ds-brand); flex-shrink: 0; margin-top: 1px; }
.cadastro-card-lugar-rodape {
    display: flex; align-items: center; justify-content: space-between; margin-top: 10px;
    padding-top: 9px; border-top: 1px solid #f0ded3;
}
.cadastro-card-lugar-rodape .ds-link-btn { font-size: 11.5px; padding: 0; }

.cadastro-termos {
    display: flex; gap: 8px; align-items: flex-start; font-size: 11.5px;
    color: var(--ds-text-secondary); line-height: 1.45; margin: 4px 0 14px; cursor: pointer;
}
.cadastro-termos input { margin-top: 2px; }
.cadastro-termos a { color: var(--ds-brand); }

.cadastro-erros {
    background: var(--ds-red-light);
    border: 1px solid #f3c9c5;
    border-radius: var(--ds-radius-md);
    padding: 10px 12px;
    margin-bottom: 16px;
    font-size: 12px;
    color: var(--ds-red);
    line-height: 1.5;
}

.cadastro-enviar { width: 100%; height: 44px; font-size: 15px; justify-content: center; }

.cadastro-login-link { text-align: center; margin-top: 13px; font-size: 12px; color: var(--ds-text-secondary); }
.cadastro-login-link a { color: var(--ds-brand); font-weight: 700; }

.cadastro-ajuda {
    text-align: center; margin-top: 16px; font-size: 11.5px;
    color: rgba(255, 255, 255, .92); line-height: 1.7;
}

@media (max-width: 640px) {
    .ds-form-grid-2 { grid-template-columns: 1fr; }
}

/* Quem administra o restaurante e quem jantou nele digitam a mesma URL. Este
   bloco é a saída do segundo — e ele não tem para onde clicar, porque a página
   da reserva (minha-reserva.php?c=) exige o código que só chega no e-mail/SMS. */
.aviso-cliente {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--ds-border);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--ds-text-muted);
    text-align: center;
}

/* Isca do formulário: fora da tela, não `display:none`. Parte dos bots pula o
   que está escondido com display:none, e a isca só serve se ele preencher. */
.cadastro-isca {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}