/* Виджет связи HANSTON, вариант A «Веер». Модуль: include/contact-widget.php */

/* Пока модуль не включён (флаг hcw-on на <html>), виджета нет, а кнопка Битрикса работает. */
.hcw { display: none; }
html.hcw-on .hcw { display: block; }
html.hcw-on .b24-widget-button-wrapper { display: none !important; }

.hcw {
    --hcw-ink: #111;
    --hcw-ink-2: #383838;
    --hcw-paper: #fff;
    --hcw-line: #d5d5d5;
    --hcw-bronze: #a38e65;
    --hcw-ease: cubic-bezier(.2, .7, .2, 1);

    --hcw-fab: 60px;
    --hcw-btn: 48px;
    --hcw-gap: 12px;
    --hcw-x: 32px;
    --hcw-y: 32px;
    --hcw-lift: 0px; /* высота плашки cookies, ставит JS */

    position: fixed;
    right: calc(var(--hcw-x) + env(safe-area-inset-right, 0px));
    bottom: calc(var(--hcw-y) + var(--hcw-lift) + env(safe-area-inset-bottom, 0px));
    z-index: 1990; /* ниже меню (2000), модалок темы (2001), cookies (10000) и формы заявки (10050) */
    font-family: "Suisse Intl", "Suisseintl Regular", Arial, sans-serif;
    -webkit-tap-highlight-color: transparent;
    transition: bottom .25s var(--hcw-ease);
}
.hcw *, .hcw *::before, .hcw *::after { box-sizing: border-box; }

/* ---------- Главная кнопка ---------- */
.hcw__fab {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--hcw-fab);
    height: var(--hcw-fab);
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--hcw-ink);
    color: var(--hcw-paper);
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
    transition: transform .2s var(--hcw-ease), background-color .2s;
}
.hcw__fab:active { transform: scale(.94); }
.hcw__ring {
    position: absolute;
    inset: -5px;
    border: 1.5px solid var(--hcw-bronze);
    border-radius: 50%;
    pointer-events: none;
}
.hcw.is-pulse .hcw__ring { animation: hcwPulse 1.6s var(--hcw-ease) 2; }
@keyframes hcwPulse {
    0% { transform: scale(1); opacity: 1; }
    70% { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1); opacity: 0; }
}

.hcw__fab-i { grid-area: 1 / 1; display: grid; place-items: center; transition: transform .25s var(--hcw-ease), opacity .2s; }
.hcw__fab-i .hcw__ico { width: 26px; height: 26px; }
.hcw__fab-i--close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.hcw.is-open .hcw__fab-i--chat { opacity: 0; transform: rotate(90deg) scale(.6); }
.hcw.is-open .hcw__fab-i--close { opacity: 1; transform: none; }

.hcw__tip {
    position: absolute;
    right: calc(100% + 14px);
    top: 50%;
    padding: 7px 12px;
    border-radius: 6px;
    background: var(--hcw-ink);
    color: var(--hcw-paper);
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    transform: translate(6px, -50%);
    pointer-events: none;
    transition: opacity .2s, transform .2s var(--hcw-ease);
}

/* ---------- Иконки ---------- */
.hcw__ico {
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hcw__ico .hcw-f { fill: currentColor; stroke: none; }

/* ---------- Список каналов ---------- */
.hcw__list {
    position: absolute;
    right: calc((var(--hcw-fab) - var(--hcw-btn)) / 2);
    bottom: calc(var(--hcw-fab) + var(--hcw-gap) + 4px);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--hcw-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear .25s;
}
.hcw.is-open .hcw__list { visibility: visible; pointer-events: auto; transition: none; }

.hcw__it {
    margin: 0;
    padding: 0;
    opacity: 0;
    transform: translateY(10px) scale(.9);
    transform-origin: right center;
    transition: opacity .18s, transform .22s var(--hcw-ease);
    transition-delay: calc(var(--i) * 20ms);
}
.hcw.is-open .hcw__it { opacity: 1; transform: none; transition-delay: calc(var(--i) * 35ms); }
.hcw__it::before { content: none; }

.hcw__link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
    outline: none;
}
.hcw__lbl {
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--hcw-ink);
    color: var(--hcw-paper);
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.hcw__short { display: none; }

.hcw__btn {
    display: grid;
    place-items: center;
    flex: none;
    width: var(--hcw-btn);
    height: var(--hcw-btn);
    border: 1px solid var(--hcw-line);
    border-radius: 50%;
    background: var(--hcw-paper);
    color: var(--hcw-ink);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
    transition: background-color .15s, color .15s, border-color .15s;
}
.hcw__btn--phone { background: var(--hcw-bronze); border-color: var(--hcw-bronze); color: var(--hcw-ink); }

.hcw__link:focus-visible .hcw__btn,
.hcw__fab:focus-visible { outline: 2px solid var(--hcw-bronze); outline-offset: 3px; }

@media (hover: hover) {
    .hcw__fab:hover { background: var(--hcw-ink-2); }
    .hcw:not(.is-open) .hcw__fab:hover .hcw__tip { opacity: 1; transform: translate(0, -50%); }
    .hcw__link:hover .hcw__btn { background: var(--hcw-ink); border-color: var(--hcw-ink); color: var(--hcw-paper); }
    .hcw__link:hover .hcw__btn--phone { background: var(--hcw-ink); color: var(--hcw-bronze); }
}

/* Подложка: на десктопе прозрачная, только ловит клик мимо */
.hcw__backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: none;
    background: rgba(0, 0, 0, 0);
    transition: background-color .25s;
}
.hcw.is-open .hcw__backdrop { display: block; }

/* ---------- Адаптив ---------- */

/* Большие мониторы */
@media (min-width: 1600px) {
    .hcw { --hcw-x: 40px; --hcw-y: 40px; }
}

/* Планшеты и узкие ноутбуки */
@media (max-width: 991px) {
    .hcw { --hcw-fab: 56px; --hcw-btn: 46px; --hcw-x: 24px; --hcw-y: 24px; }
}

/* Телефоны: короткие подписи, затемнение под списком, крупнее зона нажатия */
@media (max-width: 767px) {
    .hcw { --hcw-fab: 54px; --hcw-btn: 46px; --hcw-gap: 10px; --hcw-x: 16px; --hcw-y: 16px; }
    .hcw__full { display: none; }
    .hcw__short { display: inline; }
    .hcw__lbl { padding: 9px 12px; font-size: 15px; }
    .hcw__tip { display: none; }
    .hcw.is-open .hcw__backdrop { background: rgba(0, 0, 0, .4); }
    .hcw__fab-i .hcw__ico { width: 24px; height: 24px; }
}

/* Маленькие телефоны (iPhone SE 1-го поколения, старые Android) */
@media (max-width: 359px) {
    .hcw { --hcw-fab: 50px; --hcw-btn: 42px; --hcw-gap: 8px; --hcw-x: 12px; --hcw-y: 12px; }
    .hcw__lbl { font-size: 14px; padding: 8px 10px; }
    .hcw__ico { width: 20px; height: 20px; }
}

/* Телефон боком: по высоте пять кнопок не помещаются, раскладываем веер влево в строку */
@media (max-height: 520px) and (orientation: landscape) {
    .hcw { --hcw-fab: 50px; --hcw-btn: 44px; --hcw-gap: 10px; --hcw-x: 16px; --hcw-y: 12px; }
    .hcw__list {
        right: calc(var(--hcw-fab) + var(--hcw-gap) + 4px);
        bottom: calc((var(--hcw-fab) - var(--hcw-btn)) / 2);
        flex-direction: row-reverse;
        align-items: center;
    }
    .hcw__it { transform: translateX(10px) scale(.9); }
    .hcw__lbl { display: none; }
    .hcw__tip { display: none; }
    .hcw.is-open .hcw__backdrop { background: rgba(0, 0, 0, .4); }
}

@media (prefers-reduced-motion: reduce) {
    .hcw, .hcw__fab, .hcw__fab-i, .hcw__it, .hcw__tip, .hcw__backdrop { transition: none !important; }
    .hcw.is-pulse .hcw__ring { animation: none; }
}

@media print {
    .hcw { display: none !important; }
}