/**
 * Split from numart_main.css for maintainability.
 */

/* ==========================================================================
   Title Popup - Shows full title when clicking truncated title
   ========================================================================== */
.title-popup {
  position: absolute;
  z-index: 99999;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 12px 16px;
  max-width: 320px;
  min-width: 150px;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.title-popup.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Arrow pointing down (popup above title) */
.title-popup::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
}

/* Arrow pointing up (popup below title) */
.title-popup.popup-below::after {
  bottom: auto;
  top: -8px;
  border-top: none;
  border-bottom: 8px solid #fff;
}

.title-popup-text {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  word-wrap: break-word;
}

/* Clickable popup link */
.title-popup-link {
  text-decoration: none;
  color: #333;
  cursor: pointer;
  transition: color 0.2s ease;
}

.title-popup-link:hover {
  color: var(--nm-primary-color, #007bff);
  text-decoration: underline;
}