/* =============================================================== */
/* You can use this file with bootstrap tooltips */
/* It overrides it's styles */
/* Here's an example:- */

/* 
<span class="floating-info"
    role="button" tabindex="0"
    data-bs-toggle="tooltip"
    data-bs-placement="top"
    data-bs-custom-class="floating-tooltip"
    data-bs-offset="0,8"
    data-bs-html="true"
    data-bs-title="
    <ol>
        <li>Most of our translations are delivered within 2 working days for up to 8 pages / 2,000 words. We add 1 extra day for every additional 8 pages / 2,000 words.</li>
        <li>You can pay an extra fee to have your order delivered faster.</li>
        <li>Our delivery estimates are for the digital version of your translation; it excludes the delivery of any hard copy to your address.</li>
        <li>Our delivery timelines are best estimates only. We may experience delays due to translator availability and document complexity; we will keep you informed.</li>
    </ol>
    "
    aria-label="Delivery time information">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info-icon lucide-info">
        <circle cx="12" cy="12" r="10"/>
        <path d="M12 16v-4"/>
        <path d="M12 8h.01"/>
    </svg>
</span>
*/

/* Also you need to use that script gloablly (or on top of the document) to re-initialize it */
/* 
// Global tooltip init: delegated on document, so it works for the
// word-count-tooltip element every time it's re-added via AJAX,
// without needing to re-run init after each AJAX call.
$(document).on('mouseenter focus', '[data-bs-custom-class="floating-tooltip"]', function () {
    if (!bootstrap.Tooltip.getInstance(this)) {
        new bootstrap.Tooltip(this);
    }
}); 
*/
/* =============================================================== */
.floating-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--color-text-primary);
    /* drives currentColor */
    cursor: pointer;
    vertical-align: middle;
}

.floating-info svg {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.floating-info:focus-visible {
    outline: 2px solid var(--color-text-primary);
    outline-offset: 2px;
    border-radius: 50%;
}

.tooltip.floating-tooltip {
    --bs-tooltip-bg: var(--color-surface-subtle);
    --bs-tooltip-color: var(--color-text-primary);
    --bs-tooltip-opacity: 1;
    /* Bootstrap defaults to .9 — kills the exact hex */
    --bs-tooltip-border-radius: 18px;
    --bs-tooltip-font-size: 12px;
    --bs-tooltip-padding-x: 12px;
    --bs-tooltip-padding-y: 8px;
    --bs-tooltip-max-width: none;
    /* default 200px would wrap the pill */
    --bs-tooltip-arrow-width: 0;
    --bs-tooltip-arrow-height: 0;
}

.floating-tooltip .tooltip-inner {
    line-height: 1.6;
    font-weight: 400;
    font-size: 14px;
    white-space: nowrap;
    text-align: left;
    font-family: var(--font-body);
    max-width: 340px;
    text-wrap: auto;
    box-shadow: var(--shadow-sm);
}

.floating-tooltip .tooltip-inner ol {
    margin-bottom: 0;
    padding-left: 1.5rem;
}

.floating-tooltip .tooltip-arrow {
    display: none;
}

.tooltip.floating-tooltip--wrap {
    --bs-tooltip-max-width: 260px;
}

.floating-tooltip--wrap .tooltip-inner {
    white-space: normal;
}