@import url('https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/fill/style.css');

/* Container do ícone */
.wftc-tooltip {
    position: relative;
    display: inline-block; /* Mantém na mesma linha */
    cursor: help;
    margin-left: 2px; /* Um ajuste fino de distância */
    font-style: normal;

    /* Isso garante que o ícone fique alinhado com o meio do texto */
    vertical-align: middle;

    /* Opcional: Ajuste a altura da linha para não estourar o layout */
    line-height: 1;
}

.wftc-icon {
    display: inline-block;
    width: 18px !important;
    height: 18px !important;
    background: url("../icons/info.svg") no-repeat center center !important;
    background-size: contain !important;
    transform: translateY(1px); /* Ajuste fino de alinhamento */
    transition: background-color 0.2s ease;
}

/* O balão escondido */
.wftc-tooltip .wftc-tooltip-text {
    visibility: hidden;
    width: 310px;
    background-color: var(--gray-900);
    color: var(--gray-100);
    text-align: center;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 1.4rem !important;
    line-height: 1.4;

    /* Posicionamento */
    position: absolute;
    z-index: 99;
    bottom: 3.2rem;
    left: 50%;
    transform: translateX(-50%);

    /* Efeito */
    opacity: 0;
    transition: opacity 0.3s;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.wftc-tooltip i {
    font-size: 2.1rem !important;
    color: var(--gray-900);
}

/* Seta */
.wftc-tooltip .wftc-tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

.wftc-tooltip:hover .wftc-tooltip-text,
.wftc-tooltip.active .wftc-tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Mobile */
@media (max-width: 768px) {
    .wftc-tooltip:active .wftc-tooltip-text,
    .wftc-tooltip:focus .wftc-tooltip-text {
        visibility: visible;
        opacity: 1;
    }
}

/* Melhoria para Mobile: Ajustar posição se sair da tela */
@media (max-width: 480px) {
    .wftc-tooltip .wftc-tooltip-text {
        width: 200px; /* Um pouco menor no mobile */
        left: 50%;
        transform: translateX(-50%);

        /* Opcional: Se o texto for grande, garanta que não corte */
        white-space: normal;
    }
}