/* SDEVICE_FABFIT_2026_09_13 — плавающие кнопки на узких экранах.

   Было: колонка из трёх кнопок (свои «чат» и «телеграм» + виджет чата CRM
   #dcc-fab) стояла в 16 px от края, шириной 54 px, и начиналась в 80 px
   от низа экрана. На 320 px она заходила в колонку контента на 35–46 px
   и перекрывала 44 интерактивных элемента: главную кнопку «Узнать
   стоимость ремонта», поля формы заявки, все три селекта калькулятора,
   плюсы в FAQ, карточки каталога.

   Стало: кнопки не убраны, не перекрашены, работают как прежде —
   38 px и прижаты в нижний угол, чтобы освободить середину экрана.
   Ширина 38 px выбрана не «на глаз»: плюс в FAQ заканчивается на 277 px
   при экране 320, поэтому левый край кнопки должен быть правее — 280 px.
   Десктоп не затронут: всё внутри max-width 480px.

   Учтены два случая, когда внизу уже что-то есть:
   баннер cookies и липкая панель «Позвонить / Заявка» на страницах услуг —
   колонка поднимается над ними, а не ложится поверх. */

@media (max-width: 480px) {

    /* .floating-buttons — своя пара кнопок сайта (главная, статьи);
       .dcw-aux-fabs — та же пара от виджета CRM на страницах, где своей нет
       (FAQ и другие). Виджет создаёт свою только при отсутствии сайтовой,
       поэтому на странице всегда ровно одна из двух групп. */
    .floating-buttons,
    .dcw-aux-fabs {
        right: 2px !important;
        bottom: 10px !important;
        gap: 8px !important;
    }

    .floating-buttons > a,
    .floating-buttons > button,
    .floating-buttons > div,
    .dcw-aux-fab {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }

    .dcw-aux-fab svg {
        width: 18px !important;
        height: 18px !important;
    }

    #dcc-fab {
        right: 2px !important;
        bottom: 102px !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        border-radius: 12px !important;
        font-size: 17px !important;
    }

    /* липкая панель «Позвонить / Заявка» внизу страниц услуг */
    body:has(.mobile-cta-bar) .floating-buttons,
    body:has(.mobile-cta-bar) .dcw-aux-fabs {
        bottom: 88px !important;
    }

    body:has(.mobile-cta-bar) #dcc-fab {
        bottom: 180px !important;
    }

    /* пока виден баннер cookies — колонка над ним, как было */
    .cookie-banner.show ~ .floating-buttons,
    .cookie-banner.show ~ .dcw-aux-fabs {
        bottom: 128px !important;
    }

    .cookie-banner.show ~ #dcc-fab {
        bottom: 220px !important;
    }

    /* окно чата открывается над кнопкой и не упирается в край экрана */
    #dcc-panel {
        right: 4px !important;
        bottom: 148px !important;
        max-height: calc(100vh - 164px) !important;
    }

    body:has(.mobile-cta-bar) #dcc-panel {
        bottom: 226px !important;
        max-height: calc(100vh - 242px) !important;
    }

    .cookie-banner.show ~ #dcc-panel {
        bottom: 266px !important;
        max-height: calc(100vh - 282px) !important;
    }
}

/* FAB_BLOG_2026_09_14 — кнопка чата налезала на блок плавающих кнопок
   на страницах без липкой панели (например /blog/): .floating-buttons
   занимает 30–150 px от низа, а #dcc-fab стоял на 20 px.
   Поднимаем его над ними; там, где панель есть, работает правило выше. */
body:has(.floating-buttons):not(:has(.mobile-cta-bar)) #dcc-fab {
    bottom: 166px !important;
}

body:has(.floating-buttons):not(:has(.mobile-cta-bar)) #dcc-panel {
    bottom: 212px !important;
    max-height: calc(100vh - 228px) !important;
}