/* SavvyGreat Snapic authoritative Insta-style Reel player — 20260812-snapic-instareel-player-7 */

.sgsnapic-photo-stage > .sgsnapic-instareel-video,
.sgsnapic-photo-stage > [data-sgsnapic-instareel-video] {
    position: absolute !important;
    z-index: 8 !important;
    inset: 0 !important;
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #000 !important;
}

.sgsnapic-photo-stage > .sgsnapic-instareel-video[hidden],
.sgsnapic-photo-stage > [data-sgsnapic-instareel-video][hidden] {
    display: none !important;
}

.sgsnapic-photo-stage.sgsnapic-instareel-active > [data-sgsnapic-dialog-image],
.sgsnapic-photo-stage.sgsnapic-stage-reel-active > [data-sgsnapic-dialog-image] {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* The older mixed-media/recovery players remain available as fallbacks for
   older pages, but they must never compete with the authoritative Reel player. */
.sgsnapic-photo-stage.sgsnapic-instareel-active > [data-sgsnapic-dialog-video] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Photo-only transform tools do not apply to a playing Reel. */
.sgsnapic-photo-stage.sgsnapic-instareel-active > [data-sgsnapic-rotate],
.sgsnapic-photo-stage.sgsnapic-instareel-active > [data-sgsnapic-reset-photo] {
    display: none !important;
}

.sgsnapic-instareel-play,
.sgsnapic-instareel-sound {
    position: absolute;
    z-index: 72;
    display: inline-grid;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    background: rgba(0,0,0,.48);
    color: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,.28);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    cursor: pointer;
    touch-action: manipulation;
}

.sgsnapic-instareel-play {
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    transform: translate(-50%,-50%);
}

.sgsnapic-instareel-sound {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
}

.sgsnapic-instareel-play svg {
    width: 31px;
    height: 31px;
    fill: currentColor;
    stroke: none;
}

.sgsnapic-instareel-sound svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sgsnapic-instareel-play[hidden],
.sgsnapic-instareel-sound[hidden] {
    display: none !important;
}

.sgsnapic-instareel-state {
    position: absolute;
    z-index: 71;
    top: 14px;
    left: 50%;
    max-width: min(70vw, 420px);
    transform: translateX(-50%);
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,.52);
    color: rgba(255,255,255,.92);
    font: 600 11px/1.2 Arial,sans-serif;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 120ms ease;
}

.sgsnapic-instareel-state[data-sgsnapic-instareel-state="loading"],
.sgsnapic-instareel-state[data-sgsnapic-instareel-state="error"] {
    opacity: 1;
}

.sgsnapic-instareel-badge {
    z-index: 12 !important;
}

@media (max-width: 760px) {
    html.sgsnapic-reels-enabled .sgsnapic-photo-stage > .sgsnapic-instareel-video,
    html.sgsnapic-reels-enabled .sgsnapic-photo-stage > [data-sgsnapic-instareel-video] {
        z-index: 8 !important;
        object-fit: cover !important;
        object-position: center center !important;
        transform: translate3d(0,var(--sgsnapic-reel-y,0px),0) !important;
        transition: transform 245ms cubic-bezier(.20,.82,.20,1) !important;
        will-change: transform;
    }

    html.sgsnapic-reels-enabled .sgsnapic-photo-stage.is-reel-dragging > .sgsnapic-instareel-video,
    html.sgsnapic-reels-enabled .sgsnapic-photo-stage.is-reel-resetting > .sgsnapic-instareel-video {
        transition: none !important;
    }

    .sgsnapic-instareel-play {
        width: 58px;
        height: 58px;
    }

    .sgsnapic-instareel-sound {
        top: calc(7px + env(safe-area-inset-top));
        right: 8px;
        width: 36px;
        height: 36px;
    }

    .sgsnapic-instareel-state {
        top: calc(10px + env(safe-area-inset-top));
        max-width: 58vw;
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sgsnapic-instareel-video,
    .sgsnapic-instareel-state {
        transition: none !important;
    }
}

/* 20260814-snapic-sound-icon-1 */
.sgsnapic-instareel-sound {
    z-index: 120 !important;
    top: auto !important;
    right: 14px !important;
    bottom: 14px !important;
    width: 42px !important;
    height: 42px !important;
}

.sgsnapic-photo-stage.sgsnapic-instareel-active .sgsnapic-instareel-sound {
    display: inline-grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* 20260814-snapic-mobile-reel-device-fill-2
   Mobile-only invariant: every visible Reel/video occupies the complete device
   viewport in both axes. Source aspect ratio is preserved with center crop.
   Photo-only LightBox presentation and desktop layout remain unchanged. */
@media (max-width: 760px) {
    html.sgsnapic-reels-enabled.sgsnapic-viewer-open,
    html.sgsnapic-reels-enabled.sgsnapic-viewer-open body {
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    html.sgsnapic-reels-enabled.sgsnapic-viewer-open .sgsnapic-photo-viewer,
    html.sgsnapic-reels-enabled.sgsnapic-viewer-open .sgsnapic-photo-viewer[open] {
        position: fixed !important;
        inset: 0 !important;
        box-sizing: border-box !important;
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    @supports (height: 100svh) {
        html.sgsnapic-reels-enabled.sgsnapic-viewer-open .sgsnapic-photo-viewer,
        html.sgsnapic-reels-enabled.sgsnapic-viewer-open .sgsnapic-photo-viewer[open] {
            height: 100svh !important;
            min-height: 100svh !important;
            max-height: 100svh !important;
        }
    }

    @supports (height: 100dvh) {
        html.sgsnapic-reels-enabled.sgsnapic-viewer-open .sgsnapic-photo-viewer,
        html.sgsnapic-reels-enabled.sgsnapic-viewer-open .sgsnapic-photo-viewer[open] {
            height: 100dvh !important;
            min-height: 100dvh !important;
            max-height: 100dvh !important;
        }
    }

    html.sgsnapic-reels-enabled.sgsnapic-viewer-open .sgsnapic-photo-viewer-shell,
    html.sgsnapic-reels-enabled.sgsnapic-viewer-open .sgsnapic-photo-viewer-content,
    html.sgsnapic-reels-enabled.sgsnapic-viewer-open .sgsnapic-photo-stage {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    html.sgsnapic-reels-enabled.sgsnapic-viewer-open .sgsnapic-photo-viewer-content {
        display: block !important;
    }

    html.sgsnapic-reels-enabled.sgsnapic-viewer-open .sgsnapic-photo-stage {
        background: #000 !important;
    }

    html.sgsnapic-reels-enabled.sgsnapic-viewer-open .sgsnapic-photo-stage > video:not([hidden]),
    html.sgsnapic-reels-enabled.sgsnapic-viewer-open .sgsnapic-photo-stage > .sgsnapic-instareel-video:not([hidden]),
    html.sgsnapic-reels-enabled.sgsnapic-viewer-open .sgsnapic-photo-stage > [data-sgsnapic-instareel-video]:not([hidden]),
    html.sgsnapic-reels-enabled.sgsnapic-viewer-open .sgsnapic-photo-stage > [data-sgsnapic-dialog-video]:not([hidden]) {
        position: absolute !important;
        z-index: 8 !important;
        inset: 0 !important;
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        object-fit: cover !important;
        object-position: center center !important;
        background: #000 !important;
    }

    html.sgsnapic-reels-enabled.sgsnapic-viewer-open .sgsnapic-photo-stage > video[hidden],
    html.sgsnapic-reels-enabled.sgsnapic-viewer-open .sgsnapic-photo-stage > [data-sgsnapic-instareel-video][hidden],
    html.sgsnapic-reels-enabled.sgsnapic-viewer-open .sgsnapic-photo-stage > [data-sgsnapic-dialog-video][hidden] {
        display: none !important;
    }
}