/* MOB-03 / AUTH-FOOTER V2 — contrato medido a partir da APK 460 e das
 * capturas Android reais: CTA perto do rodapé, rodapé alinhado pela
 * borda SEGURA (não pelo espaço invisível reservado a outras telas).
 * O PIN numérico e o tutorial em bottom-sheet não pertencem a este layout.
 */
:root {
 --c4-auth-primary-height:52px;
 --c4-auth-secondary-height:48px;
 --c4-auth-actions-gap:6px;
 --c4-auth-bottom-gap:8px;
 --c4-auth-cta-ground:calc(
   var(--c4-auth-secondary-height) + var(--c4-auth-actions-gap) + var(--c4-auth-bottom-gap)
 );
}
.c4-auth-screen {min-width:0;min-height:0;overflow:hidden;}
.c4-auth-screen > .c4-auth-footer {
 box-sizing:border-box !important;position:absolute !important;
 inset:auto 0 calc(var(--c4-auth-cta-ground) + var(--sab)) !important;
 width:100% !important;margin:0 !important;padding:0 2rem !important;
 display:flex !important;flex-direction:column !important;
 align-items:center !important;justify-content:flex-end !important;
 gap:8px !important;flex:0 0 auto !important;z-index:20 !important;
 transform:none !important;animation:none !important;transition:none !important;
 opacity:1 !important;visibility:visible !important;
}
html.cash4ds-native-android :is(#view-login,#view-email-signup,#view-otp,#view-onboarding,#view-biometric-signup) > .c4-auth-footer {
 /* O phone-wrapper Android JÁ está dentro da área segura. */
 bottom:var(--c4-auth-cta-ground) !important;
 padding:0 2rem !important;
}
.c4-auth-footer > .c4-auth-primary {
 box-sizing:border-box !important;display:flex !important;
 align-items:center !important;justify-content:center !important;
 flex:0 0 auto !important;width:100% !important;max-width:320px !important;
 min-height:var(--c4-auth-primary-height) !important;
 padding:11px 20px !important;margin:0 !important;line-height:1.4 !important;
 text-align:center;touch-action:manipulation;
}
.c4-auth-footer > .c4-auth-secondary {
 box-sizing:border-box !important;min-height:48px !important;
 width:100% !important;max-width:320px !important;
 display:flex !important;align-items:center !important;
 justify-content:center !important;text-align:center;
 line-height:1.3 !important;touch-action:manipulation;
}
.c4-auth-footer > #btn-biometric-signup-skip.c4-auth-secondary {
 position:absolute !important;
 left:0;right:0;top:calc(100% + var(--c4-auth-actions-gap));
 width:calc(100% - 4rem) !important;
 max-width:320px !important;height:var(--c4-auth-secondary-height) !important;
 min-height:var(--c4-auth-secondary-height) !important;
 margin:0 auto !important;padding:0 10px !important;
 flex:0 0 auto !important;z-index:20;
}
/* Marca no mesmo lugar da primeira tela: não deve levantar o CTA. */
#view-login > .c4-auth-brand {
 position:absolute !important;left:0;right:0;
 bottom:calc(10px + var(--sab)) !important;
 height:18px !important;min-height:18px !important;
 margin:0 !important;padding:0 !important;line-height:18px !important;
 text-align:center !important;z-index:10;
}
html.cash4ds-native-android #view-login > .c4-auth-brand {
 bottom:10px !important;
}
/* Com teclado, a WebView redimensiona: manter o MESMO contrato dentro
 * da área útil, sem somar a altura do teclado nem deixar um segundo footer
 * em fluxo; ocultar apenas a assinatura decorativa da tela inicial. */
html.cash4ds-native-android body.cash4ds-keyboard-open :is(#view-login,#view-email-signup,#view-otp,#view-onboarding,#view-biometric-signup) > .c4-auth-footer {
 position:absolute !important;inset:auto 0 var(--c4-auth-cta-ground) !important;
 width:100% !important;margin:0 !important;padding:0 2rem !important;
 transform:none !important;gap:8px !important;
}
html.cash4ds-native-android body.cash4ds-keyboard-open #view-login > .c4-auth-brand {
 display:none !important;
}
/* OTP / teclado: a versão anterior empilhava ícone, título, campo e ajuda
 * no alto porque forçava justify-content:flex-start e reduzia tudo.
 * O topo mantém respiro e o painel utiliza o espaço livre até o CTA;
 * em telas realmente pequenas, somente esse painel rola.
 */
html.cash4ds-native-android body.cash4ds-keyboard-open #view-otp.c4-auth-screen {
 padding-top:20px !important;
 padding-bottom:132px !important;
 justify-content:flex-start !important;
}
html.cash4ds-native-android body.cash4ds-keyboard-open #view-otp #otp-brand-block {
 flex:0 0 auto !important;
 margin-top:clamp(8px,8vh,42px) !important;
 margin-bottom:0 !important;transform:none !important;
}
html.cash4ds-native-android body.cash4ds-keyboard-open #view-otp #otp-code-panel {
 flex:1 1 auto !important;min-height:0 !important;
 padding:8px 0 12px !important;margin:0 !important;
 display:flex !important;flex-direction:column !important;
 justify-content:center !important;gap:12px !important;
 overflow-y:auto !important;overscroll-behavior:contain !important;
 scroll-padding:12px !important;transform:none !important;
}
html.cash4ds-native-android body.cash4ds-keyboard-open #view-otp #otp-code-panel > #input-otp-code,
html.cash4ds-native-android body.cash4ds-keyboard-open #view-otp #otp-code-panel > #resend-otp-wrapper {
 flex:0 0 auto !important;
}
@media (max-height:450px) {
 html.cash4ds-native-android body.cash4ds-keyboard-open #view-otp.c4-auth-screen {
  padding-top:8px !important;padding-bottom:128px !important;
 }
 html.cash4ds-native-android body.cash4ds-keyboard-open #view-otp #otp-brand-block {
  margin-top:8px !important;
 }
 html.cash4ds-native-android body.cash4ds-keyboard-open #view-otp #otp-code-panel {
  justify-content:flex-start !important;overflow-y:auto !important;
 }
 html.cash4ds-native-android body.cash4ds-keyboard-open #view-email-signup > div:first-of-type > div:first-child {
  display:none !important;
 }
 html.cash4ds-native-android body.cash4ds-keyboard-open #view-email-signup > div:first-of-type {
  margin-top:2px !important;
 }
}
/* Acessibilidade: não animar a âncora dos botões quando a tela abre. */
@media (prefers-reduced-motion:reduce) {
 .c4-auth-footer,.c4-auth-footer .c4-auth-primary {animation:none !important;transition:none !important;}
}
/* O onboarding mantém um override legado de maior especificidade que
 * mudava o footer para position:relative com teclado: invalidá-lo em V2. */
html.cash4ds-native-android body.cash4ds-keyboard-open #view-onboarding > div.c4-auth-footer:last-of-type {
 position:absolute !important;
 inset:auto 0 var(--c4-auth-cta-ground) !important;
 width:100% !important;margin:0 !important;padding:0 2rem !important;
 transform:none !important;flex:0 0 auto !important;
}
/* 116px reservados à ação, deixando o centro do formulário respirar. */
@media (min-height:451px) {
 html.cash4ds-native-android body.cash4ds-keyboard-open #view-otp.c4-auth-screen {
  padding-bottom:116px !important;
 }
}
/* MOB-03 / Header & Footer V3 — mesma estrutura para TERMOS, CÓDIGO,
 * APELIDO, BIOMETRIA; a home de acesso conserva a marca/gráfico próprios.
 * A ação secundária da biometria fica junto ao texto explicativo, sem
 * obrigar o botão principal a ficar alto nas demais telas.
 */
:root { --c4-auth-cta-ground:38px; --c4-auth-icon-size:56px; }
html.cash4ds-native-android :is(#view-email-signup,#view-otp,#view-onboarding,#view-biometric-signup) > .c4-auth-heading {
 box-sizing:border-box !important;
 margin-top:3.5rem !important;
 width:100% !important;flex:0 0 auto !important;
 text-align:center !important;transform:none !important;
}
html.cash4ds-native-android .c4-auth-heading > .c4-auth-heading-icon {
 box-sizing:border-box !important;
 width:var(--c4-auth-icon-size) !important;
 height:var(--c4-auth-icon-size) !important;
 min-height:var(--c4-auth-icon-size) !important;
 margin:0 auto 1rem !important;
 border-radius:50% !important;
 display:flex !important;align-items:center !important;
 justify-content:center !important;
}
html.cash4ds-native-android .c4-auth-heading > .c4-auth-heading-icon svg {
 width:28px !important;height:28px !important;
}
html.cash4ds-native-android #view-biometric-signup .c4-auth-heading > #btn-biometric-signup-skip {
 box-sizing:border-box !important;position:relative !important;
 inset:auto !important;display:flex !important;
 width:100% !important;max-width:320px !important;
 min-height:48px !important;height:48px !important;
 margin:12px auto 0 !important;padding:0 10px !important;
 font-size:13px !important;line-height:1.3 !important;
 align-items:center !important;justify-content:center !important;
 touch-action:manipulation;
}
/* No Android com teclado, os quatro cabeçalhos começam em uma
 * coordenada comum, sem amontoar o código na altura do botão Voltar.
 * Quando o teclado deixa pouquíssima altura, só o conteúdo central rola.
 */
html.cash4ds-native-android body.cash4ds-keyboard-open :is(#view-email-signup,#view-otp,#view-onboarding,#view-biometric-signup).c4-auth-screen {
 padding-top:20px !important;
}
html.cash4ds-native-android body.cash4ds-keyboard-open :is(#view-email-signup,#view-otp,#view-onboarding,#view-biometric-signup) > .c4-auth-heading {
 margin-top:3.5rem !important;
}
html.cash4ds-native-android body.cash4ds-keyboard-open #view-otp .c4-auth-heading > .c4-auth-heading-icon {
 width:44px !important;height:44px !important;min-height:44px !important;
 margin-bottom:10px !important;
}
html.cash4ds-native-android body.cash4ds-keyboard-open #view-otp .c4-auth-heading > .c4-auth-heading-icon svg {
 width:23px !important;height:23px !important;
}
/* A ajuda extensa é dispensável enquanto se digita; volta ao fechar
 * o teclado. O reenvio e seu contador permanecem sempre visíveis. */
html.cash4ds-native-android body.cash4ds-keyboard-open #view-otp #otp-delivery-help {
 display:none !important;
}
html.cash4ds-native-android body.cash4ds-keyboard-open #view-otp #otp-code-panel {
 gap:12px !important;padding:12px 0 !important;
 justify-content:center !important;
}
@media (max-height:450px) {
 html.cash4ds-native-android body.cash4ds-keyboard-open :is(#view-email-signup,#view-otp,#view-onboarding,#view-biometric-signup) > .c4-auth-heading {
  margin-top:12px !important;
 }
 html.cash4ds-native-android body.cash4ds-keyboard-open #view-otp #otp-code-panel {
  justify-content:flex-start !important;
 }
}
/* Ajustes finais por especificidade: #otp-brand-block e o primeiro div do
 * apelido tinham regras antigas individuais que anulavam a âncora comum. */
html.cash4ds-native-android body.cash4ds-keyboard-open #view-otp #otp-brand-block.c4-auth-heading,
html.cash4ds-native-android body.cash4ds-keyboard-open #view-onboarding > div.c4-auth-heading:first-of-type {
 margin-top:3.5rem !important;
}
html.cash4ds-native-android body.cash4ds-keyboard-open #view-otp .c4-auth-heading > .c4-auth-heading-icon {
 width:56px !important;height:56px !important;min-height:56px !important;
 margin-bottom:10px !important;
}
html.cash4ds-native-android body.cash4ds-keyboard-open #view-otp .c4-auth-heading > .c4-auth-heading-icon svg {
 width:28px !important;height:28px !important;
}
@media (max-height:450px) {
 html.cash4ds-native-android body.cash4ds-keyboard-open #view-otp #otp-brand-block.c4-auth-heading,
 html.cash4ds-native-android body.cash4ds-keyboard-open #view-onboarding > div.c4-auth-heading:first-of-type {
  margin-top:12px !important;
 }
}
/* Menor viewport: mesmo ícone nas quatro telas. Reduzir todos a 44px
 * é melhor que esconder só o ícone de Termos, como fazia o legado. */
@media (max-height:450px) {
 html.cash4ds-native-android body.cash4ds-keyboard-open #view-email-signup > div.c4-auth-heading:first-of-type > .c4-auth-heading-icon {
  display:flex !important;
 }
 html.cash4ds-native-android body.cash4ds-keyboard-open :is(#view-email-signup,#view-otp,#view-onboarding,#view-biometric-signup) .c4-auth-heading-icon {
  width:44px !important;height:44px !important;min-height:44px !important;
  margin-bottom:8px !important;
 }
 html.cash4ds-native-android body.cash4ds-keyboard-open :is(#view-email-signup,#view-otp,#view-onboarding,#view-biometric-signup) .c4-auth-heading-icon svg {
  width:22px !important;height:22px !important;
 }
}
@media (max-height:450px) {
 html.cash4ds-native-android body.cash4ds-keyboard-open #view-email-signup > div.c4-auth-heading:first-of-type {
  margin-top:12px !important;
 }
 html.cash4ds-native-android body.cash4ds-keyboard-open #view-otp .c4-auth-heading > .c4-auth-heading-icon {
  width:44px !important;height:44px !important;min-height:44px !important;
  margin-bottom:8px !important;
 }
}
/* Campos em viewport com IME: separar fisicamente a área de preenchimento
 * do rodapé em vez de centralizar um flex com padding-bottom legado. */
html.cash4ds-native-android body.cash4ds-keyboard-open #view-onboarding > div:nth-of-type(2),
html.cash4ds-native-android body.cash4ds-keyboard-open #view-email-signup > div:nth-of-type(2) {
 box-sizing:border-box !important;
 position:absolute !important;
 inset:max(175px,48%) 2rem 130px !important;
 display:flex !important;flex-direction:column !important;
 min-height:0 !important;height:auto !important;
 padding:0 !important;margin:0 !important;
 justify-content:center !important;align-items:center !important;
 overflow-y:auto !important;overscroll-behavior:contain !important;
}
@media (max-height:450px) {
 html.cash4ds-native-android body.cash4ds-keyboard-open #view-biometric-signup .c4-auth-heading > p {
  line-height:1.2 !important;
 }
 html.cash4ds-native-android body.cash4ds-keyboard-open #view-biometric-signup .c4-auth-heading > #btn-biometric-signup-skip {
  margin-top:0 !important;
 }
}
/* MOB-03 / apelido com teclado: o contêiner central tinha width:100% herdado
 * de w-full + inset horizontal de 2rem. CSS ignorava right e deslocava o
 * campo 32px para a direita. Ajustar só a largura do contêiner, não o fluxo. */
html.cash4ds-native-android body.cash4ds-keyboard-open #view-onboarding > div:nth-of-type(2) {
 width:auto !important;
 left:2rem !important;
 right:2rem !important;
 max-width:none !important;
}
html.cash4ds-native-android body.cash4ds-keyboard-open #view-onboarding #onboarding-name {
 box-sizing:border-box !important;
 width:100% !important;
 max-width:320px !important;
 min-width:0 !important;
}