/* Lightbox Overlay: Fills the screen, centers content, allows scrolling if content is too big */
.lightbox-overlay {
    position: fixed;
    inset: 0; /* Same as top:0, right:0, bottom:0, left:0 */
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    /* align-items: center; */
    justify-content: center;
    z-index: 9999;
    overflow: auto; /* Allows scrolling of the overlay if the modal is too large */
    padding: 20px; /* Provides some space around the modal */
    box-sizing: border-box;
}

/* Lightbox Modal: Container for the image */
.lightbox-modal {
    position: relative; /* For potential absolute positioning of close buttons, etc. */
    background: #1a1a1a; /* Dark background for the modal itself */
    border-radius: 0.5em;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: inline-block; /* So it shrink-wraps the image content */
    /* No max-width/max-height here initially, let it be sized by the image */
    transition: max-width 0.3s ease, max-height 0.3s ease; /* Smooth transition for modal size change */
}

/* Lightbox Image: Default state (not zoomed) */
.lightbox-modal img {
    display: block; /* Removes extra space below image */
    /* NO max-width/max-height in vw/vh here - this was the "bounding box" */
    /* Image will be its natural size, constrained by modal if modal has limits */
    max-width: 100%; /* Ensures image doesn't overflow its direct parent modal if modal has a width */
    height: auto;    /* Maintain aspect ratio */
    border-radius: inherit; /* Inherit border-radius from modal */
    /* cursor: pointer; */
    transition: transform 0.3s ease;
}


/* Simple message box for alerts (as alert() is not allowed) */
.custom-message-box {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    z-index: 100000; /* Above lightbox */
    display: none; /* Hidden by default */
}