/**
 * Magebees_Pro3dviewHyva — pro3dview_hyva.css
 * Hyvä-specific styles. Loaded only when this compat module is active.
 * Original pro3dview.css (in Magebees_Pro3dview) is still loaded for shared rules.
 */

/* Model viewer sizing */
model-viewer {
    width: 100%;
    height: 400px;
    display: block;
}

/* Suppress children while custom element upgrades */
:not(:defined) > * {
    display: none;
}

/* Standalone (no gallery) wrapper */
.mgb_pro_sng model-viewer {
    margin: 0 auto;
    height: 400px;
    position: static;
    transform: none;
}

/* AR trigger button */
#ar-button {
    background-color: #fc7200;
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 1000;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 0 20px;
    font-size: 12px;
    color: #fff;
    height: 30px;
    line-height: 30px;
    border-radius: 20px;
    border: 1px solid #fc7200;
    cursor: pointer;
    transition: background-color 0.2s;
}

#ar-button:hover,
#ar-button:active {
    background-color: #ff841f;
}

#ar-button:focus {
    outline: none;
}

/* AR prompt animation */
@keyframes mgb-circle {
    from {
        transform: translateX(-50%) rotate(0deg) translateX(50px) rotate(0deg);
    }

    to {
        transform: translateX(-50%) rotate(360deg) translateX(50px) rotate(-360deg);
    }
}

@keyframes mgb-elongate {
    from {
        transform: translateX(100px);
    }

    to {
        transform: translateX(-100px);
    }
}

model-viewer > #ar-prompt {
    position: absolute;
    left: 50%;
    bottom: 75px;
    display: none;
    animation: mgb-elongate 2s infinite ease-in-out alternate;
}

model-viewer[ar-status="session-started"] > #ar-prompt {
    display: block;
}

model-viewer > #ar-prompt > img {
    animation: mgb-circle 4s linear infinite;
}

/* Tab switcher — uses Hyvä CSS vars so it respects the store's brand color */
.mgb-tab-btn-active {
    background-color: var(--color-primary, #1C64F2);
    color: #fff;
    border-color: var(--color-primary, #1C64F2);
}

@media (max-width: 768px) {

    model-viewer,
    .mgb_pro_sng model-viewer {
        height: 320px;
    }
}

@media (min-width: 768px) {
    model-viewer {
        margin: inherit !important;
    }
}