/* ══ Плавающие кнопки связи и «наверх» — ФинАктив ══════════════════════════
   Цвета только в переменных ниже. Своя box-sizing и явные цвета ссылок:
   блок не зависит от общих стилей темы. */
.cw {
    /* ── цвета проекта (палитра сайта) ── */
    --cw-accent: #0FCE9A;          /* акцент: кольцо, плитки значков, ссылки */
    --cw-accent-rgb: 15, 206, 154;
    --cw-cta: #87D418;             /* кнопки действия — как на сайте */
    --cw-cta-hover: #74B713;
    --cw-btn: #002D24;             /* кружок связи */
    --cw-open: #03180F;            /* кружок, когда окошко открыто */
    --cw-ink: #002D24;             /* основной текст */
    --cw-muted: #475D59;           /* подписи */
    --cw-soft: #EAF9F2;            /* плитки значков */
    --cw-hover: #F5FAF6;           /* фон пункта при наведении */
    --cw-line: #DCE8E3;            /* рамки полей, дорожка кольца */
    --cw-bg: #fff;                 /* окошко и кнопка «наверх» */
    --cw-ok: #87D418;              /* точка «на связи» */
    /* ── размер и движение ── */
    --cw: 60px;
    --cw-ease: cubic-bezier(.22, 1, .36, 1);
    --cw-spring: cubic-bezier(.34, 1.56, .64, 1);

    position: fixed; right: 24px; bottom: 24px; z-index: 998;
    width: var(--cw); height: var(--cw);
    font-family: inherit;
}
.cw *, .cw *::before, .cw *::after { box-sizing: border-box }

/* у темы Outgrid своя кнопка «наверх» — прячем, чтобы не было двух */
.uicore-back-to-top { display: none !important }

/* пока открыто мобильное меню темы, виджет убираем */
body.uicore-mobile-nav-show .cw {
    opacity: 0; visibility: hidden; transform: scale(.85);
    transition: opacity .2s ease, transform .25s var(--cw-ease), visibility 0s linear .25s;
}

/* затемнение под окошком: щелчок мимо закрывает */
.cw__shade {
    position: fixed; inset: 0; background: rgba(0, 24, 18, .42);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility 0s linear .3s;
}
.cw.is-open .cw__shade { opacity: 1; visibility: visible; transition: opacity .3s ease }

/* ── кружок ── */
.cw-btn {
    position: absolute; right: 0; bottom: 0; z-index: 3;
    width: var(--cw); height: var(--cw); margin: 0; padding: 0;
    border: 0; border-radius: 50%; background: var(--cw-btn); color: #fff;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    box-shadow: 0 12px 28px rgba(0, 45, 36, .34), 0 2px 6px rgba(0, 24, 18, .2);
    transition: background-color .4s var(--cw-ease), box-shadow .4s var(--cw-ease),
        transform .45s var(--cw-spring);
}
.cw-btn:hover { transform: scale(1.06) }
.cw-btn:active { transform: scale(.93) }
.cw-btn:focus-visible { outline: 3px solid rgba(var(--cw-accent-rgb), .55); outline-offset: 4px }

.cw-btn__ico {
    position: absolute; inset: 0; display: grid; place-items: center;
    transition: transform .5s var(--cw-spring), opacity .25s ease;
}
/* трубка изредка «звонит»: короткое покачивание раз в 6 секунд */
.cw-btn__ico.is-phone svg { animation: cw-ring 6s ease-in-out infinite; transform-origin: 50% 50% }
@keyframes cw-ring {
    0%, 80%, 100% { transform: rotate(0) }
    83% { transform: rotate(-14deg) }
    86% { transform: rotate(13deg) }
    89% { transform: rotate(-10deg) }
    92% { transform: rotate(7deg) }
    95% { transform: rotate(-3deg) }
}
.cw-btn__ico.is-x { opacity: 0; transform: rotate(-90deg) scale(.4) }

.cw.is-open .cw-btn {
    background: var(--cw-open);
    box-shadow: 0 12px 28px rgba(0, 24, 18, .42), 0 2px 6px rgba(0, 24, 18, .22);
}
.cw.is-open .cw-btn__ico.is-phone { opacity: 0; transform: rotate(90deg) scale(.4) }
.cw.is-open .cw-btn__ico.is-x { opacity: 1; transform: none }

/* ── «наверх» с кольцом прокрутки ── */
.cw-top {
    position: absolute; right: 0; bottom: calc(var(--cw) + 14px); z-index: 1;
    width: var(--cw); height: var(--cw); margin: 0; padding: 0;
    display: grid; place-items: center;
    border: 0; border-radius: 50%; background: var(--cw-bg); color: var(--cw-accent);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    box-shadow: 0 10px 24px rgba(0, 45, 36, .16), 0 1px 3px rgba(0, 45, 36, .1);
    opacity: 0; visibility: hidden; transform: translateY(16px) scale(.7);
    transition: opacity .25s ease, transform .4s var(--cw-ease), box-shadow .25s ease,
        visibility 0s linear .4s;
}
.cw-top.is-on {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .3s ease, transform .55s var(--cw-spring), box-shadow .25s ease;
}
/* пока открыто окошко, «наверх» прячется */
.cw.is-open .cw-top {
    opacity: 0; visibility: hidden; transform: translateY(16px) scale(.7);
    transition: opacity .2s ease, transform .3s var(--cw-ease), visibility 0s linear .3s;
}
.cw-top:hover { box-shadow: 0 14px 30px rgba(0, 45, 36, .22), 0 1px 3px rgba(0, 45, 36, .1) }
.cw-top:focus-visible { outline: 3px solid rgba(var(--cw-accent-rgb), .45); outline-offset: 4px }
.cw-top__ico { position: relative; transition: transform .35s var(--cw-spring) }
.cw-top:hover .cw-top__ico { transform: translateY(-3px) }
.cw-top:active .cw-top__ico { transform: translateY(-6px) }
/* кольцо начинается сверху и идёт по часовой стрелке */
.cw-top__ring {
    position: absolute; inset: 0; width: 100%; height: 100%;
    transform: rotate(-90deg); overflow: visible;
}
.cw-top__track, .cw-top__bar { fill: none; stroke-width: 2.5 }
.cw-top__track { stroke: var(--cw-line) }
.cw-top__bar {
    stroke: var(--cw-accent); stroke-linecap: round;
    stroke-dasharray: 100; stroke-dashoffset: 100;
    transition: stroke-dashoffset .18s linear;
}

/* ── окошко: раскрывается из угла кружка ── */
.cw-panel {
    position: absolute; right: 0; bottom: calc(var(--cw) + 16px); z-index: 2;
    width: 330px;
    max-height: calc(100vh - var(--cw) - 70px);
    max-height: calc(100dvh - var(--cw) - 70px);
    overflow: auto; overscroll-behavior: contain;
    padding: 10px; border-radius: 22px; background: var(--cw-bg);
    box-shadow: 0 28px 64px rgba(0, 45, 36, .26), 0 2px 8px rgba(0, 45, 36, .08);
    transform-origin: calc(100% - var(--cw) / 2) 100%;
    opacity: 0; visibility: hidden; transform: translateY(18px) scale(.9);
    transition: opacity .2s ease, transform .35s var(--cw-ease), visibility 0s linear .35s;
}
.cw.is-open .cw-panel {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .25s ease, transform .5s var(--cw-ease);
}

.cw-view { display: none }
.cw-view.is-on { display: block }
/* пункты выезжают лесенкой — при открытии и при смене вида */
.cw.is-open .cw-view.is-on > * { animation: cw-in .5s var(--cw-ease) both }
.cw.is-open .cw-view.is-on > :nth-child(2) { animation-delay: .04s }
.cw.is-open .cw-view.is-on > :nth-child(3) { animation-delay: .08s }
.cw.is-open .cw-view.is-on > :nth-child(4) { animation-delay: .12s }
.cw.is-open .cw-view.is-on > :nth-child(5) { animation-delay: .16s }
@keyframes cw-in {
    from { opacity: 0; transform: translateY(10px) }
    to { opacity: 1; transform: none }
}

.cw-head { display: flex; flex-direction: column; gap: 4px; padding: 12px }
.cw-head.is-back { flex-direction: row; align-items: center; gap: 10px; padding: 6px 6px 12px }
.cw-head__t { font-size: 17px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: var(--cw-ink) }
.cw-head__s {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; line-height: 1.3; color: var(--cw-muted);
}
/* зелёная точка «на связи» */
.cw-head__s::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cw-ok);
    box-shadow: 0 0 0 3px rgba(135, 212, 24, .18);
}
.cw-back {
    flex: none; width: 36px; height: 36px; margin: 0; padding: 0;
    display: grid; place-items: center; border: 0; border-radius: 11px;
    background: var(--cw-hover); color: var(--cw-accent); cursor: pointer;
    transition: background .2s ease;
}
.cw-back:hover { background: var(--cw-soft) }
.cw-back svg { transition: transform .25s var(--cw-spring) }
.cw-back:hover svg { transform: translateX(-2px) }

/* пункт меню */
.cw-i {
    display: flex; align-items: center; gap: 13px; width: 100%; margin: 0;
    padding: 10px 12px; border: 0; border-radius: 15px; background: transparent;
    font: inherit; text-align: left; text-decoration: none; color: var(--cw-ink);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background .2s ease, transform .2s ease;
}
.cw-i:hover, .cw-i:focus-visible { background: var(--cw-hover); color: var(--cw-ink); outline: none; text-decoration: none }
.cw-i:active { transform: scale(.98) }
.cw-i__ico {
    flex: none; width: 44px; height: 44px; display: grid; place-items: center;
    border-radius: 14px; background: var(--cw-soft); color: var(--cw-accent);
    transition: background .25s ease, color .25s ease, transform .35s var(--cw-spring);
}
.cw-i:hover .cw-i__ico { background: var(--cw-accent); color: #fff; transform: scale(1.05) }
/* Max: цветная иконка приложения со своей подложкой — плитку не красим */
.cw-i__ico.is-max { background: none; padding: 0; overflow: hidden }
.cw-i__ico.is-max .cw-i__img { width: 100%; height: 100%; display: block; border-radius: 14px }
.cw-i:hover .cw-i__ico.is-max { background: none }
.cw-i__ico.is-main { background: var(--cw-cta); color: #fff }
.cw-i:hover .cw-i__ico.is-main { background: var(--cw-cta-hover); color: #fff }
.cw-i__t { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.cw-i__n { font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--cw-ink) }
.cw-i__s { font-size: 13px; line-height: 1.3; color: var(--cw-muted); white-space: nowrap }
.cw-i__go {
    flex: none; margin-left: auto; color: #A8BDB5;
    transition: transform .3s var(--cw-spring), color .2s ease;
}
.cw-i:hover .cw-i__go { color: var(--cw-accent); transform: translateX(3px) }

/* форма в окошке */
.cw-form { display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0 6px 6px }
.cw-f { display: flex; flex-direction: column; gap: 6px; margin: 0 }
.cw-f__l { font-size: 12.5px; font-weight: 600; line-height: 1.2; color: var(--cw-muted) }
.cw-f__i {
    display: block; width: 100%; margin: 0; padding: 11px 13px;
    border: 1.5px solid var(--cw-line); border-radius: 12px;
    background: #FAFCFB;
    /* 16px — меньше iOS увеличивает страницу при фокусе */
    font: inherit; font-size: 16px; line-height: 1.35; color: var(--cw-ink); outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.cw-f__i:hover { border-color: #BFD9CE }
.cw-f__i:focus { border-color: var(--cw-accent); background: var(--cw-bg); box-shadow: 0 0 0 4px rgba(var(--cw-accent-rgb), .14) }
.cw-f__i.is-bad { border-color: #D64545; box-shadow: 0 0 0 4px rgba(214, 69, 69, .12) }
textarea.cw-f__i { min-height: 78px; resize: vertical }
.cw-ok {
    display: flex; align-items: flex-start; gap: 9px; margin: 2px 0 0;
    font-size: 12.5px; line-height: 1.45; color: var(--cw-muted); cursor: pointer;
}
.cw-ok input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--cw-cta) }
.cw-ok.is-bad { color: #D64545 }
.cw-ok a, .cw-ok a:hover { color: var(--cw-ink); text-decoration: underline; text-underline-offset: 2px }
.cw .cw-form .cw-send {
    height: 50px; margin: 4px 0 0; padding: 0 18px; border: 0; border-radius: 13px;
    background: var(--cw-cta); color: #fff; font: inherit; font-size: 15px; font-weight: 700;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.cw .cw-form .cw-send:hover { background: var(--cw-cta-hover); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(135, 212, 24, .35) }
.cw .cw-form .cw-send:active { transform: none }
.cw .cw-form .cw-send[disabled] { opacity: .6; cursor: default; transform: none; box-shadow: none }
.cw-err { margin: 0; font-size: 12.5px; line-height: 1.4; color: #D64545 }

/* заявка ушла */
.cw-done { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 12px 18px; text-align: center }
.cw-done__ico {
    width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 6px;
    border-radius: 50%; background: var(--cw-cta); color: #fff;
    animation: cw-pop .6s var(--cw-spring) both;
}
.cw-done__s { font-size: 13.5px; line-height: 1.45; color: var(--cw-muted) }
@keyframes cw-pop { from { transform: scale(.4); opacity: 0 } to { transform: none; opacity: 1 } }

/* ── телефон ── */
@media (max-width: 700px) {
    .cw {
        --cw: 56px;
        right: max(16px, env(safe-area-inset-right));
        bottom: calc(16px + env(safe-area-inset-bottom));
    }
    .cw-panel { width: calc(100vw - 32px); max-width: 380px }
}

@media (prefers-reduced-motion: reduce) {
    .cw-btn__ico.is-phone svg { animation: none }
    .cw.is-open .cw-view.is-on > * { animation: none }
    .cw-done__ico { animation: none }
}
@media print {
    .cw { display: none }
}