/* ============================================================================
   TRATOO — Cadastro (contratante / prestador)
   O markup é gerado por assets/js/pages/auth/cadastro.js usando componentes do
   Bootstrap (card, form-control, input-group, form-check, alert, btn). Aqui
   ficam apenas o enquadramento da tela e os poucos elementos que o Bootstrap
   não cobre — mesmo padrão de assets/css/pages/auth/login.css.
   ============================================================================ */

/* ── Enquadramento: card centralizado vertical e horizontalmente ─────────── */
/* Idêntico ao de login.css: as duas telas compõem o mesmo fluxo de auth e
   devem ocupar o espaço entre header/footer da mesma forma. */

.auth-shell {
    flex: 1;                       /* ocupa o espaço entre header e footer */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    padding: var(--space-2xl) var(--space-md);
}

.auth-card {
    width: 100%;
    max-width: 440px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

/* Selo de confiança abaixo do card — reforça segurança (marketplace/pagamentos) */
.auth-shell__trust {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* ── Ícone circular no topo das telas de confirmação / sucesso ───────────── */

.auth-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: var(--gray-100);
    color: var(--gray-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    margin-bottom: var(--space-md);
}

.auth-icon--success {
    background: var(--success-light);
    color: var(--secondary-dark);
}

/* ── Campo de código OTP (6 dígitos) ─────────────────────────────────────── */

.auth-otp {
    text-align: center;
    letter-spacing: 0.6em;
    text-indent: 0.6em;            /* compensa o letter-spacing do último dígito */
    font-weight: 700;
    font-family: var(--font-mono);
}

.auth-otp::placeholder {
    letter-spacing: 0.6em;
    font-weight: 400;
}