/* 14.10.2026 (Павел): значок «?» рядом с названием «Мой Путь» и окно-пояснение. Логика — path-info.js */
.pi-badge{
  --pi-size:17px;
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:var(--pi-size);height:var(--pi-size);min-width:0;margin:0 0 0 .38em;padding:0;
  border:1px solid #b9a6f5a6;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#3a2c86 0%,#1d1550 70%);
  color:#e6dcff;font:500 calc(var(--pi-size)*.66)/1 Lora,Georgia,serif;letter-spacing:0;text-transform:none;
  vertical-align:.18em;cursor:pointer;position:relative;
  box-shadow:0 0 0 0 #a58cff00;transition:border-color .2s,box-shadow .25s,transform .2s,color .2s;
  -webkit-tap-highlight-color:transparent;
}
.pi-badge::after{content:"";position:absolute;inset:-9px;border-radius:50%}/* больше зона касания, размер значка не меняется */
.pi-badge:hover,.pi-badge[aria-expanded="true"]{border-color:#d0bcfa;color:#fff;box-shadow:0 0 0 3px #8f7fff26,0 0 14px #a58cff66}
.pi-badge:focus-visible{outline:2px solid #c9bcff;outline-offset:3px}
.pi-badge--lg{--pi-size:22px;vertical-align:.35em;margin-left:.3em}
.pi-badge--sm{--pi-size:15px;vertical-align:.08em}
/* в шапке: значок стоит в промежутке после пункта меню и не раздвигает соседей */
/* ширина значка + промежуток гасятся отрицательными полями: пункты меню не сдвигаются */
body > header.lilit-header nav .pi-badge{--pi-size:16px;align-self:center;margin:0 -21px 0 -13px;vertical-align:middle}
@media (max-width:1340px){body > header.lilit-header nav .pi-badge{margin:0 -21px 0 -19px}}
@media (max-width:680px){body > header.lilit-header nav .pi-badge{margin:0 0 0 -24px}
  /* 21.10.2026: место под значок занято полем у пункта «Мой Путь» заранее — ленточка меню не дёргается, когда значок появляется */
  body.site-unified > header.lilit-header nav a[href="/moj-put/"]{margin-right:21px}}
.pi-badge.pi-pulse{animation:pi-pulse 1.5s ease-out .8s 2}
@keyframes pi-pulse{0%{box-shadow:0 0 0 0 #b49cff80}70%{box-shadow:0 0 0 8px #b49cff00}100%{box-shadow:0 0 0 0 #b49cff00}}

.pi-more{display:inline-flex;align-items:center;gap:6px;margin:-2px 0 12px;padding:2px 0;border:0;background:none;
  color:#d0bcfa;font:500 13px/1.4 Manrope,Arial,sans-serif;letter-spacing:.01em;text-transform:none;cursor:pointer;
  text-decoration:underline;text-decoration-color:#d0bcfa66;text-underline-offset:3px;justify-self:start;align-self:flex-start}
.pi-more:hover{color:#fff;text-decoration-color:#fff}
.pi-more:focus-visible{outline:2px solid #c9bcff;outline-offset:3px;border-radius:4px}

.pi-pop{
  position:fixed;z-index:2147483000;top:0;left:0;box-sizing:border-box;
  width:min(380px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto;overscroll-behavior:contain;
  padding:24px 24px 22px;border:1px solid #8f7fff4d;border-radius:20px;
  background:radial-gradient(120% 70% at 85% 0%,#4a2fa040 0%,transparent 60%),linear-gradient(160deg,#21175a 0%,#160f3f 55%,#0f0a2e 100%);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 22px 60px #05031a99,0 0 0 1px #ffffff08 inset,0 0 40px #7b5cff2e;
  color:#e9e4ff;font:400 14px/1.55 Manrope,Arial,sans-serif;text-align:left;letter-spacing:normal;text-transform:none;
  opacity:0;transform:translateY(6px) scale(.98);transform-origin:var(--pi-origin,50% 0);
  transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.2,1);pointer-events:none;visibility:hidden;
}
.pi-pop.is-open{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.pi-pop:focus{outline:none}
.pi-pop *{box-sizing:border-box}
.pi-arrow{position:absolute;top:-7px;left:var(--pi-arrow,50%);width:12px;height:12px;margin-left:-6px;transform:rotate(45deg);
  background:#21175a;border-left:1px solid #8f7fff4d;border-top:1px solid #8f7fff4d}
.pi-pop.is-above .pi-arrow{top:auto;bottom:-7px;transform:rotate(225deg);background:#120c34}
.pi-close{position:absolute;top:12px;right:12px;width:30px;height:30px;display:grid;place-items:center;padding:0;
  border:1px solid #8f7fff33;border-radius:50%;background:#ffffff0a;color:#cfc4f5;font:400 14px/1 Manrope,Arial,sans-serif;cursor:pointer;transition:background .2s,color .2s}
.pi-close:hover{background:#ffffff1a;color:#fff}
.pi-close:focus-visible{outline:2px solid #c9bcff;outline-offset:2px}
html body .pi-pop .pi-title{margin:0 34px 10px 0;padding:0;max-width:none;font:500 21px/1.25 Lora,Georgia,serif;color:#fff;letter-spacing:0;text-transform:none;text-align:left}
html body .pi-pop .pi-title b{font-weight:500;color:#d0bcfa}
html body .pi-pop .pi-lead{max-width:none;font-size:14px;line-height:1.55;margin:0 0 14px;color:#cfc8ee}
.pi-list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.pi-list li{display:grid;grid-template-columns:26px 1fr;gap:8px;align-items:start;margin:0;padding:0;color:#ece8ff;font-size:13.5px;line-height:1.45}
.pi-list li::before{content:none}
.pi-ico{display:grid;place-items:center;width:26px;height:22px;font-size:15px;line-height:1;color:#d0bcfa}
html body .pi-pop .pi-accent{max-width:none;margin:0 0 12px;padding:10px 14px;border-left:2px solid #d0bcfa;border-radius:0 12px 12px 0;background:#8f7fff17;
  font:italic 400 15px/1.4 Lora,Georgia,serif;color:#f1ecff}
html body .pi-pop .pi-price{max-width:none;line-height:1.5;margin:0 0 16px;color:#bdb4e6;font-size:13px}
.pi-price b{color:#fff;font-weight:600}
.pi-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.pi-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:999px;
  background:linear-gradient(135deg,#b79cff 0%,#8d6cf2 100%);color:#140d38;font:700 14px/1 Manrope,Arial,sans-serif;text-decoration:none;
  box-shadow:0 8px 22px #8d6cf259;transition:transform .2s,box-shadow .2s;border:0;cursor:pointer}
.pi-cta:hover{transform:translateY(-1px);box-shadow:0 10px 28px #8d6cf280;color:#140d38}
.pi-cta:focus-visible,.pi-link:focus-visible{outline:2px solid #fff;outline-offset:3px}
.pi-link{color:#d0bcfa;font-size:13px;text-decoration:underline;text-decoration-color:#d0bcfa66;text-underline-offset:3px}
.pi-link:hover{color:#fff}
.pi-backdrop{position:fixed;inset:0;z-index:2147482999;background:#05031a99;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}

/* телефон: нижняя шторка */
@media (max-width:600px){
  .pi-pop{top:auto!important;left:0!important;right:0;bottom:0;width:100%;max-height:86vh;max-height:86dvh;
    border-radius:22px 22px 0 0;border-bottom:0;padding:26px 20px calc(22px + env(safe-area-inset-bottom));transform:translateY(24px)}
  .pi-pop.is-open{transform:none}
  .pi-pop::before{content:"";position:absolute;top:9px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:#ffffff2e}
  .pi-arrow{display:none}
  .pi-backdrop.is-open{opacity:1;visibility:visible}
  .pi-cta{flex:1 1 100%}
  .pi-actions{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .pi-badge.pi-pulse{animation:none}
  .pi-pop,.pi-backdrop,.pi-badge{transition:none}
}
/* дневная тема инвертирует всю страницу — смайлики возвращаем в родные цвета */
:root[data-theme="day"] .pi-ico{filter:invert(1) hue-rotate(180deg)}