/* Shared auth components.
   Area CSS defines theme tokens; this file owns component structure. */

.auth-document--admin,
.auth-document--customer,
.auth-document--partner {
  background-color: var(--color-surface-app);
}

.admin-auth {
  --auth-accent: var(--primary, var(--color-neutral-900));
  --auth-accent-hover: var(--primary-hover, var(--color-black));
  --auth-surface-shadow: rgba(0, 0, 0, 0.28);
  --auth-accent-soft: rgba(var(--primary-rgb, 38, 38, 38), 0.12);
  --auth-focus: rgba(var(--primary-rgb, 38, 38, 38), 0.18);
}

.customer-auth {
  --auth-accent: var(--color-primary, var(--color-primary));
  --auth-accent-hover: var(--color-secondary, var(--color-primary));
  --auth-surface-shadow: var(--shadow-brand, rgba(var(--primary-rgb, 109, 40, 217), 0.28));
  --auth-accent-soft: rgba(var(--primary-rgb, 109, 40, 217), 0.12);
  --auth-focus: rgba(var(--primary-rgb, 109, 40, 217), 0.22);
}

.partner-auth {
  --auth-accent: var(--primary, var(--color-primary));
  --auth-accent-hover: var(--primary-hover, var(--color-primary));
  --auth-surface-shadow: rgba(var(--primary-rgb, 109, 40, 217), 0.28);
  --auth-accent-soft: rgba(var(--primary-rgb, 109, 40, 217), 0.12);
  --auth-focus: rgba(var(--primary-rgb, 109, 40, 217), 0.22);
}

:is(.admin-auth, .customer-auth, .partner-auth) {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm);
  /* Background cinza claro padronizado em toda a area nao logada,
     independente do whitelabel — mesmo tom da area logada (.main-content). */
  background: var(--color-surface-app);
}

/* Seletor de idioma (PT/EN) nos rodapes — usado em _AuthFooter.cshtml e
   _DashboardFooter.cshtml. Render como links com bandeira e nome do idioma. */
.footer-language-switcher {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 0.4rem;
  font-size: 0.85rem;
  margin-left: auto;
}

.footer-language-switcher__link {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.35rem;
  padding: 0.15rem 0;
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    opacity 0.15s ease;
  opacity: 0.7;
  white-space: nowrap;
}

.footer-language-switcher__link:hover,
.footer-language-switcher__link:focus-visible {
  opacity: 1;
  border-bottom-color: currentColor;
  text-decoration: none;
}

.footer-language-switcher__link.is-active {
  font-weight: 600;
  opacity: 1;
  border-bottom-color: currentColor;
  text-decoration: none;
}

.footer-language-switcher__flag {
  font-size: 1rem;
  line-height: 1;
}

.footer-language-switcher__name {
  white-space: nowrap;
}

.footer-language-switcher__sep {
  color: var(--color-text-muted, var(--color-gray-400));
  user-select: none;
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-card {
  /* Login + recuperar senha: card estreito (retangular vertical) — poucos campos.
     Cadastro/onboarding usa .auth-card-wide abaixo. */
  width: min(100%, 400px);
  max-width: 400px;
  min-height: clamp(37.5rem, 67vh, 40rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-surface-card);
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  /* Sombra leve e profissional — sem o "peso" do drop-shadow forte anterior. */
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 6px 18px rgba(17, 24, 39, 0.06);
  animation: authSlideUp 0.45s ease-out;
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-card:not(.auth-card-wide),
:is(.admin-auth, .customer-auth, .partner-auth) .auth-card-public-flow {
  min-height: clamp(45.5rem, 82vh, 47rem);
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-card-wide {
  /* Cadastro/onboarding: card largo (retangular horizontal) — duas colunas
     de campos em desktop, colapsa para 1 coluna em mobile via row/col bootstrap. */
  width: min(100%, 880px);
  max-width: 880px;
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Altura minima consistente entre whitelabels: o header colorido tem a mesma
     presenca/altura independente da proporcao do logo de cada tenant. */
  min-height: 13.5rem;
  padding: 1.85rem var(--spacing-md) 1.6rem;
  text-align: center;
  /* Cor chapada (sem degrade) para um visual mais limpo e profissional. */
  background: var(--auth-accent);
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-header .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.85rem;
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-header .logo-img {
  /* Normaliza o logo por ALTURA (e nao por largura): logos com proporcoes
     diferentes entre whitelabels ocupam a mesma area vertical, mantendo o
     header uniforme. O max-width impede que wordmarks largos estourem o card. */
  width: auto;
  height: auto;
  max-height: 6rem;
  max-width: 16rem;
  object-fit: contain;
}

/* Cadastro/onboarding usam o card largo (auth-card-wide): o header tem muito
   mais largura disponivel, entao o logo pode ser maior para nao parecer
   pequeno/perdido no espaco. */
:is(.admin-auth, .customer-auth, .partner-auth) .auth-card-wide .auth-header .logo-img {
  max-height: 7.5rem;
  max-width: 22rem;
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-header .subtitle {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.875rem;
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-body {
  flex: 1 1 auto;
  padding: 1.25rem var(--spacing-md);
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-body .d-grid.gap-3,
:is(.admin-auth, .customer-auth, .partner-auth) .auth-body .form-grid-2col {
  row-gap: var(--auth-form-row-gap, 0.875rem);
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-body .d-grid.gap-3 > .mb-3,
:is(.admin-auth, .customer-auth, .partner-auth) .auth-body .form-grid-2col > .mb-3,
:is(.admin-auth, .customer-auth, .partner-auth) .auth-body .form-grid-2col > .mb-2 {
  margin-bottom: 0 !important;
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-body .field-validation-valid:empty,
:is(.admin-auth, .customer-auth, .partner-auth) .auth-body .invalid-feedback:empty,
:is(.admin-auth, .customer-auth, .partner-auth) .auth-body .text-danger.small:empty {
  display: none !important;
  margin: 0 !important;
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-body .field-validation-error {
  display: block;
  margin-top: 0.35rem;
}

/* `~` (e não `+`): entre o wrapper do olho e o `.invalid-feedback` pode existir
   um <span> de validação do ASP.NET (asp-validation-for), que quebrava o `+`
   adjacente e escondia o erro do "Confirmar senha" (#bug-confirmar-obrigatorio). */
:is(.admin-auth, .customer-auth, .partner-auth) .auth-body .input-with-affix:has(> .form-control.is-invalid) ~ .invalid-feedback {
  display: block;
  margin-top: 0.35rem;
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-card:not(.auth-card-wide) .auth-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

:is(.admin-auth, .customer-auth, .partner-auth) .area-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-height: 1.75rem;
  padding: 0.35rem 0.7rem;
  color: var(--color-surface-card);
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--btn-border-radius, 8px);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

:is(.admin-auth, .customer-auth, .partner-auth) .form-control,
:is(.admin-auth, .customer-auth, .partner-auth) .form-select {
  border: 2px solid var(--color-gray-200);
  border-radius: 8px;
  font-family: var(--font-body, "Montserrat", sans-serif);
  font-size: var(--form-control-font-size, 1rem);
  /* Texto digitado com o MESMO peso do placeholder (400): o placeholder é cinza
     e o texto digitado é escuro, mas a "grossura" da fonte é idêntica (#bug-peso). */
  font-weight: var(--form-placeholder-font-weight, 400);
  line-height: var(--form-control-line-height, 1.5);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

:is(.admin-auth, .customer-auth, .partner-auth) .form-control::placeholder,
:is(.admin-auth, .customer-auth, .partner-auth) textarea.form-control::placeholder,
:is(.admin-auth, .customer-auth, .partner-auth) .searchable-select-input::placeholder {
  font-family: var(--font-body, "Montserrat", sans-serif);
  font-size: var(--form-placeholder-font-size, 1rem);
  font-weight: var(--form-placeholder-font-weight, 400);
  color: var(--color-text-muted, var(--color-gray-500));
  opacity: 1;
}

:is(.admin-auth, .customer-auth, .partner-auth) .form-control:focus,
:is(.admin-auth, .customer-auth, .partner-auth) .form-select:focus {
  border-color: var(--auth-accent);
  box-shadow: 0 0 0 0.22rem var(--auth-focus);
}

:is(.admin-auth, .customer-auth, .partner-auth) .form-control.is-valid,
:is(.admin-auth, .customer-auth, .partner-auth) .was-validated .form-control:valid {
  border-color: var(--color-gray-200) !important;
  background-image: none !important;
  box-shadow: none !important;
}

:is(.admin-auth, .customer-auth, .partner-auth) .btn-auth,
:is(.admin-auth, .customer-auth, .partner-auth) .btn-auth-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  width: 100%;
  min-height: 2.65rem;
  padding: 0.7rem 1.25rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

:is(.admin-auth, .customer-auth, .partner-auth) .btn-auth {
  color: var(--color-surface-card);
  border: 1px solid transparent;
  background: var(--auth-accent);
}

:is(.admin-auth, .customer-auth, .partner-auth) .btn-auth-outline {
  color: var(--auth-accent);
  border: 2px solid var(--auth-accent);
  background: transparent;
}

:is(.admin-auth, .customer-auth, .partner-auth) .btn-auth:hover,
:is(.admin-auth, .customer-auth, .partner-auth) .btn-auth:focus-visible,
:is(.admin-auth, .customer-auth, .partner-auth) .btn-auth-outline:hover,
:is(.admin-auth, .customer-auth, .partner-auth) .btn-auth-outline:focus-visible {
  color: var(--color-surface-card);
  border-color: transparent;
  /* Hover chapado (apenas escurece a cor), sem degrade nem sombra pesada. */
  background: var(--auth-accent-hover);
  box-shadow: none;
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-cep-search-column {
  display: flex;
  align-items: end;
  justify-content: flex-start;
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-cep-search-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  /* Casa exatamente a altura do input (.form-control = 44px em todos os
     breakpoints, por touch-target) para o botão de busca de CEP ficar
     alinhado com o campo ao lado (#44). */
  width: 2.75rem;
  min-width: 2.75rem;
  max-width: 2.75rem;
  min-height: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-cep-search-button-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:is(.admin-auth, .customer-auth, .partner-auth) .form-check-input:checked {
  background-color: var(--auth-accent);
  border-color: var(--auth-accent);
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-link {
  color: var(--auth-accent);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-link:hover {
  color: var(--auth-accent-hover);
  text-decoration: underline;
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-body form > .btn-auth.mb-3 {
  margin-bottom: 0 !important;
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-body > form + .text-center.mt-4 {
  margin-top: var(--spacing-sm) !important;
}

:is(.admin-auth, .customer-auth, .partner-auth) .password-toggle {
  position: absolute;
  /* Centraliza na vertical via inset + margin auto (NÃO transform): a política
     de interação zera transform no hover/active dos botões, e usar translateY
     aqui fazia o ícone "pular" para baixo ao passar o mouse/clicar (#bug-olho). */
  top: 0;
  bottom: 0;
  right: 0.5rem;
  margin-block: auto;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  line-height: 1;
  color: var(--color-gray-500);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

:is(.admin-auth, .customer-auth, .partner-auth) .password-toggle::before {
  /* Ícone da FONTE Bootstrap Icons (bi-eye) — sem SVG/imagem. Herda a cor do
     botão (color), então o hover/foco continua mudando a cor normalmente. */
  font-family: "bootstrap-icons" !important;
  content: "\f341"; /* bi-eye */
  font-size: 1.15rem;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

:is(.admin-auth, .customer-auth, .partner-auth) .password-toggle[aria-pressed="true"]::before {
  content: "\f340"; /* bi-eye-slash (senha visível → clicar para ocultar) */
}

:is(.admin-auth, .customer-auth, .partner-auth) .password-toggle:hover {
  /* Sem realce/aumento — apenas muda a cor; o cursor vira "hand". */
  color: var(--auth-accent);
}

:is(.admin-auth, .customer-auth, .partner-auth) .password-toggle:focus-visible {
  /* Indicador de foco discreto apenas para teclado (nao dispara no clique do mouse). */
  color: var(--auth-accent);
  outline: 2px solid var(--auth-accent);
  outline-offset: 1px;
  border-radius: 6px;
}

:is(.admin-auth, .customer-auth, .partner-auth) .form-floating > .form-control::placeholder {
  text-align: start;
  opacity: 0;
}

:is(.admin-auth, .customer-auth, .partner-auth) .form-floating > .form-control:focus::placeholder {
  opacity: 0.55;
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-alt-action {
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  text-align: center;
  border-top: 1px solid var(--color-gray-200);
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-clickable-option {
  cursor: pointer;
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-field-span-full {
  grid-column: 1 / -1;
}

/* Centraliza verticalmente um controle (ex.: checkbox "mesmo número") na LINHA
   do input de um campo vizinho dentro do grid de 2 colunas. Só >=576px (no
   mobile, 1 coluna, o controle flui normalmente). 2.75rem = altura do input. */
@media (min-width: 576px) {
  :is(.admin-auth, .customer-auth, .partner-auth) .auth-check-aligned {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
  }
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-spinner-lg {
  width: 4rem;
  height: 4rem;
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-status-icon-lg {
  font-size: 5rem;
  line-height: 1;
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-code-group {
  max-width: 380px;
  margin-right: auto;
  margin-left: auto;
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-cep-search-button {
  min-height: 2.75rem;
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-profile-alert {
  padding: var(--spacing-sm) 1.25rem;
  border-left: 4px solid var(--auth-accent) !important;
  border-radius: 12px;
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-profile-alert-icon,
:is(.admin-auth, .customer-auth, .partner-auth) .auth-profile-alert-title {
  color: var(--auth-accent);
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper {
  --auth-stepper-marker-size: 2.75rem;
  --auth-stepper-line-y: 1.375rem;

  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper::before {
  content: "";
  position: absolute;
  top: var(--auth-stepper-line-y);
  left: calc(var(--auth-stepper-marker-size) / 2);
  right: calc(var(--auth-stepper-marker-size) / 2);
  z-index: 0;
  height: 2px;
  background: var(--color-gray-200);
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-item {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  text-align: center;
}

/* Marcador base = etapa PENDENTE: círculo VAZIO (sem número), contorno neutro. */
:is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--auth-stepper-marker-size);
  height: var(--auth-stepper-marker-size);
  color: var(--color-surface-card);
  background: var(--color-surface-card);
  border: 2px solid var(--color-gray-300);
  border-radius: 50%;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Etapa INATIVA: ponto interno cinza-claro (não fica um círculo vazio). A etapa ATUAL e a
   CONCLUÍDA sobrescrevem este ::after (cor de destaque / check). */
:is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-marker::after {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--color-gray-300);
}

/* Etapa CONCLUÍDA mostra o check (bi-check-lg), não o ponto. */
:is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-item.is-complete .auth-stepper-marker::after {
  display: none;
}

/* Etapa ATUAL: círculo vazio REALÇADO (contorno de destaque + ponto interno). */
:is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-item.is-active .auth-stepper-marker {
  border-color: var(--auth-accent);
  background: var(--color-surface-card);
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-item.is-active .auth-stepper-marker::after {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--auth-accent);
}

/* Etapa CONCLUÍDA: círculo PREENCHIDO com check (cor chapada, sem sombra). */
:is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-item.is-complete .auth-stepper-marker {
  color: var(--color-surface-card);
  background: var(--auth-accent);
  border-color: var(--auth-accent);
  box-shadow: none;
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-label {
  max-width: 7rem;
  color: var(--color-gray-500);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
  hyphens: none;
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-item.is-active .auth-stepper-label {
  color: var(--color-gray-900);
}

:is(.admin-auth, .customer-auth, .partner-auth) .responsive-tabs-shell--stepper {
  margin-bottom: 1.75rem;
}

:is(.admin-auth, .customer-auth, .partner-auth) .responsive-tabs-shell--stepper .auth-stepper {
  margin-bottom: 0;
}

:is(.admin-auth, .customer-auth, .partner-auth) .responsive-tabs-shell--stepper .responsive-tabs-arrow {
  color: var(--auth-accent);
  border-color: rgba(17, 24, 39, 0.1);
  box-shadow: none;
  /* Glifo ‹ › proporcional ao botão (sem font-size ele herdava ~1rem e ficava
     minúsculo dentro da caixa de ~2.75rem — #seta-pequena). */
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
}

:is(.admin-auth, .customer-auth, .partner-auth) .responsive-tabs-shell--stepper .responsive-tabs-arrow:hover:not(:disabled),
:is(.admin-auth, .customer-auth, .partner-auth) .responsive-tabs-shell--stepper .responsive-tabs-arrow:focus-visible:not(:disabled) {
  color: var(--color-surface-card);
  border-color: var(--auth-accent);
  background: var(--auth-accent);
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.85rem var(--spacing-md);
  text-align: center;
  background: var(--color-surface-card, var(--color-surface-card));
  border-top: 1px solid var(--color-border-default, var(--color-neutral-300));
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-footer .footer-language-switcher {
  gap: 0.35rem;
  margin-left: 0;
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-footer .footer-language-switcher__link,
:is(.admin-auth, .customer-auth, .partner-auth) .site-link,
:is(.admin-auth, .customer-auth, .partner-auth) .lang-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2rem;
  color: var(--color-gray-600);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  opacity: 1;
  white-space: nowrap;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

:is(.admin-auth, .customer-auth, .partner-auth) .auth-footer .footer-language-switcher__link:hover,
:is(.admin-auth, .customer-auth, .partner-auth) .auth-footer .footer-language-switcher__link:focus-visible,
:is(.admin-auth, .customer-auth, .partner-auth) .auth-footer .footer-language-switcher__link.is-active,
:is(.admin-auth, .customer-auth, .partner-auth) .site-link:hover,
:is(.admin-auth, .customer-auth, .partner-auth) .lang-link:hover,
:is(.admin-auth, .customer-auth, .partner-auth) .lang-link.active {
  color: var(--auth-accent);
  background: transparent;
  border-bottom-color: var(--auth-accent);
}

:is(.admin-auth, .customer-auth, .partner-auth) .language-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
}

:is(.admin-auth, .customer-auth, .partner-auth) .lang-divider {
  color: var(--color-gray-300);
  font-size: 0.875rem;
}

:is(.admin-auth, .customer-auth, .partner-auth) .verify-icon-box,
:is(.admin-auth, .customer-auth, .partner-auth) .verify-icon-box-red,
:is(.admin-auth, .customer-auth, .partner-auth) .success-icon-box,
:is(.admin-auth, .customer-auth, .partner-auth) .error-icon-box {
  width: 4.5rem;
  height: 4.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border-radius: 999px;
  background: var(--auth-accent-soft);
  color: var(--auth-accent);
  font-size: 2rem;
}

:is(.admin-auth, .customer-auth, .partner-auth) .form-floating > .form-control,
:is(.admin-auth, .customer-auth, .partner-auth) .form-floating > .form-select {
  min-height: 3.25rem;
  height: 3.25rem;
  font-family: var(--font-body, "Montserrat", sans-serif);
  font-size: var(--form-control-font-size, 1rem);
  font-weight: var(--form-control-font-weight, 500);
  line-height: var(--form-control-line-height, 1.5);
}

:is(.admin-auth, .customer-auth, .partner-auth) .form-floating > label {
  padding-top: 0.85rem;
  font-family: var(--font-body, "Montserrat", sans-serif);
  font-size: var(--form-label-font-size, 0.95rem);
  font-weight: var(--form-label-font-weight, 500);
  line-height: var(--form-label-line-height, 1.25);
}

@media (max-width: 991.98px) {
  :is(.admin-auth, .customer-auth, .partner-auth) .responsive-tabs-shell--stepper {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.35rem;
    width: 100%;
    min-width: 0;
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .responsive-tabs-shell--stepper .responsive-tabs-arrow {
    display: inline-flex;
    width: 3.125rem;
    height: 3.125rem;
    margin-top: 0;
    /* Caixa maior no mobile → glifo maior, mantendo a proporção equilibrada. */
    font-size: 1.625rem;
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .responsive-tabs-shell--stepper.responsive-tabs-shell--overflowing::before {
    left: 3.125rem;
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .responsive-tabs-shell--stepper.responsive-tabs-shell--overflowing::after {
    right: 3.125rem;
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-count-6,
  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-count-7,
  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-count-8 {
    --auth-stepper-item-width: 8.25rem;
    --auth-stepper-marker-size: 3.125rem;
    --auth-stepper-line-y: 1.5625rem;

    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    gap: 0;
    margin-bottom: 0;
    padding: 0 0.75rem 0.85rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 0.75rem;
    -webkit-overflow-scrolling: touch;
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-count-6::before,
  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-count-7::before,
  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-count-8::before {
    left: calc(var(--auth-stepper-marker-size) / 2 + 0.75rem);
    right: auto;
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-count-6::before {
    width: calc((var(--auth-stepper-item-width) * 6) - var(--auth-stepper-marker-size));
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-count-7::before {
    width: calc((var(--auth-stepper-item-width) * 7) - var(--auth-stepper-marker-size));
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-count-8::before {
    width: calc((var(--auth-stepper-item-width) * 8) - var(--auth-stepper-marker-size));
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-count-6::-webkit-scrollbar,
  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-count-7::-webkit-scrollbar,
  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-count-8::-webkit-scrollbar {
    height: 0.35rem;
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-count-6::-webkit-scrollbar-thumb,
  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-count-7::-webkit-scrollbar-thumb,
  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-count-8::-webkit-scrollbar-thumb {
    background: rgba(107, 114, 128, 0.28);
    border-radius: 999px;
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-count-6 .auth-stepper-item,
  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-count-7 .auth-stepper-item,
  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-count-8 .auth-stepper-item {
    flex: 0 0 var(--auth-stepper-item-width);
    min-width: var(--auth-stepper-item-width);
    scroll-snap-align: center;
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-count-6 .auth-stepper-marker,
  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-count-7 .auth-stepper-marker,
  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-count-8 .auth-stepper-marker {
    width: var(--auth-stepper-marker-size);
    height: var(--auth-stepper-marker-size);
    font-size: 0.875rem;
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-count-6 .auth-stepper-label,
  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-count-7 .auth-stepper-label,
  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-count-8 .auth-stepper-label {
    max-width: calc(var(--auth-stepper-item-width) - 0.5rem);
    font-size: 0.95rem;
  }
}

@media (max-width: 767.98px) {
  :is(.admin-auth, .customer-auth, .partner-auth) .auth-card:not(.auth-card-wide),
  :is(.admin-auth, .customer-auth, .partner-auth) .auth-card-public-flow {
    border: 0 !important;
    box-shadow: none !important;
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper {
    --auth-stepper-item-width: 8.25rem;
    --auth-stepper-marker-size: 3.125rem;
    --auth-stepper-line-y: 1.5625rem;

    justify-content: flex-start;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0 0.75rem 0.85rem;
    overflow-x: auto;
    overflow-y: hidden;
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper::-webkit-scrollbar {
    height: 0.35rem;
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper::-webkit-scrollbar-thumb {
    background: rgba(107, 114, 128, 0.28);
    border-radius: 999px;
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper::before {
    left: calc(var(--auth-stepper-marker-size) / 2 + 0.75rem);
    right: auto;
    width: calc((var(--auth-stepper-item-width) * 4) - var(--auth-stepper-marker-size));
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper.auth-stepper-count-2::before {
    width: calc((var(--auth-stepper-item-width) * 2) - var(--auth-stepper-marker-size));
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper.auth-stepper-count-3::before {
    width: calc((var(--auth-stepper-item-width) * 3) - var(--auth-stepper-marker-size));
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper.auth-stepper-count-5::before {
    width: calc((var(--auth-stepper-item-width) * 5) - var(--auth-stepper-marker-size));
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper.auth-stepper-count-6::before {
    width: calc((var(--auth-stepper-item-width) * 6) - var(--auth-stepper-marker-size));
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper.auth-stepper-count-7::before {
    width: calc((var(--auth-stepper-item-width) * 7) - var(--auth-stepper-marker-size));
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper.auth-stepper-count-8::before {
    width: calc((var(--auth-stepper-item-width) * 8) - var(--auth-stepper-marker-size));
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-item {
    flex: 0 0 var(--auth-stepper-item-width);
    min-width: var(--auth-stepper-item-width);
    scroll-snap-align: center;
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-marker {
    width: var(--auth-stepper-marker-size);
    height: var(--auth-stepper-marker-size);
    font-size: 1rem;
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .auth-stepper-label {
    max-width: calc(var(--auth-stepper-item-width) - 0.5rem);
    font-size: 0.95rem;
    line-height: 1.2;
    overflow-wrap: normal;
    word-break: normal;
    white-space: nowrap;
    hyphens: none;
  }
}

@media (max-width: 575.98px) {
  /* Mobile/webview: tela cheia "app-like".
     Remove o box flutuante (borda, cantos, sombra) e aproveita toda a altura.
     Em telas grandes (>= 576px) o card centralizado permanece intacto. */
  :is(.admin-auth, .customer-auth, .partner-auth) {
    align-items: stretch;
    padding: 0;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .auth-main {
    align-items: stretch;
    min-height: 100vh;
    min-height: 100dvh;
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .auth-card,
  :is(.admin-auth, .customer-auth, .partner-auth) .auth-card-wide,
  :is(.admin-auth, .customer-auth, .partner-auth) .auth-card:not(.auth-card-wide),
  :is(.admin-auth, .customer-auth, .partner-auth) .auth-card-public-flow {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  :is(.admin-auth, .customer-auth, .partner-auth):has(.auth-card-wide:not(.auth-card-public-flow)) {
    align-items: stretch;
    padding: 0;
  }

  /* Corpo cresce para ocupar o espaco livre e centraliza o conteudo
     verticalmente. Em formularios longos (cadastro), o conteudo excede a
     viewport e a pagina rola normalmente, sem corte. */
  :is(.admin-auth, .customer-auth, .partner-auth) .auth-card:not(.auth-card-wide) .auth-body,
  :is(.admin-auth, .customer-auth, .partner-auth) .auth-card-public-flow .auth-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .auth-header,
  :is(.admin-auth, .customer-auth, .partner-auth) .auth-body,
  :is(.admin-auth, .customer-auth, .partner-auth) .auth-footer {
    padding: 1.25rem;
  }

  /* App-like (tela cheia): o banner/header fica mais proeminente, com logo e
     icone maiores — como uma tela de login de app. O corpo (flex:1, centralizado)
     absorve o espaco restante, sem gerar rolagem vertical extra nas telas curtas. */
  :is(.admin-auth, .customer-auth, .partner-auth) .auth-header {
    padding: 2.25rem 1.25rem 1.75rem;
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .auth-header .logo-img {
    max-height: 6.5rem;
    max-width: 15rem;
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .auth-body .icon-large {
    font-size: 4rem;
  }

  /* Telas curtas (login, recuperar senha): conteudo pequeno numa viewport alta
     deixava o banner "pequeno" com um vazio enorme abaixo. Aqui o banner colorido
     ocupa uma faixa generosa no topo (estilo login de app) e o logo fica maior.
     Telas longas (cadastro / auth-card-wide) ficam de fora para nao aumentar a
     rolagem — la o conteudo ja preenche a altura. Alturas de inputs/botoes
     permanecem nos padroes definidos acima (nao sao reduzidas). */
  :is(.admin-auth, .customer-auth, .partner-auth) .auth-card:not(.auth-card-wide) .auth-header {
    min-height: 32vh;
    min-height: 32dvh;
    padding: 2.5rem 1.25rem 2rem;
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .auth-card:not(.auth-card-wide) .auth-header .logo-img {
    max-height: 7rem;
    max-width: 17rem;
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .form-floating > .form-control,
  :is(.admin-auth, .customer-auth, .partner-auth) .form-floating > .form-select {
    min-height: 3.75rem;
    height: 3.75rem;
    font-size: 1rem;
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .form-floating > label {
    padding-top: var(--spacing-sm);
    font-size: 0.95rem;
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .auth-cep-search-column {
    justify-content: flex-start;
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .auth-cep-search-button {
    width: 2.75rem;
    min-width: 2.75rem;
    max-width: 2.75rem;
    min-height: 2.75rem;
    height: 2.75rem;
    padding-inline: 0;
  }

  :is(.admin-auth, .customer-auth, .partner-auth) .auth-cep-search-button-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ====================================================================
   Campos com LABEL ACIMA (padrão único da plataforma).
   Substitui o antigo .form-floating: o rótulo fica acima do campo,
   vinculado por for=, e nunca dentro do campo. Tamanho/tipografia dos
   inputs/selects/searchable consistentes nas telas de autenticação.
   ==================================================================== */
:is(.admin-auth, .customer-auth, .partner-auth) .form-control,
:is(.admin-auth, .customer-auth, .partner-auth) .form-select,
:is(.admin-auth, .customer-auth, .partner-auth) .searchable-select-input {
  min-height: 3.25rem;
  font-family: var(--font-body, "Montserrat", sans-serif);
  font-size: var(--form-control-font-size, 1rem);
  font-weight: var(--form-control-font-weight, 500);
  line-height: var(--form-control-line-height, 1.5);
}

:is(.admin-auth, .customer-auth, .partner-auth) .form-label {
  margin-bottom: 0.35rem;
  font-family: var(--font-body, "Montserrat", sans-serif);
  font-size: var(--form-label-font-size, 0.95rem);
  font-weight: var(--form-label-font-weight, 500);
  line-height: var(--form-label-line-height, 1.25);
  color: var(--color-text-main, var(--color-gray-800));
}

/* Campo de senha: input + botão de mostrar/ocultar dentro de um wrapper
   relativo (abaixo do label), para o toggle centralizar na altura do input. */
:is(.admin-auth, .customer-auth, .partner-auth) .input-with-affix {
  position: relative;
}

:is(.admin-auth, .customer-auth, .partner-auth) .input-with-affix > .form-control {
  padding-right: 3.25rem !important;
}

@media (max-width: 575.98px) {
  :is(.admin-auth, .customer-auth, .partner-auth) .form-control,
  :is(.admin-auth, .customer-auth, .partner-auth) .form-select,
  :is(.admin-auth, .customer-auth, .partner-auth) .searchable-select-input {
    min-height: 3.75rem;
  }
}