/* overlay */
.glightbox-overlay,
#glightbox-body .glightbox-overlay,
#glightbox-body .goverlay {
  background: rgba(0,0,0,0.7) !important;
}

/* container */
.glightbox-container { background: transparent !important; box-shadow: none !important; }

/* controls appearance only */
.glightbox-container .gprev,
.glightbox-container .gnext,
.glightbox-container .gclose,
.glightbox-container .glightbox-prev,
.glightbox-container .glightbox-next,
.glightbox-container .glightbox-close {
    width: 36px !important;
    height: 36px !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: #333 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.95 !important;
    transition: opacity .12s ease, transform .08s ease !important;
    box-shadow: none !important;
    pointer-events: auto !important;
}

.glightbox-container .gprev svg,
.glightbox-container .gnext svg,
.glightbox-container .gclose svg,
.glightbox-container .gprev svg path,
.glightbox-container .gnext svg path,
.glightbox-container .gclose svg path {
    fill: #333 !important;
    stroke: #333 !important;
}

/* Make the per-image wrapper the positioning context (not ginner-container, which is full width) */
.glightbox-container .gslide-media.gslide-image {
    position: relative !important;
    display: inline-block !important; /* shrinks the wrapper to the image's actual width */
}

.glightbox-container .ginner-container {
    position: relative !important;
}

/* Above 800px: image is at its full 800px width, buttons sit slightly inside its edges */
.glightbox-container .gprev,
.glightbox-container .glightbox-prev {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(calc(-400px + 7px), -50%) !important;
}

.glightbox-container .gnext,
.glightbox-container .glightbox-next {
    position: absolute !important;
    right: 50% !important;
    top: 50% !important;
    transform: translate(calc(400px - 7px), -50%) !important;
}

/* Above 800px: image is at its full 800px width, close button sits in its top-right corner */
.glightbox-container .gclose,
.glightbox-container .glightbox-close {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(calc(400px - 35px), calc(-300px + 5px)) !important;
}

/* 800px and below: image is full-bleed (touches screen edges), buttons sit just inside the screen edges */
@media (max-width: 800px) {
    .glightbox-container .gprev,
    .glightbox-container .glightbox-prev {
        left: 8px !important;
        right: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .glightbox-container .gnext,
    .glightbox-container .glightbox-next {
        right: 8px !important;
        left: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
/* 800px and below: image is full-bleed, close button sits just inside the screen's top-right corner */
    .glightbox-container .gclose,
    .glightbox-container .glightbox-close {
        position: absolute !important;
        top: calc(50vh - 37.5vw + 8px) !important;
        left: auto !important;
        right: 8px !important;
        transform: none !important;
    }
}

/* Shadow under the image */
.glightbox-container .gslide-image img {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

/* default: buttons invisible + non-interactive until we say otherwise */
.glightbox-container .gclose,
.glightbox-container .gprev,
.glightbox-container .gnext {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .25s ease !important;
}

/* visible state, toggled by JS */
.glightbox-container.gcontrols-ready .gclose,
.glightbox-container.gcontrols-ready .gprev,
.glightbox-container.gcontrols-ready .gnext {
  opacity: 0.95 !important;
  pointer-events: auto !important;
}