.tooltip {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  background: var(--gray-80);
  color: var(--primary-white);
  padding: 12px;
  font-size: 14px;
  z-index: 50;
  line-height: 20px;
  top: 43px;
  inset-inline-end: 289px;
  inset-inline-start: 73px;
  /* Transition for smooth show/hide */
  transition: opacity 0.3s ease, visibility 0s linear 2s; /* visibility hides after 2s */
}

[dir="rtl"] .tooltip {
  direction: rtl;
}

.tooltip-mobile--active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

#duty-tooltip-icon,
#levy-charges-tooltip-icon,
#tax-tooltip-icon {
  cursor: pointer;
}

@media (min-width: 1024px) {
  .tooltip-mobile--active {
    opacity: 0;
    visibility: hidden;
  }

  #duty-tooltip-icon:hover ~ .tooltip,
  #levy-charges-tooltip-icon:hover ~ .tooltip,
  #tax-tooltip-icon:hover ~ .tooltip,
  .tooltip:hover {
    opacity: 1;
    visibility: visible;
    inset-inline-start: 73px;
    inset-inline-end: 289px;
    top: 43px;
    transition-delay: 0s; /* Show immediately */
  }

  
  #duty-tooltip-icon:not(:hover) ~ .tooltip,
  #levy-charges-tooltip-icon:not(:hover) ~ .tooltip,
  #tax-tooltip-icon:not(:hover) ~ .tooltip {
    transition-delay: 1.5s; /* Delay exit */
  }

}