/* pack04: видеоинструкция селлеру — overlay + compact-floating плеер. Скоуп vh-*. */
.vh-fab{
  position:fixed; right:max(16px, env(safe-area-inset-right)); bottom:max(16px, env(safe-area-inset-bottom));
  z-index:9998; display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:0 16px; border:1px solid var(--border,#d9dee7); border-radius:999px;
  background:#fff; color:var(--text,#1f2630); font-size:14px; font-weight:600; cursor:pointer;
  box-shadow:0 6px 20px rgba(20,30,50,.16);
}
.vh-fab:hover{ background:var(--slate-100,#f1f4f9); }
.vh-fab__i{ width:16px; height:16px; flex:none; }

/* Инлайн-кнопка (лендинг, рядом с CTA) — тот же hook vhOpen */
.vh-inline{ cursor:pointer; }

.vh-overlay{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; }
.vh-overlay[hidden]{ display:none; }
.vh-backdrop{ position:absolute; inset:0; background:rgba(15,22,35,.55); }
.vh-win{
  position:relative; width:auto; max-width:min(90vw,1280px); max-height:92vh;
  display:flex; flex-direction:column;
  background:#000; border-radius:14px; overflow:hidden; box-shadow:0 18px 60px rgba(0,0,0,.5);
}
.vh-bar{
  display:flex; align-items:center; gap:8px; padding:8px 10px; background:#11161f; color:#fff;
  user-select:none;
}
.vh-title{ font-size:13.5px; font-weight:600; margin-right:auto; padding-left:4px; }
.vh-speed{ display:flex; align-items:center; gap:3px; margin-right:6px; }
.vh-speed__lbl{ color:#9aa6b8; font-size:12px; margin-right:4px; }
.vh-speed button{
  min-width:42px; min-height:40px; padding:0 8px; border:1px solid #2b3442; border-radius:8px;
  background:transparent; color:#cdd6e4; font-size:13px; cursor:pointer;
}
.vh-speed button.is-on{ background:#2b3442; color:#fff; }
.vh-btn{
  min-width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border:none; border-radius:8px; background:transparent; color:#cdd6e4; font-size:18px; cursor:pointer;
}
.vh-btn--text{ padding:0 12px; font-size:13.5px; font-weight:600; gap:6px; }
.vh-btn__ico{ font-size:15px; line-height:1; }
.vh-btn:hover{ background:#2b3442; color:#fff; }
.vh-fab:focus-visible, .vh-btn:focus-visible, .vh-speed button:focus-visible{
  outline:2px solid #8ab4ff; outline-offset:2px;
}
.vh-body{ background:#000; display:flex; }
/* Видео сразу крупное: занимает наибольший 16:9-прямоугольник, влезающий по ширине И высоте
   (52px под шапку) — без «экран в экране». */
.vh-body video{
  display:block; margin:auto; width:auto; height:auto;
  max-width:min(90vw,1280px); max-height:calc(92vh - 52px);
  aspect-ratio:16 / 9; background:#000;
}
.vh-error{ color:#fff; padding:24px; text-align:center; font-size:14px; }
.vh-error a{ color:#8ab4ff; }

/* Compact-режим: маленькое окно в углу, форма под ним кликабельна. */
.vh-overlay.is-compact{ pointer-events:none; }            /* фон/форма доступны */
.vh-overlay.is-compact .vh-backdrop{ display:none; }
.vh-overlay.is-compact .vh-win{
  pointer-events:auto; position:fixed;
  right:max(16px, env(safe-area-inset-right)); bottom:max(16px, env(safe-area-inset-bottom));
  width:min(400px,92vw); max-width:none; max-height:none; cursor:grab;
}
.vh-overlay.is-compact .vh-bar{ cursor:grab; }
.vh-overlay.is-compact.is-dragging .vh-win,
.vh-overlay.is-compact.is-dragging .vh-bar{ cursor:grabbing; }
.vh-overlay.is-compact .vh-body video{ width:100%; max-width:100%; height:auto; max-height:none; }

@media (max-width:560px){
  .vh-win{ max-width:96vw; }
  .vh-body video{ max-width:96vw; }                        /* почти на всю ширину */
  .vh-overlay.is-compact .vh-win{ width:min(94vw,400px); } /* на узком не двигаем, просто меньше */
  .vh-title{ display:none; }                               /* освобождаем место в шапке */
  .vh-speed__lbl{ display:none; }
  .vh-bar{ flex-wrap:wrap; row-gap:6px; }                  /* кнопки переносятся, текст сохраняется */
}

/* Полный экран на ВСЁ окно плеера → панель со скоростью/закрыть видна в fullscreen.
   Отдельные блоки для unprefixed и -webkit- (иначе старый парсер уронит всё правило). */
.vh-win:fullscreen{ width:100vw; height:100vh; max-width:none; max-height:none; border-radius:0; }
.vh-win:fullscreen .vh-body{ flex:1; min-height:0; }
.vh-win:fullscreen .vh-body video{
  width:100%; height:100%; max-width:none; max-height:none; aspect-ratio:auto; object-fit:contain;
}
.vh-win:-webkit-full-screen{ width:100vw; height:100vh; max-width:none; max-height:none; border-radius:0; }
.vh-win:-webkit-full-screen .vh-body{ flex:1; min-height:0; }
.vh-win:-webkit-full-screen .vh-body video{
  width:100%; height:100%; max-width:none; max-height:none; aspect-ratio:auto; object-fit:contain;
}