/*
 * Shell div that fills .envirabox-slide and serves as the Panzoom target.
 * Panzoom's zoomToPoint uses dims.elem vs effectiveArea (parent=slide); making
 * them equal fixes focal-point calculation when the image is smaller than the slide.
 *
 * !important overrides required: .envirabox-slide > * applies margin/padding/background/
 * display to ALL direct children of the slide, which would break shell fill and
 * corrupt the focal-point math.
 */
.rin-zoom-shell {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    display: flex !important;
    z-index: 99996; /* above .envirabox-image-wrap (99995) */
    align-items: center;
    justify-content: center;
    overflow: hidden; /* clip zoomed image to slide bounds; prevents covering controls */
    cursor: grab;
    touch-action: none; /* required for Panzoom touch handling */
}

.rin-zoom-shell:active {
    cursor: grabbing;
}

/*
 * Image-wrap inside shell: switch from position:absolute (Envira default) to
 * position:relative so flex centering applies.  Envira's inline width/height
 * remain and size the flex item correctly.
 */
.rin-zoom-shell .envirabox-image-wrap {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Image: let shell handle all pointer/touch events */
.rin-zoom-shell img.envirabox-image {
    pointer-events: none;
    display: block;
}

/*
 * +/- zoom buttons — appended to .envirabox-container (position:fixed, full-viewport).
 * Using position:absolute inside the fixed container is equivalent to position:fixed
 * relative to the viewport, but avoids the body-level transform trap where a CSS
 * transform on an ancestor converts position:fixed to position:absolute behavior.
 *
 * Size, gap, and right offset match Envira's dark toolbar aesthetic:
 * toolbar is right:10px with ~4 × (16px + 9px margin) = ~100px wide, so
 * right:120px puts our group 10px to the left of the toolbar's left edge.
 */
.rin-zoom-controls {
    position: absolute;
    top: 7px;
    right: 120px;
    z-index: 9999999;
    display: flex;
    align-items: center;
    gap: 9px; /* match Envira toolbar's margin-left: 9px spacing */
}

.rin-zoom-btn {
    width: 16px;
    height: 16px;
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    line-height: 16px;
    cursor: pointer;
    padding: 0;
    margin: 0;
    display: block;
    user-select: none;
    opacity: 1;
    text-indent: 0;
}

.rin-zoom-btn:hover {
    opacity: 0.7;
}