#mbe-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mbe-lightbox-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
}

.mbe-lightbox-container {
    position: relative;
    width: 90vw;
    max-width: 1200px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.mbe-lightbox-header {
    display: flex;
    justify-content: flex-end; /* Align close button to the right */
    align-items: center;
    padding-bottom: 20px;
    color: #fff;
}

.mbe-lightbox-close {
    width: 58px;
    height: 58px;
    border: none;
    background: url("data:image/svg+xml,%3Csvg%20width%3D%2258%22%20height%3D%2258%22%20viewBox%3D%220%200%2058%2058%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%2229%22%20cy%3D%2229%22%20r%3D%2229%22%20fill%3D%22%238DC63F%22%2F%3E%3Cpath%20d%3D%22M16.1213%2016L44%2043.8787M16%2043.8787L43.8787%2016%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center no-repeat;
    cursor: pointer;
}

.mbe-lightbox-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.mbe-lightbox-image-wrapper {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 10px;
    position: relative; /* Needed for absolute positioning of the counters */
}

.mbe-lightbox-image {
    max-width: 100%;
    max-height: 80vh;
    object-fit: cover;
    border-radius: 10px;
    transition: opacity 0.3s ease;
}

.mbe-lightbox-loader {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: mbe-spin 1s linear infinite;
    position: absolute;
    display: none; /* Hidden by default */
}

@keyframes mbe-spin {
    to { transform: rotate(360deg); }
}

.mbe-lightbox-prev,
.mbe-lightbox-next {
    width: 58px;
    height: 58px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    transition: opacity 0.3s ease;
    flex-shrink: 0;
}

.mbe-lightbox-prev {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2258%22%20height%3D%2258%22%20viewBox%3D%220%200%2058%2058%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%2229%22%20cy%3D%2229%22%20r%3D%2229%22%20fill%3D%22%238DC63F%22%2F%3E%3Cpath%20d%3D%22m36%2042.879-14-14L35.879%2015%22%20stroke%3D%22%23fff%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

.mbe-lightbox-next {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2258%22%20height%3D%2258%22%20viewBox%3D%220%200%2058%2058%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%2229%22%20cy%3D%2229%22%20r%3D%2229%22%20transform%3D%22rotate(-180%2029%2029)%22%20fill%3D%22%238DC63F%22%2F%3E%3Cpath%20d%3D%22m22%2015.121%2014%2014L22.121%2043%22%20stroke%3D%22%23fff%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

.mbe-lightbox-mobile-footer {
    display: none;
}

.mbe-lightbox-counter-desktop {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0,0,0,0.6);
    padding: 5px 10px;
    border-radius: 4px;
    z-index: 10;
    color: #fff;
    font-size: 14px;
}

.mbe-lightbox-counter-mobile {
    display: none;
}

/* --- Mobile Styles --- */
@media (max-width: 768px) {
    .mbe-lightbox-header,
    .mbe-lightbox-prev,
    .mbe-lightbox-next,
    .mbe-lightbox-counter-desktop {
        display: none;
    }

    .mbe-lightbox-container {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        justify-content: center; /* Vertically center the content */
    }

    .mbe-lightbox-image {
        max-height: 100%;
        border-radius: 0;
    }

    .mbe-lightbox-image-wrapper {
        border-radius: 0;
        height: auto; /* Allow height to be flexible */
        max-height: 80vh; /* Limit image height to leave space for footer */
    }

    .mbe-lightbox-mobile-footer {
        display: flex;
        justify-content: end;
        align-items: center;
        padding: 20px;
    }
    
    .mbe-lightbox-close-mobile {
        width: 40px;
        height: 40px;
        border: none;
        background: url("data:image/svg+xml,%3Csvg%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2220%22%20fill%3D%22%238DC63F%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20d%3D%22m11.777%2011.034%2018.568%2018.569m-19.311%200%2018.568-18.569%22%2F%3E%3C%2Fsvg%3E") center no-repeat;
        cursor: pointer;
    }

    .mbe-lightbox-counter-mobile {
        display: block;
        position: absolute;
        bottom: 20px;
        right: 20px;
        background: rgba(0,0,0,0.6);
        padding: 5px 10px;
        border-radius: 4px;
        z-index: 10;
        color: #fff;
        font-size: 12px;
    }
}
.img-fill .mbe-lightbox-image {
object-fit: fill;
}