:root { --login-blur: 10px; }

/* Fundo responsivo */
body{
  background: url("../../images/assets/background.jpg") no-repeat left center;
  background-size: cover;
  background-attachment: fixed; /* suave no desktop */
  min-height: 100vh;
  margin: 0;
}
/* Em telas pequenas, evita saltos e centraliza melhor a arte */
@media (max-width: 768px){
  body{
    background-position: center top;
    background-attachment: scroll;
  }
}

/* Área de página: alinha à direita no desktop, centraliza no mobile */
.page{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* direita no desktop */
  padding: 24px;               /* respiro das bordas */
}
@media (max-width: 992px){
  .page{ justify-content: center; } /* centraliza em tablet/celular */
}

.login-container{
  background: rgba(0,123,255,0.30);
  -webkit-backdrop-filter: blur(var(--login-blur));
  backdrop-filter: blur(var(--login-blur));
  padding: 28px;
  border-radius: 12px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  color: #fff;
}

.btn-custom{
  background-color: #0A00FF;
  color: #fff;
  font-weight: 700;
  border: none;
}
.btn-custom:hover{ background-color: #AA00FF; }

.esqueci-senha{
  display:block; margin-top:10px; text-align:center;
  color:#fff; font-size:.9em; text-decoration: underline;
}

/* Login: cor de fundo em mobile (sem imagem) */
@media (max-width: 768px) {
  /* escopo só para a página de login (se você colocou a classe no body) */
  body.login-page,
  body.login-page .login-bg,
  body.login-page .auth-bg,
  body.login-page .hero,
  body.login-page .home {
    background-color: #0b1220 !important;  /* azul escuro */
    background-image: none !important;
    background: #0b1220 !important;        /* reforço contra shorthand anteriores */
    min-height: 100vh;                      /* garante cobertura total */
  }

  /* Caso a imagem venha via ::before/::after */
  body.login-page::before,
  body.login-page::after,
  body.login-page .login-bg::before,
  body.login-page .auth-bg::before {
    content: none !important;
    background: none !important;
  }

  /* Se houver <img> decorativa de fundo dentro do layout, esconda em mobile */
  body.login-page .bg-image,
  body.login-page img[alt="Imagem de Fundo"] {
    display: none !important;
  }
}