/* --- TOOLTIP CONTAINER --- */
.cf7-tooltip {
    position: relative;
    display: inline-block;
    margin-left: 6px;
}

/* --- ICON STYLING --- */
.cf7-tooltip-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: 18px;
    background: #0073aa;
    color: #fff !important;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
}

/* --- BUBBLE BASE STYLE --- */
.cf7-tooltip-bubble {
    position: absolute;
    top: 50%;
    left: calc(100% + 8px);
    transform: translateY(-50%);
    background: #333;
    color: #fff !important;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.35;
    white-space: nowrap; /* overridden on mobile */
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, transform .25s ease;
}

/* --- ARROW (DEFAULT RIGHT SIDE) --- */
.cf7-tooltip-bubble::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -6px;
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent #333 transparent transparent;
}

/* --- SHOW ON HOVER OR CLICK --- */
.cf7-tooltip:hover .cf7-tooltip-bubble,
.cf7-tooltip.active .cf7-tooltip-bubble {
    opacity: 1;
    visibility: visible;
}

/* ------------------------------ */
/* --- FLIP TO LEFT IF NEEDED --- */
/* (JS adds class .left on overflow) */
/* ------------------------------ */

.cf7-tooltip-bubble.left {
    left: auto;
    right: calc(100% + 6px);
}

.cf7-tooltip-bubble.left::before {
    left: auto;
    right: -6px;
    border-color: transparent transparent transparent #333;
}

/* --- Keep animation consistent when flipped --- */
.cf7-tooltip.active .cf7-tooltip-bubble.left,
.cf7-tooltip:hover .cf7-tooltip-bubble.left {
    transform: translateY(-50%);
}

@media (max-width: 1500px) {

    .cf7-tooltip-bubble {
        position: fixed !important;
        top: 50% !important;
        left: 0 !important;
        right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        transform: translateY(-50%) !important;

        width: 50% !important;
        max-width: 80% !important;

        /* Text wrapping rules — no breaking in the middle of words */
        white-space: normal !important;
        overflow-wrap: break-word;  /* wrap long content cleanly */
        word-break: normal !important;
        hyphens: auto;

        padding: 12px 15px !important;
        z-index: 99999 !important;
        border-radius: 10px !important;
    }

    /* Remove arrow on mobile */
    .cf7-tooltip-bubble::before {
        display: none !important;
    }

    /* Visibility rules */
    .cf7-tooltip-bubble {
        opacity: 0;
        visibility: hidden;
    }

    .cf7-tooltip.active .cf7-tooltip-bubble {
        opacity: 1;
        visibility: visible;
    }
}


/* ----- MOBILE & TABLET: CENTERED WIDE MODAL TOOLTIP ----- */
@media (max-width: 1020px) {

    .cf7-tooltip-bubble {
        position: fixed !important;
        top: 50% !important;
        left: 0 !important;
        right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        transform: translateY(-50%) !important;

        width: 95% !important;
        max-width: 95% !important;

        /* Text wrapping rules — no breaking in the middle of words */
        white-space: normal !important;
        overflow-wrap: break-word;  /* wrap long content cleanly */
        word-break: normal !important;
        hyphens: auto;

        padding: 12px 15px !important;
        z-index: 99999 !important;
        border-radius: 10px !important;
    }

    /* Remove arrow on mobile */
    .cf7-tooltip-bubble::before {
        display: none !important;
    }

    /* Visibility rules */
    .cf7-tooltip-bubble {
        opacity: 0;
        visibility: hidden;
    }

    .cf7-tooltip.active .cf7-tooltip-bubble {
        opacity: 1;
        visibility: visible;
    }
}