/* ==========================================================================
   COMPONENT / TOOLTIP
   Figma: "ToolTip"
   Behavior lives in assets/js/components/tooltip.js (initTooltips) — it
   creates the .tooltip-bubble element next to any [data-tooltip] trigger
   and toggles [hidden] on hover/focus. This file only styles the bubble.
   ========================================================================== */
.tooltip-bubble {
  position: absolute;
  bottom: calc(100% + var(--space-2));
  right: 50%;
  transform: translateX(50%);
  z-index: var(--z-tooltip);
  max-width: 220px;
  width: max-content;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background-color: var(--color-primary-navy);
  color: var(--color-white);
  font-family: var(--font-main);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
  pointer-events: none;
}

.tooltip-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 50%;
  transform: translateX(50%);
  border: 5px solid transparent;
  border-top-color: var(--color-primary-navy);
}

.tooltip-bubble[hidden] {
  display: none;
}