/* tooltip.css — всплывающие подсказки для [data-hint] (иконки .tmc-info-icon и др.) */

.info-tooltip {
  position: fixed;
  z-index: 3000;
  max-width: 260px;
  padding: 10px 12px;
  border-radius: var(--rounded-md);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px var(--shadow-heavy);
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  line-height: 1.4;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

html.dark .info-tooltip {
  background-color: #020617;
  background-image: radial-gradient(circle at top, #312e81, transparent 70%), radial-gradient(circle at bottom, #312e81, transparent 70%);
  background-position: top center, bottom center;
  background-size: 100% 50%;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.5), 0 0 12px rgba(255, 255, 255, 0.5);
  border: none
}

.info-tooltip.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.info-tooltip__arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--surface);
  transform: rotate(45deg);
}

html.dark .info-tooltip__arrow {
  background-color: #020617;
  background-image: radial-gradient(circle at left, #312e81, transparent 70%), radial-gradient(circle at right, #312e81, transparent 70%);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}

@media (max-width: 480px) {
  .info-tooltip { max-width: 200px; font-size: var(--text-micro); padding: 8px 10px; }
}