/* /domains/gromadan.com/public_html/css/includes/city_sections_menu.css */
.city-sections-menu {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px;
    scrollbar-width: none;
    cursor: grab;
    background: transparent;
}
.city-sections-menu::-webkit-scrollbar { display: none; }
.city-sections-menu.is-dragging { cursor: grabbing; user-select: none; }
.city-sections-menu a { -webkit-user-drag: none; }

.city-sections-tab {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 12px 18px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--primary);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition);
}
.city-sections-tab:hover { background: var(--primary-light); }
.city-sections-tab.active {
    background: var(--surface);
    color: var(--primary);
    box-shadow: var(--shadow), inset 0 0 0 2px var(--primary); /* ободок внутри, размер кнопки не меняется */
}
.city-sections-tab-icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 900px) {
    /* тот же отступ, что у .stories на мобильном */
    .city-sections-menu { margin: 0 10px; padding: 4px 0; }

    /* меньше на 10%: padding 12/18→11/16, шрифт .88→.79, иконка 18→16, gap 7→6 */
    .city-sections-tab {
        padding: 11px 16px;
        font-size: 0.79rem;
        gap: 6px;
        box-shadow: none;              /* тень обрезалась overflow-x и давала "другой фон" */
        border: 1px solid var(--border);
    }
    .city-sections-tab.active {
        border-color: var(--primary);
        box-shadow: inset 0 0 0 1px var(--primary); /* рамка 1px + 1px = ободок 2px, как на десктопе */
    }
    .city-sections-tab-icon { width: 16px; height: 16px; }
}