/* =========================================
   SUNIVA SCOPE Camera AR
========================================= */

.suniva-scope-visual {
    isolation: isolate !important;
    background:
        url("/html/user_data/assets/suniva/world/img/backgrounds/main.webp")
        center center / cover no-repeat !important;
}

.suniva-scope-camera,
.suniva-scope-camera-fallback {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.suniva-scope-camera {
    display: none !important;
    object-fit: cover !important;
    background: #07131d !important;
}

.suniva-scope-camera-fallback {
    display: block !important;
    background:
        url("/html/user_data/assets/suniva/world/img/backgrounds/main.webp")
        center center / cover no-repeat !important;
}

.suniva-scope-visual.is-camera-live
.suniva-scope-camera {
    display: block !important;
}

.suniva-scope-visual.is-camera-live
.suniva-scope-camera-fallback {
    display: none !important;
}

.suniva-scope-visual__shade {
    z-index: 1 !important;
}

.suniva-scope-visual__light {
    z-index: 2 !important;
}

.suniva-scope-portal-header,
.suniva-scope-collapse,
.suniva-scope-flowers,
#sunivaScopeFlowerMessage,
.suniva-scope-actions {
    z-index: 8 !important;
}

.suniva-scope-ar-target {
    position: absolute !important;
    top: 43% !important;
    left: 50% !important;
    z-index: 6 !important;
    display: grid !important;
    justify-items: center !important;
    width: min(230px, 68%) !important;
    transform:
        translate(-50%, -50%)
        translateX(var(--suniva-ar-x, 0px)) !important;
    color: #fff !important;
    text-align: center !important;
    text-shadow:
        0 2px 8px rgba(0,0,0,.90),
        0 0 20px rgba(0,0,0,.50) !important;
    transition:
        transform .18s ease-out,
        opacity .25s ease !important;
    pointer-events: none !important;
}

.suniva-scope-ar-target__light {
    position: relative !important;
    display: block !important;
    width: 58px !important;
    height: 76px !important;
    margin-bottom: 8px !important;
    border: 2px solid rgba(255,220,121,.95) !important;
    border-radius: 50% !important;
    background:
        radial-gradient(
            circle,
            rgba(255,242,188,.92) 0,
            rgba(255,205,83,.42) 28%,
            rgba(255,205,83,.10) 57%,
            transparent 72%
        ) !important;
    box-shadow:
        0 0 18px rgba(255,220,121,.95),
        0 0 48px rgba(255,202,74,.72),
        inset 0 0 22px rgba(255,255,255,.58) !important;
    animation:
        sunivaArPortalPulse 1.8s
        ease-in-out infinite alternate !important;
}

.suniva-scope-ar-target__light::after {
    content: "✦" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    color: #fff3c7 !important;
    font-size: 25px !important;
    transform: translate(-50%, -50%) !important;
}

.suniva-scope-ar-target strong {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    font-size: 15px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.suniva-scope-ar-target small {
    display: inline-block !important;
    margin-top: 5px !important;
    padding: 5px 11px !important;
    border: 1px solid rgba(255,226,151,.56) !important;
    border-radius: 999px !important;
    color: #fff4d2 !important;
    font-size: 9px !important;
    background: rgba(8,29,44,.70) !important;
    backdrop-filter: blur(10px) !important;
}

.suniva-scope-ar-target.is-searching {
    opacity: .62 !important;
}

@keyframes sunivaArPortalPulse {
    from {
        transform: scale(.88);
        opacity: .72;
    }

    to {
        transform: scale(1.08);
        opacity: 1;
    }
}

.suniva-scope-camera-notice {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 20 !important;
    display: none !important;
    width: min(310px, calc(100% - 38px)) !important;
    padding: 22px 20px 18px !important;
    transform: translate(-50%, -50%) !important;
    border: 1px solid rgba(234,202,123,.72) !important;
    border-radius: 24px !important;
    color: #183247 !important;
    text-align: center !important;
    background: rgba(255,252,245,.95) !important;
    box-shadow: 0 22px 60px rgba(0,0,0,.30) !important;
    backdrop-filter: blur(18px) !important;
}

.suniva-scope-camera-notice.is-visible {
    display: block !important;
}

.suniva-scope-camera-notice__icon {
    display: grid !important;
    place-items: center !important;
    width: 52px !important;
    height: 52px !important;
    margin: 0 auto 11px !important;
    border: 1px solid #d2a846 !important;
    border-radius: 50% !important;
    color: #bf8b1f !important;
    font-size: 28px !important;
    background:
        radial-gradient(
            circle,
            #fff9dc,
            #f4df9f
        ) !important;
}

.suniva-scope-camera-notice strong {
    display: block !important;
    font-family: serif !important;
    font-size: 17px !important;
}

.suniva-scope-camera-notice p {
    margin: 9px 0 14px !important;
    color: #65727a !important;
    font-size: 10px !important;
    line-height: 1.8 !important;
}

#sunivaScopeCameraStart {
    width: 100% !important;
    min-height: 44px !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    background:
        linear-gradient(
            135deg,
            #d7ad4b,
            #b77f16
        ) !important;
    box-shadow: 0 9px 22px rgba(172,117,21,.25) !important;
}

#sunivaScopeCameraStatus {
    display: block !important;
    margin-top: 9px !important;
    color: #8a8174 !important;
    font-size: 8px !important;
}

.suniva-scope-visual.is-camera-live
.suniva-scope-camera-notice {
    display: none !important;
}

.suniva-scope-visual.is-camera-fallback
.suniva-scope-camera-notice {
    display: block !important;
}

@media (prefers-reduced-motion: reduce) {
    .suniva-scope-ar-target,
    .suniva-scope-ar-target__light {
        transition: none !important;
        animation: none !important;
    }
}