/* Login fields retain their labels when autofill or the mobile keyboard opens. */
.login-heading { margin: 0 0 20px; font-size: 1.45rem; font-weight: 700; color: #1a212a; }
.login-field-label { display: block; margin-bottom: 6px; font-size: .9rem; font-weight: 600; }
.login-password-field { position: relative; }
.login-password-field .form-control { padding-right: 52px !important; }
.login-password-toggle { position: absolute; top: 0; right: 0; width: 48px; height: 100%; border: 0; border-radius: 6px; background: transparent; color: #526575; }
.login-password-toggle:focus-visible { outline: 2px solid #358e98; outline-offset: -3px; }
#loginFormContainer ::placeholder { color: #697586; opacity: 1; }

/* Placeholder */
::placeholder {
  color: #9999993a;
}

/* Navbar fixa no topo */
.navbar-index {
  background-color: #1A212A !important;
  padding: 10px 0 10px 20px !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  position: fixed !important;
  inset: 0 0 auto 0;
  z-index: 1000;
  width: 100%;
  height: auto !important;
}

/* Logo */
.logo {
  display: block;
  width: 160px !important;
  max-height: 20px !important;
  height: auto !important;
  margin: 0 5px !important;
  object-fit: contain !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Títulos e subtítulos da navbar (regras comuns) */
.navbar-title,
.subtitle_index,
.navbar-subtitle {
  color: #fff !important;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .7);
  font-weight: 700;
  cursor: default;
}

/* Tamanhos específicos */
.navbar-title {
  font-size: 1.2em !important;
}

.subtitle_index,
.navbar-subtitle {
  font-size: .7em;
}

/* Subtítulo com quebra de linha e largura total */
.navbar-subtitle {
  white-space: normal;
  word-break: break-word;
  text-align: left;
  width: 100%;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Containers de formulários */
#registerFormContainer {
  display: none;
}

#loginFormContainer,
#registerFormContainer,
#container-recuperacao-senha {
  padding: 15px !important;
}

/* Card */
.card,
.card-body {
  padding: 0 !important;
  margin: 0 !important;
}

.card {
  width: 30rem;
}

/* Formulários e selects */
.form-control {
  height: 50px;
  padding: 10px;
  border-radius: 6px;
}

.row.mb-3 {
  margin-bottom: 1rem !important;
}

.d-flex select {
  height: 50px;
}

.d-flex select:not(:last-child) {
  margin-right: 8px;
}

/* Ícones de navegação */
#backIcon {
  display: none;
}

#back-to-login,
#backToLogin {
  font-size: 1.6em;
  color: #9DD0D4 !important;
  cursor: pointer;
}

#back-to-login:hover,
#backToLogin:hover {
  color: #C9E7DE !important;
}

/* Link "Esqueci minha senha" */
.forgot-password-container {
  display: flex;
  justify-content: flex-end;
}

.forgot-password-link {
  text-decoration: none;
  color: #9DD0D4;
  font-size: 1rem;
}

.forgot-password-link:hover {
  color: #C9E7DE;
  text-decoration: underline;
}

/* Caixa de mensagens fixa no topo */
#messageBox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  z-index: 1050;
  display: none;
}

.message-alert {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  border-radius: 5px;
  padding: 10px;
}

.message-alert .close-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  cursor: pointer;
  color: #721c24;
}

/* Botões do modal (margens consolidadas) */
.custom-confirm-btn,
.custom-cancel-btn {
  margin: 0 !important;
}

.custom-cancel-btn {
  margin-left: 10px !important;
}

/* Paleta do botão principal */
:root {
  --btn-primary: #9DD0D4;
  --btn-primary-hover: #C9E7DE;
  --btn-primary-active: #C9E7DE;
  --btn-focus-ring: none;
}

/* Tema do botão principal */
.btn-linkmedme {
  background-color: var(--btn-primary) !important;
  border-color: var(--btn-primary) !important;
  color: #fff !important;
}

.btn-linkmedme:hover {
  background-color: var(--btn-primary-hover) !important;
  border-color: var(--btn-primary-hover) !important;
  color: #fff !important;
}

.btn-linkmedme:active,
.btn-linkmedme:focus,
.btn-linkmedme:focus:active {
  background-color: var(--btn-primary-active) !important;
  border-color: var(--btn-primary-active) !important;
  color: #fff !important;
  box-shadow: 0 0 0 .2rem var(--btn-focus-ring) !important;
}

.btn-linkmedme:disabled {
  background-color: var(--btn-primary) !important;
  border-color: var(--btn-primary) !important;
  color: #fff !important;
  opacity: .8;
}

/* Layout dos botões de enviar + spinner (regras unificadas) */
#btn-entrar,
#btn-enviar-registro {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: #fff;
}

/* Ocupa estado ocupado: esconde label e mostra spinner central */
#btn-entrar[aria-busy="true"] .btn-label,
#btn-enviar-registro[aria-busy="true"] .btn-label {
  opacity: 0;
  pointer-events: none;
}

#btn-entrar[aria-busy="true"]::before,
#btn-enviar-registro[aria-busy="true"]::before {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: spin .8s linear infinite;
}

#btn-entrar[aria-busy="true"] i,
#btn-enviar-registro[aria-busy="true"] i {
  display: none;
}

/* Acessibilidade/UX enquanto ocupado ou desabilitado (regras finais unificadas) */
#btn-entrar[aria-busy="true"],
#btn-entrar[aria-disabled="true"],
#btn-enviar-registro[aria-busy="true"],
#btn-enviar-registro[aria-disabled="true"] {
  pointer-events: none;
  cursor: not-allowed;
  opacity: .9;
}

/* Animação do spinner */
@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}


.logo {
  display: block;
  width: 160px !important;
  height: auto !important;
  max-width: none !important;
  max-height: 20px !important;
  /* máximo igual à navbar, pode ajustar */
  margin-right: 5px !important;
  margin-left: 5px !important;
  object-fit: contain !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Botão com spinner reutilizável */
.btn-spinner-lock {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

.btn-spinner-lock[aria-busy="true"] .btn-label {
  opacity: 0;
  pointer-events: none;
}

.btn-spinner-lock[aria-busy="true"]::before {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: spin .8s linear infinite;
}

.btn-spinner-lock[aria-busy="true"],
.btn-spinner-lock[aria-disabled="true"] {
  pointer-events: none;
  cursor: not-allowed;
  opacity: .9;
}

/* Bottom navbar styling */
.navbar-bottom {
  background-color: #1A212A !important;
}

.navbar-bottom .navbar-nav {
  flex-direction: row;
}

.navbar-bottom .nav-link,
.navbar-bottom .navbar-text {
  color: #fff !important;
  text-decoration: none;
}

.navbar-bottom .nav-link:hover {
  text-decoration: underline;
}

/* Registration policy disclaimer */
.policy-disclaimer {
  font-size: 0.8em;
}

.policy-disclaimer a {
  text-decoration: none;
}

.policy-disclaimer a:hover {
  text-decoration: underline;
}


@media (max-width: 768px) {
  body {
    padding-bottom: 70px;
  }
}

/* Bottom navbar styling */
.navbar-bottom {
  background-color: #1A212A !important;
  padding: 4px 0 !important;
  /* altura menor */
}

.navbar-bottom .navbar-nav {
  flex-direction: row;
  gap: 1rem;
  /* espaçamento uniforme entre links */
}

.navbar-bottom .nav-link,
.navbar-bottom .navbar-text {
  color: #fff !important;
  text-decoration: none;
  font-size: 0.85rem;
  /* labels menores */
  margin-right: 14px !important;
  /* espaçamento adicional à direita */
}

.navbar-bottom .nav-link:last-child,
.navbar-bottom .navbar-text:last-child {
  margin-right: 0;
  /* remove o último espaço extra */
}

.navbar-bottom .nav-link:hover {
  text-decoration: underline;
}

.policy-disclaimer {
  font-size: 0.75rem;
  /* menor */
  line-height: 1.4;
  /* compacto */
  color: #aaa;
  /* cinza discreto */

}

.policy-disclaimer a {
  font-weight: 500;
  text-decoration: none;
}

.policy-disclaimer a:hover {
  text-decoration: underline;
}

/* ====== MOBILE TUNING – LOGIN / REGISTER ====== */

/* evita que a navbar fixa sobreponha o conteúdo */
@media (max-width: 768px) {
  body {
    padding-top: 0px;
    /* altura aproximada da .navbar-index */
    padding-bottom: 70px;
    /* já existia; mantém espaço p/ navbar-bottom */
  }
}

/* card fluido no celular, sem overflow lateral */
@media (max-width: 576px) {
  .card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12) !important;
  }

  .card,
  .card-body {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* containers dos formulários com respiro lateral */
  #loginFormContainer,
  #registerFormContainer,
  #container-recuperacao-senha {
    padding: 12px 14px 80px !important;
    /* bottom extra p/ botões e teclado */
  }

  /* inputs e selects ocupam largura total */
  .form-control {
    height: 48px !important;
    padding: 10px !important;
    font-size: 0.95rem !important;
  }

  /* linhas empilham em 1 coluna */
  .row>[class*="col-"],
  .row>.col,
  .row>.col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* DOB (dia/mes/ano) em grid no mobile */
  #dobContainer {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  #dobContainer .form-label {
    grid-column: 1 / -1;
    /* label ocupa a linha inteira */
    margin-bottom: 6px;
    font-size: .9rem;
    margin-left: 4px !important;
  }

  #dobContainer .col {
    padding: 0 !important;
    /* remove gutters herdados */
  }
}

/* telas muito estreitas (por ex. 320px) – empilha DOB */
@media (max-width: 360px) {
  #dobContainer {
    grid-template-columns: 1fr !important;
  }
}

/* tipografia mais compacta e ícones clicáveis no mobile */
@media (max-width: 576px) {
  .navbar-title {
    font-size: 1.05em !important;
  }

  .subtitle_index,
  .navbar-subtitle {
    font-size: .65em !important;
  }

  #back-to-login,
  #backToLogin {
    font-size: 1.5em;
    padding: 4px 6px;
    -webkit-tap-highlight-color: transparent;
  }

  /* logo menor para caber melhor */
  .logo {
    width: 140px !important;
    max-height: 18px !important;
  }

  /* botões 100% e com bom alvo de toque */
  #btn-entrar,
  #btn-enviar-registro,
  .btn.w-100 {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 1rem !important;
  }

  /* disclaimer mais discreto e legível */
  .policy-disclaimer {
    font-size: 0.72rem !important;
    line-height: 1.45 !important;
    text-align: left;
    margin-top: .75rem;
  }
}

/* navbar inferior: menor e com espaçamento coerente */
.navbar-bottom {
  background-color: #1A212A !important;
  padding: 4px 0 !important;
}

.navbar-bottom .navbar-nav {
  flex-direction: row;
  gap: .75rem;
  /* espaço uniforme entre links */
}

.navbar-bottom .nav-link,
.navbar-bottom .navbar-text {
  color: #fff !important;
  text-decoration: none;
  font-size: 0.85rem;
  /* labels menores */
  margin-right: 12px !important;
}

.navbar-bottom .nav-link:last-child,
.navbar-bottom .navbar-text:last-child {
  margin-right: 0 !important;
}

.navbar-bottom .nav-link:hover {
  text-decoration: underline;
}

/* garante que a navbar de topo não estoure a altura no mobile */
.navbar-index {
  padding: 8px 12px !important;
  min-height: 56px;
}

/* Facebook button azul */
.btn-facebook {
  background-color: #1877f2;
  /* Azul oficial */
  color: #fff !important;

}

.btn-facebook:hover {
  background-color: #145dbf;
  /* Azul mais escuro no hover */
  color: #fff !important;
}


/* Social login: alinhamento perfeito */
.social-login {
  display: flex;
  gap: 8px;
  /* espaço entre botões */
}

.social-login .btn {
  flex: 1 1 0;
  /* divide igualmente o espaço */
  font-size: 0.95rem;
  /* texto consistente */
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  /* evita quebra de linha */
}

/* Facebook button azul */
.btn-facebook {
  background-color: #1877f2;
  /* Azul oficial */
  color: #fff !important;
}

.btn-facebook:hover {
  background-color: #145dbf;
  /* Azul mais escuro no hover */
  color: #fff !important;
}


/* Social login: alinhamento perfeito */
.social-login {
  display: flex;
  gap: 8px;
  /* espaço entre botões */
}

.social-login .btn {
  flex: 1 1 0;
  /* divide igualmente o espaço */
  font-size: 0.95rem;
  /* texto consistente */
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  /* evita quebra de linha */
  padding-right: 0px !important;
  padding-left: 0px !important;
}

/* Evita que o card invada a navbar inferior */
@media (max-width: 768px) {
  body {
    padding-bottom: 20px !important;
    /* altura da .navbar-bottom + respiro */
  }

  .card {
    margin-bottom: 80px !important;
    /* empurra o card para cima */
  }


}

#loginFormContainer,
#registerFormContainer,
#container-recuperacao-senha {
  padding: 12px 14px calc(16px + env(safe-area-inset-bottom)) !important;
}


/* ===== DOB (dia/mês/ano empilhados no mobile, alinhados com inputs) ===== */
@media (max-width: 576px) {
  #dobContainer {
    display: block !important;
    /* força empilhado */
    width: 100% !important;
  }

  #dobContainer .form-label {
    display: block;
    margin-bottom: 6px;
    /* igual label dos outros inputs */
    font-size: .9rem;
    margin-left: 4px !important;
  }

  #dobContainer .col {
    width: 100% !important;
    padding: 0 !important;
    margin-bottom: 1rem !important;
    /* mesmo espaçamento dos inputs */
  }

  #dobContainer .col:last-child {
    margin-bottom: 0 !important;
    /* remove espaço extra no último */
  }

  #dobContainer select.form-control {
    width: 100% !important;
    height: 48px !important;
    /* mesma altura do input de senha */
    padding: 10px !important;
    border-radius: 6px !important;
    font-size: 0.95rem !important;
    margin-left: 12px !important;
  }
}

#dobContainer .form-label {
  grid-column: 1 / -1;
  /* label ocupa a linha inteira */
  margin-bottom: 6px;
  margin-left: 4px !important;
}

@media (max-width: 768px) {
  body.index-page #login-page-main { margin-top: 0 !important; padding: 88px 16px calc(84px + env(safe-area-inset-bottom)) !important; }
  #login-page-main .login-card-wrap { margin-top: 0 !important; }
  #login-page-main .card { width: 100% !important; max-width: 460px !important; margin-bottom: 0 !important; border-radius: 16px !important; }
  #loginFormContainer { padding: 20px !important; }
  #loginForm .form-control { min-height: 48px; font-size: 16px !important; scroll-margin-block: 100px; }
  #loginFormContainer .forgot-password-link { display: inline-flex; align-items: center; min-height: 44px; }
  #loginFormContainer .forgot-password-container { margin-bottom: 8px !important; }
  #loginFormContainer :is(#btn-entrar, #btn-registrar, #btn-facebook-login) { min-height: 48px; font-size: 1rem; }
  #loginFormContainer .social-login { flex-direction: column; gap: 10px !important; }
  #loginFormContainer #btn-google-login { flex: none; width: 100%; min-height: 44px; }
  .login-heading { margin-bottom: 16px; }
}

@media (max-width: 360px), (max-height: 640px) and (max-width: 768px) {
  body.index-page #login-page-main { padding-top: 76px !important; padding-inline: 12px !important; }
  #loginFormContainer { padding: 16px !important; }
}