/* Контейнер секции — база для абсолютного позиционирования попапов */
.section-video { position: relative; }
.video { display:block; width:100%; height:auto; position:relative; z-index:1; }

/* === Универсальный стиль попапов (применится к popup1/popup2/popup3) === */
.vs-popup, .popup1.vs-popup, .popup2.vs-popup, .popup3.vs-popup {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(175, 10, 35, 0.45);
  color: #fff;
  border: 1px solid rgba(255,255,255,.4);
  padding: 25px;
  z-index: 20;                 /* поверх видео */
  border-radius: 8px;
  text-align: center;
  width: 85%; max-width: 380px;
  cursor: pointer;
  animation: .5s ease-in-out infinite alternate vsPulse;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 5px 25px rgba(0,0,0,.3);
}
.vs-popup__title,
.vs-popup h2{
  margin: 0 0 10px;
  font-size: 22px;
  color: #ffeb3b;
  text-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.vs-popup__subtitle { font-size: 18px; margin-bottom: 8px; font-weight: 500; }
.vs-popup__discount { font-size: 16px; margin-bottom: 15px; }
.vs-popup__discount strong { color:#ffeb3b; font-size:18px; }
.vs-popup__badge{
  font-size:14px; padding:10px; background:rgba(0,0,0,.25);
  border-radius:6px; margin-bottom:15px;
  border:1px dashed rgba(255,255,255,.2);
}
.vs-popup__badge strong{ color:#ffeb3b; }
.vs-cta, .vs-cta-underline { font-size:15px; opacity:.9; text-decoration:underline; }

/* Кнопки попапа №2 в строку (JS уже рендерит .vs-buttons и .vs-btn классы) */
.vs-buttons{ display:flex; gap:10px; justify-content:center; margin-top:15px; }
.vs-btn, .start, .restart{
  flex:1; padding:8px 12px; border-radius:6px; border:none;
  background:rgba(255,235,59,.9); color:#000; font-weight:600;
  cursor:pointer; text-align:center; line-height:1.2; display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.vs-btn:hover, .start:hover, .restart:hover{ background:rgba(255,235,59,1); }
.vs-btn svg, .start svg, .restart svg{ width:18px; height:18px; fill:currentColor; display:block; }

/* Анимация */
@keyframes vsPulse{
  from{ transform:translate(-50%,-50%) scale(1); }
  to  { transform:translate(-50%,-50%) scale(1.02); }
}

/* === Фейковый фуллскрин (как у тебя; важно, что inner — relative) === */
.vs-fakefs{
  position: fixed; inset: 0; width:100vw; height:100vh; background:#000;
  z-index: 9990; display:none; align-items:center; justify-content:center; overscroll-behavior:contain;
}
.vs-fakefs.is-open{ display:flex; }
.vs-fakefs__inner{ position:relative; width:100vw; height:100vh; overflow:hidden; } /* относит. контекст для .vs-popup в ФС */
.vs-fakefs__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }
.vs-close{
  position:absolute; top:12px; right:12px; width:40px; height:40px; border-radius:10px;
  display:grid; place-items:center; cursor:pointer; z-index:30;
  background:rgba(175, 10, 35, .45); border:1px solid rgba(255,255,255,.4); box-shadow:0 5px 25px rgba(0,0,0,.3);
}

/* Блокировка скролла при ФС */
html.vs-noscroll, body.vs-noscroll{ overflow:hidden !important; height:100% !important; }
/* Адаптив под мобильные */
@media (max-width: 480px) {
  .vs-popup {
    padding: 15px;
    width: 90%;
    max-width: 320px;
  }

  .vs-popup__title,
  .vs-popup h2 {
    font-size: 18px;
    margin-bottom: 8px;
  }

  .vs-popup__subtitle {
    font-size: 16px;
    margin-bottom: 6px;
  }

  .vs-popup__discount {
    font-size: 14px;
    margin-bottom: 10px;
  }
  .vs-popup__discount strong {
    font-size: 16px;
  }

  .vs-popup__badge {
    font-size: 12px;
    padding: 8px;
    margin-bottom: 10px;
  }

  .vs-cta, .vs-cta-underline {
    font-size: 13px;
  }

  /* Кнопки */
  .vs-buttons {
    flex-direction: column;
    gap: 8px;
  }
  .vs-btn, .start, .restart {
    font-size: 14px;
    padding: 6px 10px;
  }
  .vs-btn svg, .start svg, .restart svg {
    width: 16px;
    height: 16px;
  }
}
/* Ограничение размера иконки mute в popup1 */
.popup1 svg {
  width: 36px;
  height: 36px;
  fill: currentColor;
}

@media (max-width: 480px) {
  .popup1 svg {
    width: 28px;
    height: 28px;
  }
}
.vs-btn svg,
.start svg,
.restart svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

@media (max-width: 480px) {
  .vs-btn svg,
  .start svg,
  .restart svg {
    width: 16px;
    height: 16px;
  }
}
/* === MOBILE TUNING (<=480px) === */
@media (max-width: 480px) {
  /* общий контейнер попапов */
  .vs-popup {
    width: 92vw;              /* вместо 85% — чуть шире, но в рамках экрана */
    max-width: 92vw;
    padding: clamp(12px, 4vw, 18px);
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0,0,0,.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    max-height: 80vh;         /* чтобы не вылезал вниз */
    overflow: auto;           /* прокрутка, если текст длинный */
    -webkit-overflow-scrolling: touch;
    word-break: break-word;
    hyphens: auto;
  }

  /* именно офферный попап (№3) — часто самый «толстый» */
  .popup3.vs-popup {
    max-height: 78vh;         /* чуть компактнее, чтобы кнопка CTA не резалась */
  }

  .vs-popup__title,
  .vs-popup h2 {
    font-size: clamp(16px, 5vw, 20px);
    margin-bottom: 8px;
    line-height: 1.15;
  }
  .vs-popup__subtitle { font-size: clamp(14px, 4.2vw, 17px); margin-bottom: 6px; }
  .vs-popup__discount { font-size: clamp(13px, 3.8vw, 16px); margin-bottom: 10px; }
  .vs-popup__discount strong { font-size: clamp(14px, 4.2vw, 18px); }
  .vs-popup__badge { font-size: 12px; padding: 8px; margin-bottom: 10px; }
  .vs-cta, .vs-cta-underline { font-size: 13px; }

  /* кнопки popup2 (если оставляешь их в колонку на очень узких экранах) */
  .vs-buttons {
    gap: 8px;
    flex-wrap: wrap;          /* если не влезают в ряд — аккуратно переносятся */
  }
  .vs-btn, .start, .restart {
    font-size: 14px;
    padding: 6px 10px;
    min-height: 36px;
  }

  /* иконки внутри кнопок и mute-иконка в popup1 */
  .vs-btn svg, .start svg, .restart svg { width: 16px; height: 16px; }
  .popup1 svg { width: 28px; height: 28px; }  /* фикс огромной иконки в первом попапе */
}

/* Очень низкие экраны (ландшафт на мобилках) */
@media (max-height: 560px) {
  .vs-popup { max-height: 70vh; }
}
/* === Центрирование видео в fake-fullscreen === */

/* Центрируем .vs-fakefs__inner строго по центру вьюпорта */
.vs-fakefs.is-open{
  display: grid !important;     /* перекрывает прежний flex */
  place-items: center;           /* по центру по обеим осям */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  box-sizing: border-box;
}

/* Используем реальную высоту экрана там, где поддерживается */
@supports (height: 100dvh) {
  .vs-fakefs{ height: 100dvh; }
  .vs-fakefs__inner{ max-height: 100dvh; }
}

/* А без поддержки 100dvh — ограничиваемся классическим vh */
.vs-fakefs__inner{
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;                    /* на всякий случай, чтобы не сдвигалось */
}
/* === FIX: пиксель-перфект центрирование видео в fake-fullscreen === */

/* центрируем контейнер (если где-то переопределён) */
.vs-fakefs.is-open{
  display: grid !important;
  place-items: center;
}

/* само видео — не через inset, а через 50%/translate для симметрии */
.vs-fakefs__video{
  position: absolute;
  inset: auto !important;             /* отменяем растяжение по краям */
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;       /* как у тебя по умолчанию */
  object-position: center center !important; /* не даём смещаться содержимому */
  margin: 0 !important;               /* исключаем влияние margin */
}
/* === MOBILE: чтобы края popup3 не обрезались в fake-FS === */
@media (max-width: 480px) {
  /* разрешаем выход содержимого за рамки видео-кадра */
  .vs-fakefs.is-open .vs-fakefs__inner {
    overflow: visible !important;
  }
  /* сам попап гарантированно поверх видео и черных полей */
  .vs-fakefs.is-open .vs-popup {
    z-index: 9992 !important;
  }
}
/* === ЕДИНЫЙ ЦВЕТ ДЛЯ ПРОГРЕССА И ПОДСВЕТКИ === */
:root{
  /* поменяешь тут, либо через JS: document.documentElement.style.setProperty('--vs-accent', '#ffeb3b') */
  --vs-accent: #ffeb3b;
}

/* Подсветка за видео (мягкая цветная тень) */
.section-video.vs-glow .video{
  /* лёгкая свеча вокруг прямоугольника видео */
  filter: drop-shadow(0 0 22px var(--vs-accent));
}

/* Прогресс-бар: тонкая плашка у нижнего края видео/фрейма */
.vs-progress{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 8px;

  width: min(92%, 720px);
  height: 6px;
  border-radius: 999px;

  background: rgba(255,255,255,.18);       /* трек */
  border: 1px solid rgba(255,255,255,.28); /* тонкая рамка */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);

  overflow: hidden;
  z-index: 10; /* ниже попапов (у них z-index:20), но поверх видео */
  pointer-events: none; /* чтобы не перехватывал клики */
}
.vs-progress__bar{
  width: 0%;
  height: 100%;
  background: var(--vs-accent);
  box-shadow: 0 0 12px var(--vs-accent);
  transition: width .2s linear;
}

/* Когда видео в fake-fullscreen — прижимаем прогресс к нижней кромке кадра */
.vs-fakefs.is-open .vs-progress{
  position: absolute;
  left: 12px;
  right: 12px;
  transform: none;
  width: auto;
  bottom: 12px;
}

/* На очень узких экранах прогресс чуть толще и с большим зазором от края */
@media (max-width: 480px){
  .vs-progress{ height: 7px; bottom: 10px; }
}
/* подсветка за видео; цвет берётся из --vs-accent */
.section-video.vs-glow .video{
  filter: drop-shadow(0 0 22px var(--vs-accent));
}
/* ДЕСКТОП: в fake-FS показываем видео целиком (без обрезания по бокам) */
@media (min-width: 768px){
  .vs-fakefs__video{
    object-fit: contain !important;      /* вместо cover */
    object-position: center center !important;
  }
}
/* Гарантированный зазор между "СКИДКА" и значением */
.popup3 .vs-popup__subtitle strong {
  margin-left: .3em; /* можно .25em–.4em по вкусу */
}