body.zbf-image-viewer-open {
    overflow:hidden;
}

.zbf-image-viewer[hidden] {
    display:none !important;
}

.zbf-image-viewer {
    position:fixed;
    z-index:100000;
    inset:0;
    box-sizing:border-box;
    background:rgba(15,20,24,.94);
    color:#fff;
}

.zbf-image-viewer__toolbar {
    position:absolute;
    z-index:3;
    top:0;
    right:0;
    left:0;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    padding:7px 58px;
    box-sizing:border-box;
    pointer-events:none;
}

.zbf-image-viewer__zoom {
    display:flex;
    gap:6px;
    pointer-events:auto;
}

.zbf-image-viewer.is-zoom-disabled .zbf-image-viewer__zoom {
    display:none;
}

.zbf-image-viewer__button,
.zbf-image-viewer__close,
.zbf-image-viewer__gallery-button {
    margin:0;
    border:1px solid rgba(255,255,255,.65);
    border-radius:5px;
    background:rgba(0,0,0,.5);
    color:#fff;
    cursor:pointer;
}

.zbf-image-viewer__button {
    min-width:40px;
    height:38px;
    padding:0 10px;
    font:600 18px/36px Arial,sans-serif;
}

.zbf-image-viewer__reset {
    min-width:52px;
    font-size:14px;
}

.zbf-image-viewer__close {
    position:absolute;
    top:7px;
    right:10px;
    width:40px;
    height:40px;
    padding:0;
    border-color:transparent;
    background:transparent;
    font:normal 34px/38px Arial,sans-serif;
    pointer-events:auto;
}

.zbf-image-viewer__button:hover,
.zbf-image-viewer__button:focus,
.zbf-image-viewer__close:hover,
.zbf-image-viewer__close:focus,
.zbf-image-viewer__gallery-button:hover,
.zbf-image-viewer__gallery-button:focus {
    border-color:#fff;
    background:rgba(45,60,70,.92);
    color:#fff;
    outline:2px solid transparent;
}

.zbf-image-viewer__canvas {
    position:absolute;
    inset:52px 0 0;
    overflow:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    cursor:default;
}

.zbf-image-viewer__canvas.is-dragging {
    cursor:grabbing;
    user-select:none;
}

.zbf-image-viewer__stage {
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:100%;
    min-height:100%;
    padding:16px;
    box-sizing:border-box;
}

.zbf-image-viewer__image {
    display:block;
    flex:none;
    max-width:none;
    max-height:none;
    object-fit:contain;
    user-select:none;
    -webkit-user-drag:none;
}

.zbf-image-viewer.is-loading .zbf-image-viewer__stage::after {
    content:'';
    width:34px;
    height:34px;
    border:3px solid rgba(255,255,255,.35);
    border-top-color:#fff;
    border-radius:50%;
    animation:zbf-image-viewer-spin .8s linear infinite;
}

.zbf-image-viewer.is-loading .zbf-image-viewer__image,
.zbf-image-viewer.has-error .zbf-image-viewer__image {
    display:none;
}

.zbf-image-viewer.has-error .zbf-image-viewer__stage::after {
    content:'×';
    color:#fff;
    font:normal 48px/1 Arial,sans-serif;
}

.zbf-image-viewer__gallery-button {
    position:absolute;
    z-index:3;
    top:50%;
    width:44px;
    height:54px;
    padding:0;
    transform:translateY(-50%);
    font:normal 30px/50px Arial,sans-serif;
}

.zbf-image-viewer__gallery-button[hidden] {
    display:none;
}

.zbf-image-viewer__previous {left:10px;}
.zbf-image-viewer__next {right:10px;}

.zbf-image-viewer__caption {
    position:absolute;
    z-index:2;
    right:50%;
    bottom:12px;
    max-width:min(760px,calc(100% - 120px));
    padding:6px 10px;
    border-radius:4px;
    background:rgba(0,0,0,.68);
    color:#fff;
    font-size:14px;
    line-height:1.35;
    text-align:center;
    transform:translateX(50%);
    pointer-events:none;
}

@keyframes zbf-image-viewer-spin {
    to {transform:rotate(360deg);}
}

@media (max-width:600px) {
    .zbf-image-viewer__toolbar {padding-right:52px;padding-left:52px;}
    .zbf-image-viewer__gallery-button {width:38px;height:48px;font-size:25px;}
    .zbf-image-viewer__previous {left:4px;}
    .zbf-image-viewer__next {right:4px;}
    .zbf-image-viewer__caption {
        right:0;
        bottom:0;
        left:0;
        width:100%;
        max-width:none;
        box-sizing:border-box;
        border-radius:0;
        font-size:13px;
        transform:none;
    }
}

@media (prefers-reduced-motion:reduce) {
    .zbf-image-viewer.is-loading .zbf-image-viewer__stage::after {animation:none;}
}