/* Add custom CSS styles below */ 
/* Visitor Counter Styling */
#visitor-counter-container {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background-color: #ffffff;
  color: #333;
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  font-family: Arial, sans-serif;
  z-index: 1000;
  transition: opacity 0.5s, transform 0.5s;
  opacity: 0; /* Start hidden */
  transform: translateY(20px); /* Start slightly lower */
}

/* Close button styling */
#close-visitor-counter {
  position: absolute;
  top: 5px;
  right: 8px;
  background: none;
  border: none;
  font-size: 16px;
  color: #888;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

#close-visitor-counter:hover {
  color: #000;
}

.counter-content {
  display: flex;
  align-items: center;
}

.counter-content span {
  font-size: 16px;
  font-weight: bold;
}

#visitor-count {
  margin: 0 8px;
  font-size: 18px;
  color: #28a745; /* Green color for the number */
}

/* Blinking "live" dot */
.live-dot {
  width: 10px;
  height: 10px;
  background-color: #28a745;
  border-radius: 50%;
  animation: blink 1.5s infinite;
  margin-right: 10px;
}

/* Animation keyframes */
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}

.product-entry__subtitle.text-sm.text-gray-500.leading-6 {
  background: #018b4d;
  color: white;
  width: fit-content;
  padding: 0 5px 0px 5px;
  border-radius: 5px;
}