/* Basic Lightbox Overlay */
.wd-lb-overlay {
    position: fixed;  /* Fixed positioning to cover the viewport */
    top: 0;           /* Align to the top of the viewport */
    left: 0;          /* Align to the left of the viewport */
    width: 100%;      /* Full width of the viewport */
    height: 100%;     /* Full height of the viewport */
    background-color: rgba(0, 0, 0, 0.8); /* Dark overlay */
    display: flex;    /* Use flexbox to center the image */
    align-items: center; /* Vertically center the image */
    justify-content: center; /* Horizontally center the image */
    z-index: 9999;    /* Set a high z-index to be above all content */
    text-align: center;
    transition: opacity 0.3s ease; /* Smooth transition */
}

/* Lightbox Content Container */
.wd-lb-content {
    position: relative;
    max-width: 90%;  /* Allow image to take up to 90% of viewport width */
    max-height: 90%; /* Allow image to take up to 90% of viewport height */
    margin: auto;     /* Center the content */
}

/* Lightbox Image */
.wd-lb-content img {
    width: auto;      /* Let the image take its natural width */
    height: auto;     /* Let the image take its natural height */
    max-width: 100%;  /* Ensure it doesn't exceed the container width */
    max-height: 100%; /* Ensure it doesn't exceed the container height */
    border-radius: 4px; /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Light shadow effect */
    transition: all 0.3s ease; /* Smooth transition */
}

/* Close Button */
.wd-lb-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 30px;
    color: white;
    cursor: pointer;
    background: none;
    border: none;
    z-index: 10001; /* Make sure the close button is above the overlay */
    padding: 0;
    line-height: 1;
}

/* Hover effect on Close Button */
.wd-lb-close:hover {
    color: #ccc; /* Lighter gray on hover */
}

/* Prevent the page from scrolling when the lightbox is open */
body.wd-lb-open {
    overflow: hidden; /* Disable scrolling */
}