/* ECOGEO — Квиз-калькулятор (Этап 4, визуал v2). Бренд: зелёный #1F6B3B / акцент #2E9E5B. */

/* ===== ФОН СЕКЦИИ (В1): тёмный графит + зелёное свечение + тонкая топо-фактура ===== */
.elementor-element-ecgquiz01{
  background-color:#13211a !important;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(46,158,91,.14), transparent 42%),
    radial-gradient(circle at 85% 80%, rgba(31,107,59,.16), transparent 46%),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='640'%20height='640'%3E%3Cg%20fill='none'%20stroke='%23ffffff'%20stroke-opacity='0.035'%20stroke-width='1.4'%3E%3Cpath%20d='M0%2070%20Q160%2030%20320%2070%20T640%2070'/%3E%3Cpath%20d='M0%20150%20Q160%20110%20320%20150%20T640%20150'/%3E%3Cpath%20d='M0%20230%20Q160%20190%20320%20230%20T640%20230'/%3E%3Cpath%20d='M0%20310%20Q160%20270%20320%20310%20T640%20310'/%3E%3Cpath%20d='M0%20390%20Q160%20350%20320%20390%20T640%20390'/%3E%3Cpath%20d='M0%20470%20Q160%20430%20320%20470%20T640%20470'/%3E%3Cpath%20d='M0%20550%20Q160%20510%20320%20550%20T640%20550'/%3E%3Cpath%20d='M0%20630%20Q160%20590%20320%20630%20T640%20630'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size:cover,cover,640px 640px !important;
  background-position:center !important;
  overflow:hidden;
}

.ecg-quiz{--g:#1F6B3B;--g-d:#16532c;--acc:#2E9E5B;--ink:#16241c;--muted:#5b6b62;--line:#dfe7e2;
  position:relative;font-family:"Montserrat",system-ui,Arial,sans-serif;color:var(--ink);max-width:1240px;margin:0 auto;padding:0 clamp(14px,3vw,40px)}
.ecg-quiz *{box-sizing:border-box}

/* ===== ВЕРТИКАЛЬНАЯ НАДПИСЬ (В2) ===== */
.ecg-quiz-vert{position:absolute;left:-18px;top:50%;transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;font-family:"Unbounded",sans-serif;font-weight:600;
  font-size:clamp(46px,5.4vw,92px);line-height:1;letter-spacing:.02em;
  color:rgba(255,255,255,.06);white-space:nowrap;pointer-events:none;user-select:none;z-index:0}
@media(max-width:1200px){.ecg-quiz-vert{display:none}}

/* ===== КАРТОЧКА ===== */
.ecg-quiz-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:0;
  border-radius:24px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45);background:#fff}

/* side panel */
.ecg-quiz-side{background:linear-gradient(160deg,#1F6B3B 0%,#16532c 100%);color:#fff;padding:clamp(28px,3vw,44px);
  display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden}
.ecg-quiz-side::after{content:"";position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(46,158,91,.45),transparent 70%);pointer-events:none}
/* БАГ Б1 — заголовок/текст оффера БЕЛЫЕ (тема красит тёмным) */
.ecg-quiz-side h2{font-family:"Unbounded",sans-serif;font-weight:600;font-size:clamp(22px,2.2vw,30px);line-height:1.2;margin:0;text-transform:none;color:#fff !important;position:relative;z-index:1}
.ecg-quiz-side p{font-size:15px;line-height:1.6;margin:0;color:rgba(255,255,255,.85) !important;position:relative;z-index:1}
.ecg-quiz-offers{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;position:relative;z-index:1}
.ecg-quiz-offers li{position:relative;padding-left:30px;font-size:14.5px;line-height:1.45;color:#fff !important}
.ecg-quiz-offers li::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;
  background:var(--acc) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='white'%20d='M9%2016.2l-3.5-3.5L4%2014.2l5%205%2011-11-1.5-1.5z'/%3E%3C/svg%3E") center/13px no-repeat}
.ecg-quiz-side-foot{margin-top:auto;font-size:13px;color:rgba(255,255,255,.7) !important;position:relative;z-index:1}

/* main panel */
.ecg-quiz-main{padding:clamp(26px,3vw,44px);display:flex;flex-direction:column;min-height:460px}
.ecg-quiz-progress{margin-bottom:26px}
.ecg-quiz-progress-track{height:8px;border-radius:999px;background:#eaf1ed;overflow:hidden}
.ecg-quiz-progress-bar{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--g),var(--acc));width:16.66%;transition:width .45s cubic-bezier(.4,0,.2,1)}
.ecg-quiz-progress-text{margin-top:9px;font-size:13px;font-weight:600;color:var(--muted);transition:opacity .25s ease}
.ecg-quiz-progress-text.is-fade{opacity:0}

.ecg-quiz-form{flex:1;display:flex;flex-direction:column}
.ecg-quiz-step{display:none;flex:1}
.ecg-quiz-step.is-active{display:block}

/* ===== АНИМАЦИИ смены шага + stagger (В4) ===== */
@keyframes ecgSlideIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes ecgRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ecgPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.ecg-quiz-step.is-active{animation:ecgSlideIn .34s cubic-bezier(.22,.9,.3,1)}
.ecg-quiz-step.is-active .ecg-quiz-q{animation:ecgRise .4s ease both;animation-delay:.04s}
.ecg-quiz-step.is-active .ecg-quiz-tiles>*,
.ecg-quiz-step.is-active .ecg-quiz-opts>*,
.ecg-quiz-step.is-active .ecg-quiz-field{animation:ecgRise .4s ease both}
.ecg-quiz-step.is-active .ecg-quiz-tiles>*:nth-child(1),
.ecg-quiz-step.is-active .ecg-quiz-opts>*:nth-child(1){animation-delay:.10s}
.ecg-quiz-step.is-active .ecg-quiz-tiles>*:nth-child(2),
.ecg-quiz-step.is-active .ecg-quiz-opts>*:nth-child(2){animation-delay:.16s}
.ecg-quiz-step.is-active .ecg-quiz-tiles>*:nth-child(3),
.ecg-quiz-step.is-active .ecg-quiz-opts>*:nth-child(3){animation-delay:.22s}
.ecg-quiz-step.is-active .ecg-quiz-tiles>*:nth-child(4){animation-delay:.28s}

.ecg-quiz-q{font-family:"Unbounded",sans-serif;font-weight:600;font-size:clamp(18px,1.8vw,23px);line-height:1.3;margin:0 0 20px;color:var(--ink);text-transform:none}

/* ===== ПЛИТКИ с фото-обложкой (В3) ===== */
.ecg-quiz-tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ecg-quiz-tile{position:relative;display:flex;flex-direction:column;border:2px solid var(--line);border-radius:16px;
  cursor:pointer;overflow:hidden;background:#fff;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.ecg-quiz-tile input{position:absolute;opacity:0;pointer-events:none}
.ecg-quiz-tile .ecg-tile-ico{display:flex;align-items:center;justify-content:center;height:108px;
  background:linear-gradient(150deg,#214a36,#16532c 60%,#1F6B3B);color:rgba(255,255,255,.9);position:relative;
  border-bottom:1px solid var(--line)}
.ecg-quiz-tile .ecg-tile-ico::before{content:"";position:absolute;inset:0;opacity:.5;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='120'%3E%3Cg%20fill='none'%20stroke='%23ffffff'%20stroke-opacity='0.10'%20stroke-width='1.2'%3E%3Cpath%20d='M0%2030%20Q50%2010%20100%2030%20T200%2030'/%3E%3Cpath%20d='M0%2060%20Q50%2040%20100%2060%20T200%2060'/%3E%3Cpath%20d='M0%2090%20Q50%2070%20100%2090%20T200%2090'/%3E%3C/g%3E%3C/svg%3E") center/cover}
.ecg-quiz-tile .ecg-tile-ico svg{width:42px;height:42px;position:relative;z-index:1}
.ecg-quiz-tile .ecg-tile-t{font-weight:600;font-size:16px;color:var(--ink);text-align:center;padding:16px 12px}
.ecg-quiz-tile:hover{border-color:var(--acc);transform:translateY(-3px);box-shadow:0 14px 30px rgba(20,40,30,.16)}
.ecg-quiz-tile:has(input:checked){border-color:var(--g);transform:translateY(-3px);box-shadow:0 14px 32px rgba(31,107,59,.22)}
.ecg-quiz-tile:has(input:checked)::after{content:"";position:absolute;top:10px;right:10px;width:24px;height:24px;border-radius:50%;
  background:var(--g) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='white'%20d='M9%2016.2l-3.5-3.5L4%2014.2l5%205%2011-11-1.5-1.5z'/%3E%3C/svg%3E") center/15px no-repeat;
  z-index:2;animation:ecgPop .3s cubic-bezier(.2,1.4,.4,1) both;box-shadow:0 3px 8px rgba(0,0,0,.25)}

/* option rows */
.ecg-quiz-opts{display:flex;flex-direction:column;gap:12px}
.ecg-quiz-opt{position:relative;display:flex;align-items:center;gap:14px;padding:16px 18px;border:2px solid var(--line);
  border-radius:14px;cursor:pointer;transition:all .2s ease;font-size:15.5px;background:#fff}
.ecg-quiz-opt input{position:absolute;opacity:0;pointer-events:none}
.ecg-quiz-opt .ecg-radio{width:22px;height:22px;border:2px solid #c2d2c9;border-radius:50%;flex:0 0 auto;transition:all .2s;position:relative}
.ecg-quiz-opt:hover{border-color:var(--acc);background:#f4faf6;transform:translateY(-1px)}
.ecg-quiz-opt:has(input:checked){border-color:var(--g);background:#eef6f1}
.ecg-quiz-opt:has(input:checked) .ecg-radio{border-color:var(--g);background:var(--g)}
.ecg-quiz-opt:has(input:checked) .ecg-radio::after{content:"";position:absolute;inset:4px;background:#fff;border-radius:50%;animation:ecgPop .25s ease both}

/* textarea + phone */
.ecg-quiz-field label{display:block;font-weight:600;font-size:14px;margin-bottom:8px;color:var(--ink)}
.ecg-quiz-input,.ecg-quiz-textarea{width:100%;border:2px solid var(--line);border-radius:14px;padding:14px 16px;
  font-family:"Montserrat",sans-serif;font-size:15.5px;color:var(--ink);background:#fff;transition:border-color .2s,box-shadow .2s}
.ecg-quiz-textarea{min-height:120px;resize:vertical}
.ecg-quiz-input:focus,.ecg-quiz-textarea:focus{outline:none;border-color:var(--g);box-shadow:0 0 0 3px rgba(31,107,59,.12)}
.ecg-quiz-consent{font-size:12px;line-height:1.5;color:#8a978f;margin:14px 0 0}

/* validation hint */
.ecg-quiz-err{display:none;margin-top:14px;font-size:13.5px;color:#c0392b;font-weight:600;animation:ecgRise .25s ease}
.ecg-quiz-step.has-error .ecg-quiz-err{display:block}

/* ===== НАВИГАЦИЯ + БАГ Б2 (ровная «Далее» на шаге 1) ===== */
.ecg-quiz-nav{display:flex;gap:12px;align-items:center;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.ecg-quiz-btn{appearance:none;border:2px solid transparent;border-radius:999px;font-family:"Unbounded",sans-serif;font-weight:500;
  font-size:14px;height:50px;padding:0 26px;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:8px;text-transform:none;box-sizing:border-box}
.ecg-quiz-back{background:#fff;border-color:var(--line);color:var(--ink)}
.ecg-quiz-back:hover{border-color:var(--g);color:var(--g);transform:translateY(-1px)}
.ecg-quiz-next,.ecg-quiz-submit{background:var(--g);color:#fff;margin-left:auto !important}
.ecg-quiz-next:hover,.ecg-quiz-submit:hover{background:var(--g-d);transform:translateY(-1px);box-shadow:0 8px 20px rgba(31,107,59,.28)}
/* Б2: на шаге без «Назад» — «Далее» прижата ВЛЕВО, без зарезервированного пустого слота */
.ecg-quiz-nav.is-first .ecg-quiz-back{display:none !important}
.ecg-quiz-nav.is-first .ecg-quiz-next,
.ecg-quiz-nav.is-first .ecg-quiz-submit{margin-left:0 !important}
.ecg-quiz-next::after,.ecg-quiz-submit::after{content:"";width:16px;height:16px;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M4%2011h12.2l-3.6-3.6L14%206l6%206-6%206-1.4-1.4%203.6-3.6H4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M4%2011h12.2l-3.6-3.6L14%206l6%206-6%206-1.4-1.4%203.6-3.6H4z'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s}
.ecg-quiz-next:hover::after,.ecg-quiz-submit:hover::after{transform:translateX(3px)}

/* ===== БЛАГОДАРНОСТЬ + анимация успеха (В4) ===== */
.ecg-quiz-thanks{display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;flex:1;gap:14px;padding:30px 10px}
.ecg-quiz-thanks.is-on{display:flex}
.ecg-quiz-thanks.is-on h3{animation:ecgRise .5s ease both;animation-delay:.35s}
.ecg-quiz-thanks.is-on p{animation:ecgRise .5s ease both;animation-delay:.5s}
.ecg-quiz-thanks-ico{width:84px;height:84px;border-radius:50%;background:var(--g);display:flex;align-items:center;justify-content:center;position:relative}
.ecg-quiz-thanks.is-on .ecg-quiz-thanks-ico{animation:ecgRingPop .55s cubic-bezier(.2,1.3,.35,1) both}
@keyframes ecgRingPop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.ecg-quiz-thanks-ico svg{width:42px;height:42px}
.ecg-quiz-thanks-ico svg path{stroke-dasharray:40;stroke-dashoffset:40}
.ecg-quiz-thanks.is-on .ecg-quiz-thanks-ico svg path{animation:ecgDraw .5s ease forwards;animation-delay:.4s}
@keyframes ecgDraw{to{stroke-dashoffset:0}}
.ecg-quiz-thanks h3{font-family:"Unbounded",sans-serif;font-weight:600;font-size:24px;margin:0;color:var(--ink);text-transform:none}
.ecg-quiz-thanks p{font-size:15.5px;line-height:1.6;color:var(--muted);margin:0;max-width:420px}
.ecg-quiz-form.is-busy{opacity:.6;pointer-events:none}

/* ===== АДАПТИВ ===== */
@media(max-width:860px){
  .ecg-quiz-inner{grid-template-columns:1fr}
  .ecg-quiz-side{order:2}
  .ecg-quiz-side-foot{display:none}
  .ecg-quiz-main{order:1;min-height:0}
}
@media(max-width:480px){
  .ecg-quiz-tiles{grid-template-columns:1fr}
  .ecg-quiz-tile .ecg-tile-ico{height:92px}
  .ecg-quiz-nav{flex-wrap:wrap}
  .ecg-quiz-btn{height:48px;padding:0 20px;font-size:13.5px}
  .ecg-quiz-next,.ecg-quiz-submit{flex:1;justify-content:center}
  .ecg-quiz-nav.is-first .ecg-quiz-next,.ecg-quiz-nav.is-first .ecg-quiz-submit{flex:1}
}

/* ===== reduced-motion ===== */
@media(prefers-reduced-motion:reduce){
  .ecg-quiz *,.ecg-quiz-thanks *{animation:none !important;transition:none !important}
}