/* ===========================================================================
   MapKlad · единая полоса прокрутки
   Подключается и на светлые страницы (лендинг, кабинет, гайд по кладам),
   и на тёмные (оферта, оплата, поиск заказа), поэтому не завязана на фон:
   дорожка прозрачная, а отступ у ползунка сделан прозрачной рамкой с
   background-clip. Полупрозрачный серый читается на обоих фонах.
   Цвет под курсором берётся из палитры страницы: --accent-color на лендинге
   и юридических страницах, --accent в кабинете.
   =========================================================================== */

html {
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 115, 105, .5) transparent;
}

::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

/* Тонкий рельс по центру дорожки: полоса перестаёт выглядеть пустотой,
   а ползунок читается как бегунок, едущий по направляющей. */
::-webkit-scrollbar-track {
    background:
        linear-gradient(
            to right,
            transparent calc(50% - 1px),
            rgba(128, 122, 112, .17) calc(50% - 1px),
            rgba(128, 122, 112, .17) calc(50% + 1px),
            transparent calc(50% + 1px)
        );
}

::-webkit-scrollbar-thumb {
    background-image: linear-gradient(180deg, rgba(146, 140, 129, .82), rgba(108, 103, 94, .82));
    background-clip: content-box;
    border: 3px solid transparent;
    border-radius: 999px;
    transition: background-image .22s ease, border-width .22s ease;
}

/* Под курсором ползунок наливается фирменным цветом страницы и слегка
   толстеет за счёт уменьшенной прозрачной рамки. */
::-webkit-scrollbar-thumb:hover {
    background-image: linear-gradient(
        180deg,
        var(--accent-color, var(--accent, #c93640)),
        var(--accent-hover, var(--accent-color, var(--accent, #a92933)))
    );
    background-clip: content-box;
    border-width: 2px;
}

::-webkit-scrollbar-thumb:active {
    background-image: linear-gradient(
        180deg,
        var(--accent-hover, var(--accent-color, #a92933)),
        var(--accent-hover, var(--accent-color, #a92933))
    );
    background-clip: content-box;
    border-width: 2px;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* Горизонтальные полосы (широкие таблицы) — рельс поворачиваем. */
::-webkit-scrollbar-track:horizontal {
    background:
        linear-gradient(
            to bottom,
            transparent calc(50% - 1px),
            rgba(128, 122, 112, .17) calc(50% - 1px),
            rgba(128, 122, 112, .17) calc(50% + 1px),
            transparent calc(50% + 1px)
        );
}

::-webkit-scrollbar-thumb:horizontal {
    background-image: linear-gradient(90deg, rgba(146, 140, 129, .82), rgba(108, 103, 94, .82));
    background-clip: content-box;
}

@media (prefers-reduced-motion: reduce) {
    ::-webkit-scrollbar-thumb { transition: none; }
}