/* =============================================================================
   КАРУСЕЛЬ ДРОПОВ НА ВИТРИНЕ
   Отображает все дропы из /drops/drops.json.
   Возможности:
     - Свайп пальцем влево/вправо → смена слайда
     - Вертикальный свайп → обычный скролл страницы (не считается тапом)
     - Тап по медиа → открывает карточку NFT (как кнопка VIEW)
     - Кнопки ← → с расширенной зоной клика
     - Точки-индикаторы внизу (кликабельные)
   Редактирование дропов — в админке /drops/admin.html
   ============================================================================= */

.drop-carousel {
    position: relative; width: 100%; max-width: 400px; margin: 0 auto 20px auto;
}

/* Медиа-контейнер внутри карусели — поверх него работает свайп */
.drop-carousel .drop-media-container {
    width: 100%; margin-bottom: 0; touch-action: pan-y;
    user-select: none; -webkit-user-select: none;
    position: relative; overflow: hidden;
}

/* Внутренний трек со всеми слайдами — сдвигается через transform */
.carousel-track {
    display: flex; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}
.carousel-track.no-transition { transition: none; }

.carousel-slide {
    flex: 0 0 100%; display: block;
}
.carousel-slide img, .carousel-slide video {
    width: 100%; height: auto; display: block; object-fit: cover;
    pointer-events: none; /* Чтобы drag не попадал на само видео */
}

/* Заглушка когда дропов нет */
.carousel-placeholder {
    width: 100%; aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    background: #111; color: #444;
    font-family: 'Press Start 2P', monospace; font-size: 14px;
}

/* Стрелки навигации ← →
   Визуально — круг 40x40, но зона клика расширена до 80x80 через ::before
   чтобы не было ложных срабатываний по соседнему тапу. */
.carousel-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(0, 0, 0, 0.45); color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.45);
    cursor: pointer; z-index: 5;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    transition: background 0.2s, opacity 0.2s, border-color 0.2s;
    -webkit-tap-highlight-color: transparent;
}
/* Невидимая расширенная область клика вокруг кнопки (80x80) */
.carousel-arrow::before {
    content: ''; position: absolute;
    top: -20px; left: -20px; right: -20px; bottom: -20px;
}
.carousel-arrow svg { width: 14px; height: 22px; display: block; }
.carousel-arrow:hover { background: rgba(0, 0, 0, 0.65); border-color: rgba(255, 255, 255, 0.7); }
.carousel-arrow-left { left: 8px; }
.carousel-arrow-right { right: 8px; }
.carousel-arrow:disabled { opacity: 0.2; cursor: default; }

/* На десктопе (≥768px) карусель max-width 400px центрирована, по бокам остаётся
   пустое пространство. Стрелки уезжают наружу в это пространство — не перекрывая
   изображение. На мобильном (<768px) места по бокам нет, поэтому остаются над
   краями картинки как раньше. На пустом чёрном фоне страницы тёмная заливка
   круга невидима — для desktop убираем её, оставляя только белую обводку. */
@media (min-width: 768px) {
    .carousel-arrow-left  { left: -56px; }
    .carousel-arrow-right { right: -56px; }
    .carousel-arrow {
        background: transparent;
    }
    .carousel-arrow:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.7);
    }
}

/* Точки-индикаторы под слайдами */
.carousel-dots {
    display: flex; justify-content: center; gap: 8px;
    margin-top: 16px;
}
.carousel-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #333; cursor: pointer;
    transition: background 0.2s;
    border: none; padding: 0;
}
.carousel-dot.active { background: #3366ff; }

/* Скрываем стрелки и точки когда только один слайд */
.drop-carousel.single-slide .carousel-arrow,
.drop-carousel.single-slide .carousel-dots { display: none; }

/* =============================================================================
   МОДАЛЬНОЕ ОКНО ДЛЯ СТАТУСА UPCOMING
   Появляется при нажатии BUY на карточке NFT со статусом Upcoming.
   ============================================================================= */

.upcoming-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); z-index: 300;
    display: none; align-items: center; justify-content: center;
    padding: 20px; box-sizing: border-box;
}
.upcoming-modal.open { display: flex; }

.upcoming-modal-box {
    background: #0a0a0a; border: 1px solid #222;
    padding: 40px 30px; max-width: 440px; width: 100%;
    text-align: center; border-radius: 4px;
}
.upcoming-modal-title {
    font-family: 'Press Start 2P', monospace; font-size: 12px;
    color: #3366ff; margin: 0 0 20px 0; letter-spacing: 0.05em;
}
.upcoming-modal-text {
    font-family: 'Roboto Mono', monospace; font-size: 13px;
    color: #ccc; line-height: 1.6; margin-bottom: 25px;
}
.upcoming-modal-text a {
    color: #3366ff; text-decoration: none; word-break: break-all;
}
.upcoming-modal-text a:hover { text-decoration: underline; }
.upcoming-modal-btn {
    background: #0033ff; color: #fff; border: none;
    padding: 14px 32px; font-family: 'Press Start 2P', monospace;
    font-size: 11px; cursor: pointer; text-transform: uppercase;
    transition: background 0.2s;
}
.upcoming-modal-btn:hover { background: #0044ff; }


/* =============================================================================
   КАРУСЕЛЬ МЕДИА ВНУТРИ КАРТОЧКИ NFT (#screen-public-details)
   Первый слайд — главное медиа (drop.mediaUrl), дальше — drop.extraMedia.
   Играет только активный слайд (видео на остальных на паузе).
   Если всего один слайд — .single-slide скрывает стрелки и точки.
   ============================================================================= */

.public-carousel {
    position: relative;
    width: 100%;
    touch-action: pan-y;
    user-select: none; -webkit-user-select: none;
    overflow: hidden;
}

.public-carousel-track {
    display: flex;
    /* Плавный transition для transform (смена слайда) и height (адаптивная высота под пропорции) */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), height 0.4s ease;
    will-change: transform, height;
}
.public-carousel-track.no-transition { transition: none; }

.public-carousel-slide {
    flex: 0 0 100%;
    display: block;
    align-self: flex-start; /* не растягиваться по высоте — высотой трека управляем через JS */
}
.public-carousel-slide img,
.public-carousel-slide video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    pointer-events: none; /* чтобы свайп не цеплялся за media */
}

/* Точки-индикаторы внутри карточки — позиционируем поверх медиа внизу */
.public-carousel-dots {
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    margin: 0;
    z-index: 4;
}

/* Один слайд — прячем все элементы навигации */
.public-carousel.single-slide .carousel-arrow,
.public-carousel.single-slide .public-carousel-dots { display: none; }


/* =============================================================================
   РЕЖИМ ZOOM (полноэкранный просмотр фото)
   Открывается при тапе по картинке в карусели карточки NFT.
   На мобильных: touch-action: pinch-zoom + overflow: auto = нативный zoom жестами.
   На десктопе: просто просмотр во весь экран (без жестов масштабирования).
   Закрытие — клик по фону или по картинке.
   ============================================================================= */

.image-zoom-modal {
    position: fixed; inset: 0;
    background: #000;
    z-index: 400;
    display: none;
    overflow: hidden;
    cursor: zoom-out;
}
.image-zoom-modal.open { display: block; }

/* Скролл-контейнер: нативный pinch-zoom работает внутри overflow: auto
   с touch-action: pinch-zoom. Scroll-bars скрыты. */
.image-zoom-wrap {
    width: 100%;
    height: 100%;
    overflow: auto;
    touch-action: pinch-zoom;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-overflow-scrolling: touch;
    /* Скрываем скроллбары */
    scrollbar-width: none;
}
.image-zoom-wrap::-webkit-scrollbar { display: none; }

.image-zoom-wrap img {
    max-width: 100%;
    max-height: 100vh;
    object-fit: contain;
    display: block;
    user-select: none; -webkit-user-select: none;
    -webkit-user-drag: none;
}