/* Список панорам тура — выезжающая панель внутри просмотрщика.

   Она живёт в контейнере просмотрщика, а не на странице: так список
   доступен и в полноэкранном режиме, а пока он свёрнут — не занимает
   ни пикселя кадра. Открывается кнопкой в панели инструментов. */
.p360-tourlist {
    position: absolute; left: 0; right: 0; bottom: 40px; z-index: 34;
    display: flex; gap: 10px; padding: 10px 12px;
    background: linear-gradient(to top, rgba(6, 8, 12, .92), rgba(6, 8, 12, .72));
    overflow-x: auto; scrollbar-width: thin;
    transform: translateY(115%); opacity: 0; pointer-events: none;
    transition: transform .18s ease, opacity .18s ease;
}
.p360-tourlist.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }

.p360-tourlist__item {
    flex: 0 0 auto; width: 128px; padding: 0; border-radius: 8px; cursor: pointer;
    background: rgba(23, 26, 33, .9); border: 1px solid rgba(255, 255, 255, .14);
    color: #c8cedb; font: inherit; font-size: .76rem; overflow: hidden; text-align: left;
    transition: border-color .15s, color .15s;
}
.p360-tourlist__item img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; display: block; }
.p360-tourlist__item span {
    display: block; padding: 5px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.p360-tourlist__item:hover { border-color: var(--p360-accent, #4c8dff); color: #fff; }
.p360-tourlist__item.is-active {
    border-color: var(--p360-accent, #4c8dff); color: #fff;
    box-shadow: 0 0 0 1px var(--p360-accent, #4c8dff) inset;
}

.psv-button.p360-navbar-list.psv-button--active { background: rgba(255, 255, 255, .2); }

@media (max-width: 640px) {
    .p360-tourlist__item { width: 104px; }
}