/* vkytPlayer styles */
.vkyt{ position:relative; max-width:960px; margin:0 auto; width:100%; aspect-ratio:16/9; display:flex; flex-direction:column; --vkyt-switch-h: 56px; --vkyt-play-p: 10%; }
.vkyt-wrap{ position:relative; background:#000; width:100%; flex:1 1 auto; overflow:hidden; }
.vkyt-thumb{ position:absolute; inset:0; }
.vkyt-thumb img{ display:block; width:100%; height:100%; object-fit:cover; }
.vkyt-play{ 
  position:absolute; 
  top:50%; 
  left:50%; 
  transform:translate(-50%, -50%); 
  width: var(--vkyt-play-p); 
  height: calc(var(--vkyt-play-p) * 1.4); /* сохраняем пропорции 68x48 */
  background-color:#ff0000; 
  border-radius:21%; 
  display:flex; 
  justify-content:center; 
  align-items:center; 
  border:none; 
  cursor:pointer; 
  padding:0; 
  font-size:0; /* скрываем текстовую стрелку */
}
.vkyt-play:after{ 
  content:''; 
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-45%, -50%); /* чуть смещаем вправо для типичного значка */
  width: 30%; 
  height: 42%; 
  background:#fff; 
  clip-path: polygon(0 0, 100% 50%, 0 100%); /* треугольник вправо */
}
.vkyt-play:hover{ background-color:#e60000; }
    /* SVG-вариант кнопки Play: отключаем псевдоэлемент и масштабируем SVG */
.vkyt-play.vkyt-play-svg:after{ content:none; display:none; }
/* Специальный стиль для варианта SVG: круглая тёмная кнопка 40x40 */
.vkyt-play.vkyt-play-svg{
  width: 40px;
  height: 40px;
  background: rgba(0,0,0,0.7);
  border-radius: 50%;
  transition: background 0.2s ease;
}
.vkyt-play.vkyt-play-svg:hover{ background: rgba(0,0,0,0.85); }
.vkyt-play.vkyt-play-svg svg{ display:block; width:50%; height:50%; fill:#fff; }
/* Панель переключения: сверху, без absolute, с анимацией появления */
.vkyt-switch{ display:flex; justify-content:center; padding:0; box-sizing:border-box; overflow:hidden; height:0; transform: translateY(-100%); transition: height 300ms ease, transform 300ms ease, padding 300ms ease; background: #085a82;}
.vkyt-switch-inner{ display:flex; align-items:center; gap:10px; width:100%; max-width:960px; margin:0 auto; background: rgba(2,6,23,0.65); border:1px solid #334155;  padding:10px 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.35); }
.vkyt-switch-msg{ color:#cbd5e1; font-size:14px; }
.vkyt-switch-buttons{ display:flex; gap:6px; margin-left:auto; }
.vkyt-switch-close{ 
  --vkyt-timer-color: #ef4444; /* цвет полосы таймера */
  appearance:none; 
  background: rgba(30,41,59,0.85); 
  color:#e2e8f0; 
  border:1px solid #334155; 
  border-radius:9999px; 
  font-size:18px; 
  line-height:1; 
  width:32px; 
  height:32px;
  min-width: 32px;
  min-height: 32px; 
  padding:0; 
  cursor:pointer; 
  margin-left:10px; 
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  position:relative; 
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.vkyt-switch-close:hover{ background: rgba(51,65,85,0.95); color:#fff; border-color:#475569; }
/* Тонкое SVG-кольцо вокруг крестика (таймер 15 секунд) */
.vkyt-switch-close .vkyt-x{ position:relative; z-index:2; }
.vkyt-switch-close .vkyt-timer-ring{ 
  position:absolute; 
  inset:-1px; /* растягиваем на 32x32 (учитывая бордер 1px) */
  width:calc(100% + 2px); 
  height:calc(100% + 2px); 
  pointer-events:none; 
  z-index:1; 
  transform: rotate(-90deg); /* старт сверху */
}
.vkyt-switch-close .vkyt-timer-ring circle{
  fill:none;
  stroke: var(--vkyt-timer-color);
  stroke-width: 2; /* 32x32, r=15 */
  stroke-linecap: butt;
  stroke-dasharray: 100;
  stroke-dashoffset: 100; /* старт: пусто */
}
.vkyt.switch-visible .vkyt-switch-close .vkyt-timer-ring circle,
.vkyt-modal.switch-visible .vkyt-switch-close .vkyt-timer-ring circle{ 
  animation: vkyt-ring-progress 7s linear forwards; 
}
/* Пауза анимации прогресс-круга при наведении на панель переключателя */
.vkyt.switch-visible .vkyt-switch:hover .vkyt-switch-close .vkyt-timer-ring circle,
.vkyt-modal.switch-visible .vkyt-switch:hover .vkyt-switch-close .vkyt-timer-ring circle{
  animation-play-state: paused;
}
@keyframes vkyt-ring-progress{ to{ stroke-dashoffset: 0; } }
.vkyt-btn{ appearance:none; background:#1f2937; color:#fff; border:1px solid #334155; border-radius:9999px; font-size:12px; line-height:1; padding:4px 10px; cursor:pointer; margin:0; display:flex; align-items:center; gap:6px; }
.vkyt-btn:hover{ background:#2563eb; border-color:#1d4ed8; }
.vkyt-btn.active{ background:#10b981; border-color:#059669; }
.vkyt-icon img{ display:block; width:16px; height:16px; }
/* удалено: базовые стили button внутри .vkyt-switch, используются .vkyt-btn */
.vkyt-player-container{ position:absolute; inset:0; background:#000; z-index: 10; }
.vkyt-player-container iframe, .vkyt-player-container div{ position:absolute; left:0; top:0; width:100%; height:100%; }
.vkyt-wrap.is-playing .vkyt-thumb, .vkyt-wrap.is-playing .vkyt-play{ display:none; }
/* Состояние: панель видима, видео уменьшается по высоте, контейнер остаётся неизменным */
.vkyt.switch-visible .vkyt-switch{ height: var(--vkyt-switch-h, 56px); padding:0px; transform: translateY(0); }
/* Режим измерения высоты панели: панель развёрнута без анимации для корректного замера */
.vkyt.switch-measure .vkyt-switch{ height:auto; padding:6px 12px; transform:none; }
/* удалено: повторяющиеся стили .vkyt-switch button, используем .vkyt-btn */
/* modal */
.vkyt-modal{ position:fixed; inset:0; display:none; z-index:2;}
.vkyt-modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.6); }
.vkyt-modal-content{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:80vw; max-width:960px; background:#111; color:#fff; border:1px solid #1e293b; border-radius:12px; overflow:hidden; }
.vkyt-modal-body{ position:relative; width:100%; aspect-ratio:16/9; background:#000; overflow:hidden; }
.vkyt-modal .vkyt-player-container{ position:absolute; inset:0; z-index:10; transition: top 300ms ease, height 300ms ease; }
.vkyt-modal .vkyt-switch{ position:absolute; left:0; right:0; top:0; z-index:20; height:0; padding:0 12px; transform: translateY(-100%); transition: height 300ms ease, transform 300ms ease, padding 300ms ease; }
.vkyt-modal.switch-visible .vkyt-switch{ height: var(--vkyt-switch-h, 56px); padding:0px; transform: translateY(0); }
.vkyt-modal.switch-visible .vkyt-player-container{ top: var(--vkyt-switch-h, 56px); bottom: auto; height: calc(100% - var(--vkyt-switch-h, 56px)); }
.vkyt-modal.switch-measure .vkyt-switch{ height:auto; padding:6px 12px; transform:none; }
.vkyt-close{ position:absolute; right:8px; top:8px; background:#fff; color:#000; border:none; padding:8px 12px; cursor:pointer; z-index:30; border-radius:9999px; box-shadow:0 8px 24px rgba(0,0,0,0.25); display:none;}