/* =========================================================
   VisuoSight Step 5.2 — Real Product Preview Upgrade
========================================================= */

.vs-real-module{
    position:relative;
}

.vs-real-grid{
    display:grid;
    grid-template-columns:minmax(0,.82fr) minmax(560px,1.18fr);
    gap:56px;
    align-items:center;
}

.vs-real-grid.visual-first{
    grid-template-columns:minmax(560px,1.18fr) minmax(0,.82fr);
}

.vs-real-copy h2{
    max-width:660px;
    margin:13px 0 12px;
    font-size:clamp(34px,3.6vw,48px);
    line-height:1.06;
    letter-spacing:-.045em;
}

.vs-real-copy>p{
    max-width:650px;
    margin:0;
    color:#65758b;
    font-size:14px;
    line-height:1.72;
}

.vs-module-heading{
    display:flex;
    align-items:center;
    gap:11px;
}

.vs-module-icon{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    flex:0 0 44px;
    border-radius:13px;
}

.vs-module-icon svg{
    width:23px;
    height:23px;
}

.vs-module-icon.evaluation{
    color:#5b4bd4;
    background:#f0edff;
}

.vs-module-icon.diagnostics{
    color:#2e69dc;
    background:#edf3ff;
}

.vs-module-icon.therapy{
    color:#1486a8;
    background:#e8f6fa;
}

.vs-module-heading>div{
    display:grid;
    gap:5px;
}

.vs-package-access{
    width:max-content;
    max-width:100%;
    padding:4px 8px;
    border-radius:999px;
    font-size:7.5px;
    font-weight:900;
    line-height:1.1;
}

.vs-package-access.all{
    color:#117257;
    background:#e6f7ef;
}

.vs-package-access.premium{
    color:#315bc1;
    background:#edf3ff;
}

.vs-module-pills{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:22px;
}

.vs-module-pills>span{
    min-height:31px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:0 10px;
    border:1px solid #dce6f1;
    border-radius:999px;
    color:#47576e;
    background:#fff;
    font-size:8.5px;
    font-weight:800;
    box-shadow:0 4px 12px rgba(21,45,82,.025);
}

.vs-module-pills.diagnostics>span{
    background:#f9fbfe;
}

.vs-module-pills.therapy>span{
    background:#f8fbff;
}

.vs-mini-icon{
    width:9px;
    height:9px;
    display:inline-block;
    border-radius:3px;
    background:#7b88a0;
}

.vs-mini-icon.history{background:#4f76ed}
.vs-mini-icon.refraction{background:#26a66d}
.vs-mini-icon.sensory{background:#8d6ae8}
.vs-mini-icon.motor{background:#6a809d}
.vs-mini-icon.accommodation{background:#24ad79}
.vs-mini-icon.vergence{background:#1f72d5}
.vs-mini-icon.findings{background:#d89b1d}
.vs-mini-icon.plan{background:#566d8c}

.vs-product-points{
    display:grid;
    gap:10px;
    margin-top:20px;
}

.vs-product-points>div{
    display:grid;
    grid-template-columns:34px 1fr;
    gap:10px;
    align-items:start;
    padding:11px 12px;
    border:1px solid #e0e8f2;
    border-radius:11px;
    background:rgba(255,255,255,.72);
}

.vs-point-icon{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:10px;
    color:#3169e7;
    background:#eef4ff;
}

.vs-point-icon svg{
    width:18px;
    height:18px;
}

.vs-product-points strong{
    display:block;
    color:#23344f;
    font-size:9.5px;
}

.vs-product-points span{
    display:block;
    margin-top:3px;
    color:#728096;
    font-size:8.3px;
    line-height:1.45;
}

.vs-product-shot,
.vs-diagnostic-preview{
    overflow:hidden;
    margin:0;
    border:1px solid #d4dfed;
    border-radius:19px;
    background:#fff;
    box-shadow:0 22px 56px rgba(20,45,84,.10);
}

.vs-shot-toolbar{
    min-height:45px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:10px;
    padding:0 12px;
    border-bottom:1px solid #e2e9f2;
    color:#43536a;
    background:#fbfdff;
    font-size:8px;
    font-weight:850;
}

.vs-window-dots{
    display:flex;
    gap:4px;
}

.vs-window-dots i{
    width:6px;
    height:6px;
    border-radius:999px;
    background:#c8d2df;
}

.vs-window-dots i:nth-child(1){background:#ef7d78}
.vs-window-dots i:nth-child(2){background:#e3bc56}
.vs-window-dots i:nth-child(3){background:#55b97d}

.vs-shot-status{
    padding:4px 7px;
    border-radius:999px;
    color:#15745d;
    background:#e8f6f1;
    font-size:7px;
    font-weight:900;
}

.vs-product-shot img,
.vs-preview-stage img{
    width:100%;
    height:auto;
    display:block;
}

.vs-product-shot figcaption{
    padding:10px 12px 11px;
    border-top:1px solid #e3eaf3;
    color:#748197;
    background:#fbfdff;
    font-size:7.5px;
    line-height:1.45;
}

.vs-real-evaluation{
    background:#fff;
}

.vs-real-diagnostics{
    background:
        radial-gradient(circle at 12% 12%,rgba(46,105,220,.045),transparent 27%),
        #f7faff;
}

.vs-real-quick-office{
    background:#fff;
}

.vs-preview-tabs{
    display:flex;
    gap:6px;
    padding:9px 11px;
    border-bottom:1px solid #e2e9f2;
    background:#f8fbff;
}

.vs-preview-tabs button{
    min-height:31px;
    padding:0 10px;
    border:1px solid #d8e3f0;
    border-radius:9px;
    color:#596b83;
    background:#fff;
    cursor:pointer;
    font:inherit;
    font-size:8px;
    font-weight:850;
}

.vs-preview-tabs button.active{
    color:#fff;
    border-color:#3169e7;
    background:#3169e7;
    box-shadow:0 6px 14px rgba(49,105,231,.18);
}

.vs-preview-stage{
    position:relative;
    aspect-ratio:1.88/1;
    overflow:hidden;
    background:#eff4fa;
}

.vs-preview-stage img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    opacity:0;
    transform:scale(.995);
    transition:opacity .18s ease,transform .18s ease;
}

.vs-preview-stage img.active{
    opacity:1;
    transform:scale(1);
}

@media(max-width:1080px){
    .vs-real-grid,
    .vs-real-grid.visual-first{
        grid-template-columns:minmax(0,1fr);
        gap:34px;
    }

    .vs-real-copy{
        max-width:800px;
    }

    .vs-real-grid.visual-first .vs-diagnostic-preview{
        order:2;
    }

    .vs-real-grid.visual-first .vs-real-copy{
        order:1;
    }

    .vs-product-shot,
    .vs-diagnostic-preview{
        width:100%;
        max-width:900px;
    }
}

@media(max-width:650px){
    .vs-real-grid,
    .vs-real-grid.visual-first{
        gap:24px;
    }

    .vs-real-copy h2{
        font-size:29px;
        line-height:1.07;
    }

    .vs-real-copy>p{
        font-size:12.5px;
        line-height:1.64;
    }

    .vs-module-heading{
        align-items:flex-start;
    }

    .vs-module-icon{
        width:40px;
        height:40px;
        flex-basis:40px;
        border-radius:11px;
    }

    .vs-module-icon svg{
        width:21px;
        height:21px;
    }

    .vs-package-access{
        white-space:normal;
        font-size:7px;
    }

    .vs-module-pills{
        gap:6px;
        margin-top:17px;
    }

    .vs-module-pills>span{
        min-height:29px;
        padding:0 9px;
        font-size:8px;
    }

    .vs-product-points{
        margin-top:16px;
        gap:7px;
    }

    .vs-product-points>div{
        grid-template-columns:31px 1fr;
        padding:10px;
    }

    .vs-point-icon{
        width:31px;
        height:31px;
    }

    .vs-product-shot,
    .vs-diagnostic-preview{
        border-radius:14px;
    }

    .vs-shot-toolbar{
        min-height:40px;
        grid-template-columns:auto 1fr;
        padding:0 9px;
    }

    .vs-shot-status{
        display:none;
    }

    .vs-product-shot figcaption{
        padding:8px 9px 9px;
        font-size:7px;
    }

    .vs-preview-tabs{
        padding:7px 8px;
    }

    .vs-preview-tabs button{
        flex:1;
        min-height:30px;
        padding:0 7px;
        font-size:7.4px;
    }

    .vs-preview-stage{
        aspect-ratio:1.85/1;
    }
}

@media(prefers-reduced-motion:reduce){
    .vs-preview-stage img{
        transition:none;
    }
}