/* Modern ReactJoyride Styles */
.react-joyride__tooltip {
  background-color: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid #f3f4f6 !important;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
  padding-top: 16px !important;
}

.react-joyride__tooltip div {
  text-align: left !important;
}


.react-joyride__tooltip > div:nth-child(1) div:nth-child(2) {
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #4b5563 !important;
}

/* Adjust skip button positioning */
.react-joyride__tooltip button[data-action="skip"] {
  top: 16px !important;
  right: 16px !important;
}

/* Beacon styling */
.react-joyride__beacon {
  background-color: #3b82f6 !important;
  border: 3px solid #3b82f6 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.2) !important;
}

.react-joyride__beacon::before {
  background-color: #3b82f6 !important;
  animation: joyride-beacon-pulse 1.5s ease-in-out infinite !important;
}

/* Button hover effects */
.react-joyride__tooltip button[data-action="next"]:hover {
  background-color: #000000 !important;
  transform: translateY(-1px) !important;
}

.react-joyride__tooltip button[data-action="back"]:hover {
  background-color: #f9fafb !important;
  border-color: #d1d5db !important;
}

.react-joyride__tooltip button[data-action="skip"]:hover {
  background-color: #f3f4f6 !important;
  color: #374151 !important;
}

/* Progress indicator */
.react-joyride__tooltip .react-joyride__tooltip-footer {
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid #f3f4f6 !important;
}

/* Arrow styling */
.react-joyride__tooltip-arrow {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1)) !important;
}

/* Custom keyframe for beacon pulse */
@keyframes joyride-beacon-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}