/* Prime Kia — 360° VR tour viewer */
.vr{position:relative;border-radius:20px;overflow:hidden;background:#05141F;
    box-shadow:0 24px 70px rgba(9,20,31,.25);user-select:none;-webkit-user-select:none}
.vr__stage{position:relative;width:100%;height:520px;cursor:grab;
    background-repeat:repeat-x;background-position:center;touch-action:none;
    transition:background-image .35s ease}
.vr__stage.grabbing{cursor:grabbing}
@media(max-width:700px){.vr__stage{height:380px}}

.vr__badge{position:absolute;top:16px;left:16px;z-index:6;display:flex;align-items:center;gap:8px;
    background:rgba(5,20,31,.55);backdrop-filter:blur(8px);color:#fff;border:1px solid rgba(255,255,255,.18);
    padding:8px 14px;border-radius:100px;font-size:.8rem;font-weight:700;letter-spacing:.03em}
.vr__badge .dot{width:8px;height:8px;border-radius:50%;background:#39d98a;box-shadow:0 0 0 0 rgba(57,217,138,.6);animation:vrpulse 2s infinite}
@keyframes vrpulse{0%{box-shadow:0 0 0 0 rgba(57,217,138,.55)}70%{box-shadow:0 0 0 10px rgba(57,217,138,0)}100%{box-shadow:0 0 0 0 rgba(57,217,138,0)}}

.vr__hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;pointer-events:none;
    color:#fff;text-align:center;transition:opacity .4s;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.vr__hint svg{display:block;margin:0 auto 10px;opacity:.9}
.vr__hint span{font-size:.9rem;font-weight:600;letter-spacing:.02em}
.vr.interacted .vr__hint{opacity:0}

.vr__controls{position:absolute;right:16px;bottom:16px;z-index:6;display:flex;gap:8px}
.vr__btn{width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.2);
    background:rgba(5,20,31,.55);backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;
    cursor:pointer;transition:.15s;font-size:1.1rem}
.vr__btn:hover{background:rgba(187,22,43,.85);border-color:transparent}
.vr__btn.active{background:var(--brand,#BB162B);border-color:transparent}

.vr__thumbs{position:absolute;left:16px;bottom:16px;z-index:6;display:flex;gap:10px;max-width:70%;overflow:auto;padding-bottom:2px}
.vr__thumb{flex:none;display:flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;border-radius:100px;
    background:rgba(5,20,31,.55);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);
    color:#fff;font-size:.82rem;font-weight:600;cursor:pointer;transition:.15s;white-space:nowrap}
.vr__thumb:hover{border-color:rgba(255,255,255,.5)}
.vr__thumb.active{background:var(--brand,#BB162B);border-color:transparent}
.vr__thumb .sw{width:22px;height:22px;border-radius:7px;background:#0e2c40;flex:none;
    background-size:cover;background-position:center}

.vr__hotspot{position:absolute;z-index:4;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
    background:rgba(255,255,255,.9);border:2px solid var(--brand,#BB162B);color:var(--brand,#BB162B);
    display:grid;place-items:center;cursor:pointer;font-weight:800;transition:transform .15s;
    box-shadow:0 4px 14px rgba(0,0,0,.35)}
.vr__hotspot::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(255,255,255,.5);
    animation:vrpulse2 2.2s infinite}
@keyframes vrpulse2{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.vr__hotspot:hover{transform:scale(1.12)}
.vr__tip{position:absolute;z-index:7;max-width:230px;transform:translate(-50%,-100%);margin-top:-24px;
    background:#fff;color:#0c1116;border-radius:12px;padding:12px 14px;box-shadow:0 12px 30px rgba(0,0,0,.3);
    font-size:.82rem;pointer-events:none;opacity:0;transition:opacity .15s}
.vr__tip.show{opacity:1}
.vr__tip b{display:block;margin-bottom:3px;font-size:.9rem}
.vr__tip::after{content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
    border:7px solid transparent;border-top-color:#fff;border-bottom:0}

.vr:fullscreen{border-radius:0}
.vr:fullscreen .vr__stage{height:100vh}