/* Свой квиз-виджет — замена Matomba. Визуально повторяет popup оригинала:
   чёрный фон, белый текст, красный акцент, тизер-карточка справа на десктопе. */
.vq-overlay{
  position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.6);
  display:none;align-items:stretch;justify-content:center;
}
.vq-overlay.vq-open{display:flex;}
.vq-modal{
  position:relative;width:100%;max-width:1024px;margin:auto;background:#000;color:#fff;
  min-height:520px;max-height:92vh;overflow:hidden;
  display:flex;font-family:"TildaSans",Arial,sans-serif;
}
.vq-close{
  position:absolute;top:16px;right:16px;z-index:2;width:36px;height:36px;border:none;
  background:rgba(255,255,255,.08);color:#fff;font-size:20px;line-height:1;cursor:pointer;border-radius:50%;
}
.vq-close:hover{background:rgba(255,255,255,.18);}
.vq-main{flex:1 1 auto;padding:56px 48px;display:flex;flex-direction:column;overflow-y:auto;}
.vq-eyebrow{font-size:13px;color:rgba(255,255,255,.55);margin-bottom:24px;display:flex;align-items:center;gap:8px;}
.vq-title{font-size:28px;font-weight:700;line-height:1.25;margin:0 0 28px;max-width:520px;}
.vq-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:560px;}
.vq-options.vq-options_1col{grid-template-columns:1fr;}
.vq-option{
  display:flex;align-items:center;gap:12px;padding:16px 18px;border:1px solid rgba(255,255,255,.25);
  cursor:pointer;font-size:15px;background:transparent;color:#fff;text-align:left;transition:border-color .15s;
}
.vq-option:hover{border-color:#d71921;}
.vq-option.vq-selected{border-color:#d71921;background:rgba(215,25,33,.12);}
.vq-option .vq-dot{width:18px;height:18px;border-radius:50%;border:1px solid rgba(255,255,255,.4);flex:none;position:relative;}
.vq-option.vq-selected .vq-dot{border-color:#d71921;}
.vq-option.vq-selected .vq-dot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#d71921;}
.vq-input{
  max-width:520px;width:100%;padding:16px 18px;border:1px solid rgba(255,255,255,.25);background:transparent;
  color:#fff;font-size:16px;font-family:inherit;outline:none;
}
.vq-input::placeholder{color:rgba(255,255,255,.4);}
.vq-input:focus{border-color:#d71921;}
.vq-input-error{border-color:#ff4d4d;animation:vq-shake .3s;}
.vq-error{color:#ff6b6b;font-size:13px;margin-top:8px;max-width:520px;}
.vq-phone-wrap{display:flex;align-items:center;gap:10px;max-width:340px;border:1px solid rgba(255,255,255,.25);padding:0 14px;}
.vq-phone-wrap:focus-within{border-color:#d71921;}
.vq-phone-wrap.vq-input-error{border-color:#ff4d4d;animation:vq-shake .3s;}
@keyframes vq-shake{
  10%,90%{transform:translateX(-1px);}
  20%,80%{transform:translateX(2px);}
  30%,50%,70%{transform:translateX(-4px);}
  40%,60%{transform:translateX(4px);}
}
.vq-phone-wrap .vq-flag{font-size:14px;color:rgba(255,255,255,.7);}
.vq-phone-wrap input{border:none;background:transparent;color:#fff;font-size:16px;padding:14px 0;flex:1;outline:none;font-family:inherit;}
.vq-spacer{flex:1 1 auto;}
.vq-bullets{list-style:none;margin:0 0 28px;padding:0;max-width:420px;}
.vq-bullets li{font-size:14px;color:rgba(255,255,255,.75);padding-left:16px;position:relative;margin-bottom:8px;}
.vq-bullets li::before{content:"–";position:absolute;left:0;}
.vq-consent{display:flex;gap:10px;align-items:flex-start;max-width:420px;font-size:12px;color:rgba(255,255,255,.55);margin-top:16px;}
.vq-consent input{margin-top:2px;flex:none;}
.vq-consent a{color:rgba(255,255,255,.75);text-decoration:underline;}
.vq-footer{display:flex;align-items:center;gap:16px;margin-top:32px;}
.vq-btn{
  border:none;padding:15px 28px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:8px;
}
.vq-btn-primary{background:#d71921;color:#fff;}
.vq-btn-primary:hover{background:#b91319;}
.vq-btn-primary:disabled{background:#5a2226;color:rgba(255,255,255,.5);cursor:not-allowed;}
.vq-btn-back{background:rgba(255,255,255,.08);color:#fff;width:48px;justify-content:center;}
.vq-btn-back:hover{background:rgba(255,255,255,.18);}
.vq-progress{display:flex;gap:4px;margin-bottom:32px;max-width:400px;}
.vq-progress i{flex:1;height:3px;background:rgba(255,255,255,.15);}
.vq-progress i.vq-done{background:#d71921;}
.vq-side{
  flex:0 0 280px;background:#0d0d0d;padding:40px 32px;display:flex;flex-direction:column;
}
.vq-side-label{font-size:12px;color:rgba(255,255,255,.5);margin-bottom:16px;}
.vq-side-card{background:#111;border:1px solid rgba(255,255,255,.1);}
.vq-side-card img{width:100%;display:block;}
.vq-side-card .vq-side-card-title{padding:14px 16px;font-size:14px;font-weight:700;}
.vq-success{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:360px;}
.vq-success-icon{width:56px;height:56px;border-radius:50%;background:#d71921;display:flex;align-items:center;justify-content:center;margin-bottom:24px;font-size:28px;}
@media (max-width:760px){
  .vq-modal{max-width:none;min-height:100vh;max-height:100vh;}
  .vq-main{padding:72px 20px 32px;}
  .vq-side{display:none;}
  .vq-options{grid-template-columns:1fr;max-width:none;}
  .vq-title{font-size:22px;}
}

/* плитки цветов с фото */
.vq-options.vq-colors{grid-template-columns:repeat(3,1fr);max-width:600px;gap:10px;}
.vq-option.vq-color{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;}
.vq-color-img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.vq-color .vq-row{display:flex;align-items:center;gap:10px;padding:10px 12px;}
@media (max-width:760px){.vq-options.vq-colors{grid-template-columns:repeat(2,1fr);max-width:none;}}

/* первый шаг общего квиза (временный каталог марка→модель→двигатель): плитки в 3 колонки */
.vq-options.vq-options_3col{grid-template-columns:repeat(3,1fr);max-width:680px;gap:10px;}
.vq-options_3col .vq-option{padding:14px 12px;justify-content:center;text-align:center;font-size:14px;word-break:break-word;}
.vq-options_3col .vq-option-other{grid-column:1/-1;border-style:dashed;}
@media (max-width:760px){.vq-options.vq-options_3col{grid-template-columns:repeat(2,1fr);max-width:none;}}