/* Tooltip wrapper */
.ftm-field-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.ftm-field-wrap.ftm-block {
  display: block;
  width: 100%;
}

.ftm-tip-wrap {
  position: static;
  pointer-events: none;
}

/* Tooltip bubble */
.ftm-tip-text {
  position: absolute;
  min-width: 180px;
  max-width: 280px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.35;
  border-radius: 8px;
  background: rgba(var(--ftm-tooltip-bg-rgb, 17, 17, 17), var(--ftm-tooltip-bg-opacity, 1));
  color: var(--ftm-tooltip-text-color, #fff);
  box-shadow: 0 8px 18px rgba(0,0,0,0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
  z-index: 999999;
  pointer-events: none;
}

/* Show on hover/focus (keyboard + mobile tap if focused) */
.ftm-tip-wrap:hover .ftm-tip-text,
.ftm-tip-wrap:focus .ftm-tip-text,
.ftm-tip-wrap:focus-within .ftm-tip-text,
.ftm-field-wrap:hover .ftm-tip-text,
.ftm-field-wrap:focus-within .ftm-tip-text {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Positioning */
.ftm-pos-top .ftm-tip-text {
  top: -6px;
  right: 0;
  left: auto;
  transform: translateY(-100%);
}

.ftm-pos-top:hover .ftm-tip-text,
.ftm-pos-top:focus .ftm-tip-text,
.ftm-field-wrap:hover .ftm-pos-top .ftm-tip-text,
.ftm-field-wrap:focus-within .ftm-pos-top .ftm-tip-text {
  transform: translateY(-100%);
}