/* ═══════════════════════════════════════════════════════════════
   Tooltips — MC Виан B2B Portal
   ═══════════════════════════════════════════════════════════════ */

.tooltip-wrap {
  position: relative;
  display: inline-flex;
}
.tooltip-wrap .tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--color-text);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: var(--z-dropdown);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.tooltip-wrap .tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-text);
}
.tooltip-wrap:hover .tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Bottom tooltip */
.tooltip-wrap .tooltip--bottom {
  bottom: auto;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
}
.tooltip-wrap .tooltip--bottom::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--color-text);
}
.tooltip-wrap:hover .tooltip--bottom {
  transform: translateX(-50%) translateY(0);
}