/* gform tooltip start (viewport-aware) */
.gfield.has-tooltip { position: relative; }

/* Icon button */
.gfield.has-tooltip .gf-tip-icon {
    margin-left: .8rem;
    width: 1.8rem; height: 1.8rem;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background-color: #ecedf8;
    font: inherit; font-size: 1.2rem; line-height: 1;
    border: 0; padding: 0; cursor: pointer; user-select: none;
}
.gfield.has-tooltip .gf-tip-icon:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* Tooltip base */
.gfield.has-tooltip .gf-tip {
    position: absolute;
    z-index: 999;
    display: none; /* toggled via JS */
    left: 0; right: auto;
    max-width: 50rem;
    padding: 1.2rem 1.5rem;
    background-color: #111; color: #fff;
    font-size: 1.2rem; line-height: 1.3;
    border-radius: .5rem;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    white-space: normal; word-break: break-word;
}

/* Default BELOW the field */
.gfield.has-tooltip .gf-tip[data-pos="below"] {
    top: calc(100% + .4rem);
    bottom: auto;
}
.gfield.has-tooltip .gf-tip[data-pos="below"]::before {
    content: "";
    position: absolute; top: -6px; left: 10px;
    border: 6px solid transparent;
    border-bottom-color: #111;
}

/* Flip ABOVE the field when needed */
.gfield.has-tooltip .gf-tip[data-pos="above"] {
    bottom: calc(100% + .4rem);
    top: auto;
}
.gfield.has-tooltip .gf-tip[data-pos="above"]::before {
    content: "";
    position: absolute; bottom: -6px; left: 10px;
    border: 6px solid transparent;
    border-top-color: #111;
}

/* Table cell spacing inside tooltip (if you render tables) */
.gfield.has-tooltip .gf-tip th,
.gfield.has-tooltip .gf-tip td {
    padding: 0 10px;
    font-weight: 400;
}
/* gform tooltip end */