body.desktop-detected,
body.mobile-detected {
  background-color: #ffffff; /* Solid base color */
  margin: 0;
  position: relative;
}

.custom-bg-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1; /* Keep it behind everything */
  display: flex;
  justify-content: flex-end; /* Pushes the image to the right */
  pointer-events: none; /* Allows clicking through to elements below */
}

.custom-bg-image {
  height: 100%;
  aspect-ratio: 1.2 / 1; 
  background-image: url('/chequeveterinario/login_files/img/login_background.jpg');
  background-size: cover;
  background-position: center;
  
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 40%);
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 40%);
  
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  
  transform: translateZ(0) scale(1.001); 
  backface-visibility: hidden;
  perspective: 1000px;
  filter: blur(0.3px);
  
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

div[id^="Login.xvw"] {
  position: relative;
  z-index: 1;
}

.recover_password_wrapper {
}

.recover_password_wrapper > a {
    text-decoration: underline;
    text-decoration-color: currentColor;
}


/* --- Mobile Styles --- */
@media (max-width: 768px) {
  .custom-bg-container {
    justify-content: center; 
  }

  .custom-bg-image {
    width: 100%; /* Take full width on mobile */
    height: 100%;
    aspect-ratio: auto; /* Ignore the aspect ratio from desktop */
    background-position: center; /* Center the subject of the photo */
    
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.8) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.8) 100%);
  }
  
  .login_authentication_wrapper {
    background: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  }
}