@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.gtc-rc-dynamic-tooltip {
  z-index: 9999;
  position: absolute;
  background: #fff;
  border: 1px solid #dbe6ee;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  color: #444;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: fadeIn 0.18s;

  // Trigger element
  &-trigger {
    position: relative;
  }

  // Size variants
  &--small {
    min-width: 140px;
    max-width: 200px;
    padding: 8px 12px;
    font-size: 13px;
  }

  &--medium {
    min-width: 220px;
    max-width: 320px;
    padding: 16px 20px;
    font-size: 15px;
  }

  &--large {
    min-width: 320px;
    max-width: 480px;
    padding: 24px 28px;
    font-size: 17px;
  }

  // Position variants for arrow positioning
  &--bottom &__arrow {
    top: -8px;
    left: 50%;
    transform: translateX(-50%);

    &::after {
      left: 50%;
      top: 0;
      transform: translateX(-50%) rotate(45deg);
    }
  }

  &--top &__arrow {
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);

    &::after {
      left: 50%;
      bottom: 0;
      transform: translateX(-50%) rotate(45deg);
    }
  }

  &--left &__arrow {
    top: 50%;
    right: -8px;
    transform: translateY(-50%);

    &::after {
      top: 50%;
      right: 0;
      transform: translateY(-50%) rotate(45deg);
    }
  }

  &--right &__arrow {
    top: 50%;
    left: -8px;
    transform: translateY(-50%);

    &::after {
      top: 50%;
      left: 0;
      transform: translateY(-50%) rotate(45deg);
    }
  }

  // Element styles
  &__arrow {
    position: absolute;
    width: 16px;
    height: 16px;
    background: transparent;
    pointer-events: none;

    &::after {
      content: '';
      position: absolute;
      width: 16px;
      height: 16px;
      background: #fff;
    }
  }

  &__content {
    position: relative;
    z-index: 1;
  }

  &__close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    color: #888;
    font-size: 20px;
    cursor: pointer;
    z-index: 2;
    padding: 0;
    line-height: 1;
    transition: color 0.15s;

    &:hover {
      color: #0074c8;
    }
  }
}
