/* ═══════════════════════════════════════════════════════════════
AVA × WEBSITE X5 MAPPING v2.1
Связывает X5 ID с AVA-классами БЕЗ изменения X5-кода
Изменения: +aspect-ratio 9/16, +отступ 20px, +прозрачный фон,
           +imObjectVideo_1021, мобильная рамка 1px
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
🗺️ КАРТА ЭКРАНОВ home.php
═══════════════════════════════════════════════════════════════ */

/* 1. Выбор языка */
#imHTMLObject_07 { --ava-screen: lang; }

/* 2. Приветствие AVA (видео com_ava) */
/* 🔴 v15.2.13: Убран #imHTMLObject_26 — текстовый блок, не видео */
#imObjectVideo_1021 { --ava-screen: com_ava; }

/* 3. Доброе утро/день/вечер */
#imHTMLObject_12 { --ava-screen: ava_helo; }

/* 4. Выбор роли */
#imObjectTitle_22,
#imHTMLObject_23 { --ava-screen: role; }

/* 5. Установка PWA */
#imObjectTitle_04,
#imHTMLObject_13,
#imHTMLObject_03 { --ava-screen: Instpwa; }

/* 6. Инструкция AVA */
#imObjectTitle_18,
#imHTMLObject_19 { --ava-screen: instr_ava; }

/* 7. Логин/Регистрация */
#imObjectTitle_08,
#pluginAppObj_17,
#imObjectButton_15,
#imHTMLObject_25 { --ava-screen: login-anchor; }

/* 8. Видео-демонстрация (главный экран home.php) */
#imObjectTitle_10,
#imHTMLObject_20 { --ava-screen: video_home; }

/* 9. Слайдер картинок */
#imHTMLObject_21 { --ava-screen: images-home; }

/* 10. Спокойной ночи */
#imHTMLObject_27 { --ava-screen: ava_night; }

/* 10a. 🔥 НОВОЕ: Видео-инструкция по установке PWA */
#imObjectVideo_1002 { --ava-screen: Instpwa; }

/* 10b. 🔥 НОВОЕ: Приветственное видео (контейнер отображения) */
#imObjectVideo_1021 { --ava-screen: com_ava; }

/* 11. 🔥 ИСПРАВЛЕНО: Экран полной презентации (contacts.html) */
#imHTMLObject_28 { --ava-screen: what_we_offer; }

/* ═══════════════════════════════════════════════════════════════
🗺️ КАРТА ЭКРАНОВ contacts.html
═══════════════════════════════════════════════════════════════ */

/* О компании */
#imHTMLObject_30 { --ava-screen: about_comp; }

/* Обратная связь */
#imHTMLObject_31 { --ava-screen: feedback; }

/* Что мы предлагаем (полная презентация) */
#imHTMLObject_32 { --ava-screen: what_we_offer; }

/* ═══════════════════════════════════════════════════════════════
🗺️ КАРТА ЭКРАНОВ offer-shop.php
═══════════════════════════════════════════════════════════════ */

/* MVP / тестовый период */
#imHTMLObject_40 { --ava-screen: mvp-prices; }

/* Базовые цены */
#imHTMLObject_41 { --ava-screen: base-prices; }

/* Дополнительные услуги */
#imHTMLObject_42 { --ava-screen: additional-prices; }

/* Ежемесячные подписки */
#imHTMLObject_43 { --ava-screen: subscription-prices; }

/* ═══════════════════════════════════════════════════════════════
🎨 ОБЩИЕ СТИЛИ ДЛЯ ВСЕХ X5-КОНТЕЙНЕРОВ
═══════════════════════════════════════════════════════════════ */

[id^="imHTMLObject"],
[id^="imObjectTitle"],
[id^="pluginAppObj"] {
    transition: box-shadow 0.3s ease, opacity 0.3s ease;
}

/* Подсветка активного экрана от AVA */
.ava-screen-active [style*="--ava-screen"] {
    box-shadow: 0 0 30px rgba(218, 169, 63, 0.4);
    border-radius: 12px;
}

/* Скрытие неактивных экранов при автопрокрутке */
.ava-screen-hidden {
    opacity: 0.3 !important;
    transition: opacity 0.5s ease;
}

/* ═══════════════════════════════════════════════════════════════
🎬 СТИЛИ ДЛЯ ВИДЕО-КОНТЕЙНЕРОВ (унифицированные)
═══════════════════════════════════════════════════════════════ */

/* Все контейнеры с --ava-screen получают базовые стили */
[style*="--ava-screen: video_home"],
[style*="--ava-screen: what_we_offer"],
[style*="--ava-screen: instr_ava"],
[style*="--ava-screen: ava_helo"],
[style*="--ava-screen: ava_night"],
[style*="--ava-screen: com_ava"] {
    position: relative;
    width: 100%;
    max-width: 900px;
    /* Отступ сверху для Sticky Panel + AVA кольцо */
    margin: 20px auto 2rem;
    /* Прозрачный фон — видео "парит" на фоне страницы */
    background: transparent;
    /* Запасной вариант если прозрачный не поддерживается */
    background-color: #20124d;
    border: 2px solid #daa93f;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(218, 169, 63, 0.3);
    transition: all 0.3s ease;
    /* Соотношение сторон 9:16 для вертикального видео */
    aspect-ratio: 9 / 16;
    max-height: calc(100vh - 40px);
}

/* Placeholder для видео */
[style*="--ava-screen"] .ava-video-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Высота рассчитывается из aspect-ratio контейнера */
    height: 100%;
    min-height: 200px;
    padding: 2rem;
    text-align: center;
    color: var(--theme-text, #eee);
}

/* Контейнер видео */
[style*="--ava-screen"] .ava-video-container {
    position: relative;
    width: 100%;
    /* Высота 100% от aspect-ratio контейнера */
    height: 100%;
    min-height: 200px;
    background: #000;
}

[style*="--ava-screen"] .ava-video-container video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Индикатор звука */
[style*="--ava-screen"] .ava-audio-indicator {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(218, 169, 63, 0.5);
    border-radius: 20px;
    font-size: 0.85rem;
    color: #fff;
    backdrop-filter: blur(10px);
    z-index: 10;
}

/* Кнопка звука */
[style*="--ava-screen"] .ava-audio-toggle {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(218, 169, 63, 0.5);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
    z-index: 10;
}

/* ═══════════════════════════════════════════════════════════════
🖼️ СТИЛИ ДЛЯ ГАЛЕРЕЙ (слайдеры картинок)
═══════════════════════════════════════════════════════════════ */

[style*="--ava-screen: images-home"] {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 2rem auto;
    background: var(--theme-bg, #1a1a2e);
    border: 2px solid #daa93f;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(218, 169, 63, 0.3);
}

.ava-gallery {
    position: relative;
    width: 100%;
    height: clamp(400px, 70vh, 600px);
    overflow: hidden;
}

.ava-gallery-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease;
}

.ava-gallery-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

/* Индикаторы точек */
.ava-gallery-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.ava-gallery-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
}

.ava-gallery-dot.active {
    width: 24px;
    border-radius: 4px;
    background: #daa93f;
}

/* ═══════════════════════════════════════════════════════════════
📱 МОБИЛЬНАЯ АДАПТАЦИЯ (≤768px)
═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    [style*="--ava-screen: video_home"],
    [style*="--ava-screen: what_we_offer"],
    [style*="--ava-screen: instr_ava"],
    [style*="--ava-screen: ava_helo"],
    [style*="--ava-screen: ava_night"],
    [style*="--ava-screen: com_ava"],
    [style*="--ava-screen: images-home"] {
        max-width: 100%;
        /* Отступ 20px сверху для Sticky Panel + AVA */
        margin: 20px 0.75rem 0.75rem;
        border-radius: 12px;
    }
    
    [style*="--ava-screen"] .ava-video-placeholder,
    [style*="--ava-screen"] .ava-video-container,
    .ava-gallery {
        height: 100%;
        min-height: 180px;
    }
    
    [style*="--ava-screen"] .ava-audio-indicator {
        top: 0.5rem;
        right: 0.5rem;
        padding: 0.4rem 0.8rem;
        font-size: 0.75rem;
    }
    
    [style*="--ava-screen"] .ava-audio-toggle {
        bottom: 0.5rem;
        right: 0.5rem;
        width: 40px;
        height: 40px;
    }
}

/* ═══════════════════════════════════════════════════════════════
📱📐 ПОРТРЕТНАЯ ОРИЕНТАЦИЯ (9:16) — PWA / Safari iOS
═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) and (orientation: portrait) {
    [style*="--ava-screen: video_home"],
    [style*="--ava-screen: what_we_offer"],
    [style*="--ava-screen: instr_ava"],
    [style*="--ava-screen: ava_helo"],
    [style*="--ava-screen: ava_night"],
    [style*="--ava-screen: com_ava"] {
        /* Отступ 20px сверху для Sticky Panel + AVA кольцо */
        margin: 20px 0 0;
        border-radius: 0;
        /* Тонкая рамка 1px вместо толстой */
        border-width: 1px;
        /* Полная высота экрана минус отступ сверху */
        height: calc(100dvh - 20px);
        max-height: calc(100dvh - 20px);
        display: flex;
        flex-direction: column;
        /* Соотношение 9:16 для вертикального видео */
        aspect-ratio: 9 / 16;
    }
    
    [style*="--ava-screen"] .ava-video-container,
    [style*="--ava-screen"] .ava-video-placeholder {
        height: 100%;
        flex: 1;
        min-height: 0;
    }
    
    [style*="--ava-screen"] .ava-video-container video {
        object-fit: contain;
    }
    
    [style*="--ava-screen"] .ava-audio-indicator {
        top: calc(env(safe-area-inset-top, 0px) + 0.5rem);
        right: 1rem;
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }
    
    [style*="--ava-screen"] .ava-audio-toggle {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
        right: 1rem;
        width: 56px;
        height: 56px;
    }
}

/* ═══════════════════════════════════════════════════════════════
🖥️ БОЛЬШИЕ ЭКРАНЫ (≥1200px) — Десктоп / Chrome / Safari
═══════════════════════════════════════════════════════════════ */

@media (min-width: 1200px) {
    [style*="--ava-screen: video_home"],
    [style*="--ava-screen: what_we_offer"],
    [style*="--ava-screen: instr_ava"],
    [style*="--ava-screen: ava_helo"],
    [style*="--ava-screen: ava_night"],
    [style*="--ava-screen: com_ava"],
    [style*="--ava-screen: images-home"] {
        max-width: 1100px;
        /* Ограничение по высоте экрана — не растягивать */
        max-height: calc(100vh - 40px);
        aspect-ratio: 9 / 16;
    }
    
    [style*="--ava-screen"] .ava-video-placeholder,
    [style*="--ava-screen"] .ava-video-container,
    .ava-gallery {
        height: 100%;
        min-height: 300px;
    }
}