/* ==========================================================================
   Visitor Counter Widget — styles for include/visitor.php
   ========================================================================== */

/* Wrapper handles the slide in/out only */
#visitor-wrapper {
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

#visitor-wrapper.hidden {
  transform: translateX(-100%) translateY(-50%);
  opacity: 0;
  pointer-events: none;
}

/* Box only transitions colors, never transform */
#visitor-box {
  transition: background-color 0.3s ease-in-out,
              border-color 0.3s ease-in-out,
              box-shadow 0.3s ease-in-out;
  position: relative; /* anchor for tooltip + close button */
}

/* Show button styling */
#showVisitorBtn {
  transition: background-color 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

#showVisitorBtn:not(.hidden) {
  animation: slideIn 0.3s ease-in-out;
}

@keyframes slideIn {
  from { transform: translateX(-20px) translateY(-50%); opacity: 0; }
  to   { transform: translateX(0)     translateY(-50%); opacity: 1; }
}

/* Pulse animation for active viewers */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

#activeViewers.text-green-500,
#mobileActiveViewers.text-green-500 {
  animation: pulse 2s ease-in-out infinite;
}

/* Mobile touch improvements */
@media (max-width: 767px) {
  #visitor-box {
    touch-action: manipulation;
  }
}