.popover-wrapper {
  @apply z-50 rounded-xl;
  width: max-content;
  position: fixed;
  will-change: left, top, bottom, right, auto, opacity, filter;
  opacity: 0;
  transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out, filter 0.15s ease-in-out;
  // display: none;
  min-width: 2rem;
  min-height: 2rem;

  filter: grayscale(0.9); 
  transform: scale(0.95);
  pointer-events: auto !important;
  z-index: 10001 !important; // Ensure it's above the modal
}
.popover-arrow{
  @apply rounded-sm;
  position: absolute;
  transform: scale(1) rotate(var(--rotation)) !important;	
  clip-path: var(--clip-path-triangle, polygon(0% 0%,0% 100%,100% 100%));
}
.show {
  filter: grayscale(0); 
  transform: scale(1);
  opacity: 1;
}
.popover-wrapper:not(.show) {
  pointer-events: none !important;
}