/* =============================================================
 * Video Ad Player — базовые стили.
 * Все визуальные свойства можно переопределить в Elementor
 * через вкладку "Стиль" (контролы инжектят CSS с большей спецификой).
 * ============================================================= */

.vap-container {
    position: relative;
    display: block;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    background: #000;
    overflow: hidden;
    border-radius: 6px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.vap-main-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background-color: #000;
}

/* ---------- AD layer ---------- */
.vap-ad-layer {
    position: absolute;
    inset: 0;
    background: #000;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.vap-container.vap-ad-playing .vap-ad-layer {
    display: flex;
}

.vap-ad-video,
.vap-ad-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.vap-ad-image-link {
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
}

/* Прозрачный кликабельный оверлей для видео-рекламы.
   Перекрывает видео, но НЕ перекрывает кнопку Skip (z-index 3) и не блокирует
   бейдж/таймер (у них pointer-events: none). */
.vap-ad-click-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: pointer;
    background: transparent;
    text-decoration: none;
}

/* ---------- Badge ---------- */
.vap-ad-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 12px;
    line-height: 1.2;
    padding: 4px 10px;
    border-radius: 3px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 2;
}

/* ---------- Countdown ---------- */
.vap-ad-countdown {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 13px;
    line-height: 1.2;
    padding: 6px 12px;
    border-radius: 3px;
    pointer-events: none;
    z-index: 2;
}

/* ---------- Skip button ---------- */
.vap-skip-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 10px 18px;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 500;
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    font-family: inherit;
    z-index: 3;
}

.vap-skip-btn:hover {
    background: rgba(0, 0, 0, 1);
    border-color: #fff;
}

/* ---------- Unmute toggle ---------- */
.vap-unmute-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    padding: 0;
    z-index: 3;
}

.vap-unmute-btn:hover {
    background: rgba(0, 0, 0, 0.95);
    transform: scale(1.06);
}

/* показываем нужную иконку в зависимости от состояния */
.vap-unmute-btn .vap-icon-sound { display: none; }
.vap-unmute-btn .vap-icon-muted { display: block; }
.vap-unmute-btn:not(.is-muted) .vap-icon-sound { display: block; }
.vap-unmute-btn:not(.is-muted) .vap-icon-muted { display: none; }

/* ---------- Ad progress bar ---------- */
.vap-ad-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.25);
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.vap-ad-progress-bar {
    height: 100%;
    width: 0;
    background: #ffcc00;
    transition: width 0.2s linear;
}

/* ---------- Start overlay + Play button ---------- */
.vap-start-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    cursor: pointer;
    transition: opacity 0.2s ease;
    /* Фон стартового экрана через CSS-переменную.
       Если --vap-start-bg не задан, остаётся прозрачным — сквозь видно постер видео. */
    background-image: var(--vap-start-bg, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Управляемые переменные из контролов "Стартовый экран — фон и оверлей" */
    --vap-bg-blur: 0px;
    --vap-bg-brightness: 100%;
    --vap-bg-saturate: 100%;
    --vap-bg-contrast: 100%;
    --vap-bg-grayscale: 0%;
    --vap-bg-hover-scale: 1;
    --vap-bg-hover-brightness: 100%;
    --vap-bg-hover-transition: 0.4s;
    /* Псевдо-фон с фильтрами рисуется через ::after (см. ниже),
       чтобы фильтры не затрагивали кнопку Play и подсказки. */
    transition:
        opacity 0.2s ease,
        background-position var(--vap-bg-hover-transition) ease;
}

/* Слой с реальным фоном + фильтрами — отдельный через ::after,
   чтобы CSS filter не размазывал кнопку Play. */
.vap-start-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-size: inherit;
    background-position: inherit;
    background-repeat: inherit;
    background-attachment: inherit;
    filter:
        blur(var(--vap-bg-blur, 0px))
        brightness(var(--vap-bg-brightness, 100%))
        saturate(var(--vap-bg-saturate, 100%))
        contrast(var(--vap-bg-contrast, 100%))
        grayscale(var(--vap-bg-grayscale, 0%));
    transition:
        filter var(--vap-bg-hover-transition, 0.4s) ease,
        transform var(--vap-bg-hover-transition, 0.4s) ease;
    z-index: 0;
    pointer-events: none;
}
/* Если фон-картинки нет, ::after не нужен — иначе чёрный квадрат */
.vap-start-overlay:not([style*="--vap-start-bg"])::after {
    display: none;
}

/* Hover: масштаб и яркость фона */
.vap-start-overlay:hover::after {
    transform: scale(var(--vap-bg-hover-scale, 1));
    filter:
        blur(var(--vap-bg-blur, 0px))
        brightness(calc(var(--vap-bg-brightness, 100%) * var(--vap-bg-hover-brightness, 100%) / 100%))
        saturate(var(--vap-bg-saturate, 100%))
        contrast(var(--vap-bg-contrast, 100%))
        grayscale(var(--vap-bg-grayscale, 0%));
}

/* Tint (затемнение/заливка) поверх фонового изображения и фильтров */
.vap-start-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.35);
    pointer-events: none;
    z-index: 1;
}

/* Кнопка Play должна быть над tint и фильтрами */
.vap-start-overlay .vap-play-btn {
    position: relative;
    z-index: 2;
}

.vap-container.vap-started .vap-start-overlay {
    display: none;
}

.vap-play-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    opacity: 0.9;
    transition: opacity 0.15s ease, transform 0.15s ease;
    line-height: 0;
}

.vap-play-btn:hover {
    opacity: 1;
    transform: scale(1.05);
}

.vap-play-icon {
    display: block;
}

.vap-play-icon-bg {
    fill: #cc0000;
}

.vap-play-icon-arrow {
    fill: #ffffff;
}

/* Custom icon from Elementor Icons picker (fa, svg, etc.) */
.vap-play-icon-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: #ffffff;
    font-size: 68px;
}

.vap-play-icon-custom svg,
.vap-play-icon-custom i {
    display: block;
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/* Custom image */
.vap-play-icon-image {
    display: block;
    width: 68px;
    height: auto;
}

/* =============================================================
 * Elementor editor preview — принудительный показ элементов.
 * .vap-in-editor + .vap-preview-{start|ad|main} переключают видимость
 * слоёв, чтобы в редакторе можно было стилизовать любое состояние.
 * На фронте эти классы не добавляются.
 * ============================================================= */

/* пустые заглушки для ad-видео/картинки, когда ad_src не задан — чистый тёмный фон */
.vap-ad-empty {
    width: 100%;
    height: 100%;
    display: block;
    background: linear-gradient(135deg, #1c1c20 0%, #0e0e10 100%);
    position: relative;
}
.vap-ad-empty::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 45%, rgba(255,255,255,0.03), transparent 70%);
    pointer-events: none;
}

/* ---- start state ---- */
.vap-in-editor.vap-preview-start .vap-start-overlay {
    display: flex !important;
}
.vap-in-editor.vap-preview-start .vap-ad-layer {
    display: none !important;
}

/* =============================================================
 * EDITOR: гарантированное отображение оверлея.
 * В редакторе start-overlay должен быть ВСЕГДА над плейсхолдером
 * и видео — даже если другие плагины/стили накидывают свой z-index.
 * Усиленная специфичность через двойной класс на родителе.
 * ============================================================= */
.vap-in-editor .vap-start-overlay {
    z-index: 50 !important;
    pointer-events: auto !important;
}
/* Явно показываем tint оверлея даже когда фон-картинка не задана,
   чтобы пользователь видел, КАК overlay перекрывает видео. */
.vap-in-editor.vap-preview-start .vap-start-overlay::before {
    background-color: var(--vap-overlay-tint, rgba(0, 0, 0, 0.35));
    z-index: 1 !important;
}
/* Кнопка Play в редакторе всегда видна и над tint */
.vap-in-editor .vap-start-overlay .vap-play-btn {
    z-index: 10 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ---- ad state ---- */
.vap-in-editor.vap-preview-ad .vap-start-overlay {
    display: none !important;
}
.vap-in-editor.vap-preview-ad .vap-ad-layer {
    display: flex !important;
}
.vap-in-editor.vap-preview-ad .vap-skip-btn,
.vap-in-editor.vap-preview-ad .vap-ad-countdown {
    display: block !important;
}
/* оверлей клика по видео-рекламе не нужен в редакторе —
   иначе он перехватывает все клики и ломает перетаскивание виджета */
.vap-in-editor .vap-ad-click-overlay {
    pointer-events: none;
}

/* ---- main state ---- */
.vap-in-editor.vap-preview-main .vap-start-overlay {
    display: none !important;
}
.vap-in-editor.vap-preview-main .vap-ad-layer {
    display: none !important;
}
/* В режиме «основное видео» в редакторе — проявляем видео и прячем постер,
   иначе пользователь увидит старое превью вместо кадра видео. */
.vap-in-editor.vap-preview-main .vap-main-video {
    opacity: 1 !important;
    visibility: visible !important;
}
.vap-in-editor.vap-preview-main .vap-poster-layer {
    display: none !important;
}

/* ---------- Elementor editor — слегка сглаживаем перерисовку ---------- */
.elementor-editor-active .vap-container {
    pointer-events: auto;
}

/* =============================================================
 * BULLETPROOF EDITOR PREVIEW — защита от внешних стилей
 * Темы и другие плагины могут случайно скрыть наши слои:
 *   .elementor-widget [aria-hidden="true"] { display: none; }
 *   * { transform: translateZ(0); }   и тому подобное.
 * Прибиваем нужное поведение жёстко.
 * ============================================================ */
.vap-in-editor .vap-poster-layer,
.vap-in-editor .vap-poster-empty {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.vap-in-editor.vap-preview-main .vap-poster-layer {
    display: none !important;
}
.vap-in-editor .vap-start-overlay {
    visibility: visible !important;
    opacity: 1 !important;
}
.vap-in-editor.vap-preview-ad .vap-start-overlay,
.vap-in-editor.vap-preview-intro .vap-start-overlay,
.vap-in-editor.vap-preview-main .vap-start-overlay {
    /* в этих стейтах overlay должен быть скрыт по логике */
    display: none !important;
}
/* Контейнер виджета не должен иметь aspect-ratio: 0 / странную ширину
   из-за конфликта с .elementor-element { width: auto; } */
.vap-in-editor.vap-container {
    min-height: 200px;
    width: 100%;
}

/* Подсказка в редакторе — какое состояние сейчас показано */
.vap-editor-hint {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 30;
    padding: 4px 10px;
    background: rgba(124, 58, 237, 0.95);
    color: #fff;
    font: 500 11px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0.3px;
    pointer-events: none;
    border-bottom-left-radius: 4px;
}

/* ============================================================
 * Poster background — через CSS-переменную --vap-poster.
 * Контейнер устанавливает её inline-стилем (если poster задан),
 * и poster всегда показывается, даже когда video не может загрузиться
 * (типичный кейс редактора Elementor с динамическим src).
 * ============================================================ */
.vap-main-video {
    background-image: var(--vap-poster, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* background-color задаётся через CSS-переменную в базовых правилах выше,
       но если --vap-poster задан, картинка перекрывает цвет. */
}

/* В редакторе плеер не должен быть чёрной дырой, если poster отсутствует.
   Используем background-color (не шорткат `background:`), чтобы не сбросить
   background-image из CSS-переменной. */
.vap-in-editor .vap-main-video {
    background-color: #1a1a1a;
}

/* ============================================================
 * Poster-слой и управление видимостью <video> — см. ниже
 * в секции "Poster-слой как отдельный <img>".
 * ============================================================ */

/* =============================================================
 * Poster-слой как отдельный <img> — ГАРАНТИРУЕТ видимость обложки
 * во всех контекстах (редактор Elementor, динамические теги с
 * пустым src, мобильные браузеры с ограничениями на preload).
 * Видео пре-загружается СВЕРХУ по клику Play, постер убирается.
 * ============================================================= */
.vap-poster-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    background: #0a0a0a;
}

/* Основное видео должно быть над постером */
.vap-main-video {
    position: relative;
    z-index: 2;
}

/* До нажатия Play — видео полностью прозрачно, постер-слой виден на 100%.
   После .vap-started — видео проявляется и перекрывает постер.
   Это критично для редактора Elementor: без этого браузер мог показать
   чёрный первый кадр <video> поверх постера. */
.vap-container:not(.vap-started) .vap-main-video {
    background-color: transparent;
    opacity: 0;
    visibility: hidden;
}
.vap-container.vap-started .vap-main-video {
    opacity: 1;
    visibility: visible;
}

/* После старта постер уже не нужен, убираем его, чтобы не перекрывал
   контент и не "мигал" при переходе к видео. */
.vap-container.vap-started .vap-poster-layer {
    display: none;
}

/* Заглушка-плейсхолдер для редактора, когда постер пустой.
   КЛЮЧЕВОЕ: фон средне-тёмный (НЕ чёрный), чтобы tint оверлея сверху
   был визуально различим. Никаких SVG-иконок и data-URI — только чистый
   градиент + угловой "vignette", чтобы выглядело как «пустой кадр видео». */
.vap-poster-empty {
    display: flex !important;
    align-items: flex-start;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 0%, #3a3f4f 0%, #1f2330 60%, #0f1118 100%);
    color: rgba(255, 255, 255, 0.7);
    font: 500 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-align: center;
    padding: 0;
    overflow: hidden;
    position: absolute;
    inset: 0;
}
/* Текстовая подсказка — НАВЕРХУ слева, маленькой плашкой,
   чтобы НИКАК не перекрывать ни кнопку Play, ни overlay tint. */
.vap-poster-empty__hint {
    position: absolute;
    top: 8px;
    left: 8px;
    max-width: calc(100% - 16px);
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.8);
    pointer-events: none;
    z-index: 2;
}
/* Старый span (если кто-то использует без класса) — тоже скромнее */
.vap-poster-empty > span:not(.vap-poster-empty__hint) {
    max-width: 80%;
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
}

/* =============================================================
 * Пресеты Play-кнопки — быстрые готовые стили.
 * Пользователь выбирает один пресет, а не настраивает 10 свойств.
 * CSS-переменные --vap-preset-bg / --vap-preset-color можно
 * переопределять в контролах Elementor.
 * ============================================================= */
.vap-play-icon--preset {
    width: 100%;
    height: auto;
    display: block;
}

/* Дефолты для каждого пресета (переопределяются inline-переменными
   из Elementor, если пользователь задал свой цвет). */
.vap-preset-youtube .vap-play-btn { background: transparent; }
.vap-preset-circle  .vap-play-btn { background: transparent; }
.vap-preset-modern  .vap-play-btn { background: transparent; }
.vap-preset-minimal .vap-play-btn { background: transparent; }
.vap-preset-solid   .vap-play-btn { background: transparent; }

/* По умолчанию SVG-preset наследует размер кнопки, а не фикс 68px */
.vap-play-btn:has(.vap-play-icon--preset) {
    width: 80px;
    height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
 * Resume toast — всплывающее "Продолжаю с X:XX • Сначала".
 * Показывается коротко (5 сек по умолчанию) во время воспроизведения
 * основного видео, если была найдена сохранённая позиция.
 * ============================================================ */
.vap-resume-toast {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    z-index: 25;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100% - 32px);
    padding: 8px 12px 8px 14px;
    background: rgba(0, 0, 0, 0.82);
    color: #fff;
    font: 500 13px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    border-radius: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.vap-resume-toast.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.vap-resume-toast__text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.vap-resume-restart {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 5px 12px;
    font: inherit;
    font-weight: 500;
    font-size: 12px;
    border-radius: 14px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    line-height: 1;
}

.vap-resume-restart:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.vap-resume-restart:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* В редакторе Elementor всегда показываем — для стилизации */
.vap-in-editor .vap-resume-toast {
    display: inline-flex !important;
    opacity: 1 !important;
    pointer-events: none;
    transform: translateX(-50%) translateY(0) !important;
}

/* В редакторе элемент обычно имеет атрибут hidden — снимаем его через CSS */
.vap-in-editor .vap-resume-toast[hidden] {
    display: inline-flex !important;
}

/* =============================================================
 * INTRO / LOGO layer
 * Заставка с логотипом, проигрывается между рекламой и основным
 * видео. Поддерживает картинку (PNG/SVG) и видео (MP4).
 * Z-index: выше main-video (2), ниже ad-layer (10) и start-overlay (20).
 * ============================================================ */
.vap-intro-layer {
    position: absolute;
    inset: 0;
    background: var(--vap-intro-bg, #000);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 8;
    overflow: hidden;
}

.vap-container.vap-intro-playing .vap-intro-layer {
    display: flex;
}

/* Логотип-картинка по умолчанию занимает 50% ширины, центр */
.vap-intro-image {
    max-width: 50%;
    max-height: 70%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Видео-интро занимает всё полотно */
.vap-intro-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Заглушка для редактора, когда intro_src не задан */
.vap-intro-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.6);
    font: 500 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, #1c1c20 0%, #0e0e10 100%);
}
.vap-intro-empty span {
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 8px;
}

/* Кнопка "Пропустить интро" */
.vap-intro-skip {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 7px 14px;
    font: 500 12px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    border-radius: 18px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.vap-intro-skip:hover {
    background: rgba(0, 0, 0, 0.85);
    transform: scale(1.04);
}

/* ---------- Intro animations (вход) ---------- */
@keyframes vap-intro-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes vap-intro-scale-in {
    from { opacity: 0; transform: scale(0.7); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes vap-intro-slide-in {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes vap-intro-glow-in {
    0%   { opacity: 0; transform: scale(0.85); filter: brightness(2.2) blur(6px); }
    55%  { opacity: 1; filter: brightness(1.3) blur(0); }
    100% { opacity: 1; transform: scale(1); filter: brightness(1) blur(0); }
}

/* ---------- Intro animations (выход — общая) ---------- */
@keyframes vap-intro-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

.vap-intro-anim-none .vap-intro-image,
.vap-intro-anim-none .vap-intro-video { animation: none; }

.vap-intro-anim-fade .vap-intro-image,
.vap-intro-anim-fade .vap-intro-video {
    animation: vap-intro-fade-in 0.6s ease both;
}
.vap-intro-anim-scale .vap-intro-image,
.vap-intro-anim-scale .vap-intro-video {
    animation: vap-intro-scale-in 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
.vap-intro-anim-slide .vap-intro-image,
.vap-intro-anim-slide .vap-intro-video {
    animation: vap-intro-slide-in 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.vap-intro-anim-glow .vap-intro-image,
.vap-intro-anim-glow .vap-intro-video {
    animation: vap-intro-glow-in 0.9s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Класс на контейнере, когда интро уходит (плавное затухание полотна) */
.vap-container.vap-intro-leaving .vap-intro-layer {
    animation: vap-intro-fade-out 0.4s ease both;
}

/* Editor preview: новый стейт "intro" */
.vap-in-editor.vap-preview-intro .vap-start-overlay { display: none !important; }
.vap-in-editor.vap-preview-intro .vap-ad-layer { display: none !important; }
.vap-in-editor.vap-preview-intro .vap-intro-layer { display: flex !important; }
.vap-in-editor.vap-preview-intro .vap-main-video {
    opacity: 0 !important;
    visibility: hidden !important;
}
.vap-in-editor.vap-preview-intro .vap-poster-layer { display: none !important; }
/* В редакторе всегда показываем кнопку Skip, чтобы её можно было стилизовать */
.vap-in-editor .vap-intro-skip[hidden] { display: inline-block !important; }
/* Не запускаем анимацию интро в других стейтах редактора */
.vap-in-editor:not(.vap-preview-intro) .vap-intro-image,
.vap-in-editor:not(.vap-preview-intro) .vap-intro-video {
    animation: none !important;
}

/* =============================================================
 * v2.8.0 additions: loading, error, fullscreen, PiP,
 * accessibility (focus-visible), reduced-motion, mobile.
 * ============================================================= */

/* ---------- aspect-ratio fallback (Safari < 15.4) ---------- */
@supports not (aspect-ratio: 16 / 9) {
    .vap-player-container {
        position: relative;
    }
    .vap-player-container::before {
        content: "";
        display: block;
        padding-top: 56.25%; /* 16:9 */
    }
    .vap-player-container > .vap-main-video,
    .vap-player-container > .vap-ad-layer,
    .vap-player-container > .vap-poster-layer,
    .vap-player-container > .vap-start-overlay,
    .vap-player-container > .vap-loading,
    .vap-player-container > .vap-error-overlay {
        position: absolute;
        inset: 0;
    }
}

/* ---------- Loading spinner ---------- */
.vap-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    z-index: 25;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.vap-player-container.vap-loading-active .vap-loading {
    opacity: 1;
}
.vap-loading__spinner {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    animation: vap-spin 0.8s linear infinite;
}
@keyframes vap-spin {
    to { transform: rotate(360deg); }
}

/* ---------- Error overlay ---------- */
.vap-error-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.78);
    z-index: 60; /* выше start-overlay и loading */
    color: #fff;
    text-align: center;
    padding: 16px;
}
.vap-error-overlay[hidden] { display: none !important; }
.vap-error-overlay__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 360px;
}
.vap-error-overlay__icon {
    color: #ff5a5a;
    flex: 0 0 auto;
}
.vap-error-overlay__title {
    font-size: 16px;
    line-height: 1.35;
    font-weight: 500;
    color: #fff;
}
.vap-error-overlay__retry {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 14px;
    padding: 8px 18px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.vap-error-overlay__retry:hover,
.vap-error-overlay__retry:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
}

/* ---------- Fullscreen button ---------- */
.vap-fullscreen-btn,
.vap-pip-btn {
    position: absolute;
    bottom: 12px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    z-index: 30;
    padding: 0;
    transition: background 0.15s ease, transform 0.15s ease;
}
.vap-fullscreen-btn { right: 12px; }
.vap-pip-btn        { right: 56px; }
.vap-fullscreen-btn[hidden],
.vap-pip-btn[hidden] { display: none !important; }
.vap-fullscreen-btn:hover,
.vap-pip-btn:hover {
    background: rgba(0, 0, 0, 0.78);
    transform: scale(1.05);
}
.vap-fullscreen-btn svg,
.vap-pip-btn svg {
    pointer-events: none;
}
/* Toggle enter/exit icons based on fullscreen state */
.vap-fullscreen-btn .vap-icon-fs-exit  { display: none; }
.vap-player-container.vap-is-fullscreen .vap-fullscreen-btn .vap-icon-fs-enter { display: none; }
.vap-player-container.vap-is-fullscreen .vap-fullscreen-btn .vap-icon-fs-exit  { display: inline-block; }
/* PiP active visual hint */
.vap-player-container.vap-is-pip .vap-pip-btn {
    background: rgba(255, 255, 255, 0.92);
    color: #111;
}

/* When in real fullscreen, ensure container fills screen */
.vap-player-container:fullscreen,
.vap-player-container:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    border-radius: 0;
    background: #000;
}
.vap-player-container:fullscreen .vap-main-video,
.vap-player-container:-webkit-full-screen .vap-main-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---------- focus-visible (accessibility) ---------- */
.vap-start-overlay:focus-visible,
.vap-play-button:focus-visible,
.vap-skip-btn:focus-visible,
.vap-unmute-btn:focus-visible,
.vap-fullscreen-btn:focus-visible,
.vap-pip-btn:focus-visible,
.vap-intro-skip:focus-visible,
.vap-error-overlay__retry:focus-visible {
    outline: 2px solid #4d9fff;
    outline-offset: 2px;
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .vap-loading__spinner {
        animation-duration: 2s;
    }
    .vap-resume-toast,
    .vap-resume-toast.is-visible {
        transition: none !important;
        animation: none !important;
    }
    .vap-intro-image,
    .vap-intro-video {
        animation: none !important;
    }
    .vap-fullscreen-btn:hover,
    .vap-pip-btn:hover {
        transform: none;
    }
    .vap-play-button {
        transition: none !important;
    }
}

/* ---------- Mobile breakpoints ---------- */
@media (max-width: 480px) {
    .vap-fullscreen-btn,
    .vap-pip-btn {
        width: 32px;
        height: 32px;
        bottom: 8px;
    }
    .vap-fullscreen-btn { right: 8px; }
    .vap-pip-btn        { right: 46px; }
    .vap-fullscreen-btn svg,
    .vap-pip-btn svg {
        width: 16px;
        height: 16px;
    }
    .vap-skip-btn {
        font-size: 12px;
        padding: 6px 10px;
    }
    .vap-ad-badge {
        font-size: 10px;
        padding: 3px 6px;
    }
    .vap-error-overlay__title {
        font-size: 14px;
    }
    .vap-error-overlay__retry {
        font-size: 13px;
        padding: 7px 14px;
    }
    .vap-loading__spinner {
        width: 38px;
        height: 38px;
        border-width: 2.5px;
    }
}

/* ---------- Editor preview helpers for new layers ---------- */
.vap-in-editor .vap-loading,
.vap-in-editor .vap-error-overlay {
    display: none !important;
}