/* =========================================================
   WS Video Modal — FINAL CSS
   ========================================================= */

.ws-vmodal[hidden],
#ws-vmodal[hidden]{
  display:none!important;
}

.ws-vmodal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;

  --glass-bg: rgba(255,255,255,.16);
  --glass-brd: rgba(255,255,255,.38);
  --glass-blur: 12px;
  --ratio: 16/9;
}

.ws-vmodal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.75);
  z-index:1;
}

.ws-vmodal__dialog{
  position:relative;
  z-index:2;
  width:min(1100px,96vw);
  margin:0;
  padding:0;
  background:transparent;
  border-radius:0;
  box-shadow:none;
}

@media (max-width:680px){
  .ws-vmodal__dialog{ max-height:90vh; }
}

.ws-vmodal__figure{
  position:relative;
  margin:0;
  background:#000;
  overflow:hidden;
  aspect-ratio:var(--ratio);
  box-shadow:0 8px 30px rgba(0,0,0,.4);

  -webkit-clip-path:none !important;
          clip-path:none !important;
  border-radius:0 !important;
}

.ws-vmodal__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  background:#000;

  pointer-events:none; /* панель кликабельна всегда */
}

/* close */
.ws-vmodal__close{
  position:absolute;
  top:-14px;
  right:-10px;
  left:auto;
  width:32px;
  height:32px;
  border-radius:50%;
  background:#fff;
  cursor:pointer;
  z-index:3;

  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:none;
}

.ws-vmodal__close svg{
  width:18px;
  height:18px;
  stroke:#000;
  stroke-width:2;
  fill:none;
  pointer-events:none;
}

/* panel */
.ws-vmodal__panel{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:5;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding:8px 14px;
  background:var(--glass-bg);
  border-top:1px solid var(--glass-brd);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
          backdrop-filter: blur(var(--glass-blur)) saturate(1.2);

  pointer-events:auto;
}

@media (max-width:680px){
  .ws-vmodal__panel{ padding:6px 10px; gap:8px; }
}

.ws-vmodal-panel-left{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}

.ws-vmodal-panel-right{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  column-gap:10px;
  row-gap:0;
}

/* buttons */
.ws-vmodal__btn{
  all: unset;
  box-sizing:border-box;

  display:flex;
  align-items:center;
  justify-content:center;

  flex:0 0 auto;
  width:32px;
  height:32px;

  border-radius:50%;
  border:1px solid var(--glass-brd);
  background:rgba(0,0,0,.4);
  padding:0;
  cursor:pointer;

  user-select:none;
  -webkit-tap-highlight-color: transparent;
}

.ws-vmodal__btn:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
}

.ws-vmodal__btn svg{
  width:16px;
  height:16px;
  display:block;
  fill:none;
  stroke:#fff;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* play icons */
.ws-vmodal__play svg{ fill:#fff; stroke:none; }
.ws-vmodal__play .ws-vmodal-ico-pause{ display:none; }
.ws-vmodal__play.is-playing .ws-vmodal-ico-play{ display:none; }
.ws-vmodal__play.is-playing .ws-vmodal-ico-pause{ display:block; }

/* time + progress */
.ws-vmodal__time{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:#fff;
}

.ws-vmodal-time-current,
.ws-vmodal-time-total{
  width:40px;
  text-align:center;
  opacity:.9;
}

.ws-vmodal__progress{
  position:relative;
  flex:1 1 auto;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.25);
  overflow:hidden;
  cursor:pointer;
}

.ws-vmodal__progress-bar{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:0;
  background:#fff;
}

/* audio select (hidden by default; JS unhides when tracks exist) */
.ws-vmodal__audio-wrap{
  display:flex;
  align-items:center;
  position:relative;
  justify-content:center;
  width:32px;
  height:32px;
  flex:0 0 32px;
}

.ws-vmodal__audio-select{
  min-width:140px;
  height:32px;
  border-radius:8px;
  border:1px solid var(--glass-brd);
  background:rgba(0,0,0,.4);
  color:#fff;
  font:500 13px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  padding:0 34px 0 10px;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
}

@media (max-width:680px){
  .ws-vmodal__audio-select{ min-width:110px; }
}



@keyframes ws-vmodal-sound{
  0%,100%{ transform:scale(0.9); opacity:.5; }
  50%{ transform:scale(1.05); opacity:1; }
}
.ws-vmodal__mute:not(.is-muted) .ws-icon-wave-1{
  animation: ws-vmodal-sound 1.1s ease-in-out infinite;
}
.ws-vmodal__mute:not(.is-muted) .ws-icon-wave-2{
  animation: ws-vmodal-sound 1.1s ease-in-out infinite;
  animation-delay:.25s;
}
.ws-vmodal__mute .ws-icon-wave{ display:none; }
.ws-vmodal__mute.is-muted .ws-icon-cross{ opacity:1; }
.ws-vmodal__mute .ws-icon-cross{ opacity:0; }
/* Netflix-like hide/show */
.ws-vmodal__panel{
  transition: opacity .18s ease, transform .18s ease;
}
.ws-vmodal__panel.is-hidden{
  opacity:0;
  transform: translateY(10px);
  pointer-events:none;
}

/* In fullscreen, keep panel within figure */
.ws-vmodal__figure:fullscreen .ws-vmodal__panel,
.ws-vmodal__figure:-webkit-full-screen .ws-vmodal__panel{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
/* =========================
   WS VMODAL MUTE — FINAL
   волны -> только когда НЕ muted
   крестик -> только когда muted
   ========================= */

/* базово: рисуем только stroke, без заливок */
.ws-vmodal__mute svg{
  fill:none !important;
  stroke:#fff !important;
  stroke-width:2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

/* по умолчанию: волны видны, крестик спрятан */
.ws-vmodal__mute .ws-icon-wave{
  display:block !important;
  opacity:1 !important;
  animation:none !important;  /* НИКАКОЙ ИМИТАЦИИ */
}
.ws-vmodal__mute .ws-icon-cross{
  display:block !important;
  opacity:0 !important;
}

/* muted: волны скрыть, крестик показать */
.ws-vmodal__mute.is-muted .ws-icon-wave{
  opacity:0 !important;
}
.ws-vmodal__mute.is-muted .ws-icon-cross{
  opacity:1 !important;
}
/* ===== WS VMODAL MUTE ICON — FINAL ===== */
.ws-vmodal__mute svg{
  fill:none !important;
  stroke:#fff !important;
  stroke-width:2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

/* default: waves ON, cross OFF */
.ws-vmodal__mute .ws-icon-wave{
  opacity:1 !important;
  animation:none !important; /* без волн-анимации */
}
.ws-vmodal__mute .ws-icon-cross{
  opacity:0 !important;
}

/* muted: waves OFF, cross ON */
.ws-vmodal__mute.is-muted .ws-icon-wave{ opacity:0 !important; }
.ws-vmodal__mute.is-muted .ws-icon-cross{ opacity:1 !important; }
/* =========================================================
   WS VMODAL PANEL — iOS frosted glass (iOS 26 style)
   ========================================================= */

.ws-vmodal{
  /* можно подправить в одном месте */
  --ios-glass-bg: rgba(255,255,255,.14);      /* молочное стекло */
  --ios-glass-bd: rgba(255,255,255,.22);      /* мягкая обводка */
  --ios-glass-in: rgba(255,255,255,.10);      /* внутренняя линия */
  --ios-glass-blur: 22px;                     /* сильный blur */
}

.ws-vmodal__panel{
  background: var(--ios-glass-bg) !important;
  border-top: 1px solid var(--ios-glass-bd) !important;

  -webkit-backdrop-filter: blur(var(--ios-glass-blur)) saturate(1.6) contrast(1.05) !important;
          backdrop-filter: blur(var(--ios-glass-blur)) saturate(1.6) contrast(1.05) !important;

  /* iOS “приподнятость” */
  box-shadow:
    0 -1px 0 rgba(255,255,255,.10) inset,
    0 10px 30px rgba(0,0,0,.22) !important;
}

/* Блик/градиент как у iOS */
.ws-vmodal__panel::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:100%;
  pointer-events:none;
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.18),
      rgba(255,255,255,.06) 45%,
      rgba(255,255,255,0) 100%
    );
  opacity:.9;
}

/* чуть “мягче” кнопки под стекло */
.ws-vmodal__btn{
  background: rgba(0,0,0,.28) !important;
  border-color: rgba(255,255,255,.22) !important;
}

/* прогресс — белее и “iOS-like” */
.ws-vmodal__progress{
  background: rgba(255,255,255,.22) !important;
}
.ws-vmodal__progress-bar{
  background: rgba(255,255,255,.92) !important;
}

/* =========================================================
   WS VMODAL — AUDIO SELECT AS ROUND BUTTON (like speaker/fs)
   ========================================================= */

/* убираем стрелку (и кастомную, и системную) */
.ws-vmodal__audio-wrap::after{
  display:none !important;
  content:none !important;
}
.ws-vmodal__audio-select,
#ws-vmodal-audio,
.ws-vmodal__audio-wrap select{
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;
  background-image:none !important;
}

/* селект как кнопка 32x32 */
.ws-vmodal__audio-wrap{
  display:flex;
  align-items:center;
}

.ws-vmodal__audio-select,
#ws-vmodal-audio,
.ws-vmodal__audio-wrap select{
  width:32px !important;
  min-width:32px !important;
  max-width:32px !important;
  height:32px !important;

  padding:0 !important;
  border-radius:999px !important;

  border:1px solid rgba(255,255,255,.22) !important;
  background: rgba(0,0,0,.28) !important;

  -webkit-backdrop-filter: blur(var(--ios-glass-blur)) saturate(1.6) contrast(1.05) !important;
          backdrop-filter: blur(var(--ios-glass-blur)) saturate(1.6) contrast(1.05) !important;

  color: rgba(255,255,255,.92) !important;
  font: 700 11px/32px system-ui, -apple-system, "Segoe UI", sans-serif !important;

  text-align:center !important;
  text-align-last:center !important; /* Chromium */
  outline:none !important;
  box-shadow:none !important;
  cursor:pointer;
}

/* hover/focus как у кнопок */
.ws-vmodal__audio-select:hover,
#ws-vmodal-audio:hover,
.ws-vmodal__audio-wrap select:hover{
  border-color: rgba(255,255,255,.32) !important;
}
.ws-vmodal__audio-select:focus-visible,
#ws-vmodal-audio:focus-visible,
.ws-vmodal__audio-wrap select:focus-visible{
  outline:2px solid rgba(255,255,255,.75) !important;
  outline-offset:2px;
}
/* ===== WS VMODAL — language select: darker + centered ===== */

.ws-vmodal__audio-select,
#ws-vmodal-audio,
.ws-vmodal__audio-wrap select{
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
  max-width:32px !important;
  border-radius:999px !important;

  /* темнее и контрастнее */
  background: rgba(0,0,0,.55) !important;
  border: 1px solid rgba(255,255,255,.28) !important;

  color: rgba(255,255,255,.95) !important;
  font-weight: 800 !important;
  font-size: 11px !important;

  /* центрирование */
  padding: 0 !important;
  text-align: center !important;
  text-align-last: center !important;
  line-height: 32px !important; /* помогает визуально */
  text-indent: 0 !important;
  vertical-align: middle !important;
}

/* список при открытии (где поддерживается) */
.ws-vmodal__audio-wrap select option,
.ws-vmodal__audio-select option,
#ws-vmodal-audio option{
  background: #0b0f14 !important;
  color: #fff !important;
}

/* на всякий — твоя кастом стрелка уже убрана, но закрепим */
.ws-vmodal__audio-wrap::after{ display:none !important; content:none !important; }

.ws-vmodal.is-native-fs .ws-vmodal__panel{
  display:none !important;
}

/* =========================================================
   WS VMODAL PANEL - FINAL HARD RESET
   One stable layout for controls.
   ========================================================= */
.ws-vmodal .ws-vmodal__panel{
  position:absolute !important;
  left:12px !important;
  right:12px !important;
  bottom:12px !important;
  z-index:5 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  min-height:44px !important;
  padding:8px 12px !important;
  border:1px solid rgba(255,255,255,.22) !important;
  border-top:1px solid rgba(255,255,255,.22) !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.14) !important;
  -webkit-backdrop-filter:blur(22px) saturate(1.6) contrast(1.05) !important;
  backdrop-filter:blur(22px) saturate(1.6) contrast(1.05) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.22) !important;
}

.ws-vmodal .ws-vmodal__panel::before{
  display:none !important;
  content:none !important;
}

.ws-vmodal .ws-vmodal-panel-left{
  flex:1 1 auto !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}

.ws-vmodal .ws-vmodal-panel-right{
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}

.ws-vmodal .ws-vmodal-panel-right > *{
  flex:0 0 auto !important;
  margin:0 !important;
}

.ws-vmodal .ws-vmodal__btn{
  all:unset !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 32px !important;
  width:32px !important;
  min-width:32px !important;
  max-width:32px !important;
  height:32px !important;
  min-height:32px !important;
  padding:0 !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.22) !important;
  background:rgba(0,0,0,.28) !important;
  color:#fff !important;
  cursor:pointer !important;
}

.ws-vmodal .ws-vmodal__btn svg{
  width:16px !important;
  height:16px !important;
  display:block !important;
}

.ws-vmodal .ws-vmodal__play .ws-vmodal-ico-play{
  display:block !important;
}

.ws-vmodal .ws-vmodal__play .ws-vmodal-ico-pause{
  display:none !important;
}

.ws-vmodal .ws-vmodal__play.is-playing .ws-vmodal-ico-play{
  display:none !important;
}

.ws-vmodal .ws-vmodal__play.is-playing .ws-vmodal-ico-pause{
  display:block !important;
}

.ws-vmodal .ws-vmodal__time{
  flex:1 1 auto !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  font-size:13px !important;
  color:#fff !important;
}

.ws-vmodal .ws-vmodal-time-current,
.ws-vmodal .ws-vmodal-time-total{
  width:40px !important;
  flex:0 0 40px !important;
  text-align:center !important;
}

.ws-vmodal .ws-vmodal__progress{
  flex:1 1 auto !important;
}

.ws-vmodal .ws-vmodal__audio-wrap{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 32px !important;
  width:32px !important;
  height:32px !important;
  margin:0 !important;
}

.ws-vmodal .ws-vmodal__audio-wrap::before,
.ws-vmodal .ws-vmodal__audio-wrap::after{
  display:none !important;
  content:none !important;
}

.ws-vmodal .ws-vmodal__audio-select,
.ws-vmodal #ws-vmodal-audio,
.ws-vmodal .ws-vmodal__audio-wrap select{
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;
  display:block !important;
  width:32px !important;
  min-width:32px !important;
  max-width:32px !important;
  height:32px !important;
  min-height:32px !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.28) !important;
  background:rgba(0,0,0,.55) !important;
  color:#fff !important;
  font:700 11px/32px system-ui, -apple-system, "Segoe UI", sans-serif !important;
  text-align:center !important;
  text-align-last:center !important;
  text-indent:0 !important;
  box-shadow:none !important;
  outline:none !important;
  cursor:pointer !important;
}

@media (max-width:680px){
  .ws-vmodal{
    --ratio: 9 / 16;
    align-items:center;
    padding:max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }

  .ws-vmodal__dialog{
    width:min(420px, calc(100vw - 24px)) !important;
    max-width:100% !important;
  }

  .ws-vmodal__figure{
    border-radius:12px !important;
    max-height:min(90vh, 920px);
  }

  .ws-vmodal__close{
    top:max(8px, env(safe-area-inset-top)) !important;
    right:max(8px, env(safe-area-inset-right)) !important;
    left:auto !important;
    width:36px !important;
    height:36px !important;
    z-index:10 !important;
  }

  .ws-vmodal .ws-vmodal__panel{
    left:8px !important;
    right:8px !important;
    bottom:8px !important;
    min-height:38px !important;
    padding:6px 8px !important;
    gap:8px !important;
  }

  .ws-vmodal .ws-vmodal-panel-left,
  .ws-vmodal .ws-vmodal-panel-right{
    gap:8px !important;
  }

  .ws-vmodal .ws-vmodal__time{
    gap:6px !important;
    font-size:11px !important;
  }

  .ws-vmodal .ws-vmodal-time-current,
  .ws-vmodal .ws-vmodal-time-total{
    width:34px !important;
    flex-basis:34px !important;
  }
}