html {
  scroll-behavior: smooth !important;
}

#pureMoveToTop {
  position: fixed !important; 
  bottom: 50px !important; 
  right: calc(50% - 570px) !important; 
  z-index: 99999 !important; 
  
  /* Visual styling */
  background-color: #8A3CB1 !important; 
  color: #ffffff !important; 
  border: none !important; 
  text-decoration: none !important;
  text-align: center !important;
  
  /* Dimensions */
  width: 48px !important;
  height: 52px !important;
  line-height: 48px !important; 
  border-radius: 10px !important; 
  font-size: 22px !important;
  font-weight: bold !important;
  box-shadow: 0px 4px 12px rgba(0,0,0,0.15) !important;
  
  /* Setup for smooth fade in/out transitions */
  display: block !important;
  opacity: 0;             /* Hidden by default at the top */
  pointer-events: none;  /* Prevents clicking while invisible */
  transition: opacity 0.3s ease-in-out, transform 0.2s ease-in-out !important;
}

/* This utility class will be handled by JavaScript to toggle visibility */
#pureMoveToTop.show-btn {
  opacity: 1 !important;
  pointer-events: auto !important;
}

#pureMoveToTop:hover {
  background-color: #722e94 !important; 
  transform: translateY(-3px) !important; 
  box-shadow: 0px 6px 16px rgba(0,0,0,0.22) !important;
}

@media (max-width: 1200px) {
  #pureMoveToTop {
    right: 20px !important; 
  }
}