/* ============================================================
   Site Toolkit — Float Buttons (v1.9.17.4 — REDONE)

   Архитектура:
   • .loco-floatbar — фиксированный wrapper строго снизу-справа,
     только главная кнопка в layout
   • .loco-floatbar__items — absolute НАД wrapper'ом (bottom: 100%),
     не влияет на позицию главной кнопки
   • Скрытые itemы — display:none когда панель закрыта (не кликабельны)
   • Открываются вверх (первый item вблизи главной, дальше поднимаются)
   ============================================================ */

/* --- WRAPPER --- */
.loco-floatbar {
    position: fixed !important;
    bottom: 20px !important;
    z-index: 9999 !important;

    /* ТОЛЬКО главная кнопка в layout; items — absolute */
    width: 56px !important;
    height: 56px !important;

    /* Анимация появления */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition:
        opacity .3s ease,
        transform .3s cubic-bezier(.4,0,.2,1),
        visibility 0s linear .3s;
    pointer-events: none;

    --loco-fb-accent: #1F65E9;
}

.loco-floatbar.loco-floatbar--right { right: 20px !important; left: auto !important; }
.loco-floatbar.loco-floatbar--left  { left: 20px !important; right: auto !important; }

.loco-floatbar.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition:
        opacity .3s ease,
        transform .3s cubic-bezier(.4,0,.2,1),
        visibility 0s;
}

/* --- ГЛАВНАЯ КНОПКА (всегда внизу, в layout wrapper'а) --- */
.loco-floatbar .loco-floatbar__main {
    /* строгая геометрия */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    outline: 0 !important;

    /* вид */
    background: var(--loco-fb-accent) !important;
    color: #fff !important;
    cursor: pointer !important;
    box-shadow:
        0 8px 24px rgba(3, 42, 120, .35),
        0 2px 6px rgba(0, 0, 0, .1) !important;
    transition:
        transform .25s cubic-bezier(.4,0,.2,1),
        background .2s ease !important;

    position: relative !important;
    z-index: 2;
    font-family: inherit;
    line-height: 1 !important;
}
.loco-floatbar .loco-floatbar__main:hover  { transform: scale(1.06) !important; }
.loco-floatbar .loco-floatbar__main:active { transform: scale(.96) !important; }

/* Иконки chat/close — абсолютно в центре, переключаются opacity */
.loco-floatbar__main-icon,
.loco-floatbar__main-close {
    position: absolute !important;
    inset: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    transition: opacity .2s ease, transform .3s cubic-bezier(.4,0,.2,1) !important;
}
.loco-floatbar__main-icon svg,
.loco-floatbar__main-close svg {
    display: block !important;
    color: #fff !important;
}

/* chat SVG (fill) */
.loco-floatbar__main-icon svg,
.loco-floatbar__main-icon svg path {
    fill: #fff !important;
    stroke: none !important;
}
/* close SVG (stroke) */
.loco-floatbar__main-close svg path {
    stroke: #fff !important;
    fill: none !important;
}

.loco-floatbar__main-close {
    opacity: 0;
    transform: rotate(-90deg);
}
.loco-floatbar.is-open .loco-floatbar__main-icon {
    opacity: 0;
    transform: rotate(90deg);
}
.loco-floatbar.is-open .loco-floatbar__main-close {
    opacity: 1;
    transform: rotate(0);
}
.loco-floatbar.is-open .loco-floatbar__main {
    background: #1a1f2e !important;
}

/* --- СПИСОК items (absolute НАД wrapper'ом) --- */
.loco-floatbar__items {
    /* ключевое: абсолютно над главной кнопкой, не влияет на layout */
    position: absolute !important;
    bottom: calc(100% + 12px) !important; /* над главной + зазор */
    left: 50% !important;
    transform: translateX(-50%);

    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important; /* сверху вниз */
    gap: 10px !important;
    align-items: center !important;
    pointer-events: none;

    /* Скрыто когда панель закрыта (вообще не в layout, не кликабельно) */
    opacity: 0;
    visibility: hidden;
    transition:
        opacity .2s ease,
        visibility 0s linear .2s;
}

.loco-floatbar.is-open .loco-floatbar__items {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity .2s ease,
        visibility 0s;
}

/* --- ITEM (контейнер ли) --- */
.loco-floatbar__item {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    opacity: 0;
    transform: translateY(20px) scale(.6);
    transition:
        opacity .25s ease,
        transform .25s cubic-bezier(.4, 1.6, .5, 1);
    transition-delay: 0s;
}
.loco-floatbar__item::marker { content: none !important; }
.loco-floatbar__item::before { display: none !important; content: none !important; }

.loco-floatbar.is-open .loco-floatbar__item {
    opacity: 1;
    transform: translateY(0) scale(1);
    /* stagger — первый (внизу вблизи главной) первым появляется */
    transition-delay: calc(var(--i, 0) * 0.05s);
}

/* --- КНОПКА (a.__btn) --- */
.loco-floatbar .loco-floatbar__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    border-radius: 50% !important;
    color: #fff !important;
    text-decoration: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.2) !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
    line-height: 1 !important;
}
.loco-floatbar .loco-floatbar__btn:hover {
    transform: scale(1.1) translateY(-2px) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.28) !important;
}

/* --- Цвета фонов --- */
.loco-floatbar .loco-floatbar__btn--phone     { background: #1F65E9 !important; }
.loco-floatbar .loco-floatbar__btn--email     { background: #415170 !important; }
.loco-floatbar .loco-floatbar__btn--viber     { background: #7360F2 !important; }
.loco-floatbar .loco-floatbar__btn--telegram  { background: #229ED9 !important; }
.loco-floatbar .loco-floatbar__btn--whatsapp  { background: #25D366 !important; }
.loco-floatbar .loco-floatbar__btn--facebook  { background: #1877F2 !important; }
.loco-floatbar .loco-floatbar__btn--instagram { background: linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%) !important; }
.loco-floatbar .loco-floatbar__btn--youtube   { background: #FF0000 !important; }
.loco-floatbar .loco-floatbar__btn--tiktok    { background: #000000 !important; }

/* --- SVG внутри кнопок — всегда белые --- */
.loco-floatbar .loco-floatbar__btn svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    color: #fff !important;
}
/* fill-based icons */
.loco-floatbar .loco-floatbar__btn--viber svg *,
.loco-floatbar .loco-floatbar__btn--telegram svg *,
.loco-floatbar .loco-floatbar__btn--whatsapp svg *,
.loco-floatbar .loco-floatbar__btn--facebook svg *,
.loco-floatbar .loco-floatbar__btn--youtube svg *,
.loco-floatbar .loco-floatbar__btn--tiktok svg * {
    fill: #fff !important;
    stroke: none !important;
}
/* Instagram (stroke + fill mix) */
.loco-floatbar .loco-floatbar__btn--instagram svg rect,
.loco-floatbar .loco-floatbar__btn--instagram svg circle:not([fill="currentColor"]) {
    stroke: #fff !important;
    fill: none !important;
}
.loco-floatbar .loco-floatbar__btn--instagram svg circle[fill="currentColor"] {
    fill: #fff !important;
    stroke: none !important;
}
/* stroke-based (phone, email) */
.loco-floatbar .loco-floatbar__btn--phone svg path,
.loco-floatbar .loco-floatbar__btn--email svg path {
    stroke: #fff !important;
    fill: none !important;
}

/* --- МОБИЛЬНЫЕ --- */
@media (max-width: 600px) {
    .loco-floatbar {
        bottom: 16px !important;
        width: 52px !important;
        height: 52px !important;
    }
    .loco-floatbar.loco-floatbar--right { right: 16px !important; }
    .loco-floatbar.loco-floatbar--left  { left: 16px !important; }

    .loco-floatbar .loco-floatbar__main {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
    }
    .loco-floatbar .loco-floatbar__btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
    }
}

@media print {
    .loco-floatbar { display: none !important; }
}