/* =========================
   VSK Quest (start widget + popup)
   ========================= */

:root{
  --vskq-font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --vskq-shadow: 0 14px 40px rgba(0,0,0,.22);
  --vskq-shadow-soft: 0 10px 26px rgba(0,0,0,.18);
  --vskq-radius: 18px;
  --vskq-border: rgba(0,0,0,.10);
  --vskq-red: #d91f26;
}

/* Плавающий виджет */
.vskq-start{
  position: fixed;
  right: 14px;
  top: 150px;
  z-index: 999999;
  width: 165px;
  font-family: var(--vskq-font);
  user-select: none;
}
.vskq-start *{ box-sizing: border-box; }

.vskq-start__inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.20));
}

.vskq-start__imgBtn{
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  line-height: 0;
  transition: transform .12s ease;
}
.vskq-start__img{
  width: 140px;
  height: auto;
  display: block;
}

.vskq-start__bubble{
  margin-top: -12px;
  padding: 12px 12px 12px;
  width: 160px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--vskq-border);
  box-shadow: var(--vskq-shadow-soft);
  cursor: pointer;
  text-align: center;
  transition: transform .12s ease;
}
.vskq-start__bubbleTitle{
  font-weight: 800;
  font-size: 15px;
  line-height: 1.15;
  margin: 0;
}

@media (hover:hover){
  .vskq-start__bubble:hover,
  .vskq-start__imgBtn:hover{
    transform: translateY(-1px);
  }
}

/* =========================
   POPUP (как на скрине)
   ========================= */
.vskq-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1000000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.vskq-overlay.is-open{ display:flex; }

.vskq-modal{
  background: #fff;
  border-radius: 22px;
  box-shadow: var(--vskq-shadow);
  border: 1px solid rgba(0,0,0,.06);
  overflow: visible;
  font-family: var(--vskq-font);
  position: relative;
}

.vskq-close{
  position: absolute;
  right: 12px;
  top: 12px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  opacity: .7;
}
.vskq-close{
  z-index: 5;
  pointer-events: auto;
}


.vskq-close:hover{ opacity: 1; }
.vskq-close:active{ transform: scale(.98); }

.vskq-modal__inner{
  padding: 22px 22px 18px;
  position: relative;
  min-height: 250px; /* чтобы влез амур справа снизу */
}

.vskq-modal__title{
  margin: 4px 26px 12px 0; /* место под крестик */
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}

.vskq-modal__text{
  margin: 0;
  font-size: 14px;
  line-height: 1.28;
  text-align: center;
  opacity: .92;
}

.vskq-modal__btnRow{
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.vskq-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 3px solid var(--vskq-red);
  color: #111;
  background: #fff;
  padding: 12px 26px;
  font-weight: 900;
  cursor: pointer;
  min-width: 190px;
}
.vskq-btn:active{ transform: scale(.99); }

/* амур справа снизу в попапе */
.vskq-modal__amur{
  position: absolute;
  right: -40px;
  bottom: 40px;
  width: 110px;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.18));
  pointer-events: none;
}

/* Мобилка */
@media (max-width: 500px){
  .vskq-modal__inner{ min-height: 270px; }
  .vskq-modal__amur{ width: 100px;
        right: -25px;
        bottom: 35px; }
}

/* Виджет на мобилке */
@media (max-width: 720px){
  .vskq-start{ right: 10px; top: 120px; width: 150px; }
  .vskq-start__bubble{ width: 150px; }
  .vskq-start__img{ width: 130px; }
}

/* =========================
   /bezmaksas/ — шаг с 4/5/11/6 + dragon
   ========================= */

.vskq-bm-hide{
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

/* 5 — слева, сначала стоит, после скролла начинает ездить */
.vskq-bm5{
  position: fixed;
  left: 14px;
  top: 20vh;
  z-index: 999998;
  pointer-events: none;
  will-change: transform;
  --vskq-bm5-max-x: 60vw;
  transition: opacity .35s ease;
  animation: none; /* сначала НЕ двигается */
}
.vskq-bm5.is-moving{
  animation: vskq-bm5-move 9s ease-in-out infinite alternate;
}
.vskq-bm5 img{
  width: 140px;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.18));
}
@keyframes vskq-bm5-move{
  from { transform: translateX(0); }
  to   { transform: translateX(var(--vskq-bm5-max-x)); }
}

/* 4 — справа, + красный пузырь под ним */
.vskq-bm4{
  position: fixed;
  right: 14px;
  top: 20vh;
  z-index: 999998;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  transition: opacity .35s ease, transform .35s ease;
}
.vskq-bm4 img{
  width: 140px;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.18));
}

/* КРАСНЫЙ ПУЗЫРЬ как на скрине */
.vskq-bm4__bubble{
  background: #cf1e24;
  color: #fff;
  border-radius: 16px;
  padding: 12px 14px;
  max-width: 210px;
  box-shadow: 0 12px 26px rgba(0,0,0,.20);
  font-family: var(--vskq-font);
  font-weight: 800;
  font-size: 13px;
  line-height: 1.15;
  text-align: center;
}

/* 11 — по центру, чуть ниже чем 4/5 */
.vskq-bm11{
  position: fixed;
  left: 50%;
  top: 70vh;
  transform: translateX(-50%);
  z-index: 999998;
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
.vskq-bm11 img{
  width: 170px;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.18));
}

/* 6 — в документе, чтобы до неё докрутили */
.vskq-bm6{
  position: absolute; /* top выставляем через JS */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  cursor: pointer;
}
.vskq-bm6 img{
  width: 170px;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.18));
}

/* dragon — фиксируется там, где кликнули по 6 */
.vskq-dragon{
  position: fixed;
  z-index: 1000000;
  pointer-events: none;
}
.vskq-dragon img{
  width: 320px; /* GIF ещё больше */
  height: auto;
  display: block;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.26));
}

/* ======= ДЕСКТОП: смещаем 4 и 5 ближе к центру ======= */
@media (min-width: 1024px){
  .vskq-bm5{ left: 8vw; }  /* было 14px */
  .vskq-bm4{ right: 8vw; } /* было 14px */
}

/* адаптация */
@media (max-width: 500px){
  .vskq-bm5 img, .vskq-bm4 img{ width: 118px; }
  .vskq-bm11 img{ width: 150px; }
  .vskq-bm6 img{ width: 150px; }
  .vskq-dragon img{ width: 250px; }
}

/* =========================
   BEZMAKSAS: финальная сцена после GIF (1 + 7 + пузырь)
   ========================= */

.vskq-finish{
  position: fixed;
  z-index: 1000001;
  pointer-events: none;
}

.vskq-finish__bubble{
  background: #fff;
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: 0 12px 26px rgba(0,0,0,.20);
  font-family: var(--vskq-font);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.15;
  text-align: center;
  display: inline-block;
  white-space: normal;
}

.vskq-finish__row{
  margin-top: -30px;
  display: flex;
  align-items: flex-end;
  gap: 14px;
}

.vskq-finish__img{
  width: 150px;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.18));
}

.vskq-finish__img.dzira{
  width: 90px;
}

.vskq-finish__img.is-mirror{
  transform: scaleX(-1);
  transform-origin: center;
}

/* мобилка */
@media (max-width: 520px){
  .vskq-finish__img{ width: 120px; }
  .vskq-finish__bubble{ font-size: 14px; }
}

/* Клик по картинке №7 (dzira) + плавное исчезновение */
.vskq-finish__img.dzira{
  pointer-events: auto;     /* важно: разрешаем клик, даже если у родителя pointer-events:none */
  cursor: pointer;
  transition: opacity .45s ease, transform .45s ease;
}

.vskq-finish__img.dzira.vskq-fade-out{
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

/* =========================
   /kontakti/ — сцены + форма
   ========================= */

/* Сцена с двумя картинками и пузырём */
.vskq-ct-stage{
  position: fixed;
  left: 50%;
  top: 22vh;
  transform: translateX(-50%);
  z-index: 1000002;
  pointer-events: none;
  font-family: var(--vskq-font);
}

.vskq-ct-bubble{
  background: #fff;
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: 0 12px 26px rgba(0,0,0,.20);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.15;
  text-align: center;
  display: inline-block;
  pointer-events: none;
  width: max-content;
}

.vskq-ct-actions{
  margin-top: 10px;
  display: flex;
  justify-content: center;
  pointer-events: auto; /* кнопка кликабельна */
}

.vskq-ct-btn{
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 900;
  cursor: pointer;
  background: #cf1e24;
  color: #fff;
  box-shadow: 0 12px 22px rgba(0,0,0,.18);
}

.vskq-ct-row{
  margin-top: 12px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 18px;
}

.vskq-ct-img{
  width: 160px;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.18));
}

.vskq-ct-img.is-mirror{
  transform: scaleX(-1);
  transform-origin: center;
}

/* --- Форма (оверлей) --- */
.vskq-ct-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1000003;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.vskq-ct-overlay.is-open{ display: flex; }

.vskq-ct-modal{
  position: relative;
  width: min(520px, 92vw);
  background: #fff;
  border-radius: 22px;
  box-shadow: var(--vskq-shadow);
  border: 1px solid rgba(0,0,0,.06);
  overflow: visible;
  padding: 22px 18px 18px;
  font-family: var(--vskq-font);
}

.vskq-ct-x{
  position: absolute;
  right: 12px;
  top: 12px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  opacity: .7;
}
.vskq-ct-x:hover{ opacity: 1; }

.vskq-ct-title{
      margin: 0 auto 11px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.05;
    text-align: center;
}

.vskq-ct-sub{
  margin: 0 0 14px;
  font-size: 13px;
  opacity: .85;
  font-weight: 600;
  text-align: center;
}

/* Картинки сверху, выходят за пределы формы */
.vskq-ct-topImg{
  position: absolute;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.18));
  pointer-events: none;
}
.vskq-ct-topImg.left{ 
	left: -18px; 
    top: -65px;
    width: 80px;
}
.vskq-ct-topImg.right{ 
	right: 35px; 
	top: -65px;
    width: 55px;
	border-bottom: none;	
}

/* Чтобы твоя форма внутри не ломалась */
.vskq-ct-modal .popup-form{
  margin-top: 10px;
}

/* Мобилка */
@media (max-width: 500px){
  .vskq-ct-img{ width: 130px; }
  .vskq-ct-topImg{ width: 95px; top: -44px; }
  .vskq-ct-title{ font-size: 18px; }
  .vskq-ct-modal .popup-disc3.box2 {
    margin: 0px 10px 0px 10px;
}
}

/* ===== Kontakti form: 2 choice buttons ===== */
.vskq-ct-choiceWrap{
  margin: 12px 0 14px;
  display: flex;
  gap: 14px;
}

.vskq-ct-choice{
  flex: 1;
  border-radius: 16px;
  padding: 14px 12px;
  font-weight: 800;
  border: 2px solid rgba(0,0,0,.15);
  background: #fff;
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease;
}

.vskq-ct-choice.is-active{
  background: #b61b20; /* красная */
  color: #fff;
  border-color: #b61b20;
}

.vskq-ct-choiceError{
  outline: 3px solid rgba(217,31,38,.35);
  border-radius: 18px;
  padding: 6px;
}

.vskq-ct-modal .select-block__input:hover {
    font-size: 17px;
}

/* ===== MAIN: блок после нажатия Palīdzēt (картинка 3 + пузырь) ===== */
.vskq-mainNext{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000002;
  font-family: var(--vskq-font);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.18));
}

.vskq-mainNext__img{
  width: 150px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.vskq-mainNext__bubble{
  position: relative;
  margin-top: -10px;           /* “посадить” на пузырь */
  background: #fff;
  border-radius: 18px;
  padding: 14px 14px 14px; /* справа место под крестик */
  box-shadow: 0 12px 26px rgba(0,0,0,.20);
  text-align: center;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.15;
  min-width: 240px;
}

.vskq-mainNext__x{
  position: absolute;
  right: 10px;
  top: 10px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  opacity: .65;
}
.vskq-mainNext__x:hover{ opacity: 1; }

@media (max-width: 420px){
  .vskq-mainNext__img{ width: 130px; }
  .vskq-mainNext__bubble{ font-size: 14px; min-width: 210px; }
}

/* ===== Hand click gif поверх картинки №7 ===== */

.vskq-finish__imgWrap{
  position: relative;
  display: inline-block;
}

.vskq-clickHand{
  position: absolute;
  width: 260px;              /* можешь менять размер */
  height: auto;
  pointer-events: none;     /* чтобы клики проходили на картинку №7 */
  
  /* 🔧 НАСТРОЙКА ПОЗИЦИИ — МЕНЯЙ ЭТИ 2 ЗНАЧЕНИЯ */
  top: 80%;                 
  left: 75%;
  
  transform: translate(-50%, -50%);
  z-index: 5;
}