.eam-modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    z-index: 2147483647; /* Maximum possible z-index to guarantee it sits on top */
    opacity: 0; visibility: hidden; transition: opacity 0.3s ease;
    overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
    
    /* Lightbox Centering */
    display: flex; flex-direction: column; align-items: center;
    padding: 2.5% 0px; /* Padding prevents the modal from touching the screen edges */
}
.eam-modal-overlay.is-open { opacity: 1; visibility: visible; }

.eam-modal-wrapper {
    margin: auto; /* Magically centers vertically in a flex column, while allowing scrolling if it exceeds viewport */
    position: relative; /* Anchor for the close button */
    width: 100%;
    max-height: 95vh; /* Ensure the modal never exceeds the screen height */
    display: flex;
    flex-direction: column;
    /* max-width is set dynamically via PHP inline style */
}

.eam-modal-content-area {
    width: 100%; position: relative;
    border-radius: 12px; /* Rounded corners for the lightbox */
    overflow-y: auto; /* Forces the Elementor template to scroll internally */
    overflow-x: hidden;
    flex-grow: 1;
}

/* Helper Class: Add "eam-scroll-text" to force scrolling ONLY on mobile/tablet when the layout stacks */
@media (max-width: 1024px) {
    .eam-scroll-text {
        max-height: 35vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important; /* Prevent horizontal scroll */
        white-space: normal !important; /* Ensure text wraps */
        word-wrap: break-word !important;
        box-sizing: border-box !important;
    }
}

/* Close Button (Classic Lightbox Style, anchored to the wrapper) */
.eam-close-modal {
    position: absolute; top: 15px; right: 15px; 
    width: 38px; height: 38px; 
    background: #111; border-radius: 50%;
    color: #fff; font-size: 26px; line-height: 34px; text-align: center;
    cursor: pointer; z-index: 2147483647; transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    border: 2px solid #fff;
    -webkit-user-select: none; user-select: none;
}
.eam-close-modal:hover { background: #333; transform: scale(1.1); }

.eam-custom-trigger { display: inline-block; text-decoration: none; transition: all 0.3s ease; cursor: pointer; }