/*
 * Блок v2 «Hero виджета» (acf/wx-whero) и интерактивные демо (template-parts/v2/demo/).
 * Источник — design/pages/widget-visit-history.html (+ -mobile). Иллюстрация «окна amoCRM» — Golos Text с системным запасным.
 */

.v2 .wx-whero{--wx-amo-font:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  display:flex;align-items:center;gap:56px;padding-top:56px;padding-bottom:64px;}
.v2 .wx-content>.wx-whero{margin-bottom:0;}
.v2 .wx-whero__l{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:20px;}
.v2 .wx-whero__badges{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.v2 .wx-whero__badges .wx-plate{width:64px;height:64px;}
.v2 .wx-whero__badges .wx-plate img{width:30px;height:30px;}
.v2 .wx-whero__badges .wx-plate--none img{width:64px;height:64px;}
.v2 .wx-whero__badges a.wx-price__from{text-decoration:underline;text-decoration-color:var(--line-1);text-underline-offset:3px;}
.v2 .wx-whero__badges a.wx-price__from:hover{color:var(--text-primary);}
.v2 .wx-whero .wx-h1.wx-grad{background-image:linear-gradient(90deg,var(--orange-2),var(--red-2),var(--orange-1),var(--orange-2));background-size:200% 100%;
  animation:wx-shimmer 6s 1s linear 3;}
@keyframes wx-shimmer{0%{background-position:0% 50%;}100%{background-position:200% 50%;}}
.v2 .wx-wmeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:var(--fs-small);color:var(--text-muted);}
.v2 .wx-wmeta__rc{color:var(--text-secondary);}
.v2 .wx-wmeta__dot{color:var(--lavender-3);}
.v2 .wx-whero__act{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;}
.v2 .wx-whero__act .wx-btn,.v2 .wx-whero__act .wx-btn-o{min-height:50px;}
.v2 .wx-whero__r{flex:0 0 600px;min-width:0;}
.v2 .wx-whero__pic img{display:block;width:100%;height:auto;border-radius:var(--radius-lg);}

/* ===== Демо «История посещений» ===== */
.v2 .wx-hv{position:relative;padding:22px 18px 30px;font-family:var(--wx-amo-font);}
.v2 .wx-hv__w{border-radius:14px;overflow:hidden;background:#f4f6f8;box-shadow:0 30px 60px -20px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.12);
  animation:wx-floaty 7s 1.4s ease-in-out infinite;animation-play-state:var(--wx-play,running);}
html[data-theme="light"] .v2 .wx-hv__w{box-shadow:0 30px 60px -24px rgba(60,30,90,.35),0 0 0 1px rgba(23,20,31,.08);}
.v2 .wx-hv__t{height:44px;display:flex;align-items:center;gap:10px;padding:0 14px;background:#fff;border-bottom:1px solid #e3e7ea;font:600 13px/1 var(--wx-amo-font);color:#1d2b36;}
.v2 .wx-hv__yico{width:24px;height:24px;border-radius:6px;background:linear-gradient(135deg,#ef4444,#be123c);color:#fff;display:flex;align-items:center;justify-content:center;}
.v2 .wx-hv__t small{margin-left:auto;font:400 11px/1 var(--wx-amo-font);color:#56636d;}
.v2 .wx-hv__h,.v2 .wx-hv__r{display:grid;grid-template-columns:1.1fr .8fr 1.4fr 1fr;gap:10px;align-items:center;padding:0 14px;}
.v2 .wx-hv__h{height:36px;background:#fff;border-bottom:1px solid #e3e7ea;}
.v2 .wx-hv__h button{display:inline-flex;align-items:center;gap:4px;min-height:28px;padding:0;border:0;background:none;cursor:pointer;font:600 10px/1 var(--wx-amo-font);
  text-transform:uppercase;letter-spacing:.04em;color:#2563d9;text-align:left;}
.v2 .wx-hv__h button:focus-visible{outline:2px solid #2563d9;outline-offset:2px;border-radius:4px;}
.v2 .wx-hv__h span{font:600 10px/1 var(--wx-amo-font);text-transform:uppercase;letter-spacing:.04em;color:#56636d;}
.v2 .wx-hv__r{min-height:38px;background:#fff;border-bottom:1px solid #eef1f3;font:400 11px/1.25 var(--wx-amo-font);color:#1d2b36;}
.v2 .wx-hv__r[hidden]{display:none;}
.v2 .wx-hv__r b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.v2 .wx-hv__r em{font-style:normal;font-size:10px;padding:3px 6px;border-radius:3px;background:#e5eeff;color:#0057a9;justify-self:start;}
.v2 .wx-hv__r span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.v2 .wx-hv__r small{font-size:10px;color:#56636d;}
.v2 .wx-hv__p{display:flex;justify-content:space-between;align-items:center;height:36px;padding:0 14px;background:#fff;font:400 10px/1 var(--wx-amo-font);color:#56636d;}
.v2 .wx-hv__pg{display:flex;gap:4px;}
.v2 .wx-hv__pg i{font-style:normal;width:20px;height:20px;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#1d2b36;}
.v2 .wx-hv__pg i.on{background:#2563d9;color:#fff;}
.v2 .wx-hv__pop{position:absolute;z-index:4;top:104px;left:30px;width:210px;padding:12px;border-radius:8px;background:#fff;
  box-shadow:0 12px 32px rgba(27,52,70,.25),0 0 0 1px #e3e7ea;display:flex;flex-direction:column;gap:8px;font:400 12px/1.2 var(--wx-amo-font);color:#1d2b36;}
.v2 .wx-hv__pop[hidden]{display:none;}
.v2 .wx-hv__pop label{display:flex;align-items:center;gap:8px;min-height:24px;cursor:pointer;}
.v2 .wx-hv__pop input{width:14px;height:14px;accent-color:#2563d9;}
.v2 .wx-hv__popb{height:30px;border:0;border-radius:4px;background:#2563d9;color:#fff;font:500 12px/1 var(--wx-amo-font);cursor:pointer;}
.v2 .wx-hv__popb:focus-visible,.v2 .wx-hv__x:focus-visible{outline:2px solid var(--orange-1);outline-offset:2px;}
.v2 .wx-hv__chip{position:absolute;z-index:3;right:-14px;top:0;display:flex;align-items:center;gap:9px;padding:7px 14px 7px 7px;border-radius:12px;
  background:#1b1720;border:1px solid rgba(255,255,255,.16);box-shadow:0 14px 30px -10px rgba(0,0,0,.7);font:500 12px/1 var(--wx-amo-font);color:#fff;white-space:nowrap;
  animation:wx-pop .6s var(--ease-standard) both;}
.v2 .wx-hv__chip[hidden]{display:none;}
.v2 .wx-hv__chip .wx-ico{width:26px;height:26px;border-radius:8px;}
.v2 .wx-hv__x{display:inline-flex;width:20px;height:20px;border-radius:50%;align-items:center;justify-content:center;background:#2563d9;color:#fff;cursor:pointer;border:0;padding:0;}


/* ===== Демо «Время на этапе» (template-parts/v2/demo/time-in-stage.php): панель виджета, этапы сделки — по строке на этап ===== */
.v2 .wx-tis{position:relative;padding:22px 18px 30px;font-family:var(--wx-amo-font);} /* размеры окна — как у .wx-hv */
.v2 .wx-tis__w{border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -20px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.12);
  animation:wx-floaty 7s 1.4s ease-in-out infinite;animation-play-state:var(--wx-play,running);}
html[data-theme="light"] .v2 .wx-tis__w{box-shadow:0 30px 60px -24px rgba(60,30,90,.35),0 0 0 1px rgba(23,20,31,.08);}
.v2 .wx-tis__t{height:44px;display:flex;align-items:center;gap:10px;padding:0 14px;background:#241a3a;font:700 12px/1 var(--wx-amo-font);letter-spacing:.04em;text-transform:uppercase;color:#fff;}
.v2 .wx-tis__ico{width:24px;height:24px;border-radius:6px;background:var(--accent-gradient);color:#fff;display:flex;align-items:center;justify-content:center;}
.v2 .wx-tis__rows{margin:0;padding:4px 0;list-style:none;}
.v2 .wx-tis__r{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:46px;padding:6px 14px;border-bottom:1px solid #eef1f3;}
.v2 .wx-tis__r:last-child{border-bottom:0;}
.v2 .wx-tis__d{display:flex;align-items:baseline;gap:6px;font:400 11px/1.3 var(--wx-amo-font);color:#56636d;}
.v2 .wx-tis__d b{font-weight:600;font-size:12px;color:#1d2b36;}
.v2 .wx-tis__d small{font-size:10px;}
.v2 .wx-tis__sr{position:relative;display:flex;align-items:center;gap:6px;min-width:0;}
.v2 .wx-tis__st{min-width:0;padding:4px 8px;border-radius:4px;font:500 12px/1.25 var(--wx-amo-font);color:#1d2b36;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.v2 .wx-tis__st--blue{background:#99ccff;}   /* цвета этапов — как в воронке amoCRM (скриншоты документации) */
.v2 .wx-tis__st--yellow{background:#ffff99;}
.v2 .wx-tis__st--pink{background:#ffcccc;}
.v2 .wx-tis__again{flex:none;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#22c55e,#0d9488);color:#fff;}
/* подсказка у строки повторного захода: пузырь со стрелкой к зелёному значку, внутри окна */
.v2 .wx-tis__tip{position:relative;flex:0 1 auto;max-width:170px;margin-left:4px;padding:5px 9px;border-radius:8px;background:#1b1720;box-shadow:0 10px 24px -10px rgba(0,0,0,.6);
  font:500 11px/1.2 var(--wx-amo-font);color:#fff;}
.v2 .wx-tis__sr:has(.wx-tis__tip) .wx-tis__st{flex:none;} /* плашку этапа подсказка не сжимает */
.v2 .wx-tis__tip::before{content:"";position:absolute;left:-5px;top:50%;width:10px;height:10px;background:#1b1720;transform:translateY(-50%) rotate(45deg);border-radius:2px;}
.v2 .wx-tis__tm{display:flex;align-items:center;justify-content:flex-end;gap:4px;font:400 11.5px/1.3 var(--wx-amo-font);color:#3d4a55;white-space:nowrap;}
.v2 .wx-tis__dur{font-weight:600;color:#1d2b36;}
.v2 .wx-tis__tm em{margin-left:6px;padding:2px 7px;border-radius:999px;background:#fdece4;font:600 10px/1.4 var(--wx-amo-font);font-style:normal;color:#9f3a14;}
.v2 .wx-tis__r--now{background:#fff8f4;box-shadow:inset 3px 0 0 #e96b3b;}
/* Первая строка видна всегда; остальные — с шагом 80 мс при первом попадании в экран (вся анимация ≤ 0,5 с).
   .is-armed / .is-seen ставит widget.js; без JS и при reduced motion всё видно сразу. */
.v2 .wx-tis.is-armed:not(.is-seen) :is(.wx-tis__r:not(:first-child),.wx-tis__tip){opacity:0;}
.v2 .wx-tis.is-armed.is-seen .wx-tis__r:not(:first-child){animation:wx-tis-in .18s ease-out both;animation-delay:calc((var(--i) - 1) * 80ms);}
.v2 .wx-tis.is-armed.is-seen .wx-tis__tip{animation:wx-tis-in .18s ease-out .32s both;}
@keyframes wx-tis-in{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
/* узкое окно (телефон): время и длительность — второй строкой, без подписи «Воронка» */
@media (max-width:600px){
  .v2 .wx-tis{padding:8px 0 12px;}
  .v2 .wx-tis__r{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"d s" "t t";row-gap:3px;column-gap:10px;padding:5px 12px;min-height:0;}
  .v2 .wx-tis__d{grid-area:d;}
  .v2 .wx-tis__d small{display:none;}
  .v2 .wx-tis__sr{grid-area:s;}
  .v2 .wx-tis__tm{grid-area:t;justify-content:flex-start;padding-left:46px;}
  .v2 .wx-tis__tip{white-space:normal;max-width:160px;padding:4px 8px;font-size:10.5px;line-height:1.15;}
}

@media (max-width:1179px){
  .v2 .wx-whero{flex-direction:column;align-items:stretch;gap:24px;}
  .v2 .wx-whero__r{flex:none;width:100%;max-width:600px;margin-inline:auto;}
}
@media (max-width:767px){
  .v2 .wx-whero{padding-top:24px;padding-bottom:40px;}
  .v2 .wx-whero .wx-lead{font-size:var(--fs-body);}
  .v2 .wx-whero .wx-h1.wx-grad{animation:none;}
  .v2 .wx-whero__act{flex-direction:column;}
  .v2 .wx-whero__act a{width:100%;}
  .v2 .wx-hv{padding:18px 0 30px;}
  .v2 .wx-hv__h,.v2 .wx-hv__r{grid-template-columns:1fr .9fr 1.1fr;}
  .v2 .wx-hv__h>*:nth-child(4),.v2 .wx-hv__r>*:nth-child(4){display:none;}
  .v2 .wx-hv__pop{left:10px;}
  .v2 .wx-hv__chip{right:4px;}
}
@media (prefers-reduced-motion:reduce){
  .v2 .wx-hv__w,.v2 .wx-whero .wx-h1.wx-grad,.v2 .wx-tis__w,.v2 .wx-tis :is(.wx-tis__r,.wx-tis__tip){animation:none;}
  .v2 .wx-tis :is(.wx-tis__r,.wx-tis__tip){opacity:1;}
}

/* ===== «Бесплатно всегда» в hero — крупнее, как в макете widget-telegram.html (.chip-free.big) ===== */
.v2 .wx-whero__badges .wx-chip-free{font-size:14px;padding:7px 12px;}

/* ===== Демо «Уведомление в Telegram» (макет widget-telegram.html, .tn) ===== */
.v2 .wx-tn{position:relative;padding:20px 0 190px;font-family:var(--wx-amo-font);}
.v2 .wx-tn__crm{position:relative;border-radius:24px;overflow:hidden;background:#f5f6f8;color:#1f2430;box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08);}
html[data-theme="light"] .v2 .wx-tn__crm{box-shadow:0 30px 60px -24px rgba(60,30,90,.35),0 0 0 1px rgba(23,20,31,.08);}
.v2 .wx-tn__top{display:flex;align-items:center;gap:10px;padding:14px 18px;background:#fff;border-bottom:1px solid #e6e8ec;font-weight:700;font-size:14px;}
.v2 .wx-tn__top small{margin-left:auto;font-weight:500;font-size:12px;color:#5f6673;}
.v2 .wx-tn__dot{width:26px;height:26px;border-radius:8px;background:#2563d9;color:#fff;display:flex;align-items:center;justify-content:center;}
.v2 .wx-tn__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:14px;min-height:236px;}
.v2 .wx-tn__col{display:flex;flex-direction:column;gap:8px;min-width:0;}
.v2 .wx-tn__col .wx-tn__ch{margin:0;padding-bottom:8px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#4d5562;border-bottom:3px solid var(--c);}
.v2 .wx-tn__col .wx-tn__ch i{font-style:normal;color:#6b7280;font-weight:600;margin-left:4px;}
.v2 .wx-tn__trg{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;background:rgba(42,171,238,.1);color:#16658f;font-size:11px;font-weight:600;}
.v2 .wx-tn__trg img{width:14px;height:14px;}
.v2 .wx-tn__deal{display:flex;flex-direction:column;gap:3px;padding:10px;border-radius:10px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06),0 0 0 1px #e6e8ec;font-size:12px;}
.v2 .wx-tn__deal[hidden]{display:none;}
.v2 .wx-tn__deal b{font-size:12.5px;}
.v2 .wx-tn__deal span{color:#4d5562;}
.v2 .wx-tn__deal em{font-style:normal;font-weight:700;color:#1f2430;}
.v2 .wx-tn__deal--me{box-shadow:0 0 0 2px #e96b3b,0 10px 20px -10px rgba(233,107,59,.6);animation:wx-pop .45s var(--ease-standard);}
.v2 .wx-tn__deal--ghost{opacity:.55;}
.v2 .wx-tn__deal--ghost b,.v2 .wx-tn__deal--ghost span{color:#000;} /* при opacity .55 — #737373, контраст 4.5:1 */
.v2 .wx-tn__act{display:flex;gap:10px;align-items:center;padding:0 14px 14px;}
.v2 .wx-tn__act button{border:0;cursor:pointer;font:inherit;font-size:13px;font-weight:600;padding:10px 16px;border-radius:999px;background:var(--accent-gradient);color:#fff;
  box-shadow:0 10px 20px -10px rgba(224,64,76,.8);transition:transform .3s var(--ease-standard),filter .3s;}
.v2 .wx-tn__act button:hover{transform:translateY(-2px);filter:brightness(1.07);}
.v2 .wx-tn__act button:focus-visible{outline:2px solid #2563d9;outline-offset:2px;}
.v2 .wx-tn__act button[hidden]{display:none;}
.v2 .wx-tn__act .wx-tn__ghost{background:#e9ebef;color:#3a404c;box-shadow:none;}
.v2 .wx-tn__tg{position:absolute;right:-24px;bottom:0;z-index:2;width:290px;border-radius:22px;overflow:hidden;background:#17212b;color:#e9eef3;
  box-shadow:0 40px 80px -24px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.08);animation:wx-floaty 7s ease-in-out infinite;animation-play-state:var(--wx-play,running);}
.v2 .wx-tn__tgh{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#232e3c;}
.v2 .wx-tn__tgh img{width:32px;height:32px;border-radius:50%;}
.v2 .wx-tn__tgh b{display:block;font-size:13.5px;}
.v2 .wx-tn__tgh small{font-size:11.5px;color:#8b98a5;}
.v2 .wx-tn__tgb{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;height:196px;padding:12px;overflow:hidden;background:linear-gradient(180deg,#0e1621,#17212b);}
.v2 .wx-tn__msg{align-self:flex-start;max-width:92%;padding:9px 12px 7px;border-radius:14px 14px 14px 4px;background:#182533;box-shadow:0 0 0 1px rgba(255,255,255,.05);
  font-size:12.5px;line-height:1.45;white-space:pre-line;animation:wx-pop .45s var(--ease-standard);}
.v2 .wx-tn__msg b{color:#fff;}
.v2 .wx-tn__msg small{display:block;margin-top:2px;text-align:right;font-size:10.5px;color:#8b98a5;}
.v2 .wx-tn__empty{margin:auto;font-size:12px;color:#8b98a5;text-align:center;}
.v2 .wx-tn__empty[hidden]{display:none;}
.v2 .wx-tn__badge{position:absolute;left:-16px;bottom:96px;z-index:3;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;font-size:13px;font-weight:600;
  color:var(--text-primary);background:var(--lg-sheen),var(--lg-fill);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);box-shadow:var(--lg-edge),var(--lg-drop);
  animation:wx-floaty 6s 1s ease-in-out infinite;animation-play-state:var(--wx-play,running);}
.v2 .wx-tn__badge span{display:flex;color:#7fd6a0;}
html[data-theme="light"] .v2 .wx-tn__badge span{color:#1b8a4b;}
@media (max-width:767px){
  .v2 .wx-tn{padding:20px 0 250px;}
  .v2 .wx-tn__cols{gap:6px;padding:10px;min-height:200px;}
  .v2 .wx-tn__col .wx-tn__ch{font-size:9px;}
  .v2 .wx-tn__trg{font-size:9.5px;padding:5px 6px;}
  .v2 .wx-tn__deal{padding:7px;font-size:10.5px;}
  .v2 .wx-tn__deal b{font-size:11px;}
  .v2 .wx-tn__tg{right:8px;left:8px;width:auto;}
  .v2 .wx-tn__badge{left:auto;right:8px;bottom:auto;top:0;font-size:12px;padding:8px 12px;}
  .v2 .wx-tn__act{flex-wrap:wrap;}
}
@media (prefers-reduced-motion:reduce){.v2 .wx-tn__tg,.v2 .wx-tn__badge,.v2 .wx-tn__deal--me,.v2 .wx-tn__msg{animation:none;}}
.v2 .wx-whero__r:has(.wx-tn){flex-basis:580px;} /* макет widget-telegram.html: колонка демо 580 px */
/* Первый экран на ноутбуках 16:10 (окно 1280×800 и ниже по высоте): демо / картинка справа уменьшаются целиком — zoom меняет и место в раскладке (09.10.2026). */
@media (min-width:1180px) and (max-height:760px){.v2 .wx-whero__r{zoom:.9;}}
@media (min-width:1180px) and (max-height:700px){.v2 .wx-whero__r{zoom:.82;}}
@media (min-width:1180px) and (max-height:640px){.v2 .wx-whero__r{zoom:.74;}}
@media (min-width:1180px) and (max-height:580px){.v2 .wx-whero__r{zoom:.66;}}