/*
 * Wijzigingslog
 * v1.2.2 - 2026-09-22
 * - Reveal click-open tooltip text on touch devices; keep closed text non-interactive.
 * - Keep product-option tooltips anchored to the viewport while their filtered row is open.
 *
 * v1.2.0 - 2026-07-17
 * - Added an aligned mobile tooltip panel with an explicit close control.
 *
 * v1.1.0 - 2026-04-13 10:02 CEST
 * - Touch-tooltip gefixt zodat position: fixed niet gevangen blijft in product-form wrappers.
 * - Bij open tooltip de relevante ancestor-context geneutraliseerd (overflow/will-change/transform/perspective/filter).
 */
.tooltip-wrapper .tooltip-text { 
    position: fixed!important;
    top: auto!important;
    bottom: 0px!important;
    left: 0px!important;
    margin: 0px!important;
    right: 0px!important;
    width: 100%!important;
    max-width: 100%!important;
    border: none;
    border-top: 1px solid #e5e5e5!important;
    border-radius: 0px!important;
    padding: 20px!important;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15), 0px 0px 0px 200vh rgba(0,0,0,0.1)!important;
}

body.is-touch-device .product-formula-form-item:has(.tooltip-wrapper.is-open-tooltip) {
    will-change: auto !important;
    transform: none !important;
    perspective: none !important;
    filter: none !important;
}

body.is-touch-device .kdp-pf-form-item-input-inline:has(.tooltip-wrapper.is-open-tooltip) {
    filter: none !important;
}

body.is-touch-device .product-formula-form-item:has(.tooltip-wrapper.is-open-tooltip) > :is(h3, .h3, h4, .h4):first-child {
    overflow: visible !important;
}
 
.tooltip-wrapper.is-open-tooltip .fa {
    color:var(--colororange);
}

.tooltip-wrapper.is-open-tooltip, .tooltip-wrapper.is-open-tooltip * {
    z-index: 2147483647;
}

@media only screen and (pointer: coarse), only screen and (max-width: 541px) {
    .tooltip-wrapper.is-open-tooltip .tooltip-text {
        min-height: 54px;
        opacity: 1;
        padding: 16px 52px 16px 18px!important;
        pointer-events: auto;
        text-align: left!important;
    }

    .tooltip-wrapper.is-open-tooltip .tooltip-close-button {
        align-items: center;
        cursor: pointer;
        display: flex;
        font-size: 26px;
        height: 36px;
        justify-content: center;
        line-height: 1;
        padding: 0px;
        position: absolute;
        right: 9px;
        top: 9px;
        width: 36px;
        z-index: 2147483647;
    }
}