/* =============================
   VR360 SECTION
============================= */
.vr360-section { position: relative; }

/* CONTAINER */
.vr360-container {
    position: relative;
    max-width: 1600px;
    margin: 0 auto;
}

/* MAIN VIEWER */
.vr360-viewer {
    width: 100%;
    height: 780px;
    aspect-ratio: 16/9;
    background: #000;
    position: relative;
    z-index: 1;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    border-radius: 16px;
}

/* CAROUSEL WRAPPER */
.carousel-wrapper {
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    background: rgba(0,0,0,.35);
    border-radius: 18px;
    display: flex;
    align-items: center;
    transition: opacity 0.4s ease;
    gap: 8px;
    z-index: 5;
    padding: 0 10px;
}

/* HIDDEN STATE (toggle) */ .carousel-wrapper.is-hidden { opacity: 0; pointer-events: none; }

/* V-WRAPPER THUMB CONTAINER */
.v-wrapper {
    display: flex;
    gap: 16px;
    overflow-x: hidden;
    flex-wrap: nowrap;
    padding: 14px 18px;
    /* Force 5 items visible */
    justify-content: flex-start;
}

.vr360-thumb {
    flex: 0 0 calc((100% - 64px) / 5); /* 5 items per view, subtract total gap (4 * 16px = 64px) */
    height: 100px;
    background-size: cover;
    background-position: center;
    width: 160px;
    border-radius: 10px;
    cursor: pointer;
    transition: transform .2s ease;
    scroll-snap-align: start;
}
.vr360-thumb:hover,
.vr360-thumb:focus { transform: scale(1.05); outline: none; }
.active-thumb { outline: 3px solid #00aaff; outline-offset: 2px; }

/* TOGGLE BUTTON */
.vr360-toggle {
    position: absolute;
    right: 30px;
    bottom: 30px;
    z-index: 6;
    padding: 10px 16px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    background: rgba(0,0,0,.55);
    color: #fff;
    backdrop-filter: blur(6px);
    transition: background .2s ease;
}
.vr360-toggle:hover { background: rgba(0,0,0,.75); }

/* CAROUSEL ARROWS */
.carousel-prev,
.carousel-next {
    border: none;
    background: rgba(0,0,0,.45);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    transition: background .2s ease;
    padding: 0;            /* Remove extra spacing */
}

.carousel-prev:hover,
.carousel-next:hover {
    background: rgba(0,0,0,.7);
}

.carousel-prev svg,
.carousel-next svg {
    width: 20px;
    height: 20px;
    margin: 12px 15px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .vr360-viewer { aspect-ratio: 16/9; }
    .vr360-thumb { width: 120px; height: 80px; }
    .carousel-prev, .carousel-next { padding: 4px 8px; font-size: 18px; }
}