/* Базовые переменные */
:root {
  --vvb-z: 9999;
  --vvb-icon-w: 46px;
  --vvb-safe: max(16px, env(safe-area-inset-left));
  --vvb-shadow: 0 6px 18px rgba(0,0,0,.35);
  --vvb-radius: 18px;
  --vvb-vh: 1vh; /* моб. фикс, устанавливается JS */
}

/* Блок плагина */
.vvb-wrapper {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  user-select: none;
  -webkit-user-select: none;
}

/* Область просмотра с соотношением 9:16 */
.vvb-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 9/16;
  overflow: hidden;
  background: #000;
  border-radius: var(--vvb-radius);
}

/* Трек видео */
.vvb-track {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  will-change: transform;
}

/* Элементы */
.vvb-item {
  width: 100%;
  height: 100%;
  position: relative;
}
.vvb-item .vvb-video-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}

/* Видео на весь кадр */
.vvb-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* для 9:16 */
  background: #000;
}

/* Центровые иконки Play/Pause */
.vvb-center {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: calc(var(--vvb-z) + 10);
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.5));
}
.vvb-center img {
  display: block;
  width: var(--vvb-icon-w);
  height: auto;
}
.vvb-hidden { display: none !important; }

/* Спиннер */
.vvb-spinner {
  position: absolute;
  inset: 0;                      /* растянуть на весь кадр */
  display: flex;
  align-items: center;
  justify-content: center;       /* центровка без transform */
  z-index: 99999;                /* чтобы было поверх видео */
  pointer-events: none;          /* не ловим клики */
  animation: none !important;    /* на контейнере — НИКАКИХ анимаций */
}

/* 2) Крутится только картинка; используем rotate, а не transform */
.vvb-spinner > img {
  display: block;
  width: 48px;
  height: 48px;
  transform-origin: 50% 50%;
  animation: vvb-spin-rotate 1s linear infinite !important;
  will-change: transform;        /* сгладить перерисовки */
}

/* 3) Ключевые кадры — только вращение (без translate) */
@keyframes vvb-spin-rotate {
  from { rotate: 0deg; }
  to   { rotate: 360deg; }
}

/* 4) На всякий случай «глушим» любые старые анимации/кадры,
      если они где-то выше остались и использовали transform */
.vvb-spinner img { transform: none; }  /* базово без преобразований, а крутит rotate */

/* Заголовок — низ слева */
.vvb-title {
  position: absolute;
  left: 16px; bottom: 16px;
  color: #fff;
  font: 600 16px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-shadow: 0 2px 10px rgba(0,0,0,.7);
  z-index: calc(var(--vvb-z) + 3);
  max-width: 70%;
}

/* Кнопки справа внизу (колонка) */
.vvb-actions {
  position: absolute;
  right: 16px; bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
  z-index: calc(var(--vvb-z) + 4);
}
.vvb-actions button {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.5));
}
.vvb-actions img {
  width: var(--vvb-icon-w);
  height: auto;
}
.vvb-like { position: relative; }
.vvb-like-count {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -16px;
  color: #fff;
  font: 700 12px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-shadow: 0 2px 10px rgba(0,0,0,.7);
}

/* Стрелки справа по центру */
.vvb-arrow {
  position: absolute;
  right: 5px;
  width: var(--vvb-icon-w);
  height: var(--vvb-icon-w);
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; padding: 0; cursor: pointer;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.6));
  z-index: calc(var(--vvb-z) + 6);
  transform: translateY(-50%);
}
.vvb-arrow img { width: var(--vvb-icon-w); height: auto; }
.vvb-arrow-up   { top: 40%; }
.vvb-arrow-down { top: 60%; }

/* Подсказка на мобилках */
.vvb-mobile-hint {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  color: #fff;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(6px);
  padding: 8px 12px;
  border-radius: 999px;
  font: 600 13px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  z-index: calc(var(--vvb-z) + 7);
}

/* Модалка */
.vvb-modal {
  position: fixed;
  inset: 0;
  display: block;
  z-index: 999999;
}
.vvb-modal .vvb-fullscreen { display: none; }
.vvb-modal.vvb-hidden { display: none; }

.vvb-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  backdrop-filter: blur(8px) saturate(110%);
}

.vvb-modal-dialog {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  align-items: center; justify-content: center;
}

.vvb-modal-content {
  position: relative;
  width: auto;
  height: min(720px, calc(100vh - 160px));
  aspect-ratio: 9 / 16;
  border-radius: var(--vvb-radius);
  overflow: hidden;
  box-shadow: var(--vvb-shadow);
}

.vvb-modal-close {
  position: absolute;
  right: 10px; top: 10px;
  width: 42px; height: 42px;
  border: none; background: transparent; cursor: pointer;
  z-index: calc(var(--vvb-z) + 120);
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.6));
}
.vvb-modal-close img { width: 42px; height: 42px; }

/* На мобильных — модалка и контент на весь экран с реальным vh */
@media (max-width: 768px) {
  .vvb-modal-dialog {
    left: 0; top: 0; transform: none;
    width: 100vw; height: calc(var(--vvb-vh, 1vh) * 100);
  }
  .vvb-modal-content {
    width: 100vw; height: calc(var(--vvb-vh, 1vh) * 100);
    aspect-ratio: auto;
    border-radius: 0;
  }
  .vvb-modal .vvb-viewport {
    width: 100%; height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
  }
  /* Стрелки — на одной линии с кнопками и выше лайка */
  .vvb-arrow {
    right: auto; left: calc(100% - var(--vvb-icon-w) - 12px);
  }
  .vvb-arrow-up { top: 40%; }
  .vvb-arrow-down { top: 60%; }
	.vvb-modal .vvb-arrow-up { top: 40%; }
	.vvb-modal .vvb-arrow-down { top: 55%; }
	.vvb-modal .vvb-actions { bottom: 150px; }
}

/* Блокировка скролла страницы при модалке */
body.vvb-lock { overflow: hidden; }

/* Пусто */
.vvb-empty { padding: 12px; color: #777; }