/* ====== SO-TECH grey_tabs menu (common layout) ====== */

div.grey-tabs-menu {
    width: 100%;
    box-sizing: border-box;
    /* чтобы меню не конфликтовало со старым float */
    float: none;
}

div.grey-tabs-menu ul {
    margin: 0;
    padding: 8px 16px 6px 16px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

div.grey-tabs-menu li {
    margin: 0;
    padding: 0;
}

/* ссылка + nobr ведём как «пилюлю» */
div.grey-tabs-menu a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 14px;
    line-height: 1;
    /* transitions только для hover, не для загрузки страницы */
}

div.grey-tabs-menu a nobr {
    white-space: nowrap;
}

/* служебный див от старого шаблона */
div.menu-clear-left {
    clear: both;
}

/* ====== LIGHT THEME ====== */

body.theme-light div.grey-tabs-menu {
    background: rgba(248, 250, 252, 0.95); /* светлый фон */
    border-bottom: 1px solid rgba(148, 163, 184, 0.3);
    backdrop-filter: blur(6px);
}

body.theme-light div.grey-tabs-menu a {
    color: #334155; /* slate-700 */
    background: rgba(241, 245, 249, 0.9); /* slate-100/90 */
}

body.theme-light div.grey-tabs-menu a:hover {
    background: #0A84FF;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(10, 132, 255, 0.6);
    transform: translateY(-1px);
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
}

/* активный пункт (Bitrix обычно вешает selected/current/active) */
body.theme-light div.grey-tabs-menu li.selected a,
body.theme-light div.grey-tabs-menu li.current a,
body.theme-light div.grey-tabs-menu li.active a {
    background: #0A84FF !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(10, 132, 255, 0.8);
    transition: none; /* отключаем transition для активного пункта */
}

body.theme-light div.grey-tabs-menu li.selected a:hover,
body.theme-light div.grey-tabs-menu li.current a:hover,
body.theme-light div.grey-tabs-menu li.active a:hover {
    background: #0A84FF !important; /* активный пункт не меняется при hover */
    transform: none;
}

/* ====== DARK THEME ====== */

body.theme-dark div.grey-tabs-menu {
    background: rgba(15, 23, 42, 0.96); /* slate-900 */
    border-bottom: 1px solid rgba(15, 23, 42, 1);
    backdrop-filter: blur(6px);
}

body.theme-dark div.grey-tabs-menu a {
    color: #e5e7eb; /* zinc-200 */
    background: rgba(30, 41, 59, 0.9); /* slate-800 */
}

body.theme-dark div.grey-tabs-menu a:hover {
    background: #00C2FF;
    color: #020617; /* почти чёрный */
    box-shadow: 0 0 14px rgba(0, 194, 255, 0.9);
    transform: translateY(-1px);
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
}

body.theme-dark div.grey-tabs-menu li.selected a,
body.theme-dark div.grey-tabs-menu li.current a,
body.theme-dark div.grey-tabs-menu li.active a {
    background: linear-gradient(135deg, #0A84FF, #00C2FF) !important;
    color: #020617 !important;
    box-shadow: 0 0 18px rgba(10, 132, 255, 0.9);
    transition: none; /* отключаем transition для активного пункта */
}

body.theme-dark div.grey-tabs-menu li.selected a:hover,
body.theme-dark div.grey-tabs-menu li.current a:hover,
body.theme-dark div.grey-tabs-menu li.active a:hover {
    background: linear-gradient(135deg, #0A84FF, #00C2FF) !important; /* активный пункт не меняется при hover */
    transform: none;
}