/* Ultralight panorama: [ultralight_360] container, dual Pannellum panes, progress overlay. */

.ul360 {
    position: relative;
    width: 100%;
    min-height: 200px;
    background: #000;
    overflow: hidden;
}

.ul360-stage,
.ul360-pano {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* Swaps are instant: a fade would show two half-transparent panoramas at different sharpness. */
.ul360-pano { background: #000; transition: none; }
.ul360-pano.is-active { opacity: 1; z-index: 1; }
.ul360-pano.is-hidden { opacity: 0; z-index: 0; pointer-events: none; }

/* Pannellum's own loader and checkerboard would flash between swaps; this module draws its own. */
.ul360 .pnlm-container,
.ul360 .pnlm-render-container,
.ul360 .pnlm-container canvas { background: #000 !important; }
.ul360 .pnlm-ui { background: transparent !important; }
.ul360 .pnlm-load-box,
.ul360 .pnlm-load-button { display: none !important; }

/* Fullscreen control: Pannellum's sprite, placed where Pannellum puts its own (under zoom). */
.ul360 .ul360-fs {
    position: absolute;
    top: 58px;
    left: 4px;
    z-index: 3;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
}

.ul360-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    z-index: 4;
    background: rgba(0, 0, 0, 0.25);
    transition: opacity 0.3s ease;
}
.ul360-bar > span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #4caf50, #8bc34a);
    transition: width 0.2s ease;
}

.ul360-text {
    position: absolute;
    left: 50%;
    bottom: 10px;
    z-index: 4;
    transform: translateX(-50%);
    max-width: calc(100% - 20px);
    padding: 6px 14px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font: 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.ul360.has-error .ul360-bar > span { background: #f44336; }

.ul360.is-done .ul360-bar,
.ul360.is-done .ul360-text { opacity: 0; pointer-events: none; }

/* Placeholder while renditions are generated in the background. */
.ul360--pending {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
}
.ul360-placeholder {
    color: #ccc;
    font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Real fullscreen, and the viewport-filling fallback for browsers without element fullscreen. */
.ul360:fullscreen { width: 100%; height: 100% !important; }
.ul360:-webkit-full-screen { width: 100%; height: 100% !important; }
.ul360.ul360--max {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 999999;
}
html.ul360-lock,
html.ul360-lock body { overflow: hidden; }