/* Infographic Overlay Plugin Styles */
.infographic-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    /* Fill the viewport, but allow internal scrolling */
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent dark overlay */
    display: none !important; /* Force hide by default; JS will set display:flex !important */
    justify-content: center;
    align-items: center; /* center vertically */
    overflow: hidden; /* Prevent overlay scrolling, let content scroll internally */
    padding: 0; /* Remove padding to center in full viewport */
    z-index: 1000;
    min-height: 100vh; /* Full viewport height */
    min-height: 100dvh; /* Dynamic viewport height for better mobile support */
}

/* Add pointer cursor for trigger elements */
[class*="trigger_info_"] {
    cursor: pointer;
}

[class*="trigger_info_"]:hover {
    cursor: pointer;
}

.infographic-overlay-content {
    /* background-color: #12404f; */
    padding: 2em;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    /* Keep content within the viewport minus margin */
    max-height: 100vh;
    overflow-y: auto;
    transform: scale(1); /* Zoom out by 20% (80% of original size) */
    transform-origin: center center; /* Scale from the center */
    margin: 16px; /* Add margin for spacing from viewport edges */
}

.close-button {
    cursor: pointer;
}

.close-button:hover {
    cursor: pointer;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .infographic-overlay {
        padding: 0px; /* No padding for full viewport centering */
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height for better mobile support */
        min-height: 100vh;
        min-height: 100dvh;
    }
    
    .infographic-overlay-content {
        max-width: 100vw; /* Full width */
        width: 100vw; /* Force full width usage */
        max-height: 100vh; /* Full height */
        max-height: 100dvh; /* Dynamic viewport height for better mobile support */
        margin: 0; /* No margin on mobile */
        padding: 10px; /* Reduce padding for mobile */
    }
}