/* Inline trigger style */
.has-info-popover {
    cursor: pointer;
    transition: all 0.2s ease;
}

.has-info-popover:before {
    content: "";
    float: left;
    width: 1lh;
    height: 1lh; 
    block-size: 1lh;
    margin-left: -3em;  

    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath d='M19.1,38.4c.8,0,1.4-.2,1.8-.5.4-.3.6-.8.7-1.4.1-.6.2-1.3.2-2v-7.3c0-.5,0-1.1,0-1.8s0-1.4.1-2c-.5,0-1,0-1.7,0-.6,0-1.1,0-1.4,0v-3.3c1.3,0,2.5,0,3.4-.2.9-.1,1.7-.3,2.2-.5.5-.2.9-.4,1.1-.6h2.4v15.4c0,.4,0,1,0,1.7,0,.7,0,1.5-.1,2.1.5,0,1,0,1.6-.1.6,0,1,0,1.3,0v3.3h-11.5v-2.9ZM24.6,15.3c-1,0-1.8-.4-2.5-1.1-.6-.7-1-1.6-1-2.6s.3-1.9,1-2.6,1.5-1.1,2.4-1.1,1.7.4,2.4,1.1c.6.7.9,1.6.9,2.6s-.3,1.9-.9,2.6c-.6.7-1.4,1.1-2.4,1.1Z'/%3E%3Cpath d='M25,3.7c11.6,0,21.1,9.5,21.1,21.1s-9.5,21.1-21.1,21.1S3.9,36.4,3.9,24.8,13.4,3.7,25,3.7M25,.7C11.7.7.9,11.5.9,24.8s10.8,24.1,24.1,24.1,24.1-10.8,24.1-24.1S38.3.7,25,.7h0Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: auto 0.8lh;  
    -webkit-mask-position: right top;

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath d='M19.1,38.4c.8,0,1.4-.2,1.8-.5.4-.3.6-.8.7-1.4.1-.6.2-1.3.2-2v-7.3c0-.5,0-1.1,0-1.8s0-1.4.1-2c-.5,0-1,0-1.7,0-.6,0-1.1,0-1.4,0v-3.3c1.3,0,2.5,0,3.4-.2.9-.1,1.7-.3,2.2-.5.5-.2.9-.4,1.1-.6h2.4v15.4c0,.4,0,1,0,1.7,0,.7,0,1.5-.1,2.1.5,0,1,0,1.6-.1.6,0,1,0,1.3,0v3.3h-11.5v-2.9ZM24.6,15.3c-1,0-1.8-.4-2.5-1.1-.6-.7-1-1.6-1-2.6s.3-1.9,1-2.6,1.5-1.1,2.4-1.1,1.7.4,2.4,1.1c.6.7.9,1.6.9,2.6s-.3,1.9-.9,2.6c-.6.7-1.4,1.1-2.4,1.1Z'/%3E%3Cpath d='M25,3.7c11.6,0,21.1,9.5,21.1,21.1s-9.5,21.1-21.1,21.1S3.9,36.4,3.9,24.8,13.4,3.7,25,3.7M25,.7C11.7.7.9,11.5.9,24.8s10.8,24.1,24.1,24.1,24.1-10.8,24.1-24.1S38.3.7,25,.7h0Z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: auto 0.8lh;
    mask-position: right top;
}

.has-info-popover:hover {
    opacity: 0.8;
    border-bottom: 2px solid currentColor;
}


/* Modal + overlay */
.info-popover-overlay {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(0,0,0,.45);
z-index: 9999;
}
.info-popover-overlay.is-open { display: flex; }


.info-popover-modal {
background: #fff;
max-width: 835px;
width: 90vw;
max-height: 80vh;
overflow: auto;
box-shadow: 0 10px 30px rgba(0,0,0,.25);
padding: 60px 72px;
position: relative;
box-sizing: border-box;
}

.info-popover-close {
position: absolute;
top: 8px; right: 8px;
font-size: 30px; line-height: 1;
background: transparent; border: 0; cursor: pointer;
}


.info-popover-content > *:first-child { margin-top: 0; }
.info-popover-content p { margin: 0 0 1em; }


@media (max-width: 600px) {
    .info-popover-modal {
        padding: 20px 24px;
    }
}